Checkout Redesign
Case study
·
4 Min Read
Project Snapshot
Goal
Reduce checkout abandonment by clarifying pricing and speeding up completion across 55+ markets.
Role
Lead UX/UI Designer. Owned end-to-end UX and ran stakeholder workshops with PO, SE, and TL.
Challenge
Balance transparency and features for casual shoppers and Brand Partners (placing bulk orders).
Solution
Merged delivery, payment & summary into one step and added always-visible order summary box.
Impact
Average checkout time reduced from 240s to 168s. A 30% faster loading time.
What did I do?
User Research
Wireframing
Copywriting
High Fidelity Prototype
Visual Design
Context
Oriflame is a Sweden-based beauty retailer generating nearly 1 billion SEK in annual online sales. Its checkout flow, used in over 55 countries, is central to the shopping experience. Yet the existing system was aging, inconsistent, and full of UX friction.
Meet the shoppers
Casual Shopper
A customer who browses and purchases Oriflame products one to a few times a year. They shop for personal use or gifts and enjoy discovering new beauty favourites on their own terms.
Brand Partner
A self-employed reseller who places bulk orders every month. Brand Partners run their own beauty business, and benefit from exclusive tools, discounts, and support from Oriflame to grow their sales.
Research insights
Medallia
Google Analytics
Power BI Reports
User Interviews
Think-Aloud Test
Shipping costs, totals, and discounts were hidden in a drawer-style summary box. Users sprinted through the whole checkout flow to see the total price breakdown.
No final order preview, leading to checkout anxiety. Users would go back to the shopping bag step to double-check their order.
Unclear whether the selection of the payment method will trigger the finalisation of the order. Also, the step looked visually untrustworthy.
Slow page loading together with low-value features added visual and functional clutter
The legacy checkout used a drawer-style summary box that many users missed. As a result, they had to go through the entire checkout just to see the delivery cost and understand what the total included.
Benchmark
We audited modern checkout experiences across leading e-commerce brands and adapted key learnings to fit Oriflame’s unique needs. This included eliminating redundant screens and low-impact features, mapping user journeys across both desktop and mobile, and aligning the experience with Oriflame’s new UI Design System to support long-term scalability.
Design & Testing
Figma prototype
Supervised user test
Lyssna A/B testing
We created low-fidelity prototypes to validate early design decisions and conducted qualitative testing through moderated sessions. To complement this, we used Lyssna for A/B-style quantitative testing, allowing us to gather broader user input. Insights from both methods informed iterative improvements based on user feedback and observed behaviors.
A hidden summary (left) vs. a persistent bottom summary (right)
Most users ignored the expandable drawer, but quickly found pricing info in the bottom-fixed summary.
Final Solution
We reduced the checkout from 5 to 3 steps by merging delivery, payment, and summary into a single page.
Always visible on desktop; anchored at the bottom on mobile
Ensures users can confirm items on the checkout page before placing their order
WCAG 2.1-compliant with improved hierarchy and readability
Uses Oriflame’s UI kit for consistency and easier updates
Enhanced order summary with additional information for Brand Partners.
Early Results
30% faster checkout*
Average checkout time reduced from 240s to 168s
30%*
Faster load time across devices
MVP launched
In selected countries
New design
Based on benchmarks and competitor data
*Projected based on funnel data in test countries and internal benchmarks.
Reflection
One of the biggest challenges was balancing simplicity with the complexity of a global business, managing variable pricing, diverse payment types, and regional requirements.
We learned that clarity and trust outweigh clever UX tricks, users want to see totals early, and A/B testing layout patterns like accordion vs. scroll was key to validating decisions.