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.
