My role
UX Designer (end-to-end)
UX Designer (end-to-end)
Duration
6 weeks
6 weeks
Project type
Ecommerce experience
Checkout 2.0: Confidence and Scalability
Checkout 2.0: Confidence and Scalability
Context
The 80-Second Mystery
A data-driven redesign of a e-commerce checkout. By identifying cognitive friction in returning users, I shortened the decision-making process and built a modular system now implemented across multiple production platforms.
A data-driven redesign of a e-commerce checkout. By identifying cognitive friction in returning users, I shortened the decision-making process and built a modular system now implemented across multiple production platforms.
The project began with a red flag in GA4. Returning users were taking an average of 1 minute and 20 seconds to complete the checkout. This quantitative data, combined with qualitative customer interviews, revealed a "confidence gap." Users were struggling with the form - they were stuck in a constant loop of re-scanning their data because the interface lacked clear visual reassurance and hierarchy.
The project began with a red flag in GA4. Returning users were taking an average of 1 minute and 20 seconds to complete the checkout. This quantitative data, combined with qualitative customer interviews, revealed a "confidence gap." Users were struggling with the form - they were stuck in a constant loop of re-scanning their data because the interface lacked clear visual reassurance and hierarchy.
Strategy
Three Pillars of Conversion
Cognitive Reassurance
Cognitive Reassurance
Reducing the "Check-and-Recheck" loop by emphasizing information hierarchy and providing clear feedback at every step.
Reducing the "Check-and-Recheck" loop by emphasizing information hierarchy and providing clear feedback at every step.
Modular Scalability
Modular Scalability
Designing a flexible component system that allows for easy implementation across multiple e-commerce platforms.
Designing a flexible component system that allows for easy implementation across multiple e-commerce platforms.
Operational Precision
Operational Precision
Syncing the UI with business rules, such as dynamic payment filtering based on shipping methods.
Syncing the UI with business rules, such as dynamic payment filtering based on shipping methods.
Development
Solving the Friction
The primary goal was to transform a rigid, linear form into a non-linear, open-system flow. Instead of forcing users through a "black box" where previous steps are hidden, I designed a modular layout where every decision remains visible and editable in real-time.
The primary goal was to transform a rigid, linear form into a non-linear, open-system flow. Instead of forcing users through a "black box" where previous steps are hidden, I designed a modular layout where every decision remains visible and editable in real-time.
The primary goal was to transform a rigid, linear form into a non-linear, open-system flow. Instead of forcing users through a "black box" where previous steps are hidden, I designed a modular layout where every decision remains visible and editable in real-time.
Video:
Wireframing timelapse (Cart and Checkout)
Challenge 1
Logic of Exclusion
The previous system forced users to navigate fields, leading to high cognitive load.
I implemented a Logic of Exclusion to streamline the path to purchase
The final prototype serves as a synthesis of the research and iterations described above. It was built to verify the information architecture and the efficiency of the new booking flow.I invite you to look for a few specific points:
Dynamic Filtering
Dynamic Filtering
When a user selects "Personal Pickup," the system automatically triggers a state change, filtering out shipping-only payment methods.
When a user selects "Personal Pickup," the system automatically triggers a state change, filtering out shipping-only payment methods.
Contextual Control
Contextual Control
Users can now access and edit their cart items directly within the checkout environment, eliminating the need to exit the funnel.
Users can now access and edit their cart items directly within the checkout environment, eliminating the need to exit the funnel.
Hard-coded Rules
Hard-coded Rules
By syncing the UI with back-end business constraints, we prevented "invalid selection" errors before they could occur.
By syncing the UI with back-end business constraints, we prevented "invalid selection" errors before they could occur.
Challenge 2
Open-Architecture for Absolute Control
The "Re-reading loop" was a critical failure of the old system. Users returning from the e-shop would find their progress lost, forcing them to re-scan and in a few scenarios re-enter data.
The final prototype serves as a synthesis of the research and iterations described above. It was built to verify the information architecture and the efficiency of the new booking flow.I invite you to look for a few specific points:
How the changes affect the outcome
Simultaneous Visibility
Simultaneous Visibility
Every module—Billing, Shipping, and Payment—stays visible on the screen. This allows users to verify the entire order at a glance without "jumping" between screens.
Every module—Billing, Shipping, and Payment—stays visible on the screen. This allows users to verify the entire order at a glance without "jumping" between screens.
State Persistence
State Persistence
Focused on ensuring the checkout "remembers" user input. By maintaining state even when the user navigates back to the store, we eliminated the cognitive load of repetitive data entry.
Focused on ensuring the checkout "remembers" user input. By maintaining state even when the user navigates back to the store, we eliminated the cognitive load of repetitive data entry.
The Result
The Result
Users now spend more time (1:58 min) verifying details by choice, not by necessity, leading to a record-low 4.8% bounce rate.
Users now spend more time (1:58 min) verifying details by choice, not by necessity, leading to a record-low 4.8% bounce rate.
Implementation
The Reality of Production
My role didn't end with a Figma handoff. By collaborating with the external provider to navigate legacy system constraints, we pivoted from "Pixel Perfect" to "Production Ready".
The final prototype serves as a synthesis of the research and iterations described above. It was built to verify the information architecture and the efficiency of the new booking flow.I invite you to look for a few specific points:
Strategic Impact
Engineering Empathy
Engineering Empathy
Aligning with the backend API logic, we reduced development debt and ensured a smooth launch on zabijacka.sk.
Aligning with the backend API logic, we reduced development debt and ensured a smooth launch on zabijacka.sk.
New Standard
New Standard
The external partner adopted this framework as their new standard for future projects.
The external partner adopted this framework as their new standard for future projects.
Proven Scalability
Proven Scalability
The system was deployed on prepotravinarov.sk without needing a redesign.
The system was deployed on prepotravinarov.sk without needing a redesign.
Technical Trade-offs (The 10% Gap)
Feature
Feature
The Compromise
The Why?
Arrow Shape Dividers
Custom arrows → Straight borders
Custom arrows → Straight borders
CSS compatibility with legacy renderer.
Mobile UX
Product dropdown possition
Used standard flexbox.
Visual Assets
Custom icons → Native platform set
Custom icons → Native platform set
Visual consistency with template.
Prototype
Control in Every Interaction
The final prototype focuses on the most critical path of the e-commerce funnel.
The final prototype focuses on the most critical path of the e-commerce funnel.
The Logic Switch
The Logic Switch
Experience how selecting a shipping method instantly reconfigures the payment options.
Experience how selecting a shipping method instantly reconfigures the payment options.
The Review Cycle
The Review Cycle
Notice how the modular blocks provide instant visual confirmation of the user's data.
Notice how the modular blocks provide instant visual confirmation of the user's data.
Mobile Ergonomics
Mobile Ergonomics
Full optimization for the "Thumb Zone," ensuring that even complex checkouts are easy to handle on the move.
Full optimization for the "Thumb Zone," ensuring that even complex checkouts are easy to handle on the move.
Conclusion
Quality Over Velocity
Rollout data from the zabijacka.sk after first month suggests a new benchmark for e-commerce: intentional friction. By replacing a chaotic 80-second loop with a nearly 2-minute structured verification flow, we eliminated user anxiety. The result is a high-confidence system where time spent is directly proportional to order accuracy.
Rollout data from the zabijacka.sk after first month suggests a new benchmark for e-commerce: intentional friction. By replacing a chaotic 80-second loop with a nearly 2-minute structured verification flow, we eliminated user anxiety. The result is a high-confidence system where time spent is directly proportional to order accuracy.
Replacing frantic confusion with a modular "Open-Architecture," the result didn't just lower the bounce rate to 4.8% — we built a scalable framework that our external partners now adopt as a production standard. Well-informed user is far more valuable than a rushed one.
Replacing frantic confusion with a modular "Open-Architecture," the result didn't just lower the bounce rate to 4.8% — we built a scalable framework that our external partners now adopt as a production standard. Well-informed user is far more valuable than a rushed one.
Ready to scale your product?
Ready to scale your product?
From prototyping to production-ready design systems,
I bridge the gap between user needs and technical feasibility.
From prototyping to production-ready design systems,
I bridge the gap between user needs and technical feasibility.
From prototyping to production-ready design systems, I bridge the gap between user needs and technical feasibility.