Oxygen Design System

Creating consistency across O2's digital landscape

How did I get started with Design Systems?

When O2 announced their ambitious 360 digital transformation, our design landscape reflected years of organic growth. Different teams had developed their own ways of working, leading to a fragmented experience across our digital platforms. Simple elements like buttons and cards had spawned countless variations, making it increasingly difficult for designers to maintain consistency and work efficiently.

I'd seen these challenges firsthand in my role as a Digital Designer working on O2's optimisation and campaigns. I'd started creating templates and documentation to help my team work more consistently, trying to bring some order to our corner of the design world. This systematic approach caught my manager's attention, and when the opportunity came to join the Oxygen Design System team, my interest in design patterns made me a good fit.

A big team but a structured process

The project marked several firsts for me – working in an agile environment, transitioning from junior to midweight designer, and collaborating with entirely new teams. While I wasn't leading the project, our design lead encouraged my input and trusted me with significant responsibilities, from developing complex components to creating our documentation.

We structured our work around three key teams: UX Design Team, UI Design Production, and the ODS team. Wednesday UI team meetings and Friday ODS sessions created a rhythm that kept everyone moving forward together. These weren't just status updates – they were collaborative spaces where we shared new ideas, improved our processes, and solved design challenges as a team.

How we worked as a team

Creating Order from Complexity

My focus turned to developing organisms – the larger, more intricate components built from simpler elements. The offers card exemplified our approach to solving complex design challenges. It needed to display partner offers, logos, and calls-to-action while maintaining clarity across desktop, tablet, and mobile screens. Working closely with the designers who'd use these components daily, we developed clear rules for logo sizes, content hierarchy, and layout that made the component both flexible and consistent.

The pricing block presented a different challenge. It needed to clearly display multiple pricing elements while maintaining readability across screen sizes. Through regular discussions with designers, we created a modular structure that could handle various pricing scenarios while maintaining visual clarity. We established specific rules for numerical alignment and developed a responsive layout system that preserved critical information at every breakpoint.

Offer card

Offer card

The design system in a nutshell

Making It Stick

Documentation became crucial to our success. Using InVision's Design System Manager, we went beyond basic specifications to create a practical guide for our design community. We broke down component anatomy, showing not just what things looked like but why they were built that way. Each component included clear examples of different states and behaviors, helping designers understand how to use them effectively.


Our colour system exemplified this approach. Rather than just listing hex codes, we created clear guidelines for each shade's purpose – from our Primary Blue that strengthened O2's identity to specific interactive states. This thinking extended across typography, spacing, and every other aspect of the system.

Documentation

What did I learn?

The Oxygen Design System grew to become a cornerstone of O2's digital transformation. As our library expanded to over 1,600 components, we supported the delivery of more than 5,700 screens across various platforms. But the numbers only tell part of the story. The real impact was in how it changed our way of working. Designers spent less time recreating basic patterns and more time solving unique challenges. Teams had clear standards to follow, making collaboration easier and outputs more consistent.

For me personally, the project marked a significant step in my career. Working in an agile environment and contributing to a large-scale system pushed me beyond my comfort zone. The trust placed in me to handle significant aspects of the system helped build my confidence in tackling complex design challenges.

The experience taught me that success in design systems relies as much on clear communication and collaboration as it does on technical solutions. We learned that the best components come from constant feedback and iteration, not theory. Most importantly, we discovered that a design system is more than just a collection of components – it's a foundation that helps teams make better decisions and work more efficiently while remaining flexible enough to evolve with changing needs.