Pebellslearn by building
RoadmapsMatrixCoursesSandboxSign in

Course details

Product Design

Learn how product designers turn research into decisions and decisions into shipped, measured screens. You follow one tiffin-subscription app from its first goal to its first A/B test: framing the problem, sketching and prototyping, building a clear interface and handing it to developers.

Ready to learn6 sections · 24 lessons
Start learning

Course curriculum

What Product Design Is and Defining Success4 lessons

Meet LunchLoop, the tiffin app you will design for all course. Learn how product design differs from UX and UI, then set a vision, turn wishes into outcome goals, write a value proposition, look for product-market fit and choose the metrics that prove success.

  1. Product Design vs UX and UI12 min
  2. Product Vision and Goals12 min
  3. Value Proposition and Product-Market Fit13 min
  4. Success Metrics14 min
Gathering Information4 lessons

Find out why LunchLoop's tiffins come back untouched. Learn to interview about real past events, size a pattern with a survey, watch work where it happens, and read heatmaps and session recordings without mistaking what people do for why they do it.

  1. Interviews13 min
  2. Surveys13 min
  3. Contextual Inquiry12 min
  4. Heatmaps and Session Recordings13 min
Framing the Problem4 lessons

Synthesise research into insights, capture the people behind them with personas and empathy maps, find the progress they are after with jobs-to-be-done, and write a problem statement and How Might We questions that keep the solutions open.

  1. Synthesising Research13 min
  2. Personas and Empathy Maps12 min
  3. Jobs-to-be-Done12 min
  4. Problem Statements and How Might We14 min
Ideation3 lessons

Generate many ideas before choosing, sketch them cheaply, settle structure and priority in wireframes, and build prototypes at exactly the fidelity your question needs, testing and improving in quick rounds.

  1. Brainstorming and Sketching12 min
  2. Wireframing12 min
  3. Prototyping14 min
Visual and Interface Foundations5 lessons

Give colours jobs and keep them accessible, set a small type scale, lay screens out on a grid with a spacing scale, steer the eye with visual hierarchy, and capture every decision in design tokens and reusable components.

  1. Colour12 min
  2. Typography12 min
  3. Layout and Grid12 min
  4. Visual Hierarchy12 min
  5. Components and Design Tokens14 min
Handoff, Measurement and Iteration4 lessons

Write specs that answer developers' questions in advance, design every state and edge case on purpose, choose product analytics with the HEART framework, and run A/B tests behind feature flags so each release teaches the team something.

  1. Specs13 min
  2. Edge Cases and States13 min
  3. Product Analytics and HEART14 min
  4. A/B Testing and Feature Flags15 min