How a design system can help teams build better user experiences
Over the past 8 months we have been busily building out OVO Group's design system - Nebula. Since we started we've built 60 components, 55 of which have been adopted across 10 different products 📈, and at last count our components have been inserted a whopping 8782 times across our various Figma projects 🎉
Why “Nebula”? At OVO we are a family of companies; the Nebula design system is a part of our Orion platform, as the Orion Nebula is part of the Orion Constellation ✨. It sits in Kaluza, and we’ve built it to be brand-agnostic so it serves all our brands.
But what is a design system anyway? A quick google search will give a wide range of different single sentence definitions, but we like to think of Nebula, as a set of connected patterns and shared practices. This means that it is not only opinionated about how components and their interactions should be built, but also about how to create, define and share them.
Our aspiration is to make designing, and building consistent, experiences with accessibility at their core, simple.
To achieve this aim Nebula equips teams with three main tools;
🧩 Components - a fully documented catalogue of components is available across three platforms, Web, Native and Design. Components are probably the most tangible parts of Nebula that teams use. The aim is to provide a central repository of components that can be used as building blocks for user interfaces. There are lots of advantages to working with a catalogue like this, including
- ⏳ teams spend less time recreating patterns and components. This means they can spend more time focusing on customer focused problems
- 💅 having a centralised set of components means that different products all have a consistent look and feel for our users, which makes them easier to use
- ♿ components have been built to AA accessibility standards, meaning that all of our products are accessible to our users without additional work from teams
- 🛠️ providing development and design with a shared language and set of tools
🧱 Foundations - the smallest building blocks of a user interface, which provide low level reusability through the use of design tokens. Nebula defines the design fundamentals for components, elements such as colours, spacing and typography. Nebula is a brand agnostic design system, which means that these foundational elements can be customised. This enables different brands to use Nebula components whilst still reflecting their brand identity.
📚 Guides - These are a diverse set of opinionated guidelines on best practices for using Nebula, where we discuss creating, defining and sharing the system. This section is intentionally (ahem) nebulous, but it is here where Nebula becomes more than simply a component library, and more a living, constantly evolving product that all teams can use and contribute to.
One example of a less tangible, but no less valuable, benefit of using a design system like Nebula is how it can be used to improve collaboration within teams. Nebula provides teams with a starting point for conversations about building products by providing a shared language. This means that design, development and product are all talking about the same set of components when discussing the best way to approach building an experience. This shared language is particularly powerful, because once everyone is talking the same language, teams can really focus on whether a particular pattern is the best solution for their customers.
Over the past 8 months the Design System team has been focused on building enough components to make Nebula useful to all teams across all of OVO's brands, we've built a kick-ass documentation site and we've embedded a process where anyone can contribute back to the system. Not a bad start 😉.
So what's next for Nebula? The design system team have big plans, we're currently working on closely coupling usability research into the process of creating components. This involves working with our user researchers to feed back the results of any tests they have been running and highlighting these in our documentation site. After all, it's important that the design patterns we are including in the system have been proven to be the best solution to our customer's problems.
We're also planning on looking into how we can open source the design system across our development and design platforms. This would allow us to accept contributions from as many teams across the group as possible. We also want to investigate how we incorporate internationalisation into Nebula components, so that we can better support the work being done across OVO's international brands.
We’ve made amazing progress getting the design system up and running and integrating it into team’s workflows during 2020, and with lots of exciting work in the backlog 2021 looks to be another busy year for Nebula 🚀