Skip to main content
UI Coach Logo
Intermediate

Interruption-Friendly Cooking Mode

Design a hands-busy recipe mode that preserves progress across interruptions, parallel timers, substitutions, and device changes.

Mobile, Tablet, Watch1 to 2 hours

The brief

Understand the problem

Background

Home cooks may leave a recipe to answer a call, care for a child, wash their hands, or check another dish. A linear step carousel loses context when several actions and timers overlap.

User context

Noor is making lentil soup and flatbread while supervising her son. She uses a tablet on the counter, starts timers from her watch, and expects at least one interruption.

Product problem

Noor needs to know what is active, what can wait, and where to resume without rereading the whole recipe or missing a safety-critical step.

Objective

Create preparation, active-step, interruption, and resumption states for a recipe with two concurrent timers.

What to design

Define the experience

Required experience

  • Review equipment, ingredients, and parallel tasks before starting
  • Follow an active step with hands-busy controls
  • Pause attention while timers continue appropriately
  • Resume with a concise state summary and next priority

Screens and states

  • Recipe readiness
  • Active cooking step
  • Interruption summary
  • Resume and timer coordination

Core user flow

Follow the critical path

  1. 01

    Noor starts the soup simmer and flatbread rest timers

  2. 02

    A call arrives and she marks the current chopping step as interrupted

  3. 03

    The rest timer completes while the simmer continues

  4. 04

    She returns to a summary showing elapsed time, completed work, and the safe next action

Product rules

Requirements and constraints

Requirements

  • Separate recipe progress from real-time timers
  • Keep active heat, resting, and completed tasks visible
  • Support large targets, voice-free controls, and screen wake settings
  • Explain whether pause affects a timer or only guidance
  • Allow corrections when a step was completed off-screen

Constraints

  • The product cannot assume unattended heat is safe
  • Timing depends on equipment and observable food condition
  • Essential instructions must remain available without audio

Reality check

States worth considering

The device sleeps during a timer
The user changes ingredient quantity
A timer finishes while the app is closed
The cook completes steps out of order
The tablet loses power and the watch remains connected

Finish line

What to deliver

  • Four tablet or mobile screens plus one watch timer state
  • An interruption-state diagram distinguishing guidance, task, and timer status

If you want more

Optional extensions

Add a safe handoff to another household member
Design a substitute ingredient branch

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Font pairing
LoraMerriweather

Lora & Merriweather

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Keep practicing

Intermediate
Food and dining

Restaurant Group Order and Bill Split

Design a shared restaurant order that coordinates individual choices, dietary notes, deadlines, totals, and payment failures.

Mobile2 to 4 hours
Mobile DesignInteraction Design
Intermediate
Food and dining

Time-Sensitive Grocery Substitution Approval

Design a shopper-to-customer approval flow for unavailable groceries with price, quantity, dietary, and response-window context.

Mobile1 to 2 hours
Mobile DesignInteraction Design
Advanced
Food and dining

Restaurant Waitlist and No-Show Management

Design a host workspace and guest status flow for realistic wait estimates, arrival check-in, table readiness, and no-show handling.

Tablet2 to 4 hours
Dashboard DesignService Design
Intermediate
Food and dining

Choose a Restaurant Table

Design a reservation flow that lets diners understand a restaurant floor plan and request a suitable available table.

Mobile2 to 4 hours
Interaction DesignAccessibility
Intermediate
Food and dining

School Meal Account Payment

Design a family payment experience for meal balances, low-fund alerts, siblings, automatic reload, receipts, and payment support.

Responsive web2 to 4 hours
FormsTrust and Safety
Advanced
Food and dining

Choose Your Restaurant Table

Design a reservation flow that lets diners request a specific available table or seating zone.

Mobile2 to 4 hours
AccessibilityInteraction Design