When we pushed for a move from Adobe XD to Figma, we also realized this would be the perfect opportunity to overhaul the old design guide and create a brand new comprehensive design system following industry best practices. We researched and referenced many public design systems with our main inspirations drawing from Carbon. 

​

We began by identifying Pain Points within the current system. With these pain points in mind, we developed solutions that would improve the future use of the design system. Our key discoveries were: 

​

Colours and Typography

​

Pain Point: Designers and Developers would select random colours and font sizes as there was no defined documentation specifying use cases. 

​

Solution: Create colour and type face tokens with detailed documentation that accounted for accessibility.

​

Components 

​

Pain Point: The old design system was simply a collection of components that lacked any explanation of what they were or how they should be used. After evaluating previous designs, we found elements that should have been components and were not in addition to a large selection of components that seemed unnecessary or redundant.  

​

Solution: Determine recurring components and elements that can be used as building blocks when creating new designs. 

​

Layouts 

 

Pain Point: Since the designs had passed through many hands there was a lot of inconsistent spacing and a mixture of “new” and “old” design elements without any clear documentation of which ones should be used.   

 

Solution: Determine which elements were in use or being phased out, and create a standard by setting spacing, grids, and viewpoint guidelines.