Back to home

Back to home

Case Study

One System, Four Brands

Unified four global retail brands under a single scalable theming system—transforming how Gap, Old Navy, Banana Republic, and Athleta deliver distinct yet consistent ecommerce experiences.

Context (the reality of multiple brands)

  • 4 distinct brands owned by Gap, Inc: Gap, Old Navy, Banana Republic, Athleta.

  • All have unique visual identities, but nearly identical ecommerce flows.

  • Each brand has a product team + design agency → duplicate work + inefficient maintenance.

Challenges (the pain points)

Challenges (the pain points)

Delivery Speed

Every feature/fix was built 4 times.

Every feature/fix was built 4 times.

Every feature/fix was built 4 times.

Inconsistency

Every feature/fix was built 4 times.

Every feature/fix was built 4 times.

Every feature/fix was built 4 times.

Maintenance Cost

Updates, bugs, accessibility fixes multiplied across teams.

Updates, bugs, accessibility fixes multiplied across teams.

Updates, bugs, accessibility fixes multiplied across teams.

Brand Refreshes

Annual rebrands were slow and hard to implement.

Annual rebrands were slow and hard to implement.

Annual rebrands were slow and hard to implement.

The Opportunity

By leveraging Figma variables and modes, I proposed a unified component architecture that could visually adapt to each brand’s look and feel through theming — without rebuilding components from scratch.

Scalable Theming

Scalable Theming

Components that flex visually per brand.

Components that flex visually per brand.

Components that flex visually per brand.

Lower Maintenance Cost

Lower Maintenance Cost

Reduce redundant design/dev effort.

Reduce redundant design/dev effort.

Reduce redundant design/dev effort.

Shared Infrastructure

Shared Infrastructure

Build once, deploy everywhere.

Build once, deploy everywhere.

Build once, deploy everywhere.

Faster Refresh Cycles

Faster Refresh Cycles

Adapt quickly to rebrands.

Adapt quickly to rebrands.

Adapt quickly to rebrands.

Research

Gather references from existing design system components/styles, live product screenshots, & storybook implementations. Review agency vision work for brands to understand potential future needs. Research how other systems handle theming to support multiple brands.

Hypothesize

Brainstorm & record conceptual approaches to organizing variables/styles. Identify how component variables may need to work to accommodate brand divergence.

Workshop

Present and discuss research and ideas on how to organize and approach structure with stakeholders and designers/devs familiar with the current tools/experience.

Build

Map out variable structure and create variables to match within Figma.

Design

Break apart PDP buy box and rebuild components with new variables. Build POC of how theming enables brand divergence using variables/modes.

Solution

A multi-brand design system architected from a single foundation.

A multi-brand design system architected from a single foundation.

Shared components that adapt visually through variable modes.

Shared components that adapt visually through variable modes.

Unified documentation across Figma, Zeroheight, and Storybook.

Unified documentation across Figma, Zeroheight, and Storybook.

Impact / Results

75%

75%

75%

Faster multi-brand updates — visual refreshes that once took weeks now happen in hours.

Faster multi-brand updates — visual refreshes that once took weeks now happen in hours.

Faster multi-brand updates — visual refreshes that once took weeks now happen in hours.

40+

40+

40+

Shared components standardized for consistency and flexibility.

Shared components standardized for consistency and flexibility.

Shared components standardized for consistency and flexibility.

4

4

4

Brands unified under one scalable architecture.

Brands unified under one scalable architecture.

Brands unified under one scalable architecture.

50%

50%

50%

Less duplicated effort across design and development.

Less duplicated effort across design and development.

Less duplicated effort across design and development.

What partners said…

What partners said…

What partners said…

“This approach fundamentally changes how we operate as a multi-brand organization. Instead of rebuilding for every refresh, we can now evolve our brands at the speed of strategy.”

“This approach fundamentally changes how we operate as a multi-brand organization. Instead of rebuilding for every refresh, we can now evolve our brands at the speed of strategy.”

“This approach fundamentally changes how we operate as a multi-brand organization. Instead of rebuilding for every refresh, we can now evolve our brands at the speed of strategy.”

“The new system eliminated so much duplication. We’re now building faster, testing faster, and staying visually consistent across teams.”

“The new system eliminated so much duplication. We’re now building faster, testing faster, and staying visually consistent across teams.”

“The new system eliminated so much duplication. We’re now building faster, testing faster, and staying visually consistent across teams.”

“The system supported each brand’s distinct style without compromising its integrity — it felt like the technology was finally working for the design, not against it.”

“The system supported each brand’s distinct style without compromising its integrity — it felt like the technology was finally working for the design, not against it.”

“The system supported each brand’s distinct style without compromising its integrity — it felt like the technology was finally working for the design, not against it.”