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. 


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. 


Home     //     Projects     //     Three App     //     Design Library