Checkout Optimization
Transforming the traditional three-step checkout process into an intuitive one-page checkout with more.
A true example of small changes that yield great results.
4 months
Timeline
UX Researcher
Role
UI designers, Project managers, Analytics
Collaboration
There’s an opportunity to make the checkout experience quicker and easier, less distracting, and thus improve customer-satisfaction, increase conversion rates and minimize cart abandonment.
Context
Globally, there is an increase in the % of people who view product and add to bag. However, there is a decrease in conversion - happening AFTER customers add to bag. This signals there is room for improvement in the checkout process.
There’s an opportunity to make the checkout experience quicker and easier, less distracting, and thus improve customer-satisfaction, increase conversion rates and minimize cart abandonment.
A shopper needs a way to easily go through the checkout process on Fossil.com without many distractions and frictions, because the current checkout requires a lot of scrolling.
Problem Statement
Define Drop-off Points
Discovery
Analytics
I reassessed the checkout flow as a whole with the help of analytics team and explored design interventions on various touch-points.
More users dropped off after this shipping and delivery, not reaching the Billing & Payment step. (45% vs. 39% of LY)
Barely made it to Billing & Payment
Of those that reached the Billing & Payment, a higher % dropped off compared to last year. (10% vs 2% of LY)
Higher drop-off at Payment
Fossil.com US' cart and shipping & delivery pages' click-rate
There is a high chance that a lot of customers decide to leave the cart page to search for promo codes and if they don’t find them they could potentially decide to leave the shipping experience altogether.
Promo code section as a distraction
At the later stages of the checkout process (billing and review), 8% of users still navigate back to edit information.
How easy is it to go back to previous step?
Baymard
Benchmarking
Benchmarking more than 130 guidelines from Baymard. Link to audit sheet here.
By grouping similar issues, we identified the most critical areas for improvement.
After benchmarking the current checkout against criteria from Baymard, these are the most prevalent issues we have:
-
Too long and complicated checkout process. Users complain about long scrolling.
-
Important information (order summary) got pushed down on the page
-
Distractions (such as expanded promo code) are likely to lead customers out of the flow and exit the site
Usability Test
Testing
Tested Prototype
Methods
Participants: I recruited 5 participants.
Qualification criteria: apparel and accessories online shoppers.
Format: a qualitative usability test where users interact with a prototype and carry out a checkout task.
Feedback
-
Reduce checkout time: 1:40 minutes -- 53 seconds
-
Overall findability: 10/10 effortlessly located all the essential elements
-
5/5 participants are in favor of having 3 sections on the same page
-
Highly intuitive for going back and forth to edit information
-
The inactive sections shown by graying out is found helpful to focus on the active step users are on.
Positive
-
Potentially be overwhelming
-
Not ideal for analysis: It’s hard to determine which step customers are likely to abandon the process.
-
Need more colors or icons to distinguish various sections of the page and steps in th process
Cons/ Need improvements
Key Findings
Retrospective
Future tests
Shortened checkout for mobile (scheduled for test):
-
Our goal is to address the issue of fluidity when transitioning between steps on mobile devices.
-
Building upon the success of implementing the progress indicator, we would like to explore the idea of streamlining the checkout flow on mobile. This includes:
-
Reducing the need for excessive scrolling.
-
Providing an intuitive way to easily navigate back and forth for editing information.
-
Test often & fail early
Recognizing that the progress indicator did not perform well on desktop, we promptly removed it and shifted our attention to the key elements of the one-page checkout. This allowed us to avoid cluttering the page with less effective elements.
The beauty of agile
-
I’m grateful that we have a clear agile structure in place to avoid additional unnecessary work. We were able to conduct the essential research to validate our options while product team worked with development to discuss the logistics of implementing a one-page checkout. Since we worked together but independently on different timelines, we were able to break down the big projects into multiple phases and evaluate each phase before taking the next step.
-
Thanks to the agile structure, the development team could raise a flag before we conducted more testing and labor-intensive implementation.
Focus on what we can do
Redirection
We refocused on quick wins and mobile-first solutions due to pushbacks. To address page length, we identified and removed frills and distractions, such as the expanded promo code field.
Collapsing Promo Code
Coupon hunting is a major problem that leads users to leave the checkout to go look for coupons. The chance of them not returning to complete the purchase increases significantly.
Certain distractions should be hidden behind a prominent link or accordion to prevent users from abandoning cart.
Avoid distractions
Seeing a coupon field can make people think they're overpaying. Once they leave to find a coupon, they might not come back because they regret the purchase, can't find a good code, or get distracted by other sites.
Coupon Hunting
To make checkout easier, we wanted to make the process clearer. People want to know where they are, how many steps are left, and what each step is. If they're unsure about the whole process, they're more likely to quit. So, I suggested a progress bar to show them where they are.
Progress indicator
A clear progress indicator can help customers tolerate a longer checkout process as they can see the end goal.
Existing published test result
According to a UPS study, 20% of people abandon their shopping carts because the checkout process is long and confusing.
Purpose
Increase mobility in transitioning between steps of the checkout process.
Provide users a big picture view of the process.
UX Law: Goal Gradient Effect
Increase mobility in transitioning between steps of the checkout process. (Source)
User Test
& A/B Testing
Testing & Results
Collapsing Promo Code Section
-
Overall conversion increased by 6% and cart abandonment rate improved by 2%.
-
The incremental revenue impact for implementing these results in FS Global is of $8.3M yearly.
Progress Indicator
-
Variation with the progress indicator won on Mobile but lost on Desktop
-
Mobile: 4% lower cart abandonment rate, 8% higher CVR and higher checkout CVR with 95% significance.
-
Revenue impact for Mobile devices in NAM & EMEA regions is of $3.9M if we implement the test in October or $8.1M yearly.
Collaboration Pushbacks
Road Blocks
Re-evaluation with product and development teams before production
-
Following a successful usability test confirming the benefits of a one-page checkout, we convened with product and development teams to reassess this approach.. While this approach addresses multiple UX issues, development concerns about high effort and proximity to code freeze, along with product team's focus on mobile prioritization (given 95% mobile usage), led to postponing this solution until next year.
Work with what we have
-
The UX team reevaluated the options and concluded that the one-page checkout, despite its potential benefits, required significant effort with uncertain impact. Additionally, tracking performance at each step of a one-page checkout is challenging. To prioritize impact and efficiency, we decided to explore alternative solutions with lower to medium effort levels that offer valuable insights.
Impacts
Collapsing promo code and progress indicator were examples of low effort, high impact for our team. This combined 16.4M achievement was a result of small changes by following UX best practices and the flexibility of putting literally everything to test.
$8.3M
incremental revenue impact if collapsed promo code implemented
$8.1M
incremental revenue impact if progress indicator implemented
6%
conversion increase in checkout
If we removed distraction and optimized the page for a seamless navigation, the checkout flow would be simplified and made easy for customers to convert.
Hypothesis
Research Analysis & UI Design
.png)
