top of page

Building a design system that increased product development speed by 300%

Components.png

Problem and root cause analysis

Iceberg .jpg
The Problem
aPriori didn’t meet sales target causes by low adoption
The Root Cause
Developing features from scratch took time away from delivering quality features

  • With no reusable components in Figma, designers were inefficiently designing using screenshots of a product

  • Lack of design and interaction standard led to many inconsistencies and extra maintenance effort among the engineers

  • With the added effort, designers and engineers were spending 3 - 6 months developing a feature and had no time to ensure quality

    • No time for UX research

    • No time to ensure clean and consistent code

The Solution

aPriori needed a design system to improve efficiency and quality

  • UX team uncovered this issue from interviewing and observing how engineers and designers developed features

  • UX team proposed building our own design system to provide standard and consistency in our visual design.

  • Reduced development and maintenance effort will create room for designers to conduct UX research and ideate quality solutions. Engineers can focus on delivering quality code

Overview

My Role

  • Sole UX designer to lead the project and design the aPriori design system

Responsibilities

  • Understanding aPriori visual language and translating it into a reusable system

  • Collaborating with other stakeholders

  • Working to gain buy-ins from stakeholders

Stakeholders

  • UX Designers

  • Software Engineers

  • Software Architects

  • Project Managers

  • CPO

  • CEO

Understanding the current issues

Issue 1: Varying styles that needed consolidation
CID Landing.png

Legacy

  • aPriori wanted to unify all applications under the ideal new visual style

  • I needed to create a centralized system to govern visual style 

aPW P&A.png

New

Issue 2: Inconsistent UI patterns and lack of guidance
Menu Inconsistency.png

  • Multiple UI variations serving the same purpose

  • Menu component is an example where the variants have different selection state

CTA components (agency).png

Button component missing icon button

  • UI library provided by an agency was unorganized and missing frequently used components like icon buttons not meeting our needs

Storybook Styles.png

  • No standard around visual design and interaction design

  • Palette and typography in Storybook were the only visual guide 

  • However, even this was just a list of colors with no usage guide

Issue 3: Not meeting accessibility standards
lack of contrast.png

  • With lack of standards and guidelines, some colors were misused as a text color not meeting sufficient color contrast 

Requirements for building a successful design system

Research-driven methodology

  1. Built on modular structure similar to atomic design principles

  2. Color system that ensures accessible contrast ratio

  3. Providing guideline around visual and interaction design

Simplicity over complexity

  • Additional effort is needed to build and maintain component variants

  • Needed to consolidate variants that existed in our current visual language​

Building a system that meets the requirements

Built on modular structure and ensuring accessibility
Primitive
White.png

#FFFFFF​

Brand Blue 500.png
Semantic
Neutral On-surface Inverted.png
Primary Surface.png

#327DA4

  • ​Tokens were separated into raw primitive values and semantic values

  • This gave clarity on color usage and prevented misuse of tokens while centralizing pure hex values separate from its various applications

On-surface
Neutral On-surface Inverted.png
Surface
Primary Surface.png
Button Color Contrast.png

  • Color tokens were also given surface and on-surface variants to ensure color contrast between the two token types

Neutral On-surface Inverted.png
Primary Surface.png
CTA.png
Dialog.png
Tokens
Atom
Molecule

  • Tokens are then applied to atomic components which were used to build molecular components

    • Atomic components are built using color, typography, spacing tokens 

    • Molecules are then assembled from various atomic components

Guideline around visual and interaction design

Color Placement

Feedback Color Tokens.png

Color Role

  • Color tokens were categorized based on what it’s used for (roles like info, error, and success) where it can be applied to (placement like surface and on-surface)

  • This categorization provided guideline on when and where a color can be applied

States Guideline.png

  • Interaction for all components were standardized and all components behaved similarly under simple overlay mechanism

Material State Overlay.png
Simplicity over complexity
Menu Inconsistency.png
Menu Inconsistency.png
Menu Component.png
Consolidated Menu Component

  • Components with variants were consolidated if the two variants served similar purpose

  • Menu component had two different selected states

    • However, the difference did not provide usability value for users and the component was consolidated into one variant​

Aligning with React Library

Token aliasing does not work with Material UI Framework
MUI Color System.png

≠

DLS v1 Color aliasing.png

  • While the token aliasing clarified color usage separate from the pure hex code, it was difficult to implement in React library since engineers were using MUI framework to build components

  • Color palette compatible with MUI component was better suited to come in three shades with pure hex code attached to it

  • The engineers weren’t able to update their color palette according to what I have planned out

New color palette aligning with MUI 
New Color Palette.png

  • I updated the color palette to match the framework's color palette structure

  • Instead of creating a modular structure by aliasing the tokens, I created three different shades of each color category that was directly tied to a hex code

Contrast Guideline.png

  • While accessibility is not baked in the system with this model, I still eliminated ambiguity around color usage and ensured accessibility by providing a guideline on how three shades of a specific hue can be combined together

aPriori design system is ready to be implmented
Text Field Components.png

  • I applied the new color token system to the components I had built

  • Now I had a fully designed design system in Figma that met the requirements I have set out and also matched with how engineers are building their library 

The Result

We are now only spending one month to develop a new feature
Past:
3 months

x 300%

Now:
1 month
Design speed increased by 600%

  • Designers previously spent 3 months designing new features from scratch

  • Now all designers had to do was to drag and assemble reusable components

  • Improvement in design process reduced design time to two weeks and secured designers time to conduct user research as well

Working on implementing this in the react library

  • With reduced headcount, it has been a struggle to secure resources to implement the system in react library

  • I’m currently working closely with PM and software engineers to find feature improvement opportunities where we can also implement some element of the design system into the react library

​

  • Nonetheless, engineering speed has increased from the design library in Figma as well

  • Instead of having a long discussion about how particular UI should be designed and implemented, designers and engineers can now refer the design system to reduce decision making effort

bottom of page