Levis // Next Gen Redesign
Project:
As Levi’s continued to scale its direct-to-consumer business, the existing site architecture and design system became limiting factors. The Next Gen project reimagined Levi’s online flagship not only as a brand refresh, but as a foundational shift toward a more scalable, performant, and expressive ecommerce platform.
The work focused on evolving the visual language while enabling a new headless, modular system that could support faster iteration, improved performance, and deeper collaboration across product, marketing, and engineering, ensuring the site could move forward without sacrificing stability for core replenishment customers. Incremental visual updates alone would not have addressed these constraints, making a system-level change unavoidable.
System-Level Problem:
As Levi’s digital business scaled, the existing site architecture became a limiting factor. Pages were heavy, tightly coupled, and increasingly expensive to evolve. Marketing efforts required bespoke builds, engineering cycles were long, and performance suffered as content and presentation were deeply intertwined.
At the same time, the launch of the Levi’s app established a more expressive, modern interaction model, creating pressure to evolve the site without disrupting its core replenishment driven audience. Incremental visual updates alone would not solve these constraints.
Project Objectives:
Establish a Scalable Design System
Create a modular visual and component system that could support headless delivery, reduce bespoke builds, and enable marketing and product teams to scale campaigns without heavy engineering overhead.
Balance Brand Expression with Performance
Evolve the site’s visual language to feel more expressive and modern while improving load times, reducing page weight, and maintaining a fast, reliable experience across the funnel.
Enable Faster, Cross-Functional Delivery
Align product, marketing, design, and engineering around a shared system that streamlined collaboration, reduced handoffs, and supported faster iteration without compromising quality.
Why Headless and Modular:
Moving to a headless CMS allowed us to decouple content from presentation, enabling faster iteration, improved performance, and greater flexibility across the funnel, including critical moments like checkout. API driven delivery reduced full page reloads and supported smoother transitions, while a modular system gave marketing teams the ability to scale campaigns without constant engineering involvement.
This work required close collaboration across product, marketing, design, and engineering to ensure the system supported brand expression, performance goals, and long term scalability.
Objectives & Insights
Our brand principles for the redesign
CMS Module Journeys
To support this evolution at scale, the team focused on rethinking the underlying system that powered how pages were built, delivered, and iterated on.
Example: Our product page standard on the left and a collaboration product page on the right.
Module Journeys
The expressiveness and performance benchmarks established by the app helped set the direction for how the site could responsibly evolve within a more modular system.
Here are examples of how modules can be used based on a different themes such as sustainability, promotions, collections etc.
This shift created a foundation that allowed teams to move faster, reduce technical overhead, and evolve the experience incrementally rather than through disruptive redesigns.
We evolved the Levi's personas into three distinct consumers that span our newest aspirational audience through our foundational customer base.
