About

Design System was designed for the Singapore Government to unite teams in creating fast, accessible and mobile friendly digital services

Background

What are some necessary technology standards that guide how websites and digital services deliver what end users require?

In the past, that question is often left unanswered after a digital service is rolled out. As the years go by, user expectations might have changed. The key to higher standards is to constantly and consistently deliver a top-notch digital experience for users.

As the Singapore Government rolls out more digital services and develops websites in the future, what we need is a consistent effort to test and measure in order to provide a complete user experience for users.


Why use a design system?

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. It enable teams to build better products faster by making design reusable, where reusability makes scale possible.

This concept can be explained better with the Atomic Design, defined by Brad Frost. It is a methodology for creating design systems and there are five distinct levels in it:

Atoms The basic building blocks, for e.g. form label, an icon or a button
Molecules Groups of atoms bonded together to do one thing
Organisms Groups of molecules joined together to form a complex section of an interface
Templates Groups of organisms stitched together to form pages
Pages Pages are specific instances of templates. This is where most reviews revolve around

Atomic design provide the ability to traverse from abstract to concrete. Because of this, we can create systems that promotes consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we are crafting a system right out of the gate instead of cherry picking patterns after the fact.