Banana Republic Website
Fairwinds Agency was brought in to help reposition Banana Republic as the luxury offering within the Gap Inc. family of brands. In this role, my team met directly with BR’s leadership and translated those goals quickly and efficiently into new designs. We provided both short term, easy to implement UI improvements and conceptual work to serve as a North Star and push the brand forward long term.
The challenge was taking a chaotic and distracting UI and transform it into a modern, elegant, and user friendly experience that elevated the brand without losing functionality. In addition to bringing a fresh design perspective, we functioned as the bridge between internal teams. We met frequently with product owners, the UX team, and engineers to ensure that our designs were able to ship quickly.
MY ROLE
• User research, wireframing, prototyping, UI/UX design, UAT
• Built and maintained a design system
• Visual design, brand design
THE RESULTS
• Increased conversions, decrease in returned items
• Transition to a more refined and luxury brand identity to support brand initiatives
User Research
We asked our users to define the most important issues. We analyzed data to see where these problem areas arose:
1. Unclear user journey based on different user personas and goals (browsing vs. looking for specific item)
2. Banana Republic’s sizing is inconsistent and there isn’t trustworthy or helpful information to inform size making decisions.
3. Lack of advanced features like personalized content, try it on features, etc.
We focused on optimizing two different user journeys
Customers looking for inspiration, style guidance, or simply browsing to see what’s new
Create engaging, dynamic content that keeps them browsing, without hiding CTAs or muddying with too much marketing messaging
Customers looking for a specific item
Create a clear path to the item they’re searching for, helpful product information to facilitate a quick and confident purchase, decrease return rates
Product Detail Page
THE GOAL
Increase personalized content, address sizing issues, add merchandizing opportunities, decrease friction with item selector or “buy box”
One of the biggest challenges was redesigning the item selector to align with the minimalist designs we were seeing from luxury brand competitors. Banana Republic has a wide product assortment with large variations in sizing (Petite, Tall, Extended Sizes) so our challenge was to find a design that moved the brand forward but also wouldn’t break down in all use cases.
We presented 2-3 different options for the team and decided to A/B test two options to see which would perform better.
ORIGINAL VS. REDESIGN OPTIONS
HANDOFF
I mocked up a variety of use cases and met with the UX Team to go over the handoff, ensuring that we covered every scenario and met accessibility standards.
• Item sold out
• Selected swatch sold out
• Multiple size selectors
• Swatch wrapping to a second line
• Multiple marketing messages turned on
• Sale messaging
• Item name wrapping to second line
During this process I caught several instances where our initial design broke down for the user and adjusted the design accordingly.
We provided two different options for an additional merchandizing module. We provided a simple ‘Shop the Look’ module that we felt allowed the user to easily visualize an outfit as well as a ‘Complete the Look’ module that allows the user to get product recommendations based on occasion. Although this is more complex, it allows for greater personalization. The team decided to A/B test both options.
Homepage
THE GOAL
Redesign disjointed elements for better homepage cohesion and brand alignment, while keeping high conversion elements largely intact. Optimize for mobile experience.
BR’s homepage is redesigned seasonally for each collection and then adjusted frequently based on merchandizing strategy. Their team uses components like puzzle pieces, shifting the design in order to highlight certain categories or high performing products. Understanding BR’s internal process, I redesigned their existing homepage components for a fresh, minimal look that doesn’t require too much design lift.
During this phase I met consistently with the internal product and UX teams to understand their needs/limitations/goals and review prior UX findings.
I progressed to high-fidelity animated prototypes using BR’s newest campaign and product photography. I took the imagery in a new direction by cropping in tightly on certain details and paired that with minimalist UI, allowing the products to take center stage. The most intensive part of this project was creating the handoff file
COMPONENT OPTIONS BY CATEGORY
We provided multiple options for each component type
VARIATIONS WITHIN COMPONENT
Each component had to be flexible with the ability to choose between various CTA styles, hidden or visible product details, and adaptable to header styles and copy lengths. I made each component responsive across breakpoints.
Navigation
Worked with internal teams on site architecture, designed multiple options for navigation, and performed user testing to determine which to move forward with
Product Listing Page
Redesigned and tested product grid size and spacing, product cards, filter functionality, grid view change, designed multiple options for content blocks within grid, simplified and A/B tested product card design