Evolving Levis for a new generation

Evolving Levi's for a new generation

Website • E-commerce • UI Design • Agency

Introduction

What began in a San Francisco storefront and became a wholesale staple is now an iconic global brand with a direct-to-consumer approach. Today, DTC sales make up over 30% of the Levi’s revenue, creating an opportunity for the company to enhance its e-commerce experience. Our task was to redesign Levi.com by optimizing the user experience, extending their brand digitally, and fostering brand loyalty through improved product storytelling.

The Process

To develop a clear path to achieving our project goals and KPIs, we first needed to understand the eCommerce landscape, the current Levi.com IA, stakeholder perspectives, and key user journeys. We used findings from this research and identified key insights to guide our efforts.

Enable customers to shop and purchase seamlessly on mobile, to support traffic conversion goals
Differentiate and elevate the premium aspects of Levi.com to inspire customers and stand out amongst other retail brands
Build experiences and interactions that foster a relationship with the Levi’s brand while clearly showcasing product
Create frontend components that can be updated easily to better adapt to market, trend, and assortment changes

Stakeholder workshops

Roles & Responsibilities

As lead visual designer, my primary focus on the user interface design in collaboration with my UX, writing and technology partners. I also managed & collaborated with brand and UX stakeholders and was responsible for leading design workshops and presenting work.

Team

Creative Director, Strategy Director, Tech Director, 6 designers (UX, UI, design systems, motion, content), Account Manager, Producer, 3 Engineers , 40+ Levi’s stakeholders (Across Geos & disciplines) + 3 Embedded UX designers

Challenges

Timeline and scope, educating non-UX stakeholders about process and technology, consideration of sub brands & geos outside the scope, lack of visibility into internal processes

Creating an emotional brand connection through commerce

Levi's holds a strong position in the e-commerce landscape with their current strategy prioritizing sales over emotional connection. After looking at the competitor landscape, we crafted the approach to use content as a conversion tool that fosters loyalty, driving users to pages where marketing content, editorial content, and shoppable products co-exist. Rather than split the path at the top of the funnel, this blend of content and commerce allows users to learn, engage, and shop all at once.

Mapping content placement on the PDP

Designing for digital

The Levi's brand boasts a long and rich history filled with captivating content. I collaborated with the brand team to bring their vision to life on the website, a surface that they previously had little input on. To start we worked together to establish brand and experience principles to help guide our explorations, from there I lead a design exploration sprint with the team.

For the UI's visual direction, I expanded on the design work I'd done on the Levi's app project and adapted it for web. It was a unique opportunity to continue to refine the design system & create a cohesive look and feel across platforms. I also worked alongside engineering to help create an expansive component library, simplifying the process for marketing teams to create and edit pages.

Marketing modules

Optimize UX for conversion

With the new content strategy and visual direction in hand. We aimed to address improve the ux and solve for key pain points of the core of Levi’s business Levi’s business: the product pages.

Current size and fit information does not effectively reassure customers about proper fit.
Users express concerns about the lack of transparency regarding values and manufacturing processes.
Finding relevant products can be overwhelming.
Checkout, purchase, and promotional flows can feel confusing and disconnected from shopping experience.

New PDP design

Product Page Improvements

Building upon an already solid foundation, I improved the UX/UI by ensuring the buying controls were always within a single viewport. To help user make informed purchasing decisions I integrated size and fit education, using insights from reviews to clarify fit differences and worked with the Levi's team to develop a badging and promotion approach.

I designed new storytelling modules about the category, collection, and fit family where a product exists, and found ways to highlight sustainability content, bringing more transparency into Levi’s ongoing efforts.

New PLP design

Product Listing Page Improvements

On the product listing page, I collaborated with Levi's UX and business stakeholders to redesign the product cards. Our aim was to facilitate quicker product discovery by improving the information hierarchy, enlarging product images, and introduce better on page filtering & predictive search.

Promotion flows were a key consideration throughout the shopping journey. Given the complexity and scale of Levi’s promotional strategy, we designed a flexible kit of parts for promotional messaging to ensure that it remained clear and consistent from shopping to check-out.

Member Exclusive sign-up & Ecosystem

The result

At the end of our year long engagement the result was a beautiful, swift, and seamless experience for shoppers that’s optimal for mobile and built to support an ever-increasing share of Levi’s revenue. Within a few days of launch in the US, the conversion ratio on levi.com was up nearly 7%, and product views increased by 20%.

Press: Levi's Brings the In-Store Experience Online for Modern Shoppers - Adweek