Project Context

We were tasked with delivering the web and app experiences for three brands, Gap, Athleta, and Banana Republic, within three months, including localized Arabic designs. Each brand had unique styling rules, but most components and flows were consistent across brands.

The challenge was how to avoid duplicating work across brands while maintaining fidelity to global designs and accommodating regional differences such as delivery, pickup, and local BNPL options.

Add image suggestion: Visual showing the three brands side by side with their unique characteristics

Problem to Opportunity

Before this project:

• Each brand had its own design files and components, causing redundant work across the design team



• Tight deadlines and multiple brands caused slow design and development cycles



• Cross-brand inconsistencies created potential QA issues, especially with spacing, typography, and component styling



• No system existed to switch brand variables dynamically while preserving component behavior



Opportunity. Build a headless design system that could:

• Support multiple brands via shared components and variable overrides



• Speed up design and development for future campaigns or feature updates



• Ensure consistency and reduce QA back-and-forth



• Maintain the premium look of each brand while respecting global design guidelines



Add image suggestion: Flow diagram showing repeated effort before system and single system workflow after

Starting with an Audit

• Conducted a UI and UX audit of all existing brand apps and web platforms



• Analyzed individual brand systems, including variable-driven breakpoints



• Reviewed Tailwind CSS for reference on variable-driven design



• Created system-level documentation including atomic components, tokens, and variants



Insights:

• Most UI components were consistent across brands but required different styling variables such as color, typography, border radius, and spacing



• Brand-specific quirks, such as Gap never using bold fonts and Athleta having more rounded buttons, required flexible, override-friendly components



Add image suggestion: Screenshot or table showing component variations between brands

Biggest Challenges.

• Maintaining brand fidelity while sharing components



• Defining brand-specific variables for typography, spacing, and radius



• Supporting headless CMS and multi-brand swaps without redesigning components



• Meeting tight timelines, three months for web and app including Arabic designs



Add image suggestion: UX challenge diagram highlighting multi-brand, headless, and localization constraints

Product Thinking & Design Decisions

Component Structure for Headless Use

• Atomic components such as buttons, inputs, cards, forms, modals, navigation, headers, and footers



• Design tokens for base variables such as colors, typography, spacing, and radius grouped by category



• Brand overrides applied at page or component level



• Variants for buttons, inputs, and containers to accommodate different brand rules



Brand-Specific Decisions

• Defined different radii grouped into buttons, inputs, and containers for Gap and Athleta



• Gap had no bold font usage, so we created font styles and weights to preserve bold where needed for Athleta while switching brands



• Ensured spacing, hierarchy, and clarity of information were consistent across brands



Process and Documentation

• Created detailed guidelines for developers and PMs, making ticket writing easier



• Reduced back-and-forth during implementation



• Documentation included component usage, variable mapping, and cross-brand overrides



Add image suggestions:

• Atomic component examples



• Token map or variable hierarchy diagram



• Button variants for Gap and Athleta



UX Challenges

• Brand differences, rounded corners for Athleta versus zero radius for Gap



• Typography, bold text applied only for Athleta while preserving Gap style



• Timeline pressure, delivering multiple brands and Arabic localization in three months



Add image suggestion: Side-by-side comparison of buttons and typography for Gap and Athleta

Design Highlights

1. Buttons: Primary, secondary, and tertiary with brand overrides



2. Cards: Product cards, content cards, and banners



3. Forms: Inputs, selects, checkboxes, and radio buttons



4. Navigation: Mobile bottom nav, headers, and footers



5. Modals and popups: Alerts, promotions, and onboarding



6. Tokens and variables: Colors, typography, spacing, and radius



Add image suggestion: Annotated component gallery showing usage and variants

Impact

• Design velocity improved because designers could reuse components across brands



• Feature rollout speed increased as developers reused components with brand overrides, reducing duplication



• Cross-brand consistency ensured visual coherence across Gap, Athleta, and Banana Republic



• QA errors reduced, especially in spacing and styling



• Developers noted clearer information and PMs praised detailed documentation, reducing back-and-forth



Add image suggestion: Before and after workflow diagram showing QA reduction

Looking back…

What Worked Well

• Shared atomic components and variable-driven system enabled multi-brand efficiency



• Detailed documentation reduced implementation errors



• Brand fidelity maintained despite shared system



Future Improvements

• Expand system to additional brands beyond the three initial ones



• Extend breakpoints to tablet and desktop



• Add accessibility tokens and guidelines for dark mode



• Introduce component library in Figma or Storybook for easier collaboration



• Explore dynamic layout adjustments for Arabic versus English layouts



Add image suggestion: Concept mockup for extended breakpoints or new brand