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