{"id":47,"date":"2025-06-01T15:16:51","date_gmt":"2025-06-01T15:16:51","guid":{"rendered":"https:\/\/www.sinkevicius.work\/?page_id=47"},"modified":"2025-12-12T17:37:29","modified_gmt":"2025-12-12T17:37:29","slug":"checkout-redesign","status":"publish","type":"page","link":"https:\/\/www.sinkevicius.work\/index.php\/checkout-redesign\/","title":{"rendered":"Checkout Redesign"},"content":{"rendered":"\n
\n
\n

Checkout Redesign<\/h1>\n\n\n\n
\n

Case study<\/p>\n\n\n\n

\u00b7<\/p>\n\n\n\n

4 Min Read<\/p>\n<\/div>\n\n\n\n

\n
\"Screenshot<\/figure>\n\n\n\n
\"Screenshot<\/figure>\n\n\n\n
\"Screenshot<\/figure>\n\n\n\n
\"Screenshot<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n

Project Snapshot<\/h3>\n\n\n\n
\n
\n
\n
<\/path><\/svg><\/div><\/div>\n\n\n\n
Goal<\/strong><\/h6>\n<\/div>\n\n\n\n

Reduce checkout abandonment by clarifying pricing and speeding up completion across 55+ markets.<\/p>\n<\/div>\n\n\n\n

\n
\n
<\/path><\/svg><\/div><\/div>\n\n\n\n
Role<\/strong><\/h6>\n<\/div>\n\n\n\n

Lead UX\/UI Designer. Owned end-to-end UX and ran stakeholder workshops with PO, SE, and TL.<\/p>\n<\/div>\n\n\n\n

\n
\n
<\/path><\/svg><\/div><\/div>\n\n\n\n
Challenge<\/h6>\n<\/div>\n\n\n\n

Balance transparency and features for casual shoppers and Brand Partners (placing bulk orders).<\/p>\n<\/div>\n\n\n\n

\n
\n
<\/path><\/svg><\/div><\/div>\n\n\n\n
Solution<\/h6>\n<\/div>\n\n\n\n

Merged delivery, payment & summary into one step and added always-visible order summary box.<\/p>\n<\/div>\n\n\n\n

\n
\n
<\/path><\/svg><\/div><\/div>\n\n\n\n
Impact<\/h6>\n<\/div>\n\n\n\n

Average checkout time reduced from 240s to 168s. A 30% faster loading time.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n

What did I do?<\/h3>\n\n\n\n
\n

User Research<\/p>\n\n\n\n

Wireframing<\/p>\n\n\n\n

Copywriting<\/p>\n\n\n\n

High Fidelity Prototype<\/p>\n\n\n\n

Visual Design<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Context<\/h3>\n\n\n\n

Oriflame is a Sweden-based beauty retailer generating nearly 1 billion SEK<\/mark><\/strong> 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.<\/p>\n\n\n\n

\"\"<\/figure>\n<\/div>\n\n\n\n
\n

Meet the shoppers<\/h3>\n\n\n\n
\n
\n
<\/path><\/svg><\/div><\/div>\n\n\n\n
\n
Casual Shopper<\/strong><\/h6>\n<\/div>\n\n\n\n

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.<\/p>\n<\/div>\n\n\n\n

\n
<\/path><\/svg><\/div><\/div>\n\n\n\n
\n
Brand Partner<\/strong><\/h6>\n<\/div>\n\n\n\n

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.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Research insights<\/h3>\n\n\n\n
\n

TOOLS<\/strong><\/p>\n\n\n\n

\n

Medallia<\/p>\n\n\n\n

Google Analytics<\/p>\n\n\n\n

Power BI Reports<\/p>\n\n\n\n

User Interviews<\/p>\n\n\n\n

Think-Aloud Test<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Price Blindness<\/strong><\/p>\n\n\n\n

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.<\/p>\n<\/div>\n\n\n\n

\n

No ORDER PREVIEW<\/strong><\/p>\n\n\n\n

No final order preview, leading to checkout anxiety. Users would go back to the shopping bag step to double-check their order.<\/p>\n<\/div>\n\n\n\n

\n

Payments<\/strong><\/strong><\/p>\n\n\n\n

Unclear whether the selection of the payment method will trigger the finalisation of the order. Also, the step looked visually untrustworthy.<\/p>\n<\/div>\n\n\n\n

\n

 Performance<\/strong><\/strong><\/strong><\/p>\n\n\n\n

Slow page loading together with low-value features added visual and functional clutter<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\"Screenshot<\/figure>\n\n\n\n
\"Screenshot<\/figure>\n<\/div>\n\n\n\n

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. <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n

Benchmark<\/strong><\/h3>\n\n\n\n

We audited modern checkout experiences across leading e-commerce brands and adapted key learnings to fit Oriflame\u2019s 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\u2019s new UI Design System to support long-term scalability.<\/p>\n\n\n\n

\"Screenshot<\/figure>\n<\/div>\n\n\n\n
\n

Design & Testing<\/strong><\/h3>\n\n\n\n
\n

TOOLS<\/strong><\/p>\n\n\n\n

\n

Figma prototype<\/p>\n\n\n\n

Supervised user test<\/p>\n\n\n\n

Lyssna A\/B testing<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

WHAT DID WE DO?<\/strong><\/p>\n\n\n\n

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.<\/p>\n<\/div>\n\n\n\n

\"Screenshot
We tested two Bag page designs to find the best placement for the delivery fee:
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.<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n

Final Solution<\/strong><\/h3>\n\n\n\n

We reduced the checkout from 5 to 3 steps by merging delivery, payment, and summary into a single page.<\/p>\n\n\n\n

\n
\n

Sticky summary box<\/strong><\/p>\n\n\n\n

Always visible on desktop; anchored at the bottom on mobile<\/p>\n<\/div>\n\n\n\n

\n

Bag Preview<\/strong><\/p>\n\n\n\n

Ensures users can confirm items on the checkout page before placing their order<\/p>\n<\/div>\n\n\n\n

\n

Accessibility<\/strong><\/strong><\/p>\n\n\n\n

WCAG 2.1-compliant with improved hierarchy and readability<\/p>\n<\/div>\n\n\n\n

\n

Design system alignment<\/strong><\/strong><\/strong><\/p>\n\n\n\n

Uses Oriflame\u2019s UI kit for consistency and easier updates<\/p>\n<\/div>\n\n\n\n

\n

support for bulk buyers<\/strong><\/strong><\/strong><\/strong><\/p>\n\n\n\n

Enhanced order summary with additional information for Brand Partners.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\"Screenshot<\/figure>\n\n\n\n
\"Screenshot<\/figure>\n\n\n\n
\"Screenshot<\/figure>\n\n\n\n
\"Screenshot<\/figure>\n\n\n\n
\"Screenshot<\/figure>\n\n\n\n
\"Screenshot<\/figure>\n<\/div>\n\n\n\n
\n
\n

Early Results<\/h3>\n\n\n\n
\n
\n
30% faster checkout<\/strong>*<\/h6>\n\n\n\n

Average checkout time reduced from 240s to 168s<\/p>\n<\/div>\n\n\n\n

\n
30%<\/strong>*<\/h6>\n\n\n\n
\n

Faster load time across devices<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
MVP launched<\/strong><\/h6>\n\n\n\n
\n

In selected countries<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
New design<\/strong><\/strong><\/h6>\n\n\n\n
\n

Based on benchmarks and competitor data<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

*Projected based on funnel data in test countries and internal benchmarks.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Reflection<\/h3>\n\n\n\n

One of the biggest challenges was balancing simplicity with the complexity of a global business, managing variable pricing, diverse payment types, and regional requirements. <\/p>\n\n\n\n

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.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Checkout Redesign Case study \u00b7 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 […]<\/p>\n","protected":false},"author":1,"featured_media":428,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-47","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.sinkevicius.work\/index.php\/wp-json\/wp\/v2\/pages\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sinkevicius.work\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sinkevicius.work\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sinkevicius.work\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sinkevicius.work\/index.php\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":159,"href":"https:\/\/www.sinkevicius.work\/index.php\/wp-json\/wp\/v2\/pages\/47\/revisions"}],"predecessor-version":[{"id":1215,"href":"https:\/\/www.sinkevicius.work\/index.php\/wp-json\/wp\/v2\/pages\/47\/revisions\/1215"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sinkevicius.work\/index.php\/wp-json\/wp\/v2\/media\/428"}],"wp:attachment":[{"href":"https:\/\/www.sinkevicius.work\/index.php\/wp-json\/wp\/v2\/media?parent=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}