Not Just for Logging In: Redesigning Singapore’s Digital Identity App

National Digital Identity (Singapore)
NDI.sg
Published in
9 min readDec 7, 2021

--

The new Singpass reframes the app’s role as Singapore’s trusted digital identity platform while allowing space for its future expansion.

Every Singaporean and resident holds an identity card as proof of one’s citizenship and identity. Now, they can also have a digital version on their smartphones by downloading the Singpass app.

While this Digital Identity Card (IC) was introduced in Singapore’s national digital identity app in May 2020, few of its then over 2.5 million users knew of its existence then. Singpass had also been associated with simply authenticating and logging into government services online. However, the service set up by the Singapore Government in 2003 had always been conceived as a national digital identity platform.

With the rebranding of Singpass in early 2021 to mark its evolution of becoming Singapore’s trusted national digital identity, the designers at Government Technology Agency (GovTech) decided it was timely to redesign the app.

From left to right: Screenshot of old Singpass Mobile. Screenshot of the  new Singpass app’s homepage, with the digital IC upfront. Screenshot of the new consent screen, with a cleaner UI. Screenshot of the new success screen, saying “signed your document successfully”.
The previous version of the Singpass app (left) was redesigned with various new features (right), including bringing the the digital identity card upfront, an overall visual refresh, amongst other changes.

“As Singpass grew as an identity platform, there were many government services that wanted to come on board. The app started to bloat, and we were often unsure of where to place new features when they came in. The visual language was also a bit dated,” says Gloria Chua, the project’s design lead.

“Singpass is more than just a login portal. We wanted Singpass users to recognise and use the app to its full potential. That was a frame shift we needed to move on for the next stage,” says Gloria. “The best way to address these issues was to look at them holistically as part of a redesign.”

Restructuring the app

The team began by reviewing the app’s information architecture through a series of card sorting exercises with over 30 users. Observing how real-life users grouped existing features in the app helped the designers understand their navigation patterns. For instance, many wanted easy access to their personal data in the Myinfo profile, such as their IC details and education certificates. They also prioritised login shortcuts to other government services and the QR code scanner.

A screenshot of a Powerpoint slide with 11 clusters of features, like Work, Family, Personal Information and Medical/Health
An example of how a user sorted the various features within the Singpass app.

“We had users saying it was useful to have their personal data on hand, but did not know that it was actually already in the app. There was also a desire from the team to make Singpass recognised as a form of digital identity,” says Lim Si Hui, the redesign’s lead researcher.

The research insights established the “boundaries” for the redesign. The first thing that greets users in the updated Singpass app is their Digital IC. It is followed by a “My Profile” section that offers quick access to one’s personal data on Myinfo. These were previously found in separate pages, and bringing them upfront could strengthen the perception that Singpass is our national digital identity. As users scroll below the identity section, they will find the familiar login shortcuts and a navigation bar for accessing the QR Code Scan function, Inbox and a “Home” button.

“We found that people came into Singpass to get things done,” says Si Hui. “The main criterion for the design of the homepage was that the things people used the most must still be easily accessible, while those which could be valuable to them should be easily discoverable.”

Looking professional, yet human

3 sets of mood boards and test screens of possible visual directions. Left: Whimsical and colorful. Middle: glassmorphic and gradients. Right: Clean and minimalist
Some of the visual directions explored for Singpass’s new look ranged from whimsical to glassmorphic and minimalist. During the redesign, the SafeEntry feature was still part of the app.

The revamped information architecture was supported by a new user interface design. We explored various visual directions – from the flat layers and colourful scheme of apps such as Headspace, to the trendy multi-layered and transparent look as seen in the latest Apple iOS. The team ultimately went for a minimalist look expressed in a clean white and grey background accented with Singpass’s signature red. The simple design projects professionalism befitting of the Government, while ensuring that the app performs well on a wide variety of smartphones.

The Digital IC was designed to take advantage of its new digital medium too. While coming in the familiar form of a physical card, it features the user’s latest photo submitted to the Government instead of when the physical IC was made. An animated watermark emblazoned on the design also differentiates it from a screenshot.

“One design consideration for us was how abstract we could go with the Digital IC. Technically, with your phone, you don’t need the form factor of a card. But because users have a really strong mental model towards physical cards, we stuck to this skeuomorphic form which mimics how the physical IC looks like,” Gloria explained.

After the team tested the redesign with users, several also expressed privacy concerns because of the prominence of the Digital IC. The final design only displayed the last four digits of a user’s IC number, and other details found on the physical card are only revealed after the user’s successful authentication.

“The fundamental tension in many of the design decisions was between convenience and security and how we struck the balance,” said Gloria.

The team also wanted the app to feel “human” to encourage more people to use it. Several playful touches were introduced to make the app more personable, such as adding icons and logos in a “squircle” shape, a combination of a square and circle, which was from the previous design. Freelance designer Shin Ooi was commissioned to create a library of Singapore-inspired illustrations to inject moments of delight into the user experience. They included an animated Mass Rapid Transit train when a message is being sent and displaying a public housing void deck when one’s Inbox is empty.

Some illustrations in Singpass app, including a void deck, an MRT, a man with a turban and woman in a wheelchair in front of a life-sized Singpass page, and a barber cutting the hair of Ivan, our Singpass mascot.
Freelance designer Shin Ooi was also commissioned to create a library of Singapore-inspired illustrations to inject moments of delight into the user experience.

“We wanted users to feel it is not just another ‘cold’ digital app by adding some elements of fun and humour,” said Shin. “Instead of depicting robots or technology, I used everyday life scenes and nature as they feel less tech-related and are more relatable. These are also very uniquely Singaporean.”

A more scalable design system

The redesign caters not just to Singpass users but also to developers looking to introduce services into the app. A new system outlines specifications of key elements, ranging from typeface sizes to the use of icons and screen designs, to help standardise the user interface and user experience design. There was also a framework to support agencies in porting their physical cards into the Singpass app’s digital wallet. These measures allow Singpass to scale its services without becoming cluttered.

A major challenge was ensuring that the system worked across the many use cases in the app. We tested the redesigned app extensively against current use cases and future scenarios to check that the system will not be too restrictive. The team also ensured the new system remained accessible to the visually impaired by selecting an appropriate colour scheme and contrast levels. GovTech’s designers also worked closely with its engineers to create a series of plug-and-play components that make it easier for developers to implement the system too.

3 rows of 6 different design specifications for button. Top (left to right): Left icon, Full-width, Disabled. Bottom (left to right): Icon only, Corppass, Spacing
Specifications for various buttons that are part of a new design system that make it easier for developers to implement the redesign while ensuring a consistent user experience.

“While we wanted to implement a common set of elements across pages and components, there were a lot of discussions about trade-offs,” said Aspen Tng who spearheaded the new design system. “A design had to be scalable across other things we were designing as a tweak in one layout could also result in a system-level change. We also had to leave space to implement other things in the future.”

Although much of the work is invisible to users, it ensures a consistent experience that is essential for an identity platform, he adds. “One of the things we found through testing was that users expect a similar kind of login screen or interaction when entering different government services through Singpass because it creates a sense of trust.”

“Previously, design decisions were made ad-hoc as the app was still in its infancy, and the small team could simply consult one another. As Singpass embarks on a new stage of development and with more designers working on it, a central point of reference has become necessary,” Aspen says.

“We can’t possibly have ten people look at a design decision every other day. We created a set of documentation that could reduce the reliance on an individual. It could also help the team work faster on products and prototypes so we can bring more features to users.”

Working remotely, together

Due to the COVID-19 pandemic, the team carried out much of the work remotely instead of in the office. Without the usual physical check-ins to coordinate the efforts of the ten designers, researchers and product managers, Gloria and Si Hui had to find digital ways of working as a team over several months.

“It was an exercise in coordination and making sure everyone stayed on the same page. The challenge was ensuring that communication is super smooth and tight, and we were not duplicating components but are all contributing to a coherent direction,” said Gloria.

The design team reviewed one another’s work twice a week to ensure there was no overlap. Si Hui also facilitated a weekly check-in where each member responded to four questions on a shared virtual board. By getting all to share with one another queries on progress, what they learnt at work, challenges they faced and one thing they felt good about the project, Gloria and Si Hui could assess what needed to be tackled each week as well as team morale. When some members wondered if they were contributing enough while others shared that they were struggling, they redistributed the workload.

Si Hui also felt that sharing one thing everyone felt good about the project was helpful to any team member caught in a rut. “If you are working remotely, it is a lot easier to sink into a black hole of work. Getting someone to share what they felt good about was important to offer a different point of view,” she added.

As the weeks went by, team members even began doodling responses instead. It was a sign to Si Hui that they were getting comfortable with one another.

Virtual whiteboard with post-its arranged in rows, and random stickers (heart shapes, hand gestures), drawings and photos (of a teammate) peppered all over
Detail of a virtual board for the team’s weekly check-ins. Over time, it grew into a space for doodling and de-stressing too.

“It is very intangible, but when the team looks back on this virtual board, they can see their work process and feel proud of what they have achieved. They will also remember the things we laughed about to get through the hump of working,” she said.

A launchpad for more

The redesign was finally rolled out in October 2021, together with the announcement that all government agencies would henceforth accept the Digital IC. While initial user feedback had suggested some are not used to the prominence of their personal data, the redesign had not gotten in their way of using the app.

The team was also satisfied with having laid a foundation for the future growth of Singpass. Some developments in the pipeline include expanding government services offerings, introducing a search function and accommodating multiple digital identities such as being an owner of a Singapore-registered company or acting on behalf of family members.

“Success for the Singpass app will be when someone in Singapore, or involved with Singapore, downloads and uses this app because it offers a link to the Government that is done in a smooth and modern way,” said Si Hui.

“Now that we have the features in place for scaling up, the work ahead will be less about building a new thing, but how do we serve people better with what has been built in place.”

“The redesign and upcoming features will hopefully help the Singpass app attract even more users and aid Singapore’s journey in becoming a Smart Nation,” adds Gloria.

“Digital identity is such a fundamental piece in the broader conversation of digitalisation,” she continued. “As a digital identity platform, we want to make sure Singpass is the most trusted and useful. And you don’t have to be a genius to use it.”

🎞 Project credits (cue movie credit roll):

  • Product: Tay Li Soon, Rahman Ahmad
  • Design & Research: Gloria Chua, Lim Si Hui, Aspen Tng, Suanne Chan, Yurong Zheng, Jenn Lim, Shin Ooi, Andy Teng, Immanuel Goh
  • Engineering: Kenneth Leong, Melvin Tan, Chin Wee Koh, Law Xun Da, Terence Peh, and all the other engineers who’ve stayed up late nights to sweat the details!
  • Comms: Juliana Ong, Serene Chan, Andre He, Leonard Lui

This article is part 2 of our 3-part series about the Singpass app redesign in 2021. The series covers the evolution of the Digital IC, the redesign effort and its Singapore-inspired illustration system.

--

--