Checkout Redesign. Optimizing the purchase flow for Fragstore.com

Fragstore is an e-commerce platform focused on gaming and collectible products. The checkout redesign aimed to simplify the purchasing process. By optimizing forms, reducing friction, and improving error handling, the path to purchase became smoother and conversion increased

Problem

High user drop-off at the checkout stage — users were not completing purchases due to complex forms, unnecessary steps, and unclear errors

Problem

High user drop-off at the checkout stage — users were not completing purchases due to complex forms, unnecessary steps, and unclear errors

Problem

High user drop-off at the checkout stage — users were not completing purchases due to complex forms, unnecessary steps, and unclear errors

Goal

Reduce drop-off during checkout and increase conversion into completed purchases by simplifying the user journey

Goal

Reduce drop-off during checkout and increase conversion into completed purchases by simplifying the user journey

Goal

Reduce drop-off during checkout and increase conversion into completed purchases by simplifying the user journey

Role

Led the full UX cycle — from research to implementation and validation

Conducted UX research and competitor analysis

Developed the concept and designed the user flow

Simplified the checkout and improved forms and error handling

Handed off solutions to development and supported implementation

Conducted design reviews and validated user scenarios

Conversion rate

increase the share of users who complete the purchase

Drop-off rate

reduce drop-off at key checkout steps

Time to complete checkout

reduce the time required to complete a purchase

CJM

Andrew

Age: 22–40

Gamer, plays CS / Dota

Buys mice, keyboards, and accessories. Makes decisions quickly and rationally, focusing on price, availability, and delivery

Pain points:

Why are there so many steps? Where is the final price?

Maria

Age: 20–35

Fan / collector (anime / game culture)

Buys figures and merchandise. Looks for “that one” item and makes decisions emotionally

Pain points:

Afraid of making a mistake during checkout. When will it arrive?

Based on CJM analysis and user scenarios, the following insights were identified:

Users expect a fast and linear checkout flow but encounter additional friction

The overall visual style reduces trust in the payment process

Overloaded forms and unclear UI elements increase cognitive load

Design Solutions

Problem

Users add items to the cart and review their order before checkout. At this stage, they don’t see the full cost breakdown — shipping is missing, and the pricing structure lacks transparency

Problem

Users add items to the cart and review their order before checkout. At this stage, they don’t see the full cost breakdown — shipping is missing, and the pricing structure lacks transparency

Problem

Users add items to the cart and review their order before checkout. At this stage, they don’t see the full cost breakdown — shipping is missing, and the pricing structure lacks transparency

Solution

Redesigned the order summary to make it more transparent and structured. Added a clear cost breakdown (subtotal, discount, taxes), visually emphasized the total price, and introduced trust elements (payment methods)

Solution

Redesigned the order summary to make it more transparent and structured. Added a clear cost breakdown (subtotal, discount, taxes), visually emphasized the total price, and introduced trust elements (payment methods)

Solution

Redesigned the order summary to make it more transparent and structured. Added a clear cost breakdown (subtotal, discount, taxes), visually emphasized the total price, and introduced trust elements (payment methods)

As a result, users better understand the total cost and feel more confident before proceeding to payment

After clicking checkout, users are required to log in. The login popup interrupts the flow and causes frustration, especially for users ready to make a quick purchase. I improved this step and added a step indicator to help users understand where they are in the process

Iteration 1

At the first stage, I focused on improving visual design and readability while keeping the existing structure

Solution

Despite visual improvements, the core issue in the user flow remained unresolved

Insight

Conducted guerrilla testing (5 users) on the prototype. Users were still confused by the flow — visual changes did not reduce cognitive load

Conclusion

The flow needed to be simplified and the next step made more obvious, especially for new users

Iteration 2

In the second iteration, I reworked the interaction logic and simplified the flow

Solution

Removed address cards that added unnecessary complexity

Displayed the input form immediately instead of an empty state

Combined address input and payment method selection on one page

Made the next step clear through structured layout and a strong CTA

Conclusion

Moving from “selection from empty states” to “direct action” made the checkout faster and more intuitive, especially for new users

As part of this project, I didn’t just update the interface — I rethought the interaction logic within the checkout flow. Despite structural constraints, I was able to simplify the user journey and reduce cognitive load through targeted UX improvements. As a result, the checkout process became clearer, more predictable, and more user-friendly

+15%

increase in checkout completion rate

–24%

reduction in drop-off at the checkout stage

+30%

more users completed data entry

Next case

ALINA Shumitskaia

Behance

Dribbble