Build a Capsule Wardrobe Guide
Design an editorial fashion guide that helps readers combine a limited set of garments for different situations.
The brief
Understand the problem
Background
Fashion articles often present attractive images without helping readers understand how pieces work together, fit different climates, or adapt to items they already own.
User context
Amina is preparing for a two-week work trip with one carry-on bag. She needs outfits for meetings, walking, and one formal dinner in warm, rainy weather.
Product problem
Readers need to scan the collection as a system rather than treat every look as a separate purchase recommendation.
Objective
Create a visual capsule wardrobe guide with outfit combinations and practical context.
What to design
Define the experience
Required experience
- Guide introduction with audience and climate context
- Core garment collection
- Outfit combinations by situation
- Detailed item alternatives and care notes
Screens and states
- Guide landing
- Capsule overview
- Outfit detail
- Item alternatives
Core user flow
Follow the critical path
- 01
Amina confirms that the guide matches her trip context
- 02
She scans the limited set of core garments
- 03
She opens meeting and rainy-day combinations
- 04
She substitutes an item with something she owns
- 05
She saves a compact packing view
Product rules
Requirements and constraints
Requirements
- Show how often each garment appears across outfits
- Include weather, activity, and formality context
- Offer functional alternatives instead of requiring exact products
- Use descriptive image text for important styling information
- Provide a printable or saved packing summary
Constraints
- Garments must work across several outfits
- The guide should not assume one body type or gender expression
Reality check
States worth considering
Finish line
What to deliver
- Design four responsive screens for the guide, capsule overview, and adaptable outfit details.
Optional direction
Visual resources
Use these as a starting constraint if you want one. They are not part of the required solution.
Montserrat & Crimson Text
Clear interface writing gives people the confidence to understand what changed and decide what to do next.
Montserrat & Crimson Text
Clear interface writing gives people the confidence to understand what changed and decide what to do next.