UX DESIGN CASE STUDY
Design at Scale
Overview
The Hosted Payment Page (HPP) is a secure hosted payment solution that enables merchants to collect customer details, capture billing and shipping information, and process payments through either a redirect or embedded integration.
In 2024, while attending a Big Room Planning session focused on our European expansion strategy, I identified an opportunity that extended far beyond a single product initiative.
Product teams were exploring how to efficiently white-label our hosted solutions for multiple European banking partners, while our wider organisation was preparing for GP2025, a major transformation programme that would require large-scale product rebranding across the business.
Rather than treating these as separate challenges, I recognised that a shared solution already existed in an adjacent initiative being explored by our Design Operations and Design System teams: Design Tokens.
What followed became one of the first large-scale implementations of Design Tokens within Global Payments and ultimately delivered a 50% increase in UX and Engineering efficiency when white-labelling the Hosted Payment Page.
THE OPPORTUNITY
Looking beyond the immediate request
The original business challenge appeared straightforward. Product teams needed a scalable way to support multiple brands across the Hosted Payment Page as our European footprint expanded.
Historically, branding changes required manual effort across design files, engineering implementation, and ongoing maintenance. As the number of partners increased, so too did the complexity of supporting them.
At the same time, Design Operations had established a goal of piloting Design Tokens with a European product team, while the wider business transformation programme required the ability to rebrand products more efficiently in the future.
Rather than solving each problem independently, I saw an opportunity to align all three initiatives around a common approach.
The question became:
How might we create a single theming framework capable of supporting partner branding, future product rebrands, and Design System adoption simultaneously?
DESIGN TOKENS
Creating a common language between Design and Development
Design Tokens are a way of communicating and embedding repeatable design decisions across both design and development environments.
A token can represent:
Colours
Typography styles
Border radii and spacing values
Logo references and brand assets
Their value lies in creating a shared naming convention and a common language between Design and Engineering. Instead of updating hundreds of individual components, teams can update a token once and have changes cascade throughout the experience.
This makes large-scale theming, white-labelling, accessibility adjustments, and future rebranding significantly easier to manage.
For the Hosted Payment Page, Design Tokens offered a scalable foundation that could support both current business needs and future organisational objectives.
THE STRATEGY
Connecting multiple business goals through a single solution
Rather than treating Design Tokens as purely a Design System initiative, I positioned them as a strategic enabler for several business objectives.
The implementation would:
Support scalable white-labelling for European partners
Provide a standardised approach for banking partner branding
Create alignment between Design and Engineering
Reduce future rebranding effort associated with GP2025 transformation programme
Act as a pilot implementation for broader Design Token adoption
This alignment helped create stakeholder buy-in across multiple teams because the solution delivered value well beyond visual consistency.
It solved an immediate business challenge while also creating infrastructure for future growth.
IMPLEMENTATION
Turning strategy into a scalable framework
The implementation required close collaboration between Product Design, the Design System team, and Engineering.
Working together, we defined the required token structure, created theme files, and developed a shared tokens.css framework that Engineering could integrate into the Hosted Payment Page architecture.
The implementation introduced a layered approach:
Global tokens defining shared design foundations
Theme-specific tokens supporting partner branding
Browser-accessible tokens enabling runtime overrides
Making selected tokens available within the browser created additional flexibility.
Partners could customise elements of their branding more easily, while accessibility technologies and browser-level user preferences could interact more effectively with the interface.
The result was a solution that balanced consistency with flexibility while remaining scalable for future partners and markets.
IMPACT
Delivering measurable efficiency gains
The implementation of Design Tokens fundamentally changed how branding could be managed within the Hosted Payment Page.
Instead of requiring repeated design and engineering effort for each new implementation, branding decisions could now be controlled through a structured token framework.
Outcomes
50% increase in UX and Engineering efficiency when white-labelling the HPP
Reduced effort required to support partner branding requirements
Improved consistency between Design and Engineering outputs
Created a scalable foundation for future market expansion
Provided an early implementation model for broader Design Token adoption across the organisation
Most importantly, the work demonstrated that design can create value not only through customer experiences, but through operational efficiency and organisational scalability.
WHY THIS MATTERS
Strategic design creates leverage
The most valuable outcome of this project was not the Design Tokens themselves.
It was recognising an opportunity hidden within a planning conversation and connecting multiple organisational objectives through a single solution.
By participating in product strategy discussions, I was able to contribute beyond interface design and influence how the business approached scalability, efficiency, and future transformation.
The project reinforced an important lesson for me – some of the highest-impact design work doesn't begin with a screen. It begins with understanding business challenges, spotting connections others may not see, and creating solutions that generate value across multiple parts of an organisation simultaneously.