Ready for your next challenge?

E-Commerce

The Product Card

Step 1

Design a product card for a sustainable fashion brand. Focus on hierarchy: what does the user need to see first, second, third?

Apply Gestalt's Law of Proximity — group related elements (price, name, rating) so the eye reads them as a unit, not as isolated pieces.

Step 2

Design a product detail page that this card leads to. The user has clicked because they're interested — now earn their trust and guide them toward a decision.

Apply Nielsen's Heuristic #6: Recognition over Recall — make size guides, return policies, and material info visible without the user having to dig for it.

Step 3

Design the shopping cart screen after the user adds the item. This is a moment of commitment — make it feel reassuring, not anxiety-inducing.

Apply Nielsen's Heuristic #1: Visibility of System Status — clearly confirm what was added, show the updated total, and make the path to checkout obvious.

Wellness

The Meditation Timer

Step 1

Design a meditation timer screen for a mindfulness app. The interface should feel as calm as the activity itself — strip away everything unnecessary.

Apply the principle of Visual Breathing — generous white space isn't emptiness, it's intentional calm. Let the layout reflect the purpose.

Step 2

Design the session completion screen shown after the timer ends. This is a small but meaningful moment — the user just did something good for themselves.

Apply the Peak-End Rule — users remember the best moment and the ending. Make this ending feel rewarding and warm, not clinical.

Step 3

Design the session history screen where users can see their past practice. Progress should feel encouraging, not like a report card.

Apply Gestalt's Law of Continuity — use visual flow (a timeline, a gentle graph) to suggest ongoing progress rather than isolated data points.

Productivity

The Task Card

Step 1

Design a task card for a project management tool used by small creative teams. One card, all the essential info — make it scannable in under 3 seconds.

Apply the Inverted Pyramid principle — lead with the most critical information (task name, status, deadline) and let secondary details follow.

Step 2

Design the task detail screen that opens when the card is tapped. The user needs full context to act — give them everything without overwhelming them.

Apply Nielsen's Heuristic #8: Aesthetic and Minimalist Design — every element on this screen should earn its place. If it doesn't help the user act, remove it.

Step 3

Design the project overview screen that contains multiple task cards. This is the bird's eye view — help the user understand the health of the whole project at a glance.

Apply Gestalt's Law of Similarity — use consistent visual treatment (color, shape, size) to group tasks by status so patterns emerge instantly.

Food

The Recipe Card

Step 1

Design a recipe card for a meal planning app targeting busy parents. Quick to scan, easy to decide — yes or no in seconds.

Apply the F-Pattern Reading principle — place the most decision-influencing content (image, time, difficulty) along the natural scan path.

Step 2

Design the full recipe screen once the user selects a meal. They're about to cook — anticipate what they'll need and when they'll need it.

Apply Nielsen's Heuristic #7: Flexibility and Efficiency — consider both the first-time cook (needs full instructions) and the experienced one (just needs a quick ingredient check).

Step 3

Design the weekly meal planner screen where this recipe has been added. Help the user see their whole week without feeling overwhelmed by it.

Apply Gestalt's Law of Prägnanz (Good Form) — the brain prefers simplicity. Design the week view so it reads as one coherent, organized whole rather than 7 separate days.

Finance

The Expense Entry

Step 1

Design an expense entry screen for a personal budgeting app. Adding an expense should take no more than 10 seconds — remove every unnecessary tap.

Apply Nielsen's Heuristic #4: Consistency and Standards — use familiar input patterns (amount first, then category) so users don't have to relearn the flow each time.

Step 2

Design the category selection screen or component triggered during entry. Categories should be immediately recognizable — no guessing where "coffee" belongs.

Apply Gestalt's Law of Common Region — visually enclose related categories (Food & Drink, Transport, Health) so groupings feel intuitive rather than arbitrary.

Step 3

Design the monthly spending overview screen. The user wants to understand their habits — show them patterns, not just numbers.

Apply the principle of Data-Ink Ratio (Edward Tufte) — every visual element should represent data. Remove decorative chart elements that add noise without adding meaning.

Travel

The Destination Card

Step 1

Design a destination card for a travel inspiration app. Spark wanderlust in a single card — make the user feel something before they read anything.

Apply the principle of Visual Hierarchy through contrast — a strong image paired with minimal, well-placed type creates more impact than a card crowded with information.

Step 2

Design the destination detail screen this card leads to. The user is dreaming — help them go from inspiration to "I want to book this."

Apply Nielsen's Heuristic #6: Recognition over Recall — surface key facts (best season, average cost, visa requirements) without making the user search for them.

Step 3

Design the trip planning screen where the user starts building their itinerary. The blank slate is intimidating — give them a starting point that feels manageable.

Apply the principle of Progressive Disclosure — show only what's needed to take the first step. Reveal complexity gradually as the user builds confidence.

Health

The Symptom Checker

Step 1

Design a symptom input screen for a healthcare app. Users arrive here worried — the interface must feel calm, clear, and trustworthy.

Apply Nielsen's Heuristic #5: Error Prevention — use clear input options (selectable symptoms rather than free text) to reduce user error and anxiety simultaneously.

Step 2

Design the results screen showing possible conditions based on entered symptoms. This is sensitive information — present it honestly without causing unnecessary panic.

Apply the principle of Tone through Typography — font weight, size, and spacing can make the same information feel alarming or reassuring. Choose deliberately.

Step 3

Design the "find a doctor" screen that follows the results. The user needs to act — make the path from concern to appointment as frictionless as possible.

Apply Nielsen's Heuristic #3: User Control and Freedom — give users options (book now, save for later, get more info) so they feel in control of a moment that may feel out of control.

Social

The User Profile

Step 1

Design a user profile card for a design community platform. In one glance, a visitor should understand who this person is and whether to connect.

Apply Gestalt's Law of Figure/Ground — make the profile subject (photo, name, role) stand out clearly from the background and supporting details.

Step 2

Design the full profile page this card expands into. The user is being evaluated by potential collaborators or employers — help them tell their story.

Apply the principle of Visual Narrative — guide the viewer's eye through a deliberate sequence: who they are → what they do → proof of their work → how to connect.

Step 3

Design the connection or collaboration request screen triggered from the profile. A small but high-stakes interaction — make it personal, not transactional.

Apply Nielsen's Heuristic #2: Match Between System and the Real World — use language and metaphors that feel human ("Let's connect") rather than technical ("Send request").

Education

The Course Card

Step 1

Design a course card for an online learning platform targeting adult learners. Adults are time-conscious and skeptical — give them what they need to decide in seconds.

Apply the principle of Affordance — visual cues (progress bar, duration badge, level indicator) should immediately communicate what kind of commitment this course requires.

Step 2

Design the course overview screen the card leads to. The user is considering enrolling — address their hesitations before they voice them.

Apply Nielsen's Heuristic #6: Recognition over Recall — make the syllabus, instructor credentials, and time commitment visible upfront. Don't make users hunt for deal-breakers.

Step 3

Design the first lesson screen once the user enrolls. First impressions set the tone for the entire learning journey — make this feel welcoming and structured.

Apply the principle of Onboarding through Context — orient the learner: where are they in the course, what will they achieve today, and what comes next.

Utility

The Onboarding Flow

Step 1

Design the first onboarding screen for a habit-building app. You have one screen to convince someone to keep going — make every word and pixel count.

Apply the principle of Value-First Onboarding — lead with what the user gains, not what you need from them (permissions, sign-ups, personal data).

Step 2

Design the personalization step mid-onboarding where the user sets their first goal. This is the moment of investment — the user is telling you what they care about.

Apply the principle of Commitment and Consistency (Cialdini) — small, voluntary choices early in an onboarding flow increase the likelihood of long-term engagement.

Step 3

Design the "you're all set" completion screen at the end of onboarding. The user has made it through — celebrate that without being over the top.

Apply the Peak-End Rule again — this is the end of the onboarding experience. Make it feel like a beginning, not a finish line.