Principles of UX / UI (Product Design): Design Challenges and Whiteboard Exercises

Design Challenges and Whiteboard Exercises

Design Challenges & Whiteboard Exercises: Portfolio-Ready Study Guide

What This Is

Design challenges and whiteboard exercises are timed, hands-on tasks that simulate real-world design problems. They test your ability to think critically, apply design principles, and communicate solutions under pressure—just like in a real product team. For example, you might be asked to redesign a food delivery app’s checkout flow to reduce cart abandonment or improve a hospital patient portal’s appointment booking to reduce no-shows. These exercises reveal how you structure problems, iterate on ideas, and justify decisions—key skills for landing UX roles.

Key Terms & Principles

• Design Thinking (Double Diamond): A problem-solving framework with four phases: Discover (research), Define (problem statement), Develop (ideate), Deliver (prototype/test). Example: Before redesigning a banking app’s login, you’d interview users (Discover), define pain points (Define), sketch solutions (Develop), and test prototypes (Deliver).

• Heuristic Evaluation: A usability inspection method where experts evaluate an interface against Nielsen’s 10 Usability Heuristics (e.g., Visibility of System Status, Error Prevention). Example: If a loading spinner disappears without feedback, it violates Visibility of System Status.

• Fitts’s Law: The time to acquire a target (e.g., button) depends on its size and distance from the pointer. Example: Place the "Submit" button in a form near the last field (short distance) and make it large (easy to tap).

• Hick’s Law: The more choices a user has, the longer it takes to decide. Example: A dropdown menu with 20 options slows users down—group items or use progressive disclosure (e.g., search filters).

• Jakob’s Law: Users expect interfaces to work like ones they already know. Example: Place the "Cart" icon in the top-right corner of an e-commerce site (consistent with Amazon, Shopify).

• Affordance: A design element’s properties suggest how it should be used. Example: A 3D button with a shadow looks clickable; a flat, text-only link might be missed.

• Cognitive Load: The mental effort required to use an interface. Example: A dashboard with 10 charts overwhelms users—prioritize key metrics and use progressive disclosure.

• Progressive Disclosure: Showing only essential information upfront, revealing details as needed. Example: A "Show More" button in a product description instead of dumping all text at once.

• Guerrilla Testing: Quick, informal usability tests with 3–5 users (e.g., asking strangers in a café to try your prototype). Example: Testing a mobile app’s onboarding flow with friends before a formal study.

• Design System: A single source of truth for UI components, patterns, and guidelines (e.g., Material Design, Shopify Polaris). Example: Using a design system ensures buttons, typography, and spacing are consistent across an app.

• WCAG (Web Content Accessibility Guidelines): Standards for accessible design (e.g., 4.5:1 contrast ratio for text, keyboard navigability). Example: Light gray text on a white background fails WCAG—use darker gray or add a background.

• Micro-interactions: Small, functional animations that provide feedback (e.g., a "like" button that fills with color when tapped). Example: A loading spinner that morphs into a checkmark when a file uploads.

Step-by-Step / Process Flow

1. Clarify the Problem (5–10 min)

• Ask questions: If the prompt is vague (e.g., "Improve a fitness app"), ask:
• Who is the primary user? (e.g., beginners vs. athletes)
• What’s the core problem? (e.g., "Users abandon workouts after 3 days")
• What’s the success metric? (e.g., "Increase 7-day retention by 20%")
• Write a problem statement: Use the format: "How might we [action] for [user] so that [outcome]?" Example: "How might we simplify workout tracking for busy parents so they complete 3+ workouts per week?"

2. Research & Constraints (10–15 min)

• Quick competitive audit: Sketch 2–3 screens from similar apps (e.g., Nike Training Club, Strava) and note what works/doesn’t.
• List constraints: Time, tech (e.g., "Must work on iOS/Android"), business goals (e.g., "Upsell premium features").
• User flow: Map the current flow (e.g., "Home → Workout Selection → Tracking → Completion"). Use arrows and boxes on paper or Figma’s Flow Kit.

3. Ideate & Sketch (15–20 min)

• Crazy 8s: Fold a paper into 8 sections, sketch 8 ideas in 8 minutes (e.g., gamification, social sharing, voice commands).
• Prioritize: Pick the top 2–3 ideas using a 2x2 matrix (e.g., "High Impact/Low Effort" vs. "Low Impact/High Effort").
• Wireframe: Sketch 3 variations of the key screen (e.g., workout tracking). Use Figma’s Wireframe Kit or pen/paper.

4. Prototype (20–30 min)

• Low-fidelity: Use Figma’s prototyping tool to link screens (e.g., tap "Start Workout" → show timer screen).
• Key interactions: Focus on the happy path (e.g., user completes a workout) and 1–2 edge cases (e.g., user pauses mid-workout).
• Test internally: Click through the prototype yourself to catch obvious flaws (e.g., missing "Back" button).

5. Test & Iterate (10–15 min)

• Guerrilla test: Ask 3–5 people to complete a task (e.g., "Track a 10-minute workout"). Note where they hesitate.
• Heuristic check: Run through Nielsen’s 10 Heuristics (e.g., "Does the system provide feedback when the workout starts?").
• Iterate: Fix 1–2 critical issues (e.g., add a confirmation toast when a workout is saved).

6. Present (5–10 min)

• Structure your pitch:
• Problem: "Busy parents struggle to track workouts because the app is too complex."
• Solution: "A simplified tracker with voice commands and progress badges."
• Process: "I sketched 8 ideas, prototyped 3, and tested with 5 users."
• Outcome: "Users completed workouts 30% faster in tests."
• Visuals: Show 1–2 key screens (e.g., before/after wireframes) and 1 user flow (e.g., "Home → Workout → Completion").

Common Mistakes

Design Interview / Portfolio Tips

What Interviewers Look For

1. Problem Framing: Can you define the real problem? Example: If the prompt is "Redesign a to-do app," a strong candidate asks, "What’s the biggest pain point? Is it task creation, reminders, or collaboration?"
2. Speed vs. Depth: Balance quick ideation (e.g., Crazy 8s) with polished execution (e.g., a clean Figma prototype). Prioritize 1–2 key screens over a full app.
3. Justification: Every decision should tie to a user need, heuristic, or business goal. Example: "I moved the ‘Save’ button to the thumb zone (Fitts’s Law) to reduce errors for mobile users."
4. Collaboration: Mention how you’d work with engineers, PMs, or researchers. Example: "I’d sync with the PM to align on success metrics before testing."

Tricky Distinctions

• Wireframe vs. Prototype:
• Wireframe: Static, low-fi (e.g., grayscale boxes for a layout).
• Prototype: Interactive (e.g., clickable Figma file simulating a flow).
• Usability Test vs. User Interview:
• Usability Test: Observes users completing tasks (e.g., "Book a doctor’s appointment").
• User Interview: Asks open-ended questions (e.g., "How do you usually book appointments?").
• Design System vs. Style Guide:
• Style Guide: Visual rules (e.g., colors, typography).
• Design System: Components + rules + documentation (e.g., buttons, modals, spacing guidelines).

Quick Check Questions

1. A stakeholder wants to add 5 new features to a dashboard. How do you use design principles to advise against clutter?

Answer:
- Hick’s Law: More choices = slower decisions. Suggest prioritizing features using a 2x2 matrix (e.g., "High Impact/Low Effort").
- Cognitive Load: Overwhelming users hurts usability. Propose progressive disclosure (e.g., hide advanced features behind a "Show More" button).
- Jakob’s Law: Users expect dashboards to be simple (e.g., like Google Analytics). Argue for consistency with familiar patterns.

2. You’re designing a mobile app for seniors. What heuristics and accessibility principles should you prioritize?

Answer:
- Visibility of System Status: Use large, high-contrast text (WCAG 4.5:1) and clear feedback (e.g., a toast when an action succeeds).
- Error Prevention: Add confirmation dialogs (e.g., "Are you sure you want to delete?") and undo options.
- Fitts’s Law: Make buttons large and spaced apart (e.g., 48x48px minimum touch targets).
- Consistency & Standards: Follow platform conventions (e.g., iOS back button in the top-left).

3. A user test reveals that people struggle to find the "Settings" menu in your app. How do you diagnose and fix this?

Answer:
- Diagnose:
- Heuristic Violation: Likely Visibility of System Status or Recognition Over Recall (users can’t find it).
- Test Observations: Note where users look (e.g., top-right vs. hamburger menu).
- Fix:
- Jakob’s Law: Place "Settings" where users expect it (e.g., top-right gear icon, like in Gmail).
- Affordance: Make the icon visually distinct (e.g., a gear with a contrasting color).
- Test Again: Run a 5-second test (show the screen for 5 seconds, ask users to find "Settings").

Last-Minute Cram Sheet

1. Nielsen’s 10 Heuristics: Memorize Visibility of System Status, Match Between System and Real World, User Control & Freedom.
2. Fitts’s Law: Big buttons near the pointer = faster clicks.
3. Hick’s Law: Fewer choices = faster decisions.
4. WCAG Contrast Ratio: 4.5:1 for normal text, 3:1 for large text.
5. Guerrilla Testing: Test with 3–5 users to catch 85% of issues.
6. Crazy 8s: 8 sketches in 8 minutes to generate ideas fast.
7. Problem Statement Format: "How might we [action] for [user] so that [outcome]?"
8. ⚠️ User Interviews ≠ Usability Tests: Interviews uncover problems; tests observe task completion.
9. Figma Shortcuts:
10. Shift + A = Auto Layout
11. Ctrl/Cmd + G = Group
12. Ctrl/Cmd + [ or ] = Adjust layer order
13. Design System ≠ Style Guide: A design system includes components + rules + documentation; a style guide is just visual rules.