Responsive Seamless Checkout, Simplified: Elevating Webstore

Overview

I redesigned a legacy B2B checkout flow for Thalerus to address growing structural complexity in the purchasing experience. The project focused on turning fragmented business information into a clearer, more guided flow — while working within the constraints of an existing configurable webstore framework.

3.5 mins

Average dwell time on checkout page decreased by 25%

100%

Customer satisfaction reached 100%

80%

Successfully preserved our critical 80% checkout transaction rate

Business Background

Growing business volume and stronger market competition put more pressure on checkout. In a complex B2B flow, the experience lacked guidance and needed to become simpler, clearer, and more transparent without losing key business logic.

B2B checkout carried more business logic than B2C

More business-critical information than a typical B2C checkout.

This flow had to support company accounts, Ship To locations, billing entities, and cost centers — all part of the real structure of enterprise purchasing.

Beyond visual: translating complex business data into usable info.

Users needed to scan, understand, and complete different business responsibilities with confidence.

The challenge was to translate dense business data into information users could quickly understand and complete.

The legacy checkout felt sparse, fragmented, and hard to review

Although it supported all required B2B order details, excessive inactive space, weak information grouping, and limited flow guidance made the experience harder to complete than it should have been.

Who We are Designing For ?

In-depth research process to get an understanding of user’s needs

Diverse Stakeholder Needs: How do we balance them?

Solution 1.1 - Simple scrolling multi-task workflow

This concept streamlines the checkout into a single vertical path using progressive disclosure. Completed sections collapse into summary cards, transforming a fragmented layout into a guided, easier-to-review experience that preserves context while driving progress.

Solution 1.2 - Flexible card-driven interaction inline workflow

This direction reorganizes checkout into a card-based inline workflow, maintaining a continuous vertical flow while defining clear section boundaries. By grouping dense B2B content into modular cards, the layout improves scannability and aligns with existing internal GUI logic. This structure not only preserves system familiarity but also grants dealers greater flexibility to customize content and arrangement through the tool.

UXR and live testing

I conducted 3 rounds of iterative concept testing comparing 2 checkout directions side by side. Both concepts were assessed against 7 evaluation criteria, while recurring walkthroughs helped validate completion flow, editability, GUI logic fit, and adoption risk for returning users.

I followed up with 2 weeks of weekly engineering reviews, coordinating batched spec delivery and recurring feasibility reviews, and an invitation-only pilot with 24 participants across internal users, implementation stakeholders, and dealer-facing reviewers.

What I Learned

This project enriched my understanding of user-centered design and its impact on user experience. I learned the critical importance of keeping interfaces intuitive and accessible while ensuring that they serve the practical needs of users effectively. The process of transforming complex systems into user-friendly interfaces showed me the value of iterative testing and feedback. Additionally, by conducting user training and creating detailed documentation, I honed my skills in communication and educating others about the nuances of the system. These efforts not only improved the final product but also strengthened my ability to lead and manage comprehensive design projects.