natwest
natwest
Problem
Problem
I had to overhaul NatWest’s community hub while stuck inside an old, rigid design framework that produced safe but lifeless, “corporate” experiences users didn’t connect with.
I had to overhaul NatWest’s community hub while stuck inside an old, rigid design framework that produced safe but lifeless, “corporate” experiences users didn’t connect with.
Solution
Solution
I pushed for a more liberal visual and UX direction, teamed up tightly with the UX crew, and brought in unconventional but on‑brand patterns shaped directly by user feedback.
I pushed for a more liberal visual and UX direction, teamed up tightly with the UX crew, and brought in unconventional but on‑brand patterns shaped directly by user feedback.
Outcome
Outcome
The hub relaunched with a fresher, more engaging experience that landed better with customers, reassured stakeholders, and proved we could move beyond the old framework without losing the brand.
The hub relaunched with a fresher, more engaging experience that landed better with customers, reassured stakeholders, and proved we could move beyond the old framework without losing the brand.
Year
Year
2021
2021
Industry
Industry
Finance
Finance
Scope of work
Scope of work
/
App Design
App Design
Timeline
Timeline
5 months
5 months
Discovery
Discovery
In discovery, it became clear that the existing design system was both my starting point and my cage. The rules were non‑negotiable: I could introduce new components, but I couldn’t change core styles—no new colours, typography, or spacing primitives.
That meant I had to treat the system as a fixed language and focus on saying something new with the same alphabet.
In discovery, it became clear that the existing design system was both my starting point and my cage. The rules were non‑negotiable: I could introduce new components, but I couldn’t change core styles—no new colours, typography, or spacing primitives.
That meant I had to treat the system as a fixed language and focus on saying something new with the same alphabet.
In discovery, it became clear that the existing design system was both my starting point and my cage. The rules were non‑negotiable: I could introduce new components, but I couldn’t change core styles—no new colours, typography, or spacing primitives.
That meant I had to treat the system as a fixed language and focus on saying something new with the same alphabet.
In discovery, it became clear that the existing design system was both my starting point and my cage. The rules were non‑negotiable: I could introduce new components, but I couldn’t change core styles—no new colours, typography, or spacing primitives.
That meant I had to treat the system as a fixed language and focus on saying something new with the same alphabet.
Discovery
Discovery
I audited the current flows, UI patterns, and content to see how far the existing tokens and components could stretch. Anywhere the experience fell short, I looked for ways to recombine what we already had; nesting, sequencing, and resizing components to create fresh patterns that still passed the brand sniff‑test.
The goal wasn’t to fight the system, but to prove that within its limits we could still ship something that felt warmer, and more modern.
With the wireframes already in motion, I moved into design sprints, eeking out what it wasnt going to be as quick as possible.
I audited the current flows, UI patterns, and content to see how far the existing tokens and components could stretch. Anywhere the experience fell short, I looked for ways to recombine what we already had; nesting, sequencing, and resizing components to create fresh patterns that still passed the brand sniff‑test.
The goal wasn’t to fight the system, but to prove that within its limits we could still ship something that felt warmer, and more modern.
With the wireframes already in motion, I moved into design sprints, eeking out what it wasnt going to be as quick as possible.
I audited the current flows, UI patterns, and content to see how far the existing tokens and components could stretch. Anywhere the experience fell short, I looked for ways to recombine what we already had; nesting, sequencing, and resizing components to create fresh patterns that still passed the brand sniff‑test.
The goal wasn’t to fight the system, but to prove that within its limits we could still ship something that felt warmer, and more modern.
With the wireframes already in motion, I moved into design sprints, eeking out what it wasnt going to be as quick as possible.
I audited the current flows, UI patterns, and content to see how far the existing tokens and components could stretch. Anywhere the experience fell short, I looked for ways to recombine what we already had; nesting, sequencing, and resizing components to create fresh patterns that still passed the brand sniff‑test.
The goal wasn’t to fight the system, but to prove that within its limits we could still ship something that felt warmer, and more modern.
With the wireframes already in motion, I moved into design sprints, eeking out what it wasnt going to be as quick as possible.
Discovery
Discovery
I started with a few concepts using photographic backgrounds and translucent panels, but they raised accessibility concerns.
So I shifted to a white canvas and experimented with vertical, swipeable carousels, which felt visually interesting. I was never fully convinced by that direction, so I parked it and explored other options.
I started with a few concepts using photographic backgrounds and translucent panels, but they raised accessibility concerns.
So I shifted to a white canvas and experimented with vertical, swipeable carousels, which felt visually interesting. I was never fully convinced by that direction, so I parked it and explored other options.
I started with a few concepts using photographic backgrounds and translucent panels, but they raised accessibility concerns.
So I shifted to a white canvas and experimented with vertical, swipeable carousels, which felt visually interesting. I was never fully convinced by that direction, so I parked it and explored other options.
I started with a few concepts using photographic backgrounds and translucent panels, but they raised accessibility concerns.
So I shifted to a white canvas and experimented with vertical, swipeable carousels, which felt visually interesting. I was never fully convinced by that direction, so I parked it and explored other options.
Discovery
From there I committed to the white background, which gave everything more breathing room. I tested different corner radii, shadows, borders and type alignments, and eventually landed on the layout on the far left.
It felt the most premium—almost “Medium‑esque” —and let all the elements sit together in a way that felt natural and right.
We chose two flows: Incident + Outstanding Tasks.
The 'Incident' flow prioritises speed and clarity, helping engineers capture the right information in that moment, allowing the sharing of potentially life saving information, instantly.
The 'Outstanding tasks' flow supports reflection and follow-up, making it easy for managers to review learnings, complete actions, and share knowledge back into the field.
We chose two flows: Incident + Outstanding Tasks.
The 'Incident' flow prioritises speed and clarity, helping engineers capture the right information in that moment, allowing the sharing of potentially life saving information, instantly.
The 'Outstanding tasks' flow supports reflection and follow-up, making it easy for managers to review learnings, complete actions, and share knowledge back into the field.
Discovery
Discovery
With the full set of wires done, I pushed the journeys through to a finished state. The client was happy and signed off on the initial design direction, but I still felt there was room for something warmer and more playful, which had been part of the original brief.
I wrapped that first style, then was given a few extra weeks to explore a second route. This one leaned into a more illustrative look, giving the brand a more distinctive, characterful feel
We chose two flows: Incident + Outstanding Tasks.
The 'Incident' flow prioritises speed and clarity, helping engineers capture the right information in that moment, allowing the sharing of potentially life saving information, instantly.
The 'Outstanding tasks' flow supports reflection and follow-up, making it easy for managers to review learnings, complete actions, and share knowledge back into the field.
We chose two flows: Incident + Outstanding Tasks.
The 'Incident' flow prioritises speed and clarity, helping engineers capture the right information in that moment, allowing the sharing of potentially life saving information, instantly.
The 'Outstanding tasks' flow supports reflection and follow-up, making it easy for managers to review learnings, complete actions, and share knowledge back into the field.
Illustrations
I found an artist online that fitted the bill and we commissioned a set of stand alone figures made of young men and women (and dogs) set in a serious of happy, confident poses.
To help sell the pitch and secure £8m in funding, I needed to establish a clear brand story that made the product feel credible, cohesive, and easy to understand through visual storytelling.
I created a lightweight, satellite design system that was flexible enough to move quickly outside BP’s overloaded core design system, while staying close enough to brand to avoid unnecessary friction.
In the final 4 weeks, the wider design team was invited into weekly show-and-tells to gather feedback, refine the direction, and align with their own emerging visual standards.
To help sell the pitch and secure £8m in funding, I needed to establish a clear brand story that made the product feel credible, cohesive, and easy to understand through visual storytelling.
I created a lightweight, satellite design system that was flexible enough to move quickly outside BP’s overloaded core design system, while staying close enough to brand to avoid unnecessary friction.
In the final 4 weeks, the wider design team was invited into weekly show-and-tells to gather feedback, refine the direction, and align with their own emerging visual standards.
Illustrations
These landed really well, fitting neatly within NatWest’s colour palette and giving the team a second, distinctive style they could confidently lean on.
To help sell the pitch and secure £8m in funding, I needed to establish a clear brand story that made the product feel credible, cohesive, and easy to understand through visual storytelling.
I created a lightweight, satellite design system that was flexible enough to move quickly outside BP’s overloaded core design system, while staying close enough to brand to avoid unnecessary friction.
In the final 4 weeks, the wider design team was invited into weekly show-and-tells to gather feedback, refine the direction, and align with their own emerging visual standards.
To help sell the pitch and secure £8m in funding, I needed to establish a clear brand story that made the product feel credible, cohesive, and easy to understand through visual storytelling.
I created a lightweight, satellite design system that was flexible enough to move quickly outside BP’s overloaded core design system, while staying close enough to brand to avoid unnecessary friction.
In the final 4 weeks, the wider design team was invited into weekly show-and-tells to gather feedback, refine the direction, and align with their own emerging visual standards.
To completion
Both routes tested strongly, and the illustrative style was ultimately chosen. From there I moved onto a new four‑month project, reworking registration, login, migration and password flows—a programme that helped grow engagement from around 650k to 1.6m users over roughly two years.
To help sell the pitch and secure £8m in funding, I needed to establish a clear brand story that made the product feel credible, cohesive, and easy to understand through visual storytelling.
I created a lightweight, satellite design system that was flexible enough to move quickly outside BP’s overloaded core design system, while staying close enough to brand to avoid unnecessary friction.
In the final 4 weeks, the wider design team was invited into weekly show-and-tells to gather feedback, refine the direction, and align with their own emerging visual standards.
To help sell the pitch and secure £8m in funding, I needed to establish a clear brand story that made the product feel credible, cohesive, and easy to understand through visual storytelling.
I created a lightweight, satellite design system that was flexible enough to move quickly outside BP’s overloaded core design system, while staying close enough to brand to avoid unnecessary friction.
In the final 4 weeks, the wider design team was invited into weekly show-and-tells to gather feedback, refine the direction, and align with their own emerging visual standards.
(2014-26)
Let’s talk.
Tell me about your project-whether it’s a app, website, product creation or a build with Ai.
Quick response.
If you’re ready to create and collaborate, I’d love to hear from you.
Lead Product Designer
Moodflo
Michael Ruocco
Let’s talk.
Tell me about your project-whether it’s a app, website, product creation or a build with Ai.
Quick response.
If you’re ready to create and collaborate, I’d love to hear from you.
Lead Product Designer
Moodflo
Michael Ruocco