Skip to content
Design Academy My progress

Forms and interaction · Beginner · 45 min

Improve a sign-up form

A newsletter sign-up form that asks for too much, hides its rules and blames the user. Make it easy to complete.

Context

A local bakery wants people to sign up for a weekly email with offers. Their current form has placeholder text instead of labels, asks for date of birth and phone number "for marketing", shows password rules only after an error, and the error message says "Invalid input".

Your prompt

Redesign the form so a customer on a phone can sign up in under a minute, understands what they are agreeing to, and can recover from mistakes.

Before: placeholder-only fields, unnecessary questions and an unhelpful error.

Instructions

  1. For each field, write whether the bakery truly needs it to send a weekly email. Remove anything that is not needed.
  2. Give every remaining field a visible label above the input.
  3. Choose the right input type for each field (for example an email keyboard on phones).
  4. Write helpful hint text before errors happen, and specific error messages that explain how to fix the problem.
  5. Rewrite the button label so it says what happens.
  6. Add a short line explaining how often emails are sent and how to unsubscribe.
  7. Design the error state and the success state.

Expected deliverables

  • A field audit table (field, needed?, reason)
  • The redesigned form in default, error and success states

Completion checklist

6 items

Evaluation criteria

  • Fewer fields than the original, each justified.
  • Errors are specific, polite and placed next to the field.
  • Nothing relies on placeholder text or colour alone.
  • The form is completable with a keyboard and on a small screen.

Hints and an illustrative solution

Show hints
  • Does a newsletter need a password at all? Many do not.
  • Placeholder text disappears when people type, so it cannot hold instructions people need while typing.
  • Compare "Invalid input" with "Enter an email address like name@example.com".
Show one possible solution

This is one reasonable answer, not the only one. Compare reasoning, not pixels.

One possible solution keeps only two fields: "First name (optional)" and "Email address". There is no password because unsubscribing works through a link in every email. The email field uses the email input type and autocomplete. The button reads "Send me weekly offers". A line under the button says "One email every Friday. Unsubscribe with one click at any time."

If the email is missing the @ symbol, the message below the field reads "Enter an email address in the format name@example.com", with an error icon and a red border, and focus moves to the field. The success state replaces the form with "You're signed up. Your first email arrives on Friday."

Back to the practice library