The Guardian’s design system was created to bring consistency and efficiency to product design. At the time I joined, the design system was still maturing. While the foundations were strong, there was a need for clearer contribution and governance frameworks to scale effectively, and design decisions were sometimes made in isolation. Investment was needed to help it become the backbone of how we used systems thinking to develop our digital products. Together, we worked on transforming the culture, making the design system more accessible, scalable, and impactful across the organisation. The homepage redesign was happening alongside this shift. While I wasn’t directly involved, the design system team helped strengthen the underlying system that supported this high-impact work. It also demonstrated the value of reusability—75% of the homepage components were reused in the My Guardian area of the app, where the most highly engaged readers create personalised content feeds.
Discover
We began by understanding how designers and engineers were utilising 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, the homepage redesign became a helpful reference point for strengthening the design system and demonstrating its value. However, much of that work took place after I had moved on.
Define
The team aimed to embed the design system more deeply into everyday practice. This involved improving documentation, aligning design and engineering efforts, and embedding scalable principles such as auto-layout, components, and variables. For the homepage, the team focused on making the system flexible enough to support rapid editorial changes while maintaining consistency. They collaborated closely with editors, product managers, and engineers to define the most critical design patterns, ensuring they adhered to accessibility standards, reflected best practices, and functioned effectively across various content needs.
Develop
Refining the design system around the time of the homepage work created a more structured and 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 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 marked a shift in 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.
