Redesign: Checkout experience
To improve the shopping experience, we merged the cart and checkout into a single step, eliminating the need for repeated information entry and saving customers time.
Role
Product Designer
Industry
E-commerce
Duration
4 months
Overview
To enhance our users' shopping experience, we have made a significant improvement. Previously, we had a separate cart and checkout process, which required our customers to enter their information again during the final step. In our ongoing efforts to streamline the checkout process and make it faster, we have decided to merge these two steps into a single one, ultimately saving our customers valuable time during checkout.
Role
🎨 Product Designer / ✍️ Product Manager / 💻 Engineer/ 📊 Data / ☎️ Customer Service
As the only Product designer working on this project, I led all the design initiatives and worked closely with the Product Manager, Customer Service, Data, and Engineering team.
Business goals
Unify checkout experience
Create a better one-time purchase experience
Better UX for editing personal information
Discovery stage
Before jumping into solutions I connected with our customer support team, and marketing team with the business goals.
Conversation analysis
Different usage patterns for Auth and no-Auth users
What do our target users' behaviors look like?
The difference between Desktop and Mobile
Main customer problems
Multiple steps in the checkout process
Spending a long time to edit customers’ information whenever users check out
Unclear order plans
🧩 The challenge
How can we design a solution that can solve all the customer problems and fit all the types of our customers’ use cases?
Possible Flows
By cooperating with the Product Manager, Customer Service team, and Engineering team early in the design process, I ensured all the possible use cases were covered.
Sketches
Working together with the Engineering team to identify all potential scenarios.
After creating the mid-fidelity mockups, I arrange a meeting with our engineering team to review all potential scenarios collaboratively. This also helps determine which wireframes require further detailing.
Feedback from leadership
Following collaboration with the engineering team, we shared our Figma project link with the leadership and subsequently revised the workflow based on their feedback.
High-fidelity
Overview
To enhance our users' shopping experience, we have made a significant improvement. Previously, we had a separate cart and checkout process, which required our customers to enter their information again during the final step. In our ongoing efforts to streamline the checkout process and make it faster, we have decided to merge these two steps into a single one, ultimately saving our customers valuable time during checkout.
Role
🎨 Product Designer / ✍️ Product Manager / 💻 Engineer/ 📊 Data / ☎️ Customer Service
As the only Product designer working on this project, I led all the design initiatives and worked closely with the Product Manager, Customer Service, Data, and Engineering team.
Business goals
Unify checkout experience
Create a better one-time purchase experience
Better UX for editing personal information
Discovery stage
Before jumping into solutions I connected with our customer support team, and marketing team with the business goals.
Conversation analysis
Different usage patterns for Auth and no-Auth users
What do our target users' behaviors look like?
The difference between Desktop and Mobile
Main customer problems
Multiple steps in the checkout process
Spending a long time to edit customers’ information whenever users check out
Unclear order plans
🧩 The challenge
How can we design a solution that can solve all the customer problems and fit all the types of our customers’ use cases?
Possible Flows
By cooperating with the Product Manager, Customer Service team, and Engineering team early in the design process, I ensured all the possible use cases were covered.
Sketches
Working together with the Engineering team to identify all potential scenarios.
After creating the mid-fidelity mockups, I arrange a meeting with our engineering team to review all potential scenarios collaboratively. This also helps determine which wireframes require further detailing.
Feedback from leadership
Following collaboration with the engineering team, we shared our Figma project link with the leadership and subsequently revised the workflow based on their feedback.
High-fidelity
Positive impact
Checkout time was cut by 22.4%.
Cut over 50% of cart abandoned rate.
Customers add $0.89 more on average.
View more details
