Jul 25 - Ongoing
In B2B / B2C marketplaces, payment transactions involve risks. Before the redesign, when users experienced failed payments, they received no guidance or clarity about what had gone wrong.
In this product initiative I led, we wanted to redesign the payment flow while improving transparency, clarity, and recoverability.
Full breakdown of the case study available on request
Context
Metro processes thousands of important orders every day, but a lot of them often failed or ended up being abandoned. This happened because the old payment system had issues such as the lack of a clear checkout step, unclarity on how to handle VAT, inconsistency with payment options, confusing error messages, and lack of a clear price breakdown.
Below there is the old version before the redesign, which is still currently being used on most Metro domains across Europe.
Goal
We wanted the payment flow to be simple, transparent, and reliable for B2B customers. Our focus was on:
Creating a guided checkout with clear steps, so users always knew where they were.
Making VAT handling transparent and consistent, reducing confusion for buyers and finance teams.
Standardizing payment methods and flows, so info will be saved and filled automatically.
Providing clear, contextual error messages, helping users resolve issues without dropping out.
Ensuring a complete price breakdown was visible early in the process, so trust wasn’t broken at the last minute.
Impact
Team
Product discovery
I kicked off the discovery by reviewing over 200 support tickets and chat transcripts, and by talking to 9 customers and 6 internal stakeholders. These pain points kept coming up: people couldn’t see what was happening in the flow, error states were inconsistent, pending payments left them hanging, and the back office lacked transparency.
To put this in context, I mapped where users were dropping off in the funnel and benchmarked Metro’s flow against leading B2C and B2B payment patterns to see what we could do better.
User Stories
From support calls, Freshdesk tickets, and chats with our finance team, I pulled out the recurring problems and turned them into simple job stories: these stories gave us a shared way to talk about what users actually needed, such as understanding why a payment failed, what to do when it’s pending, or how to match records in the back office.
Instead of patching issues one by one, the stories helped us shape consistent patterns and recovery flows. And because each story was tied to a real pain point, they also gave us a way to measure success: fewer escalations, more recovered payments, and more confidence.
Service Blueprint
Checkout and payments don’t live on their own, they connect to order management, fraud checks, VAT, shipping, and even returns. To make sense of all that I mapped the full journey in a service blueprint that covered everything from the moment an order is placed to what happens after delivery.
I worked on this together with support, PMs, tech leads, and UX researchers. The blueprint made the hidden gaps obvious: buyers and sellers weren’t always seeing the same status, no one fully “owned” certain error states, and the recovery path during returns was messy and inconsistent. Having this view gave us a clear starting point for where design could bring structure and alignment.
Seller Office Flow
I also mapped the full seller account and offer upload workflow: the flow showed just how many frustrations sellers were dealing with, such as repeated logins, difficult upload steps, scattered error messages, and limited visibility into their order status.
Delivery: before vs after
Before, the delivery step felt flat and a bit hard to scan: the sections looked too similar, and there was no cost summary on the page, so you only saw the total price much later in the flow. Now each section is clearer, and the order summary is always visible on the right with a full breakdown and the “Continue to Payment” button right below it.
Payment: before vs after
Originally, payment options were just a list of radio buttons with some labels still in German, as the interface tended to be buggy at time. It didn’t feel very clear or easy to use: in the redesign, the options are simple cards with logos, all in English, and the chosen method expands to show its details. The order summary stays on the side so users always know what they’re about to pay.
Review & Place Order: before vs after
The review step used to look like plain text, with weak spacing and a button that didn’t feel connected to the total: now, all the details sit in neat cards with clear “Edit” links, and the summary highlights the total with the “Place Order” button directly beneath it. It feels cleaner and more trustworthy as a final confirmation.
Mobile friendliness
A big priority in this project was mobile friendliness, since the old flow wasn’t responsive, and on smaller screens it was hard to navigate. In the redesign, every step is optimized for mobile with larger touch targets, tighter spacing, and a sticky summary drawer so users always see their total.
Before, error handling was generic: almost every failure showed the same vague message, no matter what actually caused it. Together with product managers and customer support team, I created a canonical state model with four clear states: success, pending, failure, and recovery. Each state came with defined transitions, display rules, and user actions, so errors could be surfaced in a way that made sense. We also built an error taxonomy and rewrote the messages in action-first microcopy: customers now saw why their payment failed and what they could do next.
Payment reconciliation flow
At Metro reconciliation was a slow, manual process that often led to errors. Working with finance stakeholders, I redesigned the reconciliation UI in the back office to make the process faster and more reliable.
We improved the mapping between bank reference IDs and Metro transaction IDs, and added simple micro-interactions like copy, confirmation, and inline editing: these small details helped reduce human error and gave finance teams more confidence when handling large payment volumes.
Dunning & Collections
For failed or contested transactions, like chargebacks or insufficient funds, the collections process was inconsistent.
I redesigned the back-office UI to make it more structured and transparent: the new flow standardized dunning actions across email, phone contact, and escalation, so teams followed the same process every time. It gave clearer visibility into buyers, dispute reasons, and fraud flags, and improved tracking across teams, making sure Metro’s records matched what customers saw.
Design System Integration
I turned these enhancements into reusable design system components so they wouldn’t just live in one flow, but scale across the product. That meant creating:
Payment status banners (success, pending, failure, recovery) that gave customers instant clarity.
Retry modules that allowed users to switch methods or safely retry without losing their order.
VAT patterns that aligned with back-office reconciliation and invoice generation.
Closing notes
We brought everything together into a single, consistent checkout wizard with three clear steps, we built recovery paths so users could retry or switch payment methods without losing their order, we designed action-first error messages reduced uncertainty and helped resolve failures faster.
This project also helped us expand Metro’s pattern library: payment states, guidance, and escalation patterns now cover not only the checkout front end but also the back office. VAT transparency was aligned across checkout, invoices, and finance systems, which is a big step for B2B customers who rely on accurate reconciliation.
Finally, the shared state model and content taxonomy are now used by design, engineering, and support: that means fewer one-off fixes, more consistency, and a solid foundation for scaling new payment methods like SEPA, invoice, and BNPL.