Product Details Page Redesign
lululemon
Role
Manager of Product Design,
North American E-commerce
North American E-commerce
Contribution
Co-Creators
The Opportunity
The Product Details Page (PDP) is the transition point from upper to lower funnel, where the user decides to add to bag/cart and purchase. Traffic to these pages was increasing month over month while traffic through the traditional user journey from homepage to category details page was declining. In addition to this behaviour, mobile traffic continues to rise and the need for a mobile focused design projected to drive significant revenue growth.
The Solution
We focused relentlessly on each component of the product details page.
Our mantra was:
Our mantra was:
Match guest need by delivering considered micro experiences on the PDP.
On mobile, viewport 01 (what the user sees on first load of the page) was the most important screen to get right. Our solution aimed to be quiet and get out of the users way so they could experience the product and make adding to their bag/cart easy.
On desktop we used the increase in screen size to add a recommendations module to assist the guest in finding the right product and hopefully increasing units per order.
Behaviour indicated that if a user scrolled past the first viewport (which only about 50% of users did) more information was required before conversion. Our goal was to value the users time. We designed a progressive education strategy that made key information scannable using iconography with further information in accordions to continue to educate the user where they needed.
We didn’t just make the design of viewport 02 respond to a larger screen size, we celebrated the product and adapted the design to maximize the impact offered by the form factor.
We didn’t just make the design of viewport 02 respond to a larger screen size, we celebrated the product and adapted the design to maximize the impact offered by the form factor.
Further viewports include Outfitting modules, similarities and recommendations, and user generated content – all of which are controlled by personalization algorithms that use machine learning to get smarter over time.
The Process
We started with a design sprint that included Product Design, Product Management, Engineering, and Frontline Staff. It was an amazing way to ensure we were aligned as a team as well as reducing our blindspots. In fact, we identified a significant issue with an early design concept that would have hurt conversion as well as required development resources to re-engineer a component.
The team proceeded with an experiential analysis of product description pages we liked and didn’t like. Using this information we developed a shared language and understanding of the direction we were heading.
From this point our lead Product Designer worked on each component which we reviewed weekly. This work was shared at peer reviews and in product team reviews. On a bi-weekly cadence I would share our progress using high-fidelity, clickable InVision prototypes with a steering committee that consisted of the executive leadership team.
After we’d user tested much of viewport 01 and viewport 02 and had high confidence in the work we began presenting the work to the EVP and CEO on a quarterly basis. Requirements were nailed down, epics and tasks were created in JIRA, and A/B tests were developed. The majority of the A/B tests showed positive results and these components are being productized in advance of Q4 2019.
