I led the responsive redesign of American Express's credit card application flow and built a scalable design system serving three distinct markets: Global, Canadian, and Kenyan. The challenge was maintaining brand consistency while adapting to local regulatory requirements, cultural expectations, and device preferences.
Lead Visual Designer
Web & Mobile, 3 Markets
American Express needed a unified design approach that could scale across markets without sacrificing local relevance. The existing card application flow had high abandonment rates, inconsistent visual treatment between web and mobile, and no shared design system each market was essentially a separate product.
Global, Canadian, and Kenyan sites looked like they belonged to different companies. Users who interacted with multiple markets had no sense of continuity.
The card application form was long, visually dense, and didn't adapt well to mobile. Users abandoned mid-flow, especially on smaller screens.
Each market's design team worked independently. This meant duplicate effort, inconsistent patterns, and slow delivery when new features needed to ship across all markets.
I followed a structured design process, starting with a comprehensive audit of all three markets and ending with a unified design system and redesigned application flow.
Low-fi wireframes for all application flow steps, tested across breakpoints
Defined colour, typography, spacing, and interaction patterns for global consistency
Created a shared component library adaptable to each market's regulatory needs
High-fidelity mockups for web and mobile, delivered with specs for engineering
The credit card application is where Amex acquires customers. I simplified the flow from a single overwhelming form into a progressive, step-based experience that reduced cognitive load and improved completion rates across all three markets.
The interface presents recommended business cards side by side, making it easy to compare key attributes like rewards, payment flexibility, and premium benefits. Clear hierarchy, scannable labels, and prominent CTAs help users confidently move from recommendation to application without friction.
I built a component-based design system that served as the single source of truth for all three markets. Components were designed to be configurable adapting to local requirements without breaking the global pattern.
Each market had unique requirements Canada needed bilingual (English/French) support, Kenya needed mobile-first optimisation for lower-bandwidth connections, and the Global site needed to accommodate the widest range of card products. The design system handled this through configurable components, not separate designs.
Full product catalog with premium card showcase. Desktop-heavy traffic. Rich imagery and detailed card comparison tables.
Bilingual interface with English/French toggle. Regulatory compliance for Canadian financial disclosures. Adapted card benefits for the Canadian market.
Mobile-first design optimised for slower connections. Simplified application flow with fewer steps. Adapted for local payment infrastructure and mobile money integration.
Designing for scale requires discipline. A design system only works if it's followed. The hardest part of this project wasn't creating the components it was getting three independent market teams to adopt them. Documentation, onboarding sessions, and clear naming conventions made the difference.
Localisation is more than translation. The Canadian market didn't just need French text it needed layouts that worked when text expanded by 30%. The Kenyan market needed designs that loaded fast on 3G. Local context shapes every design decision.
What I'd do differently: I'd establish a design token system from day one. Colour, spacing, and typography values should be defined as tokens that map to each market's configuration, making it even easier to maintain consistency while allowing local adaptation.