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

The Problem

Our 4 step checkout process was leading to huge amounts of drop off on web, especially in the review step, negatively impacting overall conversion.

The Solution

Reduce the number of steps to checkout & streamline the review step. This also tied into an improved gift sender flow, which you can read about.

Business Context

Objective: Win bev-alc e-commerce in the US.

Key result: Grow 90-day customer spend by 10%.

Specific goal: Creates a well-designed, streamlined checkout experience, in order to increase conversion, due to reduced checkout drop off.

  • Reach 0.7% increase in web conversion.

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

Welcome page indicating you've received a gift

Step 1 of checkout: address capture

Welcome page indicating you've received a gift

Step 2 of checkout: Enter payment info

Welcome page indicating you've received a gift

Step 3 of checkout: Schedule delivery

Gift recipient form they must fill out

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.

6.4%

Drop off at address.

3.2%

Drop off at scheduling.

10.3%

Drop off at review.

Pain point analysis

Screens designed by a previous designer

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.

Screens designed by a previous designer

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).

DoorDash gifting experience
Uber Eats gifting experience

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.

My first attempt at a multi-step experience

User testing

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

DoorDash gifting experience
Uber Eats gifting experience

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.

First pass at a streamlined, 2-step experience

Results

First pass at a streamlined, 2-step experience

1.12%

Conversion increase (exceeding 0.7% goal!)

-7.4%

Drop off rate decrease at the review step

12.5%

Subsequent conversion rate

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.

$2,236,372

Annualized gross bookings impact

Related projects

A notebooks with words and sketches.

Digital Occasion Cards

Graphic & Brand Design

An iPhone and iPad showing emails

Transactional Emails

Communication Design

A laptop showing the checkout flow

Gifting Program

Product Design @ Drizly