In the absence of a centralised design system, designers crafted components ad hoc, scattered across projects and boards, causing developers significant challenges and hindering consistency across platforms. Such deficiency in guidelines led to inefficient development.

‍

‍

In addition, the complexity of Figma's component structure didn’t set designers up for success. Having to deal with too many components led to having to make too many micro-decisions, hindering the daily workflow of design team. This also led to misusing components, or using outdated ones, or, more often than not, detaching them and adjusting on the spot.

From 354 → to 72 variants

‍

I showed the team it was possible reduce component complexity by leveraging component properties and Figma variables. This keeps the design system less clustered, removing the amount of choice designers have to make on a daily.

‍

‍

‍

Scalable colour system

‍

Colour is an essential design component. Previously, the team was using the over-simplified styles in Figma which weren’t component-specific. Developers wanted to have a system applied that would be logical and easy-to-use. With customised colour tokens, the team can now clearly understand where which colour to use, thereby maintaining consistent solutions across potential multi-brand themes.

‍

You can still achieve a lot in 72 hours 🙌

‍

Time constraints are not an excuse not to dig deep and understand the needs first. Investing time into audits, research, and talking to the team is vital before rushing into any design work.

‍

‍

At the end, the client decides 💥

‍

Time constraints are not an excuse not to dig deep and understand the needs first. Investing time into audits, research, and talking to the team is vital before rushing into any design work.

‍

‍

Breaking silo’s is important (duh!) 🖤

‍

Time constraints are not an excuse not to dig deep and understand the needs first. Investing time into audits, research, and talking to the team is vital before rushing into any design work.