The Guardian’s design system was created to bring consistency and efficiency to product design. However, when I joined, it wasn’t fully embedded. The team lacked the right contribution and governance frameworks to scale effectively, and design decisions were often made in isolation. While there was a solid foundation, investment was needed to become the backbone of how we used systems thinking to develop our digital products. We focused on transforming the culture, making the design system more accessible, scalable, and impactful across the organisation. The homepage redesign happened alongside this shift, allowing us to apply and strengthen the design system in a high-impact area. It also proved the value of reusability—we could reuse 75% of the homepage components in the My Guardian area of the app, where the most highly engaged readers create personalised content feeds.
Discover
We started by understanding how designers and engineers were using the design system—where it was helping and where it was holding them back. Through surveys, interviews, audits, and hands-on collaboration, we identified key challenges: inconsistent application of components and patterns, limited adoption across teams, and inefficiencies in design tooling. Without structured components and best practices in Figma, designers often reinvented solutions rather than working from a shared system. At the same time, the homepage needed a refresh. It had to support The Guardian’s evolving editorial priorities while improving flexibility and usability. Rather than treating these as separate problems, we saw an opportunity to use the homepage redesign as a catalyst to strengthen the design system and prove its value.
Define
We set out to establish the design system as an essential part of the design process rather than an optional extra. This meant improving documentation, aligning design and engineering efforts, and embedding scalable principles like auto layout, components, and variables. For the homepage, we focused on making the system flexible enough to support rapid editorial changes while maintaining consistency. We collaborated closely with editors, product managers, and engineers to define the most critical design patterns, ensuring they followed accessibility standards, reflected best practices, and worked effectively across various content needs.
Develop
With a clear strategy in place, we moved into rapid iteration. We built prototypes to test new layouts, typography, and modular components, ensuring they aligned with the design system. Refining the design system in parallel with the homepage redesign created a more structured, efficient way of working without slowing down feature development. We also tackled long-standing inefficiencies, such as designing and implementing newsletters and banners. By systematising these elements, we improved quality and speed, making it easier to deploy high-performing experiences supporting subscriptions and reader engagement.
Deliver
The redesigned homepage launched with a stronger, more scalable system underpinning it. The design system had evolved from a loosely applied resource into a robust framework that empowered teams to move faster while maintaining quality. Beyond the homepage, these improvements had a lasting impact—teams were better equipped to design efficiently, test ideas quickly, and maintain consistency across The Guardian’s digital experiences. Over time, we saw clear improvements across the board—onboarding, design pace, and overall consistency and quality each improved by around 30%. Importantly, with less effort needed for UI design and engineering, we shifted our focus towards user experience, spending more time solving the bigger, meaningful problems. More than just a visual update, this work was about shifting the culture around design systems. By demonstrating the tangible benefits of a well-structured system, we ensured that the design system became a fundamental part of The Guardian’s product design approach, setting the stage for future innovation.
