Chewy Navigation Vision

Concepts + Strategic planning

Overview

• Create a scalable, 3-year vision of Chewy’s navigation

• Minimize risk while iterating on novel functionality

Defining The Problem

Original Ask

Early in 2020, leadership realized that the navigation had not been updated in several years, and no longer reflected Chewy’s business needs nor the needs of its customers. The brief I was given was to “redesign the navigation”—and that was it! Knowing that the C-suite was not actually going to give a designer carte blanche to redefine a global element that touched every part of the shopping funnel, a significant portion of the project revolved around defining the requirements for both the business and customers.

Defining Requirements

My product partner and I collaborated to hunt down and define both the business and customer requirements based on leadership’s overarching product vision, planned and prospective new business ventures, existing tech debt, and anticipated engineering opportunities. We did not have the ability to conduct user research and map the customers’ experiences with navigating the site. Instead, I relied heavily on secondary expert sources and dove into Google Analytics to understand how users were behaving, even if I could not explain exactly why.

Ideation

User Types

Despite not having formal user research to rely on, I put together a framework for understanding our different types of users based on what we know about our current users. This helped us understand what our customers’ needs and goals are, specifically related to the navigation. For the moment, we focused on the browsing experience, with plans to assist the Search team at a later date.

Subscribed Users

• Fully bought into the Chewy ecosystem. Have Autoship set up & Pet Profiles for their pet(s)

• Goal user type — converting other users to a Subscribed user is the ultimate goal of the product team

• Knowns: Product interests, based on order history & Autoship. Pet type, based on Pet Profile(s).

• Goals: Maintain loyalty by continuing to improve their experience. Meet their needs of tracking/managing orders and easily finding products for their specific pet(s). Alert them to relevant promotions or changes.

Autoship (AS) Subscribed

• Have Autoship set up but have not created a Pet Profile. Potentially do not see the value in creating a Pet Profile, or don’t know they exist.

• Knowns: Product interests, based on order history & Autoship. Can guess at pet type based on order history, but edge cases could create inaccuracies (ex: customer has a pet cat, but has an Autoship to send food for their mother’s pet dog)

• Goals: Convert to a Fully Subscribed user. Meet need of tracking/managing orders and create compelling argument for setting up a Pet Profile.

Pet Profile (PP) Subscribed

• Have created Pet Profile(s) but have not set up Autoship. Potentially do not see the value in Autoship, is not confident in timing, or does not realize that Autoship is not a subscription service.

• Knowns: Product interests, based on order history. Pet type, based on Pet Profile(s).

• Goals: Convert to a Fully Subscribed user. Meet need of tracking/managing orders and create compelling argument for setting up Autoship.

Casual Shopper

• Has shopped with Chewy before, but has not created a Pet Profile or set up an Autoship. May have only shopped a few times, or shops regularly as one option of many (ex: may also order from Amazon or Walmart)

• Knowns: Some product interests, based on order history.

• Goals: Convert to either an AS Subscribed or PP Subscribed user by creating compelling arguments for both & educating customer about both. Build loyalty with Chewy brand.

New User

• Could be either someone who has never shopped with Chewy before, or an existing user who is unauthenticated (not logged in & missing browser cookies).

• Knowns: May have learned about Chewy from word-of-mouth or through search engine. If they came in through a general search (ex: Googled “Blue Buffalo dog food”), will likely land on a PDP instead of the homepage.

• Goals: Build trust with the Chewy brand. Help customers quickly find what they are looking for, feel confident in their choice, & complete a purchase. Convert SEO-driven customers to move them from a New User to a Casual Shopper by creating a compelling argument for creating a Chewy account (guest checkout does not exist). Balance customer movement through the conversion funnel with opportunities to promote other Chewy offerings (health services, Autoship, Pet Profile, etc.).

Design Iterations

As I progressively narrowed down the actual requirements, I began iterating on different components of the navigation as a method of exploring different strategies. Without a fellow designer to iterate with, I taught my product partner the merits of low-fidelity sketches and conducted several design studio sessions to quickly generate ideas.

Menu Iterations

We initially focused on structuring the menu, balancing personalization with consistency and a cleaned-up architecture. We landed on an idea of “your go-to categories” within pet subcategories, on the theory that returning customers often come back to replenish or replace their stock (ex: customer ran out of dog treats and wants to try a new brand to keep things interesting). We also explored different ways of interacting with the menu—some successful, some not.

Header Iterations

Next we iterated on the header itself, specifically focused on how to speed up customers’ wayfinding and decision-making with personalized ingress points. A user with several dogs, for example, would be well-served by a one-tap way to browse the Dog category.

Final Design & Strategy

After much debate, we ultimately scaled back our personalization strategy in order to move towards our Lighthouse vision faster. Instead of incorporating personalization within the menu, I decided to limit targeted content to a few key and un-intrusive moments:

• Site-wide messaging — Content in the space above the header will vary depending on the user type. A fully subscribed user, for example, is already very familiar with the free shipping threshold, and would be better served by access to customer support or (if it is technically feasible) shipping updates.

• “Quick Links” — Chips below the header provide the customer with three fast, targeted ingress points to the areas that matter most to them. Analytics showed that the seasonal shops have a surprisingly high click-through rate for all user types, and therefore get highest priority. The iconography, limited to only the seasonal shop, would also tie-in with the site-wide messaging for important events (such as Cyber Monday sales). The remaining chips would be limited to Chewy’s core programs and services as a way to encourage offering discovery as the user scrolls to access ingress points. Limiting the chips would ensure the list doesn’t get overwhelmingly long, while also forcing leadership to define discovery goals for each program instead of throwing everything we offer in there.

• Main Menu Structure — We felt that it was important to keep the menu consistent as a customer converts from a new user to a fully subscribed user—moving things around would only cause confusion and is too heavily dependent on assumptions of our customers’ needs.

  • Pet Profile — The top section would link to the customer’s Pet Profile, where they could browse products specific to their pet (ex: Hugo is a small, senior dog with dental care needs. His recommended products would focus on small-breed items, senior-friendly toys and food, and options for dental hygiene like toothbrushes and dental chews). Users without a pet profile simply would not see this section.

  • Improved IA — Our primary catalog ultimately breaks down to products and healthcare items. Prioritizing Shop and Health helps customers dive into the shopping lane that best fits their needs. Things like sales, seasonal shops, and gifts are all secondary and should not compete with the primary shopping lanes.

  • Program Discovery — Initially, Chewy’s non-shopping programs and services are too few to deserve discreet sections. However, as different business verticals grow, they can easily be delineated into their own section in this structure as unique programs (ex: Adoptions & Donations will eventually be combined into a larger philanthropy program). Placing these programs on the main page ensures that they are seen by customers whose primary intention is to browse products.

• Menu Depth — Our current mobile navigation does not include subcategories within the menu.

  • Adding depth allows the main menu to be shorter, while also allowing the customer to dive into a specific subcategory much faster than filtering on a main category page. Generic research also indicated that users look at child categories to understand the breadth of the parent category and as a way to understand how the overall menu is structured.

  • Added depth provides a business opportunity for more specific merchandising slots without altering the core product catalog.

• Account Menu — The Account menu serves several important user goals, specifically around order tracking and managing Autoships and prescriptions. It would also provide an ingress into customers’ pet profiles, where they can see product recommendations and manage individual pets’ prescriptions or other needs. The Buy Again carousel could easily be replaced by another targeted carousel (such as Recently Viewed); the purpose is primarily to give customers a fast way to get what they need without being forced to browse, search, or dig through their order history.

Next Steps

The final concept was not based entirely on the mockups, but on the core strategies of simplicity, category depth, targeted content, quick access, and a scalable system. However, given that these concepts did not have the opportunity to be properly tested, the designs were presented as a “Lighthouse”—a concept to aim for though not necessarily the final design. Part of the strategy was to break the design into functional components and test the validity of each component and strategy. This has allowed us to move forward with iterations in our current design system, instead of waiting for the bigger rebranding effort.

For example, we’ve tested adding depth to our mobile navigation and reorganizing our main menu using our existing styles. As we didn’t have to redesign much, the engineering effort was fairly low, allowing us to gain important architectural insights quickly.