Compare a Curator's Top Picks
Design an editorial recommendation page that explains why a small set of products earned a place on a best-of list.
The brief
Understand the problem
Background
Best-of lists are easy to publish and difficult to trust. Readers need selection criteria, intended use, testing context, and commercial disclosures more than a universal winner.
User context
Theo is choosing compact travel headphones and finds several lists that rank different products without explaining the tradeoffs.
Product problem
A single ranking can hide who each option suits and whether the recommendation is influenced by sponsorship or affiliate revenue.
Objective
Create a transparent editorial comparison for a tightly defined product need.
What to design
Define the experience
Required experience
- Selection criteria and methodology overview
- Scannable shortlist with best-for distinctions
- Detailed comparison and evidence
- Update and commercial disclosure context
Screens and states
- Editorial landing
- Top picks
- Comparison
- Pick detail
Core user flow
Follow the critical path
- 01
Theo reads who the guide is designed for
- 02
He reviews the criteria and how products were evaluated
- 03
He narrows the shortlist by his priorities
- 04
He compares two options and opens supporting evidence
- 05
He follows a clearly disclosed purchase link
Product rules
Requirements and constraints
Requirements
- State the audience and criteria before presenting winners
- Use best-for labels instead of claiming one universal choice
- Separate measured facts, editorial judgment, and manufacturer claims
- Display testing date and meaningful product updates
- Make affiliate and sponsorship disclosures visible near relevant links
Constraints
- Products can change without changing their name
- Not every criterion can be measured objectively
- The article must remain readable on a phone
Reality check
States worth considering
Finish line
What to deliver
- Design four responsive editorial screens that make criteria, tradeoffs, and disclosures clear.
Optional direction
Visual resources
Use these as a starting constraint if you want one. They are not part of the required solution.
Libre Baskerville & Open Sans
Clear interface writing gives people the confidence to understand what changed and decide what to do next.
Libre Baskerville & Open Sans
Clear interface writing gives people the confidence to understand what changed and decide what to do next.