Design better, smarter and faster

Tangram Design System is a series of styles and components. It is built systematically, and follows the same universal principles.

ROLE:

Product Design
Product Owner

FRAMEWORK:

Web - React
Android - Kotlin
iOS - Swift

CROSS-FUNCTIONS:

Front-end engineers
Android engineers
iOS engineers

IMPACT

30% increased in productivity
Adoption by 2 other sub brands
Sunset of legacy systems

Background

A brand for social good

NTUC Enterprise's mission is to create a greater good by using the capabilities of its social enterprises to address social needs. These needs include: daily essentials, cooked food, continuous learning, childcare, health and eldercare, and financial services

objectives

A design system's true power lies in its adoption. In order to achieve that, we have to ensure that the design system brings value to team members.

Design and code that are scalable and reusable

Easy to maintain and keep the design and technical debt low

Future proof the design with the ever changing design trend

Easy to use and save time on every project

Empower the team to work on things that matter the most

Keep the experience great and consistent for our users

FOUNDATION

Atomic design and design tokens

Inspired by Brad Frost's Atomic Design principles and the concept of Design Tokens, we prioritized creating a scalable design foundation. This approach ensures visual consistency across platforms while maintaining flexibility for future interface updates and brand evolution.

Atomic Design

We start by creating the smallest items, atoms. When all of the atoms are built, we turn our attention to the slightly bigger items until we have a molecule. Once you’ve combined several molecules, you’ll be able to create a more complex structure, an organism. By doing this, the designs are consistent as it is made up from the same atoms.

Design Tokens

Design trend changes over time and design tokens help us to update the look and feel of the components easily. Instead of updating the styling of each and every component, now we can update it at the token level and all of the components that use the same token will be updated to the latest design.

Sharing of Design Tokens Across Platforms & Frameworks

To ensure design consistency across the platforms, the design token is shared across all platforms and is framework agnostic. And any update on the design token will be reflected across platforms.

DESIGN TOKEN STRUCTURE

Documentation

Designs that are intentional and backed with reasons

Like every product, design system is iterative. However, design systems should prioritise quality over speed because they serve as critical infrastructure for other products. Hence, each component must be well researched, designed and documented.

Component anatomy breaks down required and optional elements, explaining the design decisions and their functional purpose.

Even a well-designed component can be misused. Guidelines are key for proper usage.

To ensure Tangram can support business needs and different uses cases, it needs to be comprehensive. We do this by creating variants of the same component with distinguishable use cases.

Accessibility

Design and build with accessibility

We prioritise accessibility from the start because it creates better experiences for all users and simplifies our design decisions by naturally eliminating inaccessible options.

WCAG Guidelines

We refer to WCAG guidelines extensively as we design the components. We strive to achieve AA rating.

Accessibility Testing

All components are tested during development to ensure 0 violations.

An example accessibility testing results of modal component in Storybook

Standard switch design

This design works well for most users with no visual impairments. But people with achromatopsia or monochromacy, (As shown in B) cannot perceive colours. This affects the usability of the design as the active and inactive states look rather similar.

Switch design in iOS

iOS solves this by adding | and O labels in the component to differentiate between active and inactive state. The labels however, are uncommon in Singapore. This may lead to unfamiliarity.

Switch design in Tangram

In Tangram, we use a more universal labels to differentiate between active and inactive state by using tick and cross for easy recognition.

Example of accessible design considered for a switch/toggle component in Tangram

Not all accessibility attributes can be tested automatically

An example of this is UX writing. Automated test cannot pick up if the content is written in a way that people with cognitive impairments can easily understand it.

USER TESTING

We shared the designs and documentations with 6 designers to get their feedbacks.

Overall, designers don’t see themselves leveraging the design system fully as the need to refer and manually adjust the components is time consuming

The Good

Likes the design rationale
Clear usage guidelines
Detailed specifications of the components

The Bad

The components are static
Cumbersome to use
Can’t predict the behaviour of components

PROBLEM STATEMENT

How might we simplify the process of using the design system for designers who are time-crunched, so they can produce quality UI fast?

FOUNDATION

Design library in Lingo + auto layout animaa plugin

Back then, neither Sketch nor Figma supports auto layout. We used a Sketch plug-in called Animaa that helped with auto-layout and Lingo app that we used as a UI kit repository. We eventually migrated to Figma in 2021.