Principles of UX / UI (Product Design): Double Diamond Model (Discover, Define, Develop, Deliver)

Double Diamond Model (Discover, Define, Develop, Deliver)

Double Diamond Model: A Portfolio-Ready Study Guide

(For aspiring product designers, graphic designers transitioning to UX, and bootcamp students)

What This Is

The Double Diamond is a design process framework (created by the UK Design Council) that helps teams solve problems systematically. It’s split into four phases: Discover (research), Define (synthesize insights), Develop (ideate solutions), and Deliver (test and refine). Think of it like a funnel—you start wide (exploring all possibilities), narrow down (focus on the right problem), then expand again (explore solutions) before finalizing the best one.

Example: Redesigning a hospital patient portal to reduce appointment no-shows.
- Discover: Interview patients, nurses, and admins to find pain points (e.g., "I forget my appointment time").
- Define: Synthesize insights into a problem statement: "Patients miss appointments because they don’t get timely reminders." - Develop: Brainstorm solutions (SMS alerts, calendar integrations, in-app notifications).
- Deliver: Prototype and test the best solution (e.g., a two-tap SMS reminder with a "Reschedule" button).

Key Terms & Principles

Phase 1: Discover (Research)

• User Interviews: 1:1 conversations to uncover needs, frustrations, and behaviors. Example: Asking a gig worker how they track earnings in an app.
• Contextual Inquiry: Observing users in their natural environment (e.g., watching a barista use a POS system during a rush).
• Heuristic Evaluation: Auditing a UI against Nielsen’s 10 Usability Heuristics (e.g., checking if a banking app follows "Visibility of System Status" by showing loading states).
• Affinity Diagramming: Grouping research notes into themes (e.g., clustering e-commerce user feedback into "Checkout Issues," "Search Problems," etc.).
• Competitive Analysis: Comparing 3–5 competitors’ UIs to spot gaps. Example: Analyzing how Spotify vs. Apple Music handle playlist sharing.

Phase 2: Define (Synthesize)

• Problem Statement: A clear, actionable challenge framed as "How might we…?" Example: "How might we help freelancers track unpaid invoices without manual spreadsheets?"
• User Personas: Fictional but data-backed profiles of key users. Example: "Busy Parent Pat" (needs quick grocery delivery, struggles with small touch targets).
• Journey Mapping: Visualizing a user’s steps to complete a task (e.g., booking a doctor’s appointment from "Google search" to "post-visit follow-up").
• Jobs to Be Done (JTBD): Focusing on the "job" a user hires a product to do. Example: People don’t "buy a drill"; they "hire it to make a hole in the wall."

Phase 3: Develop (Ideate & Prototype)

• Crazy 8s: A 5-minute sketching exercise where you draw 8 wild ideas for a problem (e.g., 8 ways to reduce cart abandonment).
• Wireframing: Low-fidelity sketches of layouts (e.g., a mobile banking app with a bottom nav bar vs. hamburger menu).
• Prototyping: Interactive mockups (e.g., a Figma prototype of a food delivery app’s checkout flow with a "Save for Later" button).
• Design Studio: A collaborative workshop where teams sketch solutions together (e.g., designers + engineers brainstorming a new onboarding flow).
• Hick’s Law: The more choices a user has, the longer they take to decide. Example: A restaurant menu with 50 items vs. 10 curated options.

Phase 4: Deliver (Test & Refine)

• Usability Testing: Observing users complete tasks (e.g., testing if a senior citizen can reset their password in a healthcare app).
• A/B Testing: Comparing two versions of a UI (e.g., green vs. blue "Sign Up" buttons to see which gets more clicks).
• Accessibility Audit: Checking if a design meets WCAG 2.1 (e.g., ensuring color contrast is at least 4.5:1 for text).
• Design Handoff: Preparing specs for developers (e.g., Figma auto-layouts, spacing tokens, and interaction notes).
• Progressive Disclosure: Showing only essential info upfront (e.g., a flight booking app hiding advanced filters until the user taps "More Options").

Step-by-Step / Process Flow

1. Discover: Dive Deep into Research

Actions:
- Conduct 5–7 user interviews (record with Otter.ai or Zoom).
- Run a heuristic evaluation on a competitor’s app (use Nielsen’s heuristics as a checklist).
- Create an affinity diagram in Miro or on sticky notes (group insights like "Checkout Issues" or "Navigation Problems").
- Synthesize findings into a research report (1-pager with key quotes, pain points, and opportunities).

Figma Tip: Use the "Sticky Notes" plugin to organize research insights.

2. Define: Narrow Down the Problem

Actions:
- Write a "How Might We" (HMW) statement (e.g., "How might we help gig workers track earnings without manual spreadsheets?").
- Build a journey map in Figma or Whimsical (show touchpoints, emotions, and pain points).
- Create 1–2 user personas (include goals, frustrations, and tech-savviness).
- Prioritize problems using a 2x2 matrix (Impact vs. Feasibility).

Example Journey Map:

Step 1: User opens app → Frustration: "Why is the dashboard so cluttered?"
Step 2: User taps "Earnings" → Pain Point: "I can’t see pending payments."
Step 3: User exports data → Opportunity: "What if the app auto-categorized earnings?"

3. Develop: Ideate & Prototype

Actions:
- Run a Crazy 8s session (sketch 8 wild ideas in 5 minutes).
- Create 3–5 wireframes (low-fidelity, focus on layout and hierarchy).
- Build a mid-fidelity prototype in Figma (use auto-layout for responsive designs).
- Conduct a design studio with teammates (sketch together, then vote on the best ideas).

Figma Tip: Use "Variants" to test different button styles or layouts.

4. Deliver: Test & Refine

Actions:
- Run a usability test with 5 users (use Maze or UserTesting.com).
- Analyze results (look for drop-off points, confusion, or errors).
- Iterate on the prototype (fix Hick’s Law violations, improve Fitts’s Law compliance).
- Prepare handoff docs (export Figma components, spacing specs, and interaction notes).

Example Usability Test Task:
"You want to book a doctor’s appointment for next Tuesday. Show me how you’d do that."

Common Mistakes

Mistake 1: Skipping Research (Jumping to Solutions)

• Problem: Designing based on assumptions (e.g., "I think users want dark mode").
• Correction: Always start with research (interviews, analytics, competitive analysis). Example: Before redesigning a fitness app, interview 5 users to find out why they cancel subscriptions.

Mistake 2: Defining the Problem Too Broadly

• Problem: A vague problem statement like "Users don’t like our app."
• Correction: Use the "5 Whys" technique to drill down. Example:
• Why? → "It’s too slow."
• Why? → "The checkout takes 5 steps."
• Why? → "I have to re-enter my address every time."
• Refined Problem: "How might we reduce checkout steps for returning users?"

Mistake 3: Falling in Love with Your First Idea

• Problem: Only exploring one solution (e.g., "I already know the best layout").
• Correction: Diverge first, converge later. Use Crazy 8s or SCAMPER (Substitute, Combine, Adapt, Modify, Put to another use, Eliminate, Reverse) to generate multiple ideas.

Mistake 4: Testing with the Wrong Users

• Problem: Testing a senior-focused app with college students.
• Correction: Recruit participants who match your personas. Use User Interviews or Respondent.io to find the right users.

Mistake 5: Ignoring Accessibility in Early Stages

• Problem: Adding alt text and keyboard navigation as an afterthought.
• Correction: Bake accessibility into wireframes (e.g., 4.5:1 contrast ratio, focus states, screen reader labels).

Design Interview / Portfolio Tips

1. Show Your Process, Not Just the Final Design

• Interviewers want to see: How you researched, defined the problem, ideated, and tested.
• Portfolio Tip: Include photos of sticky notes, Miro boards, or Figma research files (not just the polished UI).

2. Explain Trade-offs Clearly

• Example Question: "Why did you choose a bottom nav bar over a hamburger menu?"
• Strong Answer: "We tested both with users. The bottom nav reduced Hick’s Law friction for core actions (Home, Search, Cart), while the hamburger menu hid less-used features like Settings."

3. Differentiate Key Terms

4. Use the STAR Method for Behavioral Questions

• Question: "Tell me about a time you disagreed with a stakeholder."
• STAR Answer:
• Situation: "A PM wanted to add 3 new features to the homepage."
• Task: "I needed to advocate for a cleaner design."
• Action: "I ran a card sort with users and showed that Hick’s Law was violated. I proposed a progressive disclosure approach."
• Result: "The PM agreed to prioritize only 1 feature, and our conversion rate improved by 12%."

Quick Check Questions

1. A stakeholder insists on adding a "Live Chat" button to the homepage. How do you use design principles to evaluate this request?

Answer:
- Apply Hick’s Law: More options = slower decisions. Test if users actually need live chat (interviews, analytics).
- Use Progressive Disclosure: Hide it behind a "Help" icon if it’s not a primary action.
- Check Fitts’s Law: If it’s important, make it large and thumb-friendly (but not at the expense of core actions like "Buy").

2. Your team wants to skip usability testing to meet a deadline. How do you push back?

Answer:
- Cite the "Rule of 5": Testing with 5 users uncovers 85% of usability issues (Nielsen Norman Group).
- Show ROI: "Fixing a problem now costs $1,000; fixing it post-launch costs $10,000." - Propose a compromise: Guerilla testing (grab 3 users in a coffee shop for 10-minute sessions).

3. A client says, "I don’t like the color blue. Can we change it to green?" How do you respond?

Answer:
- Ask "Why?": "Is there a specific reason, or is it personal preference?" - Use Data: "Our accessibility audit showed blue meets WCAG contrast ratios, while green doesn’t. Can we test both?" - Leverage Design Systems: "Our design system uses blue for primary actions (consistency = better usability)."

Last-Minute Cram Sheet

1. Double Diamond Phases: Discover → Define → Develop → Deliver.
2. Nielsen’s 10 Heuristics: Visibility of system status, match real-world, user control, consistency, error prevention, recognition > recall, flexibility, minimalism, error recovery, help/docs.
3. Hick’s Law: More choices = slower decisions. Example: Netflix’s "Top Picks" row reduces decision fatigue.
4. Fitts’s Law: Bigger + closer = easier to click. Example: Mobile "Buy" button at thumb zone.
5. WCAG Contrast Ratio: 4.5:1 for normal text, 3:1 for large text.
6. Progressive Disclosure: Hide complexity until needed. Example: Google’s "Advanced Search" options.
7. Affinity Diagramming: Group research insights into themes (e.g., "Checkout Issues").
8. Crazy 8s: 8 sketches in 5 minutes to generate ideas.
9. ⚠️ User Interviews ≠ Usability Tests: Interviews uncover problems; tests observe task completion.
10. Figma Shortcuts:
    • Ctrl/Cmd + R = Rename layer
    • Ctrl/Cmd + G = Group layers
    • Shift + A = Add auto-layout
    • Ctrl/Cmd + / = Quick actions