Levi Strauss & Co.
Checkout Redesign
The Challenge
The previous Checkout experience has an accordion modal design, which deems restricting both internally and for our users.
The Outcome
A new full-page checkout experience that increased Customer Satisfaction score by 7% and Checkout success rate by 5%.
Current Experience
After clicking “Checkout” in Bag, user completes their checkout by filling out information from the modal of 4 main sections.
Our current design offers a concise summary of checkout information, but has several limitations for both users and internal discussed in the following section.
1/ Background
From a heuristic evaluation, the team realized a pattern in High Impact - High Effort cards, which related to the current modal layout of the checkout process.
This aligns with a Baymard recommendation, which called out a lack of a visible order review and clear navigation during checkout.
From stakeholders
The accordion layout is not scalable, which led to a lot of band-aid solutions, and is prone to errors, which led to a high call volume on order cancellations and modifications.
From users
Users comment on multiple related issues:
“It’s not clear what item goes out of stock”
“Make page turning easier”
Opportunities
-
Design a simple, familiar, and more scalable Checkout flow.
-
Improve order review, decrease order errors
2/ Discovery
Industry standards
Checkout involves private information like address, credit cards, etc.; therefore, a design that is familiar to users helps checking out more comfortable.
Our app users
— Shoppers like that the app can save their information for a faster checkout.
— Shoppers have different preference when it comes to private information saved on the app.
From there, we determined 2 types of users for the checkout flow:
New/ Reserved Users
❌
Saved Address
❌
Saved Payment
User needs: Checkout transparency: steps ahead, required information, etc.
Saved Users
✅
Saved Address
✅
Saved Payment
User needs: quick and easy checkout, which is one of the main reasons for app usage
3/ Usability Test
The 2 variations of the experience were tested:
New/ Reserved Users
Goal: Simplify the checkout process, with easily digestible information
— Lands users on the first step of checkout, and guides them through the next steps
— Process indicators as a visual guide to help users navigate the checkout flow
—Less prone to errors: users see more information up front
Saved Users
Goal: A quick, yet secured, checkout process with their information saved
— Lands users on Review page, with all previously saved information
— Requires users to fill out credit card code to checkout to ensure security.
Test Findings
Users described the flow as “familiar and conventional”
— All users seamlessly finished all tasks
— New/ Reserved Users went through the each step of the flow seamlessly
— Saved Users mentioned requiring a security code was standard and makes them feel comfortable checking out
— Opportunities to help shoppers be better oriented to where they’re at in the journey
4/ Final Design
The experience is further personalized to land users on the right step of Checkout.
— A user who has an address saved but not a payment type will be landed on Payment page
— A user who has all their information saved will be landed on Review with the option to edit their information.
Item Details section is collapsed by default to keep shoppers focused on completing checking out, with an easy access point to view all item details.
The full-page, step-by-step design has also made it more scalable for different regions and use cases.
In Europe, selecting a pickup a location can be grouped under Shipping Information
Error messages can be more localized
5/ Post-launch
Results
The redesign was a success, leading to 5% increase in Customer Satisfaction, and 2% in Checkout success rate.
Scale
Continue iterating different use cases the new layout allows for.
Lessons
The project challenged me to rethink how a feature would fit into the entire journey, and a good reminder of Jakob's Law.