Dark mode

Dark mode

Light mode

Light mode

My role

Senior Product Designer (Lead - 60%)

  1. Planned, scoped and led the new design system standards beyond component libraries - rectified inefficiencies such as a lack of accessibility standards, colour theming, component/ screen prototypes, inconsistent pattern usage, and absence of user flow documentation.
  2. Led stakeholders’ discussions with PMs/Engineerings on design decisions and tradeoffs.
  3. Guided and mentored three junior designers in various aspects (design system, system thinking, stakeholder management, etc.)

Senior Product Designer (IC - 40%)

  1. Established design system mechanism in Figma, including using Figma Variables (Tokens).
  2. Defined component build structure and format to ensure flexibility and scalability.
  3. Built, led and showcased how to document user flows and drive stakeholder conversations.

Team

Jed, Senior Product Manager - iOS/MacOS

Jalyn, Product Designer - iOS/MacOS

Leo, Product Designer - iOS/ MacOS

Stephen, Senior Product Manager - Windows

Patrick, Software Engineer - Windows

Wenyen, Product Manager - Android

Alin, Product Designer - Android

Ellie, Software Engineer - Android

Jie Bo, Software Engineer - Android

1 | TL;DR

I enhanced our design systems and achieved AA accessibility ratings. I improved documentation and comprehensiveness of scenarios, driving speed and innovation for designers.

Component overview

Component overview

2 | Overview

👀 Background

Over the years, we accumulated a lot of design debt across the three brands, making it challenging as we design for the future - duplication of effort, inconsistent design patterns and standards, limited accessibility, and lack of documentation. We deprioritised new feature developments strategically to pay down debt and secure a stronger future. We boldly consolidated our three brands (XV/PIA/CG) and platforms (Android, Apple - iOS/ MacOS, Windows).

🎯 Objective

To reduce design debt and improve consistency while differentiating product experiences across brands and platforms.

📦 Output

Refreshed design system and documentation, consisting of components, screens, and user flows.

💥 Outcome

<aside> 🌟 Achieved minimum AA accessibility standards for all rebuilt components

</aside>

<aside> 🎨 Enabled colour theming

</aside>

<aside> 📚 Design libraries optimised for speed and consistency

</aside>

3 | Problems

There were many minor but critical inconsistencies

To name a few: non-uniform padding, incorrect button colour, lack of states, and inconsistent patterns.

  1. Lack of design tokens The absence of tokens disempowers our workflow, leading to manual adjustments such as colour theming and spatial numbers. As a result, human error is inevitable, contributing to inconsistencies.