Oxygen Design System
My Role
Digital Designer
My Team
UI Lead
Digital Designer
UI Designer
Tools
Sketch
Craft
InVision
Timeline
2021
Context
Creating consistency across O2's digital landscape
Description
When O2 kicked off its 360 digital transformation, the design setup showed years of quick fixes and add-ons. Different teams had their own ways of doing things, which led to an uneven experience across digital platforms. Even basic components like buttons and cards had endless variations, making it tricky to keep things consistent and efficient.
I’d seen the problem myself while working as a Digital Designer on optimisation and campaign projects. To make life easier, I started putting together templates and guides to help the team work more smoothly. That caught my manager’s eye, and when the Oxygen Design System team was formed, I joined to help bring everything under one clear, shared approach.
Role & Collaboration
Finding My Rhythm
This project was full of firsts for me: my first time in an agile setup, stepping up from junior to midweight, and working with new teams. I was trusted with real responsibility, from building components to shaping documentation.
I worked closely with people across three main teams: UX, UI Production, and the ODS team. Weekly sessions helped everyone stay aligned and became real collaboration spaces rather than just status updates.
Component Design
Building out the components
I focused on developing larger, more complex components. The Offers Card and Pricing Block were just a few examples of many I helped build to improve consistency and flexibility across the system.
For the Offers Card, I helped define rules for hierarchy, layout, and flexibility so it displayed partner offers, logos, and CTAs clearly across devices. With the Pricing Block, I helped create a modular structure and responsive layout to handle different pricing formats while keeping everything readable across screen sizes.
Documentation & Guidelines
Making the System Work for the teams
I helped make documentation a central part of the system. Using InVision’s Design System Manager, I created guides that went beyond basic specs, explaining how components worked and why. Each element included examples of states and behaviours to help other designers apply them correctly.
I also helped define the colour system, explaining the purpose of each shade rather than just listing hex codes. I applied the same thinking to typography, spacing, and other core design foundations.
