About this project

Banana Republic is an accessible luxury clothing and accessories retailer owned by the American multinational corporation Gap Inc. The revenue of BR last year was way behind from the sister brands and the brand director decided to act radically - completely change in-store and online experience and go though a complete rebranding.

BR asked UX team to redesign the web experience and stat with the product page.

Redesign Product Description Page for Banana Republic brand to help establish BR as an authority in styling. Target new customer persona “Expressionists” who are trendy shoppers, confident in style choices, taking fashion cues from high-fashion designers and celebrities.

"We visually connect the past to the present and create the foundation for our future touchpoint through our refreshed brand identity. We are a luxury brand at a value precipitin. We communicate luxury not through price but through the story...xa

Role

UX Designer: gather requirements, research, information architecture, wireframing, prototyping, interactions, pixel-perfect UI, design specs, accessibility WCAG AAA

Team

UX Designer (1), UX Manager (1), Brand representative (1), Project Manager (1), CI (2), Developers (20)

Duration

November 15, 2021 - February 15, 2022

Tools

Figma, Principle, Miro

Starting point

Starting point: all 4 brands BR, GAP, Athleta and ON used the same template and the difference between then were photography, font family and accent colors. So there was no individualization or personalization in terms of UX.

For e-commerce sites, the product details page is the most crucial part of the website. Customers land here looking for things that make or break the sale, and they should be able to do so as easily and enjoyable as possible. UX for e-commerce is different then from other spaces. The goal is not to make users add to bag as quick as possible with less clicks. Instead, the goal is to make the users want to buy the product, hook them with the benefits of the product, make them stay of the page longer, explore the item and make the shop the look, so they purchase more items.

How might we ...

...use the Product Description Page (PDP) to help establish Banana Republic (BR) as an authority in styling?
...create clarity while allowing for beautiful product presentation?
...enable more visual information that strikes a balance between storytelling and transition?
...bridge gap between old BR and new BR for current customers?
...design and prioritize features on the PDP to address needs for customers?
…simplify product information?

Besides the task, it was really important to restructure it on backend so we could move towards personalization of the PDP based on the user behavior, persona, or the entry point (though search, natural landing, add, etc). It could be done by modularization.

BR representative know the brand goals and priorities, roadmap, know who to contact to get info needed (longest item name for edge case scenarios, marketing flags list, photography sizing, etc, etc) and also communicate with brand leaders( general managers) for feedback so we are all on the same page along the way. Vision of brand and how the prioritize features.

Process

Key activities

Listing of customer and brand goals
Customer flow and entry points alignment
"Lego" exercise, product description page structure vision
Inspiration gathering
Eye tracking and heat map

Customers insight learning incorporation

Design evolution

Brand Vision was to go Dark Mode

What was the impact?

Add to bah button interaction increased by 16%

Improved user experience - it become much easier to shop

Page re-architecture - page personalization become possible thanks to modularization

Now sister brands can be unique looking

Brand got its own esthetic that will help

Establish BR as an authority in styling