Levi’s
Blending Content and Commerce
Project: Website
Role: Senior Designer
Year: 2020
Instrument partnered with Levi’s to help them continue evolving for a new generation and digital age. The Next Gen design system was created and designed to unite the entire Levi’s ecosystem, and most recently, a completely reimagining of levi.com.
Navigation
During Sprint 1, we focused on exploring navigation and search, which resulted in the creation of a few considered concepts. At this stage, the concepts did not address every UX detail, but they began to form models and provide what we needed to create an elegant navigation that ultimately meets both user and business requirements.
Objectives
Clarify the use of navigation (categories) and filtering (style + details).
Emphasize discoverability of content and customization.
Create browsing consistency across gender, category, and style.
Bring consumers into the experience more quickly.
Progressive Model
Based on client feedback and user testing, the refinement of initial concepts led us to the progressive navigation model. A model that intentionally reveals pathways and reduces information overload. This system creates an inherent parity between mobile and desktop experiences.
Flexible & Focused
The progressive model allows users to enter a focused navigation state — one that encourages quick entry into gender doorways, as well as access to secondary taxonomy. On desktop, hovering over top-level navigation opens the progressive focus panels, allowing users to quickly access content.
Search Recommendations
Research on general user preferences and expectations, with regards to search, were primarily based on Baymard market research and Instrument testing. From this research we concluded that search should be:
Standardized
Google and Amazon set the bar for user expectations with regard to search, and most other ecommerce sites fail to meet that expectation. Building with the robust functionality of these standards in mind will help users establish more trust in the search experience.
Accurate
Search must evolve to return accurate baseline search queries before it should be emphasized as a priority feature on levi.com. Currently, there are a high-degree of irrelevant and inaccurate results returned.
Dynamic
Results should include visual and text results to help visitors find what they are looking for quickly and efficiently. Additionally, predictive and autocomplete text should feel somewhat personal and related.
Expansive
The experience should feel expansive and support a broad range of search queries, such as being able to search for multiple products, categories, collections, sizes, and price points.
Product Listing Page
The experience should feel expansive and support a broad range of search queries, such as being able to search for multiple products, categories, collections, sizes, and price points.
Objectives
Encourage users to browse and shop available products. Do so in the context of the collection, campaign, or category in which they exist.
Integrate editorial content, educating and engaging users like never before. Use content to break up/complement the product grid instead of relegating it to the top of the page.
Offer users at-a-glance education as to the differences between one product (or product grouping) and the next. Through contextualization, filters, and/or sort, make it easy for users to narrow things down based on their unique wants and needs.
Product Detail Page
Product pages are critical conversion points and will be iterated on over time by the Levi’s testing and business teams. We are continuing to expand our modular design system to support that need. The system will account for functional parity, as well as net-new interactions and/or content types.
Objectives
Motivate users to convert, providing the information they need to confidently purchase a given product.
Better integrate size and fit education — including insights pulled from reviews — in order to clarify the differences between fits.
Layer in sustainability content, increasing awareness of Levi’s efforts toward sustainable garment production.
Tell more of a story with regard to the category, collection, and/or fit family in which a product exists.
Expose users to similar and/or complementary products.
Shopping Bag
First and foremost, we designed for functional parity. Through the Next Gen design system and subtle strategic UX improvements — including information hierarchy — we focused on making the shopping bag experience as intuitive as possible.
Objectives
Motivate users to convert, providing the information they need to confidently purchase what’s in their shopping bag.
Allow users to take action from inside the shopping bag, whether it’s updating size or quantity, moving an item to/from wishlist, or removing the item altogether.
Encourage users to take advantage of promotional offers and clearly communicate how much they’ve saved, both on the whole, and item by item.
Checkout Flow
As checkout is an entirely conversion-focused flow, our priorities include minor hierarchy and messaging improvements alongside the integration of the Next Gen design system.
Objectives
Reduce the total number of user inputs. For example, combine first and last name into a single form field to reduce user error.
Pace the user through the checkout flow. Limit the number of available actions within a given “step.” Ensure secondary methods of payment do not get buried or missed.
Consider “sustainable shipping” messaging within Delivery. In the long-term, Levi’s may transition to a fully sustainable offering, but for now, include messaging re: recyclable materials and reusable gift bags.
Next Gen Design System
The design system reflects the brand’s future, blending content and commerce to incentivize next gen shoppers and drawing attention to Levi’s industry-leading sustainability initiatives and humanitarian efforts.
Modules
Global Elements
Motion Types
Grid
Spacing
Typography
Aesthetic
Colors
Iconography
Learnings
The result is a beautiful, swift, and seamless experience for users, one optimized for mobile use and built to support an ever-increasing share of Levi’s revenue. We maintained a rich narrative around the work as it progressed, creating executive decks and materials to push ideas through at the highest level and to generate enthusiasm for the site company-wide.
