UX & UI Design
How does a design become a product?
Ultimately, a design has to work: people enter data, click through processes, and development builds the whole thing. Forms, clickable prototypes and a clean handover determine whether the design translates into the final product.
Learning objective: You can design user-friendly forms, build and test a clickable prototype, and hand over designs completely to development.
Done is whatever someone else can implement.
As little as possible, as clear as necessary.
Forms are often the point where people give up. Three rules can help:
01
Only the essentials
Every field takes effort.
02
Labels at the top
Label above the field, not inside the field.
03
Helpful errors
Right on the pitch, with a solution.
Appropriate field types help on mobile: the right keyboard appears automatically for email, phone and numbers, and autofill saves on typing.
Every field must earn its place.
The right element saves explanations.
Toggle or checkbox, drop-down or radio buttons, slider or number field: each element has its purpose. Radio buttons show all options at a glance, whereas a drop-down saves space when there are many. A toggle takes effect immediately, while a checkbox often only applies once saved.
When in doubt, the element people are already familiar with and that requires the fewest clicks wins. For two to five options, radio buttons or a segmented control are almost always better than a drop-down.
Test before you build.
A clickable prototype in Figma or Framer demonstrates the user flow before a single line of code is written. Tested with three to five people, it allows you to identify the biggest issues early and cost-effectively.
The handover includes all views across all widths, all states, tokens and components, spacing and behaviours, copy and error messages. It is best to go through the design together rather than simply sending over a file.
A handover is a conversation, not a file.
From design to testing
Task: Build and test Velowerk's appointment booking system.
STEP 1
Design the booking form with as few fields as possible.
STEP 2
Connect the homepage, form, confirmation, and error state into a clickable prototype.
STEP 3
Test it with two people and note where they hesitate.
STEP 4
Prepare a handover: views, states, tokens, and copy.
Results: Which part of the test surprised you, and what will you change first?