Problem
Mastercard Travel Pass serves cardholders across dozens of issuing banks, each with its own configuration of benefits — lounge visits, Fast Track, dining, airport transfers, eSIM — allocated differently by card tier and programme. The membership page is where a cardholder answers the most fundamental question: what am I entitled to, and how much do I have left?
But the underlying entitlement model produced a combinatorial explosion of possible states: limited vs unlimited allowances, consumed vs remaining balances, monthly vs annual refresh cadences, issuer-local expiry times across time zones, and benefits that simply don't exist on some programmes.
Objective
Design one generic, data-driven membership page that renders every entitlement combination clearly — without per-issuer UI customisation — so any cardholder, on any programme, instantly understands their benefits, balances, and when they refresh.
What I did
- Mapped the state space. Worked through the programme configuration data to systematically document 34 distinct display states across tiers, programmes, and entitlement combinations — turning an ambiguous "it depends" problem into an exhaustive, testable specification.
- Designed data-driven, not issuer-driven. Built the page as a system of generic components fed by configuration data, so a new issuer or tier requires zero new UI work — critical for a platform onboarding banks globally.
- Solved expiry and refresh. Balances are meaningless without timing: designed clear valid-until and next-refresh displays respecting issuer-local time zones, with graceful fallbacks when time zone data is missing — preventing the booking failures and complaints caused by cardholders not knowing when their allowance resets.
- Handled every edge. Fully consumed entitlements, freshly refreshed cycles, unlimited allowances, and missing data all have defined, designed states — nothing left to engineering interpretation.
- Delivered annotated specs covering mobile and web views, consistent with the established design language and component library.
Outcome
A single membership page architecture serving every Mastercard Travel Pass programme worldwide, with no per-issuer variants to maintain. The 34 documented display states gave engineering an unambiguous build target — and QA a complete test matrix.