lululemon

Providing shoppers a quick and easy way to complete the look by presenting product recommendations at the right time during their path to purchase.

SCOPE

• UX Design

• E-Commerce

• Personalization

THE CHALLENGE

Customers can’t easily browse other related products to complete a look.

The “You may also like” section below the buy stack is disconnected and has no relation to the product on the actual page. lululemon also misses a big opportunity to cross-sell and promote related products.

VARIANT 1

Cross-link below the image scroll

In this “Style this with” variation, we simply add links to two other products below the scrolling image module that is left of the sticky buy stack.

Since the existing image interaction is already encouraging scroll depth, users will easily make the connection to related products that follow.

VARIANT 2

“Style this with” Stack

A more streamlined, complementary products stack sits below the product detail. The addition of more details from the product pages include color options and product descriptions.

VARIANT 3

Viewfinder — My favorite!

Similar to variation 2, but making it more exciting with interactions!

A “viewfinder” to the left of the product cards shows an alternate view of the product, and changes when visitors hover over different colors and products.

NEXT STEPS

Build variations based on traffic, and test the designs, of course.

Although we didn’t test this hypothesis with the client, I still loved going through the solution discovery process of designing product page solutions with personalization UX in mind.

Pick our favorite, then test the variant. If given the opportunity, we would have narrowed the variations down to our favorites and run an A/B test, measuring lifts to order conversion rate and average order value from product detail pages.