Chewy Checkout 2020
How it started
The checkout screen had been touched by several development teams, and execution varied. The experience had eroded, and I was tasked to “make it better.”
I took the challenge to bring the experience up to at least our own design standards via a consistent design system. My product partner also wanted to reduce cart abandonment, so we looked into how a customer progressed through checkout.
As an additional constraint, the functionality of the large Autoship module in the middle was outside of scope. That’s another story for another day.
Empathize
We needed a good baseline of current data to see what was, and was not working in our current design. Once we understood our customer’s pain points, we could work on figuring out how ‘better’ might work.
Part of learning what better might look like, my UX research partner and I audited, compared, and contrasted our checkout flow to others in the space.
I had initial concerns about Chewy's “One-Step Checkout” compared to incremental checkout flows used on other platforms. I posited that the flow might have outgrown the single screen concept, but wanted to see the customer data.
While user tests ran, I combed through Baymard’s catalog of checkout screens and documented the gaps between well-rate e-commerce experiences and Chewy’s.
Simultaneously, my product partner and I dove into checkout abandonment data to pin down at what point(s) did customers back out.
Define
I apologize; I don’t actually expect anyone to be able to read my notes, but this is the thing I do before I start pushing pixels.
The research results showed that new customers had little problem successfully checking out. Seeing all the required fields at once was repeatedly called out as a benefit.
Friction appeared when returning customers needed to adjust something. Adding a new delivery address or swapping to a new credit card was confusing.
Customer data also showed a significant number of customers with duplicate delivery and payment info, potentially signifying a problem in managing addresses or payment methods.
When we showed this data to the project stakeholders, we decided to revise and unify the varying methods employed to manage options at the checkout screen.
I wanted to craft consistency into the design, giving clearer hierarchy and a good rhythm through the flow. Building off of what we recently learned in the Cart and Checkout project, we knew that increased image sizes and consistent product attribute badges would strengthen customer confidence in the items they were purchasing.
Ideate
Before
Splitting the Choose & Add paths resulted in duplicate entries.
Library of addresses. The top left slot is currently applied, but it wasn’t clear. Also, so many boxes in boxes.
Not awful, but could use some reorganization.
Digging into the data further, we saw that on mobile web, the abandonment numbers were less.
I hypothesized that was partially due to mobile’s single path of Change → Choose → Add, which surfaced existing options before the customer could add a new option. The desktop experience had split paths of Choose or Add, and it was less clear which address was currently selected.
I kept mobile’s single point of entry and iterated on a grid-based library that displayed the initially selected address in the top left corner. This grid showed more options in a small footprint and puts the Add function in the last slot.
We built upon this pattern for GIft Cards, and Payment Methods
PROTOTYPE
Delivery
Gift Cards
Payment Information
We needed to build out all the modules for the new design and flow to test with our customers. Design Ops had been kept up to date with the design direction, and eagerly dove into building a testable prototype.
Fewer buttons and a unified edit pattern reduced cognitive load. Relatively small, but intentional tweaks to our typography and baseline grid, consistent padding and spacing between elements made the screen easier to scan.
We built the prototype, worked out a couple of edge cases, and then our UXR team got it back in front of testers for feedback.
ANALYZE & RESULTS
Before
After
My 10 minute presentation script to the CPO.
Probably my favorite pitch to date.
Our testers responded very positively to the new layout, and the improved workflow for choosing or adding new information. Customers also positively commented on the larger product images and increased readability of the products in the cart.
The percentage of task completion during our test sessions improved significantly.
As an added win, the codebase was updated to make use of Chewy’s design ops system, so future iterations and improvements can happen with fewer design and development cycles.
This improved checkout flow shipped in Feb 2021.