An online fashion store is losing customers because returns are confusing: a long form, unclear refund dates and a trip to the post office. Design the flow for returning a pair of shoes that don't fit.
Online shoppers of all ages on their phone, often returning one item from a bigger order, who mostly want to know when they'll get their money back.
Start the timer and think out loud, like you would with an interviewer.
30-minute interview
One clock for the whole interview. Each phase fills up as time passes.
30:00left
Each prompt gives the AI a role, the whole brief, every edge case and a palette. AI drafts, you decide.
Best for a clickable prototype, fast.
ROLE You are a senior product designer building a high-fidelity, clickable mobile web prototype for a UX design interview. Make design decisions a hiring manager would respect, and keep the scope to the brief. THE CHALLENGE Make returns painless: An online fashion store is losing customers because returns are confusing: a long form, unclear refund dates and a trip to the post office. Design the flow for returning a pair of shoes that don't fit. THE USER Online shoppers of all ages on their phone, often returning one item from a bigger order, who mostly want to know when they'll get their money back. MUST-HAVES - Start a return from the order in two taps - Choose an exchange or a refund - Choose a pickup or a drop-off - Always see the refund amount and date EDGE CASES (every one must be handled) - The item is past the 30-day return window - It was part of a discounted bundle, so the refund is less than the price shown - It was paid for in cash on delivery, or with a gift card - The size they want instead is out of stock - They won't be home when the pickup comes SCREENS TO BUILD 1. Your order (390×844): the order, with what can be returned and until when 2. Return details (390×844): the reason, exchange or refund, and pickup or drop-off 3. Return booked (390×844): what happens next, when, and how much comes back Link them so the main flow is clickable end to end. Show each edge case as a real state (an error, a warning, an empty state or a confirmation), not as a note. VISUAL STYLE - Ochre #8A5A12: primary buttons and highlights - Cream #FFFBF3: the screen background - Sand #FBF1DE: soft panels and tips - Ink #2B1F0E: text - Green #1E7B4F: good news, like an exchange in stock - Type: one clean sans-serif. One clear hero (a title or a number) per screen, then a clear order of importance. - Spacing: an 8-point grid, generous margins, touch targets of at least 44 px. - Accessibility: text contrast of at least 4.5:1, labels on every input, never colour alone to carry meaning. CONTENT Use realistic content: an Indian fashion store, an order with canvas sneakers (₹2,999), a linen shirt and socks, prices in rupees (₹) and refunds by UPI. No lorem ipsum. DON'T - Don't add features the brief doesn't ask for. - Don't use more than one primary button per screen.
2 strong answers, each with its own look and reasoning. Try it yourself first.
Done designing?
Compare your screens with 2 different solutions, decision by decision.