Show a complete look
A structured flat lay communicated the relationship between the seed item and supporting products more clearly than a generic row.
Case study / 03
lululemon · 2025
Helping guests understand the whole outfit
I redesigned an AI-assisted outfit component so guests could understand a complete look at a glance and confidently shop more than one item.
Project brief
What I owned and why it mattered.
- Role
- Product Designer
- Team
- PM · Research · Machine learning · Engineering
- Platform
- Web · iOS native app
- Timeline
- Q4 2024 – Q1 2025
My responsibilities
- Workshop facilitation
- Experience architecture
- Component design
- Accessibility behavior
Methods
- Co-creation workshop
- Concept sorting
- Interaction design
- Accessibility mapping
01 / Challenge
The problem behind the interface
The existing outfit module was visible but underused: engagement was 2.35% on web and 1.6% in app. Products appeared as recommendations, but the interface did not help guests visualize a coherent head-to-toe look.
02 / Evidence
What the direction was based on
- 01
Baseline engagement was 2.35% on web and 1.6% in app
- 02
Guest needs clustered around versatility, styling education, and confidence for an activity or occasion
- 03
Concepts were generated in a workshop, grouped into five experience types, and sorted toward a preferred direction
03 / Approach
Turning uncertainty into a focused design direction
I led a concept workshop, organized ideas into five experience types, and evaluated them against three guest needs: versatility, styling education, and confidence for a specific activity or occasion. Exploration covered outfitting rules, hierarchy, accessibility, and future scalability.
04 / Key insight
Guests wanted an outfit idea—not a row of related products. The relationship between the seed item and every recommendation had to be immediately visible.
Preserve a clear hierarchy
The seed product remains visually primary while recommendations read as one coordinated outfit.
Future-proof the component
Modular slots allow recommendation strategies to change over the next 12–24 months without replacing the interface.
05 / Solution
A system people can understand at a glance
A structured flat-lay grid establishes the seed item first, then organizes complementary products into a complete look. Accessible carousel behavior and modular content slots allow future recommendation strategies to plug in without redesigning the interface.
Constraints
Designing inside the real system
- Machine-generated imagery and product combinations could vary in quality
- Carousel behavior needed explicit keyboard and screen-reader focus rules
- The pattern had to support future recommendation strategies
Collaboration
I led concept generation and sorting, partnered with research on guest needs, worked with machine-learning and engineering partners on content variability, and documented accessible focus behavior for carousel arrows, pagination, and skip links.
06 / Outcome
What changed
Engagement increased from ~2% to 5%
- 01Engagement increased to 5%
- 02More multi-item purchases started in the component
- 03The modular pattern was designed to evolve over 12–24 months
Measurement note
The source reports engagement increasing from roughly 2% to 5%, alongside more multi-item purchases through the component. The source does not specify the evaluation window, so the case study avoids implying a precise causal attribution beyond the reported change.
07 / Reflection
What I’d carry forward
Designing for machine-generated content meant planning for inconsistency. Clear rules, resilient layouts, and useful empty states mattered as much as the ideal-state composition.