End-to-End Feature Design

Choose a product you use — Pick one with a feature gap or pain point you have experienced.

Conduct 3 user interviews — Find others who use the product. Focus on behaviors and frustrations, not feature requests.

Review analytics or public data — App store reviews, Reddit threads, competitor features.

Synthesize — Affinity mapping, identify top 3 pain points.

Write a problem statement — "[Users] need [a way to X] because [reason], but [barrier]."

Define success metrics — What would improvement look like? (Task completion, time, satisfaction)

Map the current user flow — How do users accomplish this today?

Define constraints — Technical, business, or design constraints to work within.

Write a design brief — Problem, users, success criteria, constraints, scope.

Sketch 3 different approaches — Quick pen-and-paper or low-fi Figma.

Evaluate against criteria — Which approach best addresses the problem within constraints?

Wireframe the chosen direction — Mid-fidelity, focused on flow and hierarchy.

Build high-fidelity screens — Using systematic components and tokens.

Design all states — Default, loading, empty, error, edge cases.

Create a clickable prototype — Key flow, 5–8 screens.

Run 3 usability tests — Task-based, think-aloud protocol.

Document findings — Task success, confusion points, severity ratings.

Iterate — 2–3 design improvements based on test results.

Component spec — For one key component: props, states, spacing, tokens, responsive behavior.

Flow documentation — Annotated screens showing transitions and logic.

Accessibility notes — Focus order, ARIA requirements, contrast verification.

Edge case documentation — What happens with long text, missing data, network errors.