Checkout Flow Redesign

Improving Backcountry’s checkout flow to improve guest conversion, introducing modern payment wallets, and optimizing the form for future improvements.

Full Redesign of Mobile Guest Checkout

Backcountry

Backcountry is a premium e-commerce outdoor retailer with the mission of connecting people to their passions. At Backcountry you’ll find the highest-performing outdoor gear as well as clothing and expert level gear knowledge. In addition to Backcountry, they own and operate three websites under their umbrella - Steep & Cheap (discounted outdoor gear), Competitive Cyclist (high end cycling), and Motosport (motorsport parts, gear, & apparel). 

Challenge

Design a modern checkout flow for our users that introduces modern payment options, reduces user friction in checkout, and increases conversion. 

Background

After a large platform migration, Backcountry, Steep and Cheap, and Competitive Cyclist shared a unified UI and operating system for their Checkout pages. The unified Checkout page was tried and true and the new UI was modern, but the checkout features and flow were not. The page was migrated nearly 1:1 from Backcountry’s old Checkout experience due to a failed launch by a previous product team. Our team successfully launched the new UI and saw a 15% increase in conversion on the checkout page and had momentum to continue making an impact in checkout. 

Original Mobile Flow of Checkout

Role

I was the lead UX designer on the CX Optimizations and Purchase funnel team. I conducted discovery research, designed the UI, conducted usability testing, and drove the A/B roadmap to bring the product to life.  

Research

We received a benchmark study of the Backcountry site from Baymard after our UI migration and our checkout was still not up to industry standards. They identified specific feature improvements, like our credit card form lacking validation, and more overarching problems with the order of checkout being unintuitive and cumbersome for our users. For our guest users, Backcountry’s checkout was asking them to provide their billing address before their payment information, and for their payment information before their shipping address - which informs the total cost of their order with taxes and accurate shipping costs. It was time for a re-order.

In my own heuristic audit, we also identified the logged in users had a completely different flow through checkout, that also didn’t follow industry benchmarks. In addition to being a poor user experience, it made collecting data on and development on the checkout page very difficult for our teams.

At the end of the day, our users, regardless of login status, want an intuitive and trustworthy checkout process. We can apply our learnings to a unified checkout flow for all users, adding in forms for guests or adding loyalty perks for logged in users.

Design

There was much to configure in the checkout page to optimize and unify the experiences. I wanted to set the business up for success to more efficiently optimize and test individual features like Express Payment options or a delivery date estimator. The first pass I did at redesigning the page was a full overhaul of the UI, the order of sections, and what the sections looked like. 

During this time I was able to conduct a quick design preference test to both test the platform and gain insights on our design. We showed the users the new design and asked them rating scale and open ended questions. At the end we showed the users both designs and asked them their preference and why. In the end 100% of users preferred the new checkout design. They said the design was more intuitive - with clearer information and reduced business. They also loved the presence of express payment options. In a second platform we conducted the same test showing the users the original checkout, and 90% of those users preferred the new checkout design.

Our stakeholders felt the same as the users. The idea of adding easier, more mobile friendly payment options that our users were excited about motivated them to prioritize the work to add express payments. 
But we had to walk before we ran, there was work to get the current checkout to a state that was ready for modern payments. Modern payment wallets like ApplePay and PayPal do the work of sharing the user’s information with the click of a button. When implemented as an express option, the wallet shares shipping, billing, and contact information. As a payment option within checkout, they share the full billing information. Users would not be able to utilize the benefits of a wallet when our checkout form requires Billing Address over shipping address. So our first A/B test was reorganizing the checkout form for guest and logged in users. 

We organized the form for all users to reflect the most obvious choices first - where their package was going (Shipping address), how quickly it should get there (Delivery options), and how they were going to pay for it (Payment options).

Results

  • Guest conversion increased by 5.25% on the checkout page during the A/B test.

  • Logged In conversion received no change in conversion during the test period - which was expected for the smaller subset of users that have their information saved. 

  • We utilized DXA, our session playback tool, during the test to measure qualitative experience changes. Our Engagement and Form Experience Scores increased (positive change) and the Frustration Score decreased (positive change). The most dramatic change was the form experience score - which is most important on the checkout page. 

Updated Checkout flow with Shipping First

Reflections + Next Steps

Improving the checkout flow was only step one in fully modernizing our checkout form. In the following months we launched PayPal as an express payment test after a successful A/B test. We are weeks away from launching ApplePay and credit card form improvements. We worked with the loyalty team to A/B test unchecking the create account form in checkout before Black Friday and saw a 144pbs increase to conversion (estimated $5M annual revenue lift) without seeing a negative impact to account creation. 

Deliverables

  • Synthesized Baymard Audit 

  • Checkout Jobs To Be Done Analysis

  • Design Preference Test Read Out

  • Comparative Audit

  • User Journeys

  • Product Review Presentations for Executive Leadership Team

  • Full Page Designs & Standard Layouts for all 3 brands

  • A/B Testing Plan