Capability & Innovation
Metro Bank emerged as the UK’s fastest-growing challenger bank, capturing 2.1% of the business current account (BCA) market within eight years. Yet in a sector dominated by the "Big Five" banks (90% market share), SMEs faced systemic challenges:
Limited financing access: 40% of SMEs relied on overdrafts, with legacy banks taking weeks to approve loans.
Unmanaged FX risks: 65% of internationally trading SMEs lacked hedging tools, risking £70k annually to currency volatility.
Fragmented tools: Disconnected banking, accounting, and cash flow systems created operational inefficiencies.
To disrupt this landscape, Metro Bank secured £120M in Capability & Innovation (C&I) funding, targeting three critical gaps:
Physical accessibility: 56% of SMEs depended on branches, even as competitors retreated.
Digital transformation: Manual processes slowed essential services like lending.
SME-centric products: Few solutions addressed FX risks or integrated financial workflows.
By combining human-centric service with fintech agility, the initiative aimed to redefine banking for small businesses, scaling Metro’s impact while forcing industry-wide change.
Enhanced FX
While 65% of UK SMEs relied on banks for international transactions, only 33% had access to FX risk tools, exposing businesses to an average of £70k in annual currency volatility losses. 55% of UK SME's also planned new market entry but lacked confidence in existing solutions.
As the Lead visual designer aligned to Metro Bank trade services, I was tasked with transforming their foreign exchange offering into a competitive differentiator.
Our Ambition
The initial brief focused on small incremental improvements, but our research revealed an opportunity to deliver something transformative. This meant significantly expanding the scope, which warranted a thoughtful approach to securing buy-in.
The initial brief focused on small incremental improvements, but our research revealed an opportunity to deliver something transformative. This meant significantly expanding the scope, which warranted a thoughtful approach to securing buy-in.
Visually communicate Metro's sophistication as a global banking partner
Simplify complex hedging tools through intuitive interfaces
Establish emotional confidence for SMEs navigating volatile markets
How did we expand the scope
The solution emerged through "Project Phoenix" - Metro Bank's forthcoming Commercial Online Banking (COB) platform. Though scheduled for later release, Phoenix shared the same technical foundation as our FX platform.
I proposed a week-long design sprint to design Phoenix’s potential UI, creating a vision that demonstrated how an enhanced digital trade service could elevate Metro’s entire commercial proposition.
This approach served dual purposes: it provided senior stakeholders with an understanding of what excellence looked like, while making the case that if Phoenix warranted this level of design investment, the same principles should apply to our Enhanced FX platform.
The sprint deliverables became a powerful storytelling tool, an example of how thoughtful UX could differentiate Metro in a crowded market. By framing our FX project as part of this larger strategic uplift, we transformed perceptions from seeing it as a compliance exercise to recognizing it as a brand-defining opportunity.
The design sprint proved transformative in shifting organizational perspectives. Drawing from my HSBC experience, I introduced a radically different visual language that challenged Metro Bank's existing design conventions. While the full implementation was deemed too disruptive to current product roadmaps, the concept gained significant traction, earning endorsement from both the Head of Design and executive leadership as a future-facing direction worth exploring during Phoenix's formal discovery phase.
This strategic validation had immediate ripple effects.
With leadership buy-in secured, we successfully expanded the Enhanced FX project's scope to incorporate more ambitious UX improvements. To ensure viability, I led cross-functional alignment sessions with engineering and design teams, conducting rigorous feasibility analyses that balanced innovation with ecosystem consistency. These collaborative deep dives allowed us to push boundaries while maintaining cohesion across Metro's digital platforms.
Wireframing
We developed comprehensive wireframes showcasing the ideal FX trading experience.
The proposed solution introduced several key innovations: a dynamic live rate card with time-interval updates, allowing users to secure rates during transactions; a streamlined form aligned with Metro’s existing design patterns for familiarity; and an optimized real estate that transformed previously cluttered workflows into task-focused trading environments.
The proposed solution introduced several key innovations: a dynamic live rate card with time-interval updates, allowing users to secure rates during transactions; a streamlined form aligned with Metro’s existing design patterns for familiarity; and an optimized real estate that transformed previously cluttered workflows into task-focused trading environments.
We regularly tested these new wireframes with users to validate them.
Following multiple rounds of testing and ideation, these are the major insights we uncovered.
Following multiple rounds of testing and ideation, these are the major insights we uncovered.
Visual Design
As the visual design lead on the project, the next phase of UI ideation was down to me. Whilst we were building off the wireframes that were created previously, I also wanted to ensure we were consistent with the rest of the banks online digital products. Due to the nature of the platform we were designing for we had to create some custom components and reskin existing built components to match what was built elsewhere around the bank.
Here is a comparison between the wireframes and the proposed UI uplift for the Enhanced FX project. Whilst I wanted to take it further I still had to keep the design within the reality of the environment the platform was built in. That being said, it was an uplift that resonated well with stakeholders and the product owner especially.
Design system
As the Enhanced FX project was a standalone platform that required custom components, a design library had to be built with specifications for each component.
It was built with the intention of contributing back to the global Metro Bank UI library which was still being developed.
Following the atomic design principles was paramount in this work, ensuring that the atoms were clearly explained and laid out for the developers to understand before creating full molecules. These then aided the creation of page templates to enhance delivery following my departure from the project.
Outcome
A detailed developer handoff was created, which explained the different pages and the components. Sticker sheets were used as a means of clearly defining the components and providing documentation whilst promoting legibility. The intention behind this document was that it would be a living document, long after my departure, that could be iterated on in order to continue progressing the goal of making the Metro Bank Enhanced FX product a market leader in the Foreign Exchange space.
