Lululemon
Shopable Editorials Images
Make it easy for guest to find and shop all products paired in our inspirational editorial & lifestyle images on home and story pages.
Key Guest Needs
Guests want style inspiration, education and expert advice. —“On lululemon homepage banner, i saw a model wearing an outfit that i would like to purchase as is.”
Guests want "Shop similar looks feature" to find and buy products easily. —“I don’t know how to buy the items from inspirational look so I can bring my inspiration to reality.”
User Research
Objective — This study sought to discover and learn our guests’ behaviors when interacting with shopable images. Are the prototype designs ideal experiences for guests to add products to their bag? What are potential opportunities to explore within this journey?
Hypothesis — Guests are inspired by editorial images and looking to find products worn in editorial imagery. By making it easy for guests to find and shop the products, we can increase engagement, ATC and improve guest experience.
Concepts tested in research
Moderated Usability Test — To Identify problems in the design and uncover opportunities for improvement for iterations. (n=6, Female, HHI 100K+, 25-45 age group, US and Canada, lululemon guests)
Click Test Analysis — To understand how guests behave on a webpage from their very first click to define the perceived visual hierarchy the elements on a page. (n= 100, 25-45 age group, all gender, US, online shoppers)
Moderated Accessibility Interview — To learn how the UI is used by people with disabilities and use assistive technologies. (Alternative navigation (n=1), OS magnification (n=1) , screen reader (n=1))
Design Exploration
Dots —To get the dot design right, we explored different sizes and opacity to ensure that the hotpots stick out on any kind of image or background color or fabric pattern
Tool Tips — For the Tool Tip design, we collaborated with Accessibility councel and DSM to apply specific accessibility requirements and pattern. To accommodate for mobile and desktop real-estate we explore different widths and heights.
Final Design
High fidelity designs for all channels. Web desktop, mobile and the iOS experience. Interactive product tags (dots) was recognizable and intuitively directed guest to a clear CTA.
Desktop
Mobile