Please come take a slice of pizza and then do the following exercise:
Open a product detail page on an e-commerce website on your phone. Now open the same page on your laptop.
Brevyn, will you pray for us today?
One system, infinite screens
You'll understand why "pixel-perfect" fails on the web and how responsive design adapts to context
You'll know how to create a persona and write job stories that capture user motivation
You'll start researching your character and gathering product content
Designing for 100,000 devices
Known screen sizes
Pixel-perfect control
Platform-specific design
Infinite device sizes
Content must adapt
One design system, many contexts
Responsive design adapts presentation to context — same content, different arrangement.
Layout and arrangement
Image sizes
Navigation patterns
Touch targets
Content and information
Visual hierarchy
Brand identity
User goals
Let's analyze a responsive site together. What decisions did the designer make?
Designing for someone specific
A fictional but research-based representation of your target user
Without a persona, you're designing for yourself.
Marcus, 35
"Works in tech. Likes gadgets and efficiency. Lives in the city."
What would Marcus prioritize on a product page?
What matters to him when making a purchase?
You don't know — this persona is useless.
Marcus, 35 — Software engineer, lives alone in a 600 sq ft apartment
Background: Works long hours, values his limited free time. Small space means every purchase must earn its place. Researches extensively before buying — hates returning things.
Core values: Efficiency, minimalism, quality over quantity. Would rather pay more for something that lasts.
Job story:
"When I'm considering a new purchase, I want to quickly compare specs and read expert reviews, so I can make a confident decision without second-guessing myself later."
Now you can design: prioritize specs, expert reviews, dimensions, quality indicators.
People don't buy products — they "hire" products to do a job
Classic example: "People don't want a quarter-inch drill, they want a quarter-inch hole."
JTBD focuses on the outcome the user wants, not the product features.
What job is your user hiring your product to do?
"When [situation], I want to [motivation], so I can [expected outcome]."
"When I'm shopping for a gift for my partner, I want to see reviews from people in similar situations, so I can feel confident this is the right choice."
The situation and outcome matter as much as the action.
Background — Demographics, interests, family life, daily context
Core values — What matters most to this person? What do they prioritize?
Job-to-be-done — What are they trying to accomplish? What's the situation?
Write 1-2 job stories that capture their motivation.
Same product. Same information.
If your persona is buying a gift vs. buying for themselves — what changes on the product page?
Responsive Product Detail Page
Tailored to a specific persona's needs and values
Background, core values, job-to-be-done
At least one job story
Name, 3+ images, price, directions
Shipping, reviews, related products
Returns policy, dimensions
Due Wednesday, Feb 11 @ 5:15pm
Work Session (~50 min) — Choose your character and begin persona research
Write at least one job story · Start gathering product content
C1: Persona Sheet + Product Details — due Wed, Feb 11 @ 5:15pm
Bring character research and product content to Day 10
Your persona's job story determines what matters most on your PDP.