Skip to content

Second Project

A User-Friendly Account Creation ✍🏼

In this project, you will design and implement a web form for creating a user account. The form should collect a variety of personal and preference-related data, while following best practices for usability, accessibility, and responsive design.

You are free to choose the context for the form — for example, it could be for a social media site, a dating app, or a job discovery platform. Just make sure you choose a context that allows you to properly fulfill the requirements below.

Requirements:

  • Before starting the implementation, you must create a wireframe or mockup of the form (using e.g. Figma, Balsamiq, or a white board).
  • Incorporate a wide variety of form controls, including but not limited to: text input, textareas, dropdowns, radio buttons, checkboxes, file uploads, range sliders, and date pickers.
  • Implement input validation to ensure that required fields are completed and values match the expected format (e.g. email, password rules, number ranges).
  • Provide intuitive feedback to users as they interact with the form.
  • Design for accessibility, including proper use of labels, visible focus states and keyboard navigation.
  • Use semantic HTML elements and ARIA attributes to enhance accessibility and communicate form structure to assistive technologies.
  • Use a coherent and accessible color scheme for your application.
  • Optimize the experience for mobile users by using appropriate input types (e.g. tel, email, date), and ensuring your layout is responsive and touch-friendly.
  • Use heuristic evaluations, accessibility auditing tools, or conduct usability tests to evaluate your form, and use the results to iterate and improve the user experience.

You are more than welcome to get creative and add more requirements - e.g. conditional form fields based on user input, multi-step forms with progress bars, modals or popovers for extra information, or introducting light/dark theming.

JavaScript or any external libraries or frameworks are still not allowed.

Tips

  • The projects will be discussed at the exam. Focus on applying what you’ve learned to make it easier to explain and showcase your skills. A more interesting project might lead to a more interesting discussion.
  • Provide helpful validation feedback: Indicate errors clearly, and if possible, offer hints on how to fix them. Instant feedback reduces frustration.
  • Put yourself in the users’ shoes: Consider their needs, background, and potential challenges when filling out your form.

Submission📤

This is a group project to be completed with your existing SEP1 group. The deadline can be found on itslearning. Hand in before the deadline if you want feedback.

You must host the web form using GitHub Pages and submit a .pdf file to the handin slot on itslearning, containing the following:

  • A link to the web form.
  • The wireframe or mockup you have created.
  • A small description and reflection on the evaluation methods you have used (~1000 characters).