Banana Republic Website

Fairwinds Agency’s collaboration with Banana Republic began with a request for an end-to-end website design for their new venture, BR Home. Once we’d successfully handed off BR Home to their development team, we were asked to continue with a redesign of their apparel website. The goal was to seamlessly weave storytelling into the shopping experience, fostering deeper engagement. The challenge was to take a chaotic and distracting UI and transform it into a modern, elegant and user friendly experience that elevated the luxury feel of the brand.

MY ROLE

• User research, wireframing, prototyping, UI/UX design
• Built and maintained a design system
• Visual design, brand design

THE RESULT

Increased conversions, decrease in returned items, increased user engagement and brand loyalty,

transition to a more refined and luxury brand identity to support brand initiatives

  • We asked our users to define the most important issues they had with the website. 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. Sizing is inconsistent and there isn’t trustworthy or helpful information to inform size making decisions.

    3. Lack of advanced features like personalized content,

THE GOAL

Increase personalized content, address sizing issues, add merchandizing opportunities, decrease friction with item selector or “buy box”

Homepage

THE GOAL

Redesign disjointed elements for better homepage cohesion and brand alignment, while keeping high conversion elements largely intact. Optimize for mobile experience.

Banana Republic’s homepage is typically designed like most major eCommerce companies - as much by the marketing team as the designers, often with last minute changes based on product strategy. They use a series of components like puzzle pieces, shifting their order frequently week to week or even day to day, in order to highlight certain categories of product. Understanding the limitations of BR’s internal process, I redesigned Banana Republic’s existing homepage components for a fresh, minimal look that their marketing team could still easily adapt through each launch.

Working in sprints with my team at Fairwinds, I began by mapping the user journey and creating rough wireframes. 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 wireframes and animated prototypes using BR’s newest campaign and product photography, but took the imagery in a new direction by cropping in tightly on certain details. I paired that with minimalist UI, allowing the products to take center stage.

DIFFERENT LAYOUT EXAMPLES

I demonstrated several different layouts (across breakpoints), using the same few components in different ways - highlighting the versatility within each component.

This is a simplified example, but in my handoff I provided detailed annotations for the developers and best practices for production team members.

COMPONENT OPTIONS BY CATEGORY

This shows four different options for product/category spotlight components

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.

Product Detail Page

A/B Testing

Per the request of leadership, this redesign of the item selector was a drastic overhaul from their previous design or a ‘North Star’ design exercise. Just as our contract with BR was ending, they started A/B testing the previous design against the new design. While the results were promising, but there were too many variables.

I suggested a phased approach to updating the item selector in order to thoroughly test each variable. I am confident that we set the UX team up for success in navigating towards a solution that not only moved the brand forward but also decreases pain points for the users and leads to increased conversions.

The biggest challenge for PDP was redesigning the item selector, or buy box to align with the minimalist designs we were seeing from luxury eCommerce competitors. Banana Republic has a much wider product assortment with larger variations in size than most brands, so our challenge was to find a design that moved the brand forward and wouldn’t break down in all use cases. In addition, we focused on a design that would bring as much information above the fold as possible for mobile and would be easily digestible on scroll.

We presented 2-3 different options for the team and moved forward with a flexible design that allowed for ample white space, left aligned text, and improved hierarchy of information.

Pressure Testing

I mocked up around 15 different use cases to show how our design would respond and adapt. These use cases included: Item sold out, selected swatch sold out, multiple size selectors, swatches wrapping to a second line, multiple marketing messages turned on, sale messaging turned on, item name wrapping to second line, etc.

During this process I caught several instances where our initial design broke down for the user and adjusted accordingly.

Optimizing for Mobile

A subtle, but significant change that we made to the design was to incorporate product details into a panel instead of a tabbed design, allowing us to really blow these out with useful content that was being glossed over on desktop and often completely lost on mobile. The panel design allowed for much easier access to information for the mobile shopper.

We were able to mirror this panel in our
app design for PDP