01 / At a glance
A direct path from inspiration to product.
The short version
Guests could see a look they loved in a campaign image, yet still struggle to find the products. I designed a reusable pattern that made those images shoppable across web and app.
My contribution: interaction design and research partnership, followed by component definition with engineering, the accessibility council, and the design systems team.
The delivered system combined an explanatory entry point, product hotspots, and responsive product information. Guests could explore the look while staying connected to the campaign.
02 / The challenge
The image created desire. Finding the product broke the flow.
Campaign photography inspired guests, but the featured products were difficult to identify. People left the campaign to search for something they had already decided they liked.
The design needed to make products discoverable while preserving the editorial image. It also needed to work across varied photography, screen sizes, sale states, and assistive technologies.
03 / Research & direction
Test the invitation before polishing the component.
I partnered with research on three complementary tracks to understand whether guests recognized the interaction and could use it.
We tested two simultaneous entry points: dots placed on products and a separate garment icon. The dots attracted the clicks. The extra icon added ambiguity about where to begin.
What changed: we committed to one clear invitation. The entry CTA introduced the interaction, then product hotspots revealed the items in the image.
04 / Design decisions
A small interaction with a system behind it.
Explain, then reveal.
The initial “Shop this look” label made the action understandable. Once the pattern was introduced, a compact state could preserve more of the campaign image.
Design for changing product information.
I worked with the design systems team on tooltip width, type, price hierarchy, sale-price treatment, and stacking. The component needed to stay legible as merchandising content changed.
Define accessibility in the interaction model.
The design included keyboard focus behavior and responsive layouts. Arrow controls retained focus; pagination could move focus to the first item on the selected slide.
Keep hotspots visible across unpredictable imagery.
We tested the hotspot against brand colors, fabric patterns, and different opacity levels. Visibility had to hold up beyond a carefully selected campaign image.
05 / What shipped
A reusable shopping pattern across campaign moments.
The final experience connected the entry CTA, hotspots, and product information into one flow. We explored several ways to display a complete look before delivering a simpler tooltip and shopping experience.
One strategy across outfitting ↗
See how the shared outfitting framework connected this experience to product-page recommendations.
06 / Outcomes & reflection
A clearer connection between discovery and purchase.
Historical post-launch results reported by the team. The exact measurement window and revenue attribution method are unavailable; these figures describe the team’s reporting rather than an independently verified causal effect.
What I’d carry forward
Bringing assistive-technology users into the research helped us simplify the interaction. Defining a new component also required alignment with the teams responsible for maintaining it. The durable outcome was a shared pattern with clear behavior across content, platforms, and input methods.
