Foundational
Why?
Standardisation
Shared set of principles and rules to build consistent experiences across different platforms
Efficiency
Enable designers & developers to reuse components
Scalability
Efficiency and consistency leads to building faster products
How?
1. Shared set of principles and rules to build consistent experiences across different platforms
2. Enable designers & developers to reuse components
3. Efficiency and consistency leads to building faster products
Extended: Firstly, we audited over 150 component down to a manageable 35~. By means of merging similar ones and deprecating un-used ones. This gave me a starting point to build from. I went about breaking our library into Core, Elements and Components to create a multi-layered system.
Once signed off by all squads, I worked closely with the Front-end champion to cut and merge, refine and build the new components into the live system.
Now we have a single source of truth, used by designers and engineers across all of our companies under Tes Global.
Foundation
This is the first and most important part of the design system; everything is built of this. Its mainly comprised of typography, colour and icons - the base of all that we're building off
Typography
Typeface set & hierarchy
Colour
Total of 13 colour with tone and shades
Icon
100+ icons with 4 size variants and all colour palette
Elements
We're building on what we've built. combining multiple core parts to make more complex pieces
Components
The final building blocks of the design system. an agreed-upon, unified component list used site wide. Providing consistent and uniform designing, efficient engineering and changes that cascade through from one source of truth
Engineering
We were lacking some engineering resource and I took this opportunity to practice writing React at production level, by updating the design system on storybooks and in-turn allowed the engineers to work on features while I implemented the refined design system.
p.s learnt how to write some tests too
Result
Reduction in complexity — Over 150 components down to 35~
Unified 7 internal teams and 3 external sister company under one language
Ability to mock-up design at a much faster rate