5 min
read
UX UI CASE STUDY| Web | B2C
MASTERCARD
Paying with Mastercard just got more rewarding
Client
Industry
Agency
Big Group
Year
2026
Context
Mastercard Miles is a cardholder program from Mastercard, built in partnership with Miles & More, the Lufthansa Group’s loyalty scheme. It launched for German cardholders, who register once and then take part in campaigns: Pay & Earn for collecting miles on everyday card payments, and Pay & Win for prize draws.
Challenge
Mastercard already had millions of German cardholders; Miles & More already had a loyalty program those cardholders trusted. The opportunity was to connect the two so that everyday spending turned into miles. But a program like this only works if people register, and registration asks for something people are instinctively protective of: their card number, typed into a domain they have never visited before, with no immediate reward to show for it.
The real design problem sat in that first impression. Registering means supplying a card number, linking a Miles & More account, and confirming an email address, after which miles are credited to the member’s account on a monthly cycle. The brief was to design a clean registration flow while providing a visually rich UI , where members manage their cards, campaigns and consents.
The program lives between two systems that don’t know each other: Mastercard owns the card, Miles & More owns the miles. Bridging them meant three handoffs and two identities in one sitting: card details, Miles & More credentials, then an email verification that decides whether the registration exists at all. Worse, the reward is invisible at the moment of commitment, since miles arrive weeks later, in aggregate. Consent is granular too, with each campaign needing its own opt-in, up to two cards per member, and a full withdrawal option that blocks re-registration for six months. A large surface area, a tiny window of attention.
Understanding Users
Research started by focusing on the user personas and their journeys. I audited comparable registration flows from other loyalty and banking programmes.
The core tension is that Germany is a card-sceptical market asked to behave like a card-first one: credit and international debit cards take only 13.7% of online revenue, behind PayPal at 28.7%, invoice at 26.1% and direct debit at 14.4%, and only about 56.5% of adults even hold a credit card. For your three personas, the pain splits into two distinct clusters: the moment they must hand over personal data and card details, and the long tail of friction that stops the miles from ever appearing.
Users’goals & Journeys
I audited comparable registration flows from other loyalty and banking programmes, then reviewed where people were leaving the existing path, before running creating a optimal flows for various journeys of the site.
Ideation & Wireframes
The guiding principle for the whole flow was order: help people understand what they are registering for before asking them for anything personal. Wireframing started there rather than with screens, working out what a visitor needs to read and believe in the first few seconds, and only then how many steps the registration genuinely required.
The first round was deliberately plain, greyscale and unstyled, mapping the path from hero to explanation to card entry to account linking to verification, so the awkward moments surfaced before any visual polish could hide them. That round made two problems obvious. Card entry asked for a number before the value was clear, and consent sat too far from the action it governed, which pushed the terms into a wall at the end of the flow. The second round front-loaded a short explanation of the program and its benefits, split the card fields, cut supporting copy to one sentence each, and moved every permission next to the campaign or setting it belonged to
the DEsign System
Trust was the real deliverable, and Mastercard’s design system already carried most of it. Existing global components, type scales, spacing and interaction patterns were reused wherever they existed, so the registration felt like part of the same family of pages people already recognised.
Where the system had no answer, I extended it rather than inventing a parallel visual language, building new components in the same style: a card-detail entry pattern that explains what is being asked and why before the field appears, a progress and tracking component that shows where a registration stands and when points will land, and lighter preview and confirmation states that follow the same rhythm as the surrounding web components and pattern they had met on Mastercard pages before.
Solution
The solution opens with a strong hero that does the trust work before any field appears. Mastercard and Miles & More marks sit together above a single confident headline, set against a deep, saturated background with the campaign key visual bleeding across the width, so the page reads as a real branded program rather than a form that happens to be hosted on a corporate domain. The visual weight drops sharply after that hero, and the registration becomes a single-column flow that keeps attention on one decision at a time. Navigation stays locked to the bottom of the screen. That persistent bar lets members scroll and read at their own pace while always showing where they are in the sequence and what comes next.
Behind the flow sits a simple dashboard for the member’s account, covering three things and only three: the status of their registration, the cards attached to the program, and the points they have collected. Each area takes a single card-based screen with one primary action, and everything non-essential was stripped out, so no member has to hunt for a setting or work out which number matters. The dashboard reuses the hero’s palette and accent colour at a lower intensity, so a member’s progress feels like part of the same brand rather than a separate admin tool.
conclusion
What I took from the project is that trust in financial interfaces is rarely built by a security badge or a line of copy. It is built by sequence: explaining before asking, showing progress instead of percentages, and letting an unfamiliar product arrive in a shape people have already seen elsewhere on the site.
That habit showed up in the numbers, active users rising after launch and returning traffic climbing each time a new campaign went live, since members finally had somewhere familiar to check what they had earned and what was on offer.
