Design System 2.0

Interface foundations for ADDX - Design System 2.0

This project establishes a cohesive and scalable design framework to enhance user experience and consistency across the platform. The design system 2.0 defines core UI components, interaction patterns, and visual guidelines to streamline development.

Timeline

Nov 2023 - Apr 2024

Team

4 Product Designers

3 Engineers

Tools

Figma

The problem

Poor maintenance of design system 1.0 that is inconsistent and not defined properly, whiich leads to inconsistent experience on web and app

Lack of consistency

Our current design system 1.0 is not properly documented and it creates frustration when using the design system

No proper guidelines

Some gap in the colours and typography styles across both app and web, as well as the updated brand style

Not aligned to the updated brand

Due to lack of centralised guideline, the engineers are using custom codes. Designers have to spend more time debugging visual errors that could be easily avoided

More front-end errors

The goal

Rebuild design system that bridges the gap with brand with consistency and usage guideline

In order for designers and engineers to refer and deliver consistent experience to clients for both app and web

Better integration with code

Collaborate with engineers on the implementation and maintenance of the components

Increase ROI of design system

Achieve time and cost savings from design, development and testing.

Prioritisation

We prioritised foundational elements first, starting with text styles, colors, buttons, and text inputs to establish consistency before refining individual components.

My scope

As part of a team of four designers working on Design System 2.0, my scope focused on revamping Buttons, Text Links, Badges (Tags), Dividers and File Upload component. I started with Buttons by collecting existing screens to audit inconsistencies and conducted research on how other platforms design their buttons to inform best practices.

Insights

From the audit of existing buttons, key inconsistencies were identified across both app and web.

Text style inconsistencies and hierarchy issues

• Web used sentence case mostly, with some exceptions using uppercase. While app used uppercase with extra bold font, making the two platforms feel disconnected.

• Both app and web had their own button styles, with different variations in hierarchies.

Missing & platform-specific buttons

• Web had a "Danger" button, but the app didn’t—this led to a lack of a clear destructive action on mobile.

• App had an "Action Done" button, but the web didn’t—this meant completed actions were visually acknowledged on mobile but not on the web.

Solution

After identifying inconsistencies between the web and app button systems, I focused on creating a unified, scalable, and accessible button framework for Design System 2.0. Here’s how I addressed the key issues:

Established a consistent set of button variants across both platforms

• Primary – The main call-to-action (CTA) button.

• Secondary – Supporting actions with lower emphasis.

• Tertiary – Minimal styling for less prominent actions.

• Danger – Used for destructive actions (now added to mobile).

Aligning text styles & typography

• Standardised button text styles across platforms, using sentence case for both web and app to ensure consistency.

• Standardised font weight and size for button labels to improve readability.

Establishing a button style guide

• Defined a single source of truth for button styling in Figma

• Created clear interaction states: designed and documented hover, focus, disabled, and active states

Impact

Estimated 10% improvement in designer efficiency through the adoption of more discoverable and more powerful components.

What I learnt

Cross-team collaboration and stakeholder buy-in are essential for a successful design system. It’s more than just visuals—it requires alignment between designers, developers, and product managers. Partnering closely with engineers helped bridge the gap between design and implementation, ensuring real adoption rather than just documentation.