Project:
Design System V2
Role:
Senior Product Designer
I joined Dojo to help them rebuild their multi-platform design system. This was a complex project with lots of moving parts and stakeholders but a great company and team to work for.
Key roles and responsibilities:
• Full component audit
• Token audit
• Token restructure
• Data vis development
• V2 web and native library build
• Figma component build
• Consumer support
• Contribution analysis
• Development reviews
• Development documentation
Analysis
Component Audit
When starting at Dojo, the design system was in a bit of a state of flux with a very small team. Libraries were disjointed with a lot of content being out of date. Therefore the first task was to do a full audit of the existing libraries, components and the product files that were using the components. I then matched this with what had been built in engineering to discover where the gaps in the system were. Whilst going through this audit, I also marked up how we could simplify certain categories of components and streamline build.
Structural audit
Along with the component audit, working closely with other team members, we also looked at how we could restructure the core system libraries to be more effective. This included the following:
• Merging iOS and Android libraries into one library
• Setting up an engineering delivery file that would be the source of truth for all finished components
• Setting up a sandbox file so we could monitor and triage all product team work for system contribution
Audit of 200+ components across web, iOS and Android
Web and Native V2 libraries
Once the component audit was complete, we then moved on to building out the Web and Native V2 libraries. This included migrating components from legacy libraries and creating many brand new components whist simplifying component architecture.
Component architecture
Whilst in the initial stages of building out the V2 web and Native libraries, I also looked at how to structure key core component categories. This included setting up a universal messaging framework system, creating consistent surface components for the vast number of controls and inputs and simplifying many variants of list and card components into more universal components.
System enhancements
Tokens V3
One of the biggest issues with the existing design system was the legacy token setup. It was initially created with the token purpose (text, background, border etc) being defined before the family (interactive, non-interactive, messaging etc). This created a really bloated token setup (600+ tokens) with many duplicates and was very time consuming to use due to the amount of token categories you needed to link to per component. It also increased errors of token usage.
I was tasked with recreating the token system, streamlining it so that token family came before purpose. This allowed us to massively reduce token duplication, simplify usage and reduce the tokens from 600+ down to around 150.
New semantic token structure
Data visualisation
I was also tasked with creating a new data visualisation system to be used for Dojo's new product 'Intelligence', which enabled users to get data insights into their customers and competitors. I did a full A11y audit of all of Dojo's existing colours and created new colour ramps to enable us to have a full sequential data palette.
Data visualisation palette and application