My role
Product Designer - Research, Documentation, UX & UI Design, Stakeholder management
Team
Ervin Prislan, Management
Me, Product Design
Timeline & Status
2 Months, Live
Overview
In Q4 of 2023, BAM Chocolate, a premium Slovenian sweets brand renowned for its high-quality ingredients and diverse product range, sought to revamp its online store's checkout process.
The primary objectives were to boost conversion rates, reduce cart abandonment, increase the average order value (AOV), and optimize the post-checkout experience.
PROBLEM OVERVIEW
RESEARCH SUMMARY
BAM’s team knew their checkout wasn’t working but weren’t sure what needed to change. Their main goal was simple: build a better checkout experience that would reduce drop-offs and improve sales.
I began by analyzing demographic data to comprehend the shopping behaviors influenced by age, nationality, and gender. This insight was crucial for tailoring the checkout experience to meet user expectations.
A thorough audit of the current checkout process was conducted, during which I identified 28 areas needing improvement. These findings were presented to BAM's team, highlighting potential barriers to conversion.
1.0 Audit.
Image
I reviewed user data to map out the entire checkout process, identifying areas where users got stuck or abandoned their carts. This analysis confirmed that inconsistencies in the flow were a major issue.
DESIGN EXPLORATION
Focusing on the Jakob's Law, I examined populare-commerce platforms favored by BAM's target demographic. This analysis helped me compile best practices, ensuring the redesigned checkout aligned with user expectations.
Since most users shopped on mobile, I designed the checkout with a mobile-first approach, ensuring it was easy to navigate on smaller screens without unnecessary complexity.
2.0 Mobile wireframes.
Image
To increase the average order value, I integrated upselling options into the checkout. Users were shown complementary products in a non-intrusive way, making additional purchases feel seamless.
2.1 Upsell example.
Image
UI DESIGN AND CONSISTENCY
Since BAM had a well defined brand language I fixed the inconsistencies in the old UI that made the checkout feel unpolished and unprofessional. I also introduced basic components to the Figma file, ensuring visual and functional consistency across all checkout elements and any future updates.
3.0 Components.
Image
I focused on making every step of the process feel intuitive. Button placements, input fields, and progress indicators were optimized to reduce hesitation and improve clarity.
3.1 Checkout flow.
Image
FINAL DESIGNS
4.0 Final UI.
Image
4.1 Popups UI.
Image
4.2 Desktop cart.
Image
4.3 Desktop checkout.
Image
4.4 Desktop post-checkout.
Image
IMPACT AND LEARNINGS