01 / At a glance
Help guests see the outfit, not just the products.
The short version
A row of recommendations was not helping guests picture a complete look. I designed a structured grid that kept the current product clear while showing how complementary pieces could work together.
My contribution: concept direction, workshop facilitation, interaction design, hierarchy, and accessible navigation. The machine learning team owned the recommendation model.
The model paired existing products and product photography. The design challenge was presenting those recommendations coherently, rather than generating new product imagery.
02 / The challenge
Visibility alone was not creating engagement.
The existing module recorded 2.35% engagement on web and 1.6% in the app. Guests could see recommended products, but the flat list gave them limited help visualizing a head-to-toe outfit.
Research surfaced needs for versatile combinations, styling guidance, and confidence choosing an outfit for an activity or occasion. Those needs pointed toward communicating relationships between products.
03 / Concept & hierarchy
Keep a clear starting point as the outfit changes.
I led a brainstorming workshop and sorting exercise to explore five experience types. We converged on a grid that could communicate a complete look efficiently and scale beyond one fixed composition.
Anchor the current item.
Keep the seed product static as guests explore combinations. A clear current-item label helps maintain orientation.
Make the relationship visible.
Arrange complementary products as an outfit, with a consistent hierarchy across categories, rather than as an undifferentiated row.
Control the information density.
Use concise product naming and a simple visual treatment so guests can understand the combination before exploring individual product details.
04 / Designing around recommendations
Give variable content a consistent structure.
Machine-selected combinations can vary in color, category, and how well the products work together. The interface needed layout rules that could accommodate those differences without losing the relationship to the current item.
The design used a stable hierarchy and modular slots, allowing recommendation logic to evolve toward larger outfits and other discovery strategies.
Separate an observed result from a design hypothesis.
We chose a visual presentation without an explanation layer. The hypothesis was that the outfit itself would help guests assess the recommendation. Higher engagement was reported after launch; a separate measure of trust was not available.
What I would validate next
Test incomplete outfits and weak pairings explicitly: when to show fewer recommendations, when to offer an alternative, and when to hide the component. These are follow-up validation questions, rather than additional shipped behavior claimed here.
05 / What shipped
An accessible grid with room to evolve.
The delivered component established the seed item first, then presented complementary products as a coordinated look. An accessible carousel let guests explore alternatives while the layout retained a consistent structure.
From one product to an outfitting journey ↗
Explore the strategy behind the recommendation and campaign-shopping experiences.
06 / Outcomes & reflection
More engagement with the outfit experience.
Historical team-reported figures. The original case study reports post-launch engagement of 5%, but does not retain a separate app result or the exact evaluation window. No causal claim about trust is made.
What I’d carry forward
Designing around recommendations means giving changing content a reliable structure. A clear seed item, predictable hierarchy, and accessible navigation make the experience understandable while the underlying system evolves.