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.
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.
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.
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.
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.
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.
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.
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.
After releasing a component we take on feedback from teams and if required we add variations or make improvements to existing components.
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.
Used as our primary tool for sharing design system information.
Contains tutorials and content on setup, theming and usage.
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.
Walkthrough of creating a dark mode theme based on the Nebula template.
Creating a completly branded system in under 20 minutes (reduced to 3).
Nebula ‘unbranded’ to OVO branded pages
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.
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.