Streamlined Checkout

Streamlined Checkout

TLDR; Getting a user to checkout - actually give you their money - is of course one of the largest challenges in e-commerce. Drizly was seeing a ton of drop off in checkout funnel because there were too many steps, which was leading to low overall conversion numbers. I used data to prove out the problem and get buy-in from stakeholders, and was ultimately able to improve the checkout flow with relatively simple changes, resulting in a $2+ million improvement. Simultaneously, I showed that investing in UX tweaks pays financial dividends, which helped get support for other projects off the ground.

Product Design

Jan 2022 - June 2022

Business Context

Team

Product Designer (Me)

Product Manager

Data Analyst

UX Researcher

Engineers (4)

At the time this project was initiated, I was the designer focused on "lower funnel" (product page through checkout). I identified issues with our checkout funnel and raised them to the PM on my squad. We collaborated to find the right prioritization and scope. UX research and data analysis helped me to understand the problem as well as the impact of my design choices.

Existing experience

Step 1 of checkout: address capture

Step 2 of checkout: Enter payment info

Step 3 of checkout: Schedule delivery

Step 4 of checkout: Review info

The existing checkout flow comprised an unnecessary number of steps. Scheduling in particular was not useful, because it could be edited in review, and also because the vast majority of users do not change the default value.

Data

Examining the data around checkout revealed drop off at address capture, scheduling and review. While not all drop off can be avoided of course, there were clear opportunities for improvement.

Pain point analysis

I mapped out the existing flow for users progressing from selecting a product through to checkout. As you can see, it involves a lot of distinct steps.

I then analyzed the steps in the flow, marking where a user had to pause or stop the process to enter information or perform a task.

Inspiration

There is plenty of inspiration on single page checkout these days. Some of my favorites included Airbnb, who so beautifully integrate sign up into their flow, and Uber Eats, who utilize inline scheduling (which I respectfully... borrowed).

Ideal - Single Page Checkout

In the early days of this project, we thought we'd be able to devote a significant amount of resources to the project. As such, I began designing the ideal state - a full single page checkout, where the user can accomplish everything they need to checkout in one place. Spoilers: that didn't end up happening, but it's useful to see where I was building towards.

User testing

We ran an unmoderated study through UserTesting to compare 2 prototypes for single page checkout for 5 participants.

User testing confirmed I was on the right track with messaging around changes in checkout and adding clarity around delivery details. We received helpful feedback on our substition handling.

Streamlined "Streamlined Checkout"

As sometimes happens, we needed to slim down our plans for single page checkout due to resourcing and timelines. I prioritized (1) adding a map to help users confirm they entered the correct address, (2) reordering the page so it flows from order info to order execution, and (3) moving actions out from behind unnecessary clicks. You can see this experience live on www.drizly.com.

Results

We saw an increase of over 1% in conversion (our goal was 0.7%), which was clearly statistically significant. We also reduced the drop off rate of the review step by nearly 10% and, most interestingly, the improved experience seemed to be so positive for shoppers they were 12.5% more likely to come back and shop again, compared to folks in the control.

Related projects