BANANA REPUBLIC APP

AI OUTFIT BUILDER

OVERVIEW

MY ROLE

Fairwinds Design Agency was enlisted to elevate Banana Republic’s e-commerce experience, re-establishing it as a next-level luxury brand within the Gap Inc. group. The AI Outfit Builder is a new feature part of the BR Fashion App redesign, where I worked hands-on to design an end-to-end experience that is both user-friendly and innovative.

The challenge was to leverage generative intelligence to bridge the gap between how products appear on a BR model and how users envision them on themselves by allowing users to create and modify outfits on a figure that matches their exact size. Bringing a fresh perspective to the design, our team held regular meetings with BR’s leadership, product owners, the UX team, and engineers to ensure our designs were both comprehensive and forward-thinking.

Research, Wire-framing, Prototyping, UX/UI design, Component Library

TIMELINE

3 Week Sprint + Iterations

GOAL

Minimize friction in fitting and styling, enhance product merchandising through upselling, provide personalized recommendations, and empower users to make easy, confident online purchasing decisions.

HYPOTHESIS

A common hesitation in online fashion shopping -
“The product looks great on the model—but will it look good on me?”

To bridge this gap between expectation and reality, a virtual try-before-you-buy experience, paired with personalized size and style recommendations, is needed. By enabling customers to visualize how items would fit their unique body type and providing personalized recommendations based on their measurements and preferences, we can significantly enhance the shopping journey.

The impact:

  • Boost customer confidence and satisfaction

  • Reduce return rates

  • Increase conversion and retention

Following alignment with BR leadership, we landed on a Personalized Outfit Builder powered by AI and generative intelligence, integrated with a virtual 3D model.

We also explored a Virtual Try-On experience, allowing users to upload a photo and visualize BR products styled on themselves. While conceptually engaging, this approach posed several challenges: it requires highly controlled precision to accurately scale user images and generate high-quality renders. Additionally, acquiring consistent, high-resolution user photos can be a significant hurdle—poor image quality or inconsistent sizing could compromise the entire experience.

Given these limitations, the Personalized Virtual 3D Model emerged as a more scalable, elegant, and brand-aligned solution—delivering a refined, immersive experience in line with BR’s luxurious identity.

DESIGN

Personalized Shopping Flow

  1. Capture Size & Style Preferences
    Users provide their sizing details and style preferences to enable tailored recommendations.

  2. AI-Recommended Outfits
    Based on inputs, AI curates personalized, styled outfits to inspire and guide the user.

  3. Complete Your Look
    Suggests complementary pieces to enhance the selected outfit, encouraging full-look purchases.

  4. Build Your Own Outfit
    Users can also start from scratch, mixing and matching items using the Outfit Builder for a more hands-on experience.

One of the biggest challenges of the design was optimizing for mobile screen space while prioritizing the products and 3D model view. We explored two main directions: Top-and-bottom layout and Side-by-side approach.

TOP-AND-BOTTOM

PROS

  • All swatches exposed at once.

  • Familiar, intuitive interaction.

  • Cleaner, more breathable layout.

  • More products in view with expandable options.

CONS

  • Model image shrinks during interaction (can be expanded)

  • Product images appear slightly smaller

SIDE-BY-SIDE

PROS

  • Model image stays large.

  • Product images are slightly larger.

CONS

  • Fewer products visible (w/option to expand)

  • Swatches collapse into a carousel after three.

  • Less space around the model; may crop larger items (like bags).

Both approaches had their advantages. The side-by-side layout allowed for a larger model and slightly bigger product images, while the top-and-bottom layout provided a more spacious and open viewing experience.

After weighing the trade-offs, the final decision prioritized familiarity, clarity, and visual impact provided by the top-and-bottom layout.

AI-Driven Look Completion:
Personalized product recommendations to finish your outfit, driven by both smart algorithms and designer expertise.

High-quality 3D image rendering & swapping: Advanced high-resolution 3D image population and dynamic model swapping, with support for an expandable model view and smooth 3D controls.

DESIGN MOCKUPS

High-Quality, True-to-Size 3D Model
A realistic, accurately scaled 3D model tailored to each user’s body measurements, enabling a highly personalized try-on experience.

Customizable & Personalized Outfit Recommendations: This allows users to modify and personalize suggested looks, influenced by intelligent user-driven data insights.

Build Outfits from Scratch: Whether users have something in mind or are starting fresh, support clearer choices with larger product images and easy comparisons as needed.

RESEARCH

USER PROFILES

Two Primary User States :

  1. "I know what I want" – Users who have a specific product in mind and want to see how it looks on them.

  2. "Inspire me" – Users seeking outfit ideas and visual inspiration, along with how those looks would appear on them.

MENTAL MODEL

Our team held collaborative sessions, looking at the problem from a user’s perspective to freely share ideas and uncover potential insights that could inform the design.

COMPETITIVE ANALYSIS

I conducted a competitive analysis of leading tools designed to help users visualize outfits, to inform the solution. Key platforms I looked into included Suit Supply, Google Shopping Try-On, Uniqlo, and StyleMe.

  • Suit Supply: Offers high-quality rendering on 2D models, with smart product suggestions. Users can select from multiple virtual models with different skin tones—creating a more inclusive and realistic experience.

  • Google Shopping Try-On: Provides a range of model sizes to match user body types, but lacks the ability to mix and match items across categories to build complete outfits.

  • Uniqlo: Allows users to mix and match products to build outfits, but does not incorporate a virtual model—limiting visual personalization.

  • StyleMe: A virtual fitting room plugin that generates a customizable avatar based on basic measurements and body shape, offering a more personalized experience within partner retail sites.

FULL PROTOTYPE

FUTURE POTENTIAL

ENHANCED PERSONALIZATION AND VISUAL EXPERIENCE

  • High-quality, lifelike AI-generated backdrops to elevate the realism of outfit previews.

  • AI-selected model shapes and skin tones to match user preferences and promote inclusivity

  • Dynamic “Complete Your Look” refresh, offering updated suggestions based on selected items

  • Advanced filtering for recommended outfits, allowing users to sort by occasion, primary product, color, and style—giving them greater control and customization