Singpass App Design System

Singpass App Design System

This is a brand new design system that anchored the foundation of the new visual design language and newly revamped information architecture during the app's major refresh in 2021.
Roles and responsibilities
Design Lead — System design, UI Design, Documentation, File organization
  • 1 Research Lead
  • 1 UX Designer
  • 1 Senior UI Designer (contract)
  • 12 Engineers
4 Months. Launched in August 2021.

About product

Singpass is Singapore’s national digital identity system created by the government of Singapore. It is part of the Smart Nation initiative that aims to leverage technology and innovation to improve the quality of lives for those living in Singapore. Singpass has two key features:

  1. Single sign on — Use the app as a passkey to log into government services or government-approved services. No need to remember passwords.
  2. Digital identity cards — Use digital identity cards as an official alternative to physical cards.

About project

The Singpass app was going through two major revamps — a complete overhaul of the visual design language and a newly revised information architecture. There was no mechanisms in place to support these incoming changes, and therefore this design system was born.

What did I do?

I proposed and created the Singpass app design system in conjunction with the app’s new user interface and information architecture to lay a solid foundation for the growing team of PMs, engineers, and designers to build the app’s new features on.


The design system was built, used, and refined continuously between April 2021 and August 2021. It was officially launched in August 2021, and it is currently used by two product teams today.



The product was in its MVP stage and there was a small component library shared amongst two designers where visual consistency was not emphasized. Design files did not have clear documentation, nor were organized for findability.



Here are some artifacts of what the design system looked like:

Gif showing overview page of typography.
Overview page of typography with supported styles.
Gif showing usage page of typography.
Usage page of typography with examples and anti-examples.
Gif showing code page of typography.
Code page of typography with design tokens.
Overview page of spacing with examples and design tokens.
Overview of colors page with examples and supported colors and steps.
Component page of Tabs with examples and anti-examples.

Research phase

Learning & desk research

I had informal conversations with my teammates to learn more about their design workflows and how they were using design resources then (benefits and drawbacks).

I analyzed well-established design systems (Lightning, Polaris, Thumbprint, etc.), and referenced “Laying the Foundations” by Andrew Couldwell.

Image of references, such as videos, design system websites, and books.
References includes videos, conferences, established design systems, and books.

Understanding engineering

I held extensive discussions with both Android and iOS engineers to understand technical constraints, how their codebases were set up, and what they needed from design/me. ‍ These started out from well-crafted presentation decks, but slowly became just Figma pages filled with content and questions.

Screenshot of my meeting materials with the engineering team.
Screenshot of my meeting materials with the engineering team.

Understanding designers + facilitating workshops

There was a range of experience levels of designers in the team. As I got to know them, observed how they worked, and working together on projects, I formed a deep understanding of what types of support provided by the design system or teammates would be most helpful.

I conducted workshops to mentor fellow designers on how to more effectively and efficiently use Figma to build components. I tailored my answers based on the individual’s skill level, and tried my best to structure growth for them over the months that the design system was simultaneously being implemented. Additionally, I also emphasized that this was a collaborative process and would appreciate if they will provide feedback to me to improve the design system for the team.

Design phase

Iterative testing

I constantly seek feedback or observe how my teammates used the system in real time because the design system was being implemented and built simultaneously. Using these data points, I continuously tweaked the design system to better suit the needs of my team.

Onboarding & implementation

Image shows the slide deck I used to onboard designers and engineers to the design system.
Slide deck I used to onboard designers and engineers to the design system.

Contribution pipelines and rotating designer-of-the-week

Each designer takes on a “designer-of-the week” role. This designer has to vet and approve new or revised components. I created this flow to empower each designer to confidently propose new components and/or patterns. The designers should advocate for their respective work streams that uses this design system.

Image shows compliation of various components from the new design system
Compliation of various components from the new design system.