Monzo.com is our digital front door. It’s a place where people can really get to know us, and for many, it’s the very first step in their journey. In fact, about 32% of our UK signups start right here.  But for a long time, the web experience didn't quite reflect the Monzo Magic users find in our app, it was more Monzo...ish.

Our internal web workflows were equally unmagical. To help us move as fast as possible, our Marketing Managers take the lead on building web pages rather than handing them off to designers and engineers. But for a long time, they didn't have the right tools for the job. Without a single source of truth or a web design system to guide them, they had to patch together bits of old designs and just hope the CMS (content management system) could actually support the build.

This created a bottleneck for everyone. Without a system, Marketing Managers were building layouts in Figma that often didn't translate to the CMS. Engineers were then stuck making custom tweaks or reinventing the wheel to meet deadlines, while designers struggled to keep things consistent and on-brand without shared guidelines.

The result was a collection of layouts that felt basic, unbranded, and a bit flat. We knew we had to move away from these static pages. Our goal was to give our non-technical teams the right tools to build beautiful, high-converting pages quickly and at scale.

We kicked off with cross-functional workshops to align content, design, engineering, and data science. We didn't just want a redesign; we wanted a data-backed framework that actually made sense.

We audited the entire site, categorising pages by intent. This led to the identification of seven core web page templates that all our web pages fall into. We prioritised them based on traffic and impact on signups. To keep ourselves honest, we created the Magical Template Scorecard: a 13-point framework every page must survive before it’s allowed in front of a customer.

With this foundation in mind, it was time to start redesigning. This project was a true collaboration between Product Design and Design System. We didn't work in silos; instead, we sat side-by-side to bridge the gap between creative storytelling and technical scalability. While one of us focused on redesigning templates and crafting the visual narrative, the other built the system from the ground up to ensure every design element was consistent and robust.

And of course, we made sure to fit in plenty of cuddles with Winston: our unofficial office mascot, resident poodle-mix, and the only one in the building who truly understands the importance of a midday nap.

While we led the design, the real magic happened through collective effort. We worked as part of a much wider team, blending our design work with the expertise of our colleagues:

We built a new design system for monzo.com from the ground up to bridge design, engineering, and content. It provides a shared foundation: naming conventions, design patterns, and interaction behaviours, so teams can move faster with fewer handoffs.

We use semantic design tokens for colour, typography, spacing, and motion. These tokens are accessibility-minded and brand-expressive, supporting future themes without refactoring. Components in Figma and code are engineered for maximum API parity, so designers, engineers, and writers speak the same language.

The system is responsive by default and stress-tested across content densities, locales, and scripts to ensure templates scale to all markets. Accessibility is built in (focus, contrast, keyboard, screen readers) and measured against WCAG targets.

We traded one-off static pages for a library of reusable modular content blocks. Think of it as Lego, just with fewer pieces to step on. Building blocks include everything from high-impact hero sections and feature highlights to UI spotlights and card carousels.

This system is built for plug-and-play autonomy. In Figma, our marketing teams can now simply drag content blocks onto the canvas and reorder sections. It transforms the design process from a time-consuming, bespoke engineering task into a streamlined, creative assembly.

We worked closely with our talented brand designers to ensure the web felt like a natural extension of the Monzo world.

To top it off, we added subtle animations that guide the user’s attention at exactly the right moment without becoming overwhelming. These small moments of delight make the experience feel magically Monzo.

Our redesign was influenced by the aesthetic-usability effect, the psychological phenomenon where users perceive more visually appealing designs as more intuitive and reliable. As our primary touchpoint for new customers, the website needs to signal the same level of craft and security as our banking product. If the storefront looks polished and premium, users are more likely to trust the product behind it.

We wanted to measure our new templates against legacy pages quickly, rather than waiting for a full CMS build-out. So, we got a bit experimental. Using Figma MCP, we "vibe-coded" our first pilot page. Our tech lead integrated this into our codebase, creating a "near-production" experience for real-world testing. 

The result? 

This result proved our approach was right and gave us the confidence to hit "go" on the rest of the templates and encourage our content editors to rebuild all the web pages using our new design system.

We knew we had to fix the "unmagical" workflow of building new pages for good. We ran Figma Upskill Workshops for our marketing teams, teaching them how to build their own pages. We now hold regular design office hours to support them, ensuring they feel like architects.

We’ve built the foundations, designed the templates, and set the guidelines. But the real test starts now.

While we’ve created the "magic" tools, scaling them is now in the hands of our Marketing Managers. The biggest challenge moving forward is maintaining that high quality bar as we grow. We don’t have all the answers yet, and we know we’ll need to learn and adapt as more pages go live. It’s a work in progress, but we’re excited to see how the system evolves.

If what you’ve read here resonates and you’re passionate about making money work for everyone, we’re hiring data engineers, analysts, and many more roles across Monzo! Take a look at our careers page to see if we have the right role for you.