Standardisation
shared set of principles and rules to build consistent experiences across different platforms
Objective
One single source of truth; forming unity across the whole site and lay a stable foundation for onboarding future businesses.
The live design system can be found here
Reasoning
Efficiency
enable designers & developers to reuse components
Scalability
efficiency and consistency leads to building faster products
Team
How ?
shared set of principles and rules to build consistent experiences across different platforms
enable designers & developers to reuse components
efficiency and consistency leads to building faster products
Extended:
Firstly, we auditioned over 150 component down to a manageable 35~. By means of merging similar ones and deprecating un-used one. 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.
CORE
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
CORE
Typography
Typeface set & hierarchy
CORE
Colour
Total of 13 colour with tone and shades
CORE
Icon
100+ icons with 4 size varients 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 sitewide. Providing consistent and uniform designing, efficient engineering and changes that cascade through from one source of truth
Result
Reduction in complexity —
Over 150 components down to 35~
Unified 7 internal teams and 3 external sister company under one language
Ability to mockup design at a much faster rate
