OVO Group
Nebula Design System
Orion nebula is a platform design system project I started with one of the lead developers in the business.
The system started as OVO_byus, a branded system for OVO energy but then evolved into a themeable multi-brand platform as the business grew.
Setup & tooling
The tools we decided to utilise were Figma, React & React native.
The design team were using Sketch without any version control, after researching and testing a few options I opted for Figmas as the tool of choice for the design system and shifted the design stack for OVO onto Figma, given I had implimented this change, I also needed to ensure I had buy in and trained the design community.
The component process
#1 Audit
We check existing instances across out applications to make sure we are aware of current use cases and designs. May also involve study of existing research in the case of forms and so on.
#2 Kickoff
We filter the audit list down to the most used cases - we only build what is essential for immediate delivery.
We also research best practice for accessibility to funnel the design process.
#3 Design
It is then designed and tested in situ, then reviewed by the team.
Once we’re all happy the designs are turned into reusable components which may have many states and variants.
#4 Guidelines
Establish guidelines for the component, inc general usage as well as best practice. Can bring to light considerations that affects design and build. Once written, they go through copy review and are moved to the docs site.
#5 Dev kickoff & dev build
The engineers agree on the technical approach for building the component. This ensures consistency and easier review.
We build the component starting from core on React and React Native. We often find new considerations here. Once the foundations are solid we create the ovo energy versions.
#6 Review, release & rollout
The engineers agree on the technical approach for building the component. This ensures consistency and easier review.
We build the component starting from core on React and React Native. We often find new considerations here. Once the foundations are solid we create the ovo energy versions.
#7 Iterate
After releasing a component we take on feedback from teams and if required we add variations or make improvements to existing components.
System personas
Before we created the docs site we wanted to understsand the customers of the design system.
I ran a workshop with our delivery manager within the design system to put together following personas.
The docs site
Used as our primary tool for sharing design system information.
Contains tutorials and content on setup, theming and usage.
Figma setup
A multi-brandable platform
When setting up byus we had thought about multi-brand, but were strongly focused on one brand.
With the shift to white labelling, I re-architectured the figma library to support ‘theming’. All branded systems have system components linked from the Nebula library, with their brand overrides living within their own brand file they could share out as a branded system. I created the Nebula template file so brands could quickly spin up new libraries.
Creating dark mode
Walkthrough of creating a dark mode theme based on the Nebula template.
Creating a branded system
Creating a completly branded system in under 20 minutes (reduced to 3).
Nebula ‘unbranded’ to OVO branded pages
Contribution
We had decided we would move toward a more federated model when we first started the design system team. Once we had established a solid foundation an
process we opened up the contribution process. The graph below illustrates the process flow in interacting and creating components for Nebula.
What Nebula achieved in 9 months
Release of a documentation site
3 platforms
2 brand libraries
60 components released
42,752 insertions in Figma
163 unique component adoptions
948 component imports in dev projects
DRIVEN BY DESIGN
© 2020 Ness Grixti
For small creatures such as we the vastness is bearable only through love.