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

icon/clipboard
Standardisation

shared set of principles and rules to build consistent experiences across different platforms

icon/clock
Efficiency

enable designers & developers to reuse components

plane
Scalability

efficiency and consistency leads to building faster products

Team

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 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

content components
library gif
more components

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