Redesign a confusing sign-up screen

A clearer screen with visible purpose, eligibility, privacy guidance, accessible labels, and honest feedback.

Week 2 · user experience

Redesign a confusing sign-up screen

Make the purpose, eligibility, privacy promise, and next action understandable without pressure or hidden choices.

Mental models
Ethical hierarchy
Form clarity

index.html7 lines · Tab inserts two spaces

Edit HTML

<main class="signup-card">
  <p class="eyebrow">Saturday learning lab</p><h1>Reserve a free seat</h1>
  <p id="requirements">For learners ages 14–18. We use your email only for workshop updates.</p>
  <label for="email">Email address</label><input id="email" type="email" autocomplete="email" aria-describedby="requirements">
  <button id="continueButton" type="button" aria-describedby="requirements">Review my request</button>
  <p id="formStatus" aria-live="polite">Nothing is submitted until you review.</p>
</main>

Live preview

Preview ready

The preview is isolated from your account and cannot make network requests.

Project checks

Turn your idea into working code

Run your project, try it in the preview, then choose Check project for clear, testable feedback.

Close the loop

Explain what changed.

After the checks pass, name one decision, one failure you corrected, and one improvement you would make next. That explanation is part of the project.

Return to the lesson