A running app wants a smartwatch companion. Design what a runner sees and does on their wrist during a 10K training run at target pace, when every look at the screen lasts under two seconds.
Regular runners training for a 10K or a half marathon: sweaty fingers, bright sun, music in their ears, and no wish to stop.
Start the timer and think out loud, like you would with an interviewer.
45-minute interview
One clock for the whole interview. Each phase fills up as time passes.
45: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 smartwatch prototype for a UX design interview. Make design decisions a hiring manager would respect, and keep the scope to the brief. THE CHALLENGE Run with your wrist: A running app wants a smartwatch companion. Design what a runner sees and does on their wrist during a 10K training run at target pace, when every look at the screen lasts under two seconds. THE USER Regular runners training for a 10K or a half marathon: sweaty fingers, bright sun, music in their ears, and no wish to stop. MUST-HAVES - Pace, time and distance readable in one glance - Know instantly if you're on target pace - Pause and mark a lap without looking - Coaching that works without reading the screen EDGE CASES (every one must be handled) - GPS drops under a bridge or between tall buildings - Heart rate climbs dangerously high - Pause pressed by accident - The battery runs low in the middle of the run - Bright sunlight washes out the screen SCREENS TO BUILD 1. Running (396×484): the main screen during the run 2. Alert (396×484): an alert or coaching moment, like heart rate too high or GPS lost 3. Summary (396×484): the end of the run, or a pause 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 - Black #000000: the background, so the screen saves battery - Orange #FF8A3D: the brand, actions and alerts - Green #5BE38A: on target - Red #FF4D4D: heart rate - Grey #9A9A9A: secondary numbers - 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: a 10K run at a 5:15 per km target pace, heart rate in beats per minute, and splits per kilometre. 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.