Three App: Design Library
Building a design system
When I began this project, no design library was in place. This meant that designs were inconsistent and time consuming to produce.
I created a library of reusable resources to speed up work flow and allow for future iterations to be rolled out globally.
The design library, created in Adobe XD took into consideration:
Global components linking colours, type styles and icons for easy editing across all design files
Alternative states such as error states and tap states etc.
Reusable app modules including navigation and tab bars, popups and snack bars
Accessible counterparts using dynamic type sizes
For every module that I created in the design library, I made sure there was an accessible version available.
This meant that we could quickly mockup designs with large type sizes for users who chose to have larger fonts turned on at device level.
By default, every module was also checked to ensure AA accessible colour contrast.
To speed up workflow, I used Adobe XD to create multiple states for each module.
For example, you could quickly include a button as a symbol, and then with one click change it from a primary to a secondary button.
As part of the new designs I created components that can be reused at speed when creating new designs.
Using component parts ensures that every instance of a module is consistent, and also all modules can be updated globally if a change needs making. So all designs are then future proofed.