Background
Onboarding is where users decide whether your product feels trustworthy. For a career platform, the first three screens set expectations about data privacy, effort required, and outcome (better job matches).
Your mission
Redesign a 3-step onboarding flow for a student career app (BoardingPass or your own concept). Deliver wireframes plus high-fidelity UI for mobile and desktop, including system states.
The three steps (adapt labels, keep structure)
- Account basics — name, school, graduation year, target role.
- Profile seed — résumé upload or manual skills entry with autocomplete affordance.
- Preferences — job types, locations, notification opt-in with clear value prop.
Requirements
- Wireframes (low-fi) showing flow order and primary CTA per screen.
- High-fidelity screens — mobile (375×812) and desktop (1440×900) for each step.
- States per step — default, loading/uploading, validation error, success transition.
- Design tokens — document type scale, 3–5 colors with roles, spacing unit (4px/8px grid).
- One documented accessibility decision — focus order, contrast ratio, touch target size, or screen reader label strategy.
- 1-page design rationale — why this order, what you cut, how you reduce drop-off.
Evaluation criteria
- Clarity — user always knows where they are (progress indicator) and what happens next.
- Hierarchy — one primary action per screen; secondary actions visually subdued.
- Accessibility — 44×44px touch targets; error text not color-only.
- Consistency — tokens reused across steps; not six different button styles.
Tips
- Show passwordless or OAuth path if relevant; explain trade-off in rationale.
- Use realistic copy, not "Lorem ipsum".
- Export PDF overview + shareable Figma link with inspect enabled.
Submission checklist
