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
Accessibility
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.
Alternate states
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.
Component parts
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.
