Nebula Design System
Role
Lead the initiative from conception to completion, coordinating collaborative sessions, defining the roadmap, and delegating specific tasks to other designers.
Skills
UX/UI Design
Project Management
Collaborative
Tools
Figma & Figjam
Pen & Paper
Google sheets
The Problem
The overall look and feel of Xpanse’s two product pillars had diverged wildly. It was at the point where multiple features had been developed in completely different frameworks, each with their own unique visual languages.
As with all start ups, rapid growth is common place and with that rapid growth comes some challenges. One such challenge was the sacrifice of a consistent visual language for the overall product. Which lead to different product teams using different frameworks and UI packages to rapidly stand up their features, creating a very disjointed product experience.
The Process
Xpanse was a brand new company with minmal branding and identity to work with, so it was a great opportunity to fully explore it’s potential.
We started off by doing an audit the existing patterns, styles, and components currently in use across the two existing product pillars. We created groupings based on those elements and found a significant amount of unnecessary variance across the board.
Our next step was setting up the framework and the language for the design system itself making sure that as a team we were on the same page on how to label styles colors and elements and create a consistent token system that the front-end teams could work with.
From that exercise we created a set of principles to guide the design team while building out the rest of the design system. Then, one of my colleagues and I created a plan and schedule for the assignment and completion of each section of the design system and went to work.
The Work
The next step was the fun part. As a team we went and did an exhaustive analysis of other design systems from enterprise level companies and came back to discuss what worked best for our product and design team.
We boiled the list down to several defining attributes and once we all agreed. Once that was settled, we set about applying those ideas in our own way to later come back together and discuss the the merits and detractors of each. Then, finally combine some of those elements in a way that everyone agreed with.
Once we’d settled on that overall style, we started applying that to the list of elements we needed to design, I then assigned sections to each team member, including myself and set due dates for each section. It was important that this project not interfere too much with the other responsibilities of each team member, so progress was limited.
I had built a very elaborate spread sheet to track progress and completion of each section which had to be reviewed and signed off on by the team as a whole. All in all it took about 6 weeks working at 20% capacity on the design system to complete the first phase.
The Result
The end result was a unified visual language for the Xpanse platform and it’s product pillars with an in-depth, living pattern library. Complete with full documentation and usage guidelines to be used by design and product to aid the product team in creating a consistent experience, while also keeping up with the rapid growth of the product feature set.