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.

Nebula-logo

Setup & tooling

Underline
tooling-1

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

Underline

#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.

step-audit
step-kickoff

#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.

step-design
step-guidelines

#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.

step-dev
step-rollout

#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.

step-iterate

System personas

Underline

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

Underline

Used as our primary tool for sharing design system information.
Contains tutorials and content on setup, theming and usage.

Figma setup

Underline

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.

nebula-figma-setup

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

Underline

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

white-line

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

Nebula-graph

DRIVEN BY DESIGN

© 2020 Ness Grixti

For small creatures such as we the vastness is bearable only through love.