Chewy Account | Perry's Portfolio

Overview

Objective

Provide lighthouse designs that fix sub navigation and improve overall navigation in a chewy customer's account.

Thoughts & Feelings

There was countless discussions on what we should do with our sub navigation bar in account. It served as the primary way to navigate and was part of a legacy design component that now did not meet the needs of a fast growing company.

New to the team, I was excited to be assigned to tackle this problem and was eager to present a solution that made sense for your customers.

My Role & Responsibilites

Lead Designer, Research, Wire framing, Usability Testing, Hi-Fi Mock Ups

Tools

Figma, Excel, Confluence, and Jira

Sprint

2 Months

Team

1 designer, 1 product manager, 2 stakeholders

About Chewy

Chewy is an American online retailer in pet food and other pet-related products based in Dania Beach Florida. Chewy ranks among the leaders in pet-product e-commerce, along with Amazon and Walmart.com. Their sole mission is to be the most trusted and convenient online destination for pet parents (and partners), everywhere.

The Problem

Customer Problem
Customers need a clear, defined, and efficient way to navigate through their account to get to information that they need...currently we don’t have that.

Business Problem
Our sub navigation bar on desktop has long been used as a junk drawer for account pages and linked experiences. Visually our account is now overwhelming for users.

We're also in the middle of a brand redesign, so there's a mix of new and old components that need updating.

With new experiences being developed, there's no room left to add anything else....it's now become an unstable component.

Desktop Sub Navigation

The Solution

Create an account page that fixes overall navigation, improves readability, presents information hierarchy that meets users needs, and provides a way to add new experiences as Chewy continues to grow.

Research

Account Audit

I was familiar with where account was located on Chewy but wanted to have a better understanding of the scope of the project. To start, I did an audit to get a birds eye view of what experiences touched account so nothing got left out.

Click-Rate Metrics

To better optimize the account page for Chewy customers, I identified what pages were be visited most frequently through click rate metrics.

Top activity for this page:

Tracking a package
Viewing order history
Viewing order details

Later in design, I put a huge emphasis on the order hierarchy to compliment the users motives.

Competitive Analysis

The goal of this analysis was to understand the competitive landscape for account dashboards used by e-commerce and service based competitors.

I took into account 9 competitors and based from my findings, these elements determined a successful design

Page layout
Grouping
Data visualization
Navigation
Information presented
Information hierarchy
Mobile view match

Click here to View Competitive Analysis

Key Findings

Navigation is King

The dashboard displayed options and linked to additional pages for more in-depth information...sometimes data visualization and widgets... as opposed to side navigation or sub navigation

One Page Layout & Mobile Responsive

All options being presented on the page was a popular option - 6/10
Majority of competitors had identical styling on mobile and was fully responsive - 8/10

Modular Design & Links

Most experiences had their primary options in cards and secondary options as a link button.
Link buttons can also be presented as a means of navigation.
Iconography was frequently used to help identify options presented.

Minimalism is Key

There was a huge emphasis on limiting cognitive load and focusing on what matters most to the user
Recent Orders, Upcoming Orders, and Order History were visualized the most.

Ideating

Now that I understood the key elements in account design, I started sketching and playing with different ways to present this information for customers. I then kicked off making wireframes and iterated based on feedback and buy in from my product manager and stakeholder.

Before & After

Here's a sneak peak of the design before we do a full break down.

We wanted to present information hierarchy based on our customers wants and needs. Customers wanted more transparency on package status, a way to easily find previous orders, and look at the details of their orders.

Remember the click rate metrics!

Tracking a package
Viewing order history
Viewing order details

Old Design

New Design

Let's Break It Down

Updated with new brand guidelines. New color scheme, typeface, and components.

Viewing "Upcoming" and "View All Orders" have now been prioritized to be the first thing the user sees.

View All Orders cta links to orders page

Order cards now include:

Product Image(s)
Order Number
Improved Order Status

Users can now Track their recently ordered package with a simple click.

Primary cards highlight frequently accessed pages.

New groupings:

Orders
Autoship
Prescriptions
Payment Methods
Gift Cards
Lists

These cards have a brief description and statuses.

New "Help Available 24/7" widget helps assist the user problems immediately by putting them in contact with customer service, a veterinarian, or directing them to the help center for troubleshooting .