Matching Sets

ROLE

Product Designer

Project Manager

TLDR

Help users discover, visualize& purchasing color-matching outfits. Presented design strategy to senior stakeholders and received green light for the project.

TEAM

1 Design Manager

1 Product Manager

TOOLS

Figma

Confluence

TIMELINE

Nov 2024 - Feb 2025

HOW THE PROJECT STARTED

Search trends revealed that color-matching outfits were a top user interest — yet the current shopping journey is fragmented, frustrating, and requiring repetitive steps and guesswork

SYNTHESIS

User Needs

- Easily browse, visualize, and buy color-matching outfits
- Avoid repetitive browsing and guesswork
- Feel confident and inspired

Business Needs

- Capitalize on strong user interest in matching sets
- Increase key metrics: Units per transaction (UPT); Average order value (AOV); Conversion rate

02

Research & Insights

SECONDARY RESEARCH

Key Insights

Due to time constraints, I relied on secondary research—reviewing findings from earlier user interviews—to guide my design decisions. The discovery process was driven by three questions:

• Do users shop by color first or by product?
• Do users prefer to create their own outfits, or rely on Lululemon to provide sets?
• What other shopping behaviors influence their decisions?

COMPETITOR ANALYSIS

Apparel Brands

SYNTHESIS

Design Principles

I derived these principles by reviewing competitor designs and applying insights from our secondary research. By comparing how others display sets (or don’t), noting where users tap or click repeatedly, and understanding Lululemon’s emphasis on bold color, I was able to identify gaps and brand-aligned needs that became the three guiding principles.

03

Ideation & Designs

THINKING HOLISTICALLY

User Journey & Information Architecture

Before diving into design, I reviewed the Lululemon app’s information architecture to pinpoint the most logical places to place the matching-sets related feature. This ensured the new experience fit seamlessly into existing navigation flows.

IDEATION BASED ON USER JOURNEY

Design Concept #1 

In the user journey, the search results page displays several color related cards, so I lean into that and came up with a conceptual “Color” page where users can dive straight into sub-tone palettes. This interaction point aligns directly with user intent, letting them explore related hues without extra steps.

IDEATION BASED ON USER JOURNEY

Design Concept #2

Another exploration was: once a user selects a product they like, we offer a “Pair it with” feature that recommends same-color pieces and displays them together in a unified layout, letting the user visualize the complete outfit as a cohesive set.

IDEATION BASED ON USER JOURNEY

Design Concept #3

In another logical touchpoint, when a user searches for sets, I added a button that lets them add both the top and bottom from a set directly to their cart in one click.

REALITY CHECK - SYSTEM & RESOURCE CONSTRAINTS

While existing flows felt like natural fits in the user journey, they were owned by teams with packed roadmaps and conflicting priorities & KPIs. To move forward, this feature had to live as a standalone.

IDEATION FOR A STANDALONE EXPERIENCE

Design Concept #1

This version of the Matching Sets module was designed to address everything we learned about user behaviors and preferences such as a significant percentage of users would like to shop by color first, learning from Zara to enable easy purchase of multiple items in an outfit, providing on model imageries as well as curating pre-made sets for users to choose from.

While this concept aligned closely with our research, stakeholder and technical reviews showed that it would require lots of new components, additional model photography, and content assets. To meet our launch timeline, I needed to explore alternative options that are more implementable solution. 

IDEATION FOR A STANDALONE EXPERIENCE

Design Concept #2

From a feasibility standpoint, I designed an alternate solution that still satisfies core user needs: browsing by consistent color, easily adding multiple items to the cart, and it also lays the groundwork for future expansion (for example, adding accessories under the same color logic).

However, during stakeholder reviews, this type of shelf component and interaction was too generic and doesn't sufficiently showcase Lululemon’s signature color-centric branding. Consequently, we chose not to move forward with this iteration.

IDEATION FOR A STANDALONE EXPERIENCE

Design Concept #3

Earlier explorations surfaced two issues that drove the need for a third variation:
- Cost and complexity: Our first concept—hero images for each hue with in-context model photography—perfectly matched user insights but demanded extensive new components and a full photoshoot, which wasn’t feasible within our timeline or budget.
- Brand expression: The second concept used a standard shelf layout to simplify implementation, but stakeholders felt it failed to reinforce Lululemon’s vibrant, color-centric identity.

During reviews, this version received the strongest buy-in from the team. However, it introduced an extra step: users must down through multiple screens to access a specific secondary shade, and switching to a different hue requires exiting and reselecting. While this solution satisfied both brand and resource constraints, the multi-step flow revealed an opportunity for further simplification.

MVP SOLUTION

Matching Sets Builder

Enables users to pair any tops and any bottoms within the same color way to create a color matching look.

This version best embodies our design principles:

Prioritize set visualization: We present the complete outfit upfront, eliminating the need for users to mentally piece items together.
Minimize friction: By reducing extra taps and page hops, users can effortlessly browse and purchase matching sets.
From a business standpoint, this approach directly supports our goals of increasing average order value and boosting units per transaction. 

rearch out to learn more

moseswan45@gmail.com