OVerview
Every decision was grounded in customer research and refined through analytics and live testing, in close partnership with brand, product, compliance and engineering.
My role
Product Design
Research
Design systems
Timeline
December 2025 - current
Team
3 Designers
2 PMs
10 developers
Platform
Responsive web design
THE Challenge
How might we bring the trust of an iconic brand to a regulated product, while making it easier to navigate?
Until early 2025, M&S Money’s website was hosted by HSBC. When M&S moved it onto the main M&S site, the move had to be fast, so the experience came across as dated and unlike the rest of M&S. The business wanted a full refresh, and then to keep optimising it.
Working within strict regulations was a key constraint. Because running financial services directly was still new for M&S, the business treated it as high-risk, and every word, rate and disclaimer had to be signed off by compliance before going live.
Before: the lift-and-shift design, dated, text-heavy and unlike the rest of M&S
the approach
The challenge came in two parts: rebrand & optimise, then optimize again
Closing that gap meant more than a single redesign. It meant reconnecting the experience to the brand and simplifying it as we learned more from how people actually used it.
RESEARCH & Ideation
Phase 1: Research and data-led decision making for the rebrand
We ran competitor research and interviewed neurodivergent, vulnerable and everyday customers. The same issues kept coming up: too much information, too much jargon, and pages that didn’t feel like M&S.
Competitors used rounded, softer styles to make money feel calmer, but copying them wouldn't feel like M&S
Used rounded shapes only with intent, to highlight key information, keeping the look distinctly M&S
Customers felt overwhelmed by the amount of information and jargon
Regulation limited what we could remove, so we added breathing space, clearer hierarchy and plain-language headings
Analytics showed 3× more page views on mobile than desktop
Designed mobile-first
Defining how we measure success
Conversion: How many eligibility checks turned into completed applications
Engagement: Scroll depth, click-through and drop-off, tracked in Contentsquare
Clarity: Task success and feedback in Maze usability tests, measured against the old pages
Early brand exploration
A snapshot of the research behind the rebrand
RESEARCH & Ideation
Phase 2: Optimise… and optimise again!
After launch, we used Contentsquare analytics and usability testing to find where people were still getting stuck.
Key insight
What we did
Customers dropped off when asked to sign in after checking eligibility, because they didn’t expect it
Made the sign-in step clearer and set expectations earlier in the journey resulting in +5% increase in eligibility check completion after CTA click
Most people didn’t scroll far, especially on mobile
Moved key information and a credit card promotion into the hero
Calls to action disappeared as people scrolled
Added a sticky “Check eligibility” button as an A/B test (results pending)
Phase 2 — Contentsquare analytics after the rebrand launch influenced further optimisation
Phase 2 — Iterating on the credit card hero, guided by usability testing and heatmaps
Final designs
A scalable system that turns research into trusted, easy-to-navigate pages
What we created:
5+
new components
10+
responsive pages
3+
workshops run
1
design guideline doc
Responsive design for the digital rewards page
Design tokens and usage guidelines that kept the system consistent as we scaled the rebrand across every product line, shipping and testing in parallel
A modular component library built to serve all three product lines — credit cards, Travel Money, and insurance — without duplicating design work at each step
Carrying the new brand system into the insurance journey — Eucalyptus tones, simplified layouts, and the same clarity principles applied across the rest of M&S Money
Components tailored to insurance-specific content — coverage details, disclaimers, and quote summaries — while staying visually consistent with the wider system
The quote-to-purchase flow redesigned to cut the jargon and information overload our research flagged as the biggest source of drop-off
impact
The results so far
Since the rebrand launched in April 2026, we've received positive reactions from customers and stakeholders within M&S. We're still tracking performance against business goals and optimising with every release.
Since launch in April 2026 (as of Sept 2026), we've seen:
visitors
eligibility checks across the Rewards Credit Card journey
application completions
Cookies and M&S Money magazine made for launch
M&S Money with the new rebrand on banners across London
Reflection
My takeaways
Research wins arguments 🔬
Whenever stakeholders pushed back, I stopped arguing my opinion and just showed them what customers had actually said. It worked almost every time.
Collaboration defines what's possible 🫱🏼🫲🏽
None of this happened in a vacuum — the workshops with brand, product, and compliance were honestly where most of the good ideas came from.
A good, future-proof design system is worth the investment 🎨
Once we had a real design system in place, everything sped up. I wish I'd pushed for it sooner instead of patching things page by page.
