Systems Design
UX Design
Product Design
Prototyping
1 x Research Lead
1 x UX Researcher
1 x Design Lead
1 x Product Manager
4 x Engineers
October 2020 - January 2021
(4 months)
As the national digital identity platform, the Singpass app is going to house all government-issued cards that citizens can use to prove their identity or prove their legibility for certain government-related activities or schemes.
The app is expected to house more than 10 cards in the (near) future. I had to tackle
I worked as the primary product designer on this project, and worked with UX researchers heavily through the phase of usability testing.
This card carousel feature was first launched in April 2021. The feature moved from the 'profile' tab to the home page in October 2021.
The Singpass app has 3.5+ million users with more than 297 million transactions made yearly. The Singpass app has
I overhauled the section that housed only the user's primary ID card to house multiple cards, from problem definition through product launch. This feature was moved from the "profile" tab to the home page following the app restructure.
These are mockups. Screenshots from the live version contains details that are too sensitive for public display.
With the drop down interaction, users have control over when to display information that is deemed as more private and not as frequently needed from research my team did regarding user's private information.
During usability testing interviews, majority of the 8 participants were able to locate the card that they wanted by either scrolling through the cards or using the pill bar to access it.
This was surprising because I hypothesis that this interaction would have performed the worst of the three concepts.
These are mockups. Screenshots from the live version contains details that are too sensitive for public display.
Not every scenario requires users to display information from their primary ID card, and private information should not be openly displayed when there's no need to.
I designed this interaction this way to, firstly, minimize the need for information to be repeated in multiple areas across the app. Secondly, to allow users to show information from the primary ID card only when required.
These are mockups. Screenshots from the live version contains details that are too sensitive for public display.
In order to cater to the users have varying levels of tech-savviness, I integrated the onboarding tutorial as a card so that users will learn about this feature by doing.
For the onboarding page, I wrote the copy and leveraged existing onboarding patterns that the app currently has.
I created an information deck so that other designers and PMs can use this deck during engagements or discussions with government agencies who want to add their cards into the Singpass app.
This was created after many rounds of discussions with backend and frontend engineers to learn about technical constraints and best practices for the system.
These are mockups. Screenshots from the live version contains details that are too sensitive for public display.
In addition to protecting one's private information, I wanted to use the feature as an avenue to move users away from cards in the physical space into the digital space.
The digital medium affords many new and different forms of interaction, however, prior research that my team did showed that there's change aversion and most users are not ready to make such a big leap. I wanted nudge people slightly to embrace this new medium (away from a literal direct translation of skeuomorphic designs).
My design lead and I conducted a workshop with the extended team (engineers and PMs) as a starting point to learn how they would rank the usefulness, feasibility, and delightfulness of the current features.
This workshop was also used to understand their perspective on one key differentiation to move the product forward — "documents" vs "identity cards".
Artifacts from workshop created by my design lead, fellow designers, engineers, and myself.
I proposed some of the initial concepts and the team iterated on them together before arriving at the concepts shown below. There were a total of 6 concepts proposed, but after discussions and heuristics evaluation, the team down-selected to 3 concepts (shown below) for usability testing.
The goal of research was to learn more about how people will interact with these vastly different interaction patterns and use these findings to design an interaction that will work best with our user base of varying levels of tech savviness/
I worked closely with my UX researcher. I mapped out and defined the UX flows then built the prototypes to ensure robustness beyond just the happy path.
The interviews were conducted in-person. Each session consisted of 3 different tasks that were counterbalanced across 8 participants. At the end of the interview, there was a short co-design section to understand users' priorities.
Concept 01: Drawer that allows users to select as many cards as they want to be opened.
Concept 02: Horizontal swiping to move through different cards
Concept 03: Cards can be shown or collapsed in a drop-down menu style.
Concept 02 - Horizontal Swiping was both the most popular and usable amongst the participants that we interviewed. Majority of participants were comfortable in performing the swipe interaction without additional prompts.
I continued to refine the concept by shrinking and overlapping cards to more clearly hint that one can swipe in either directions to view more cards.
The next phase was design around the reduced screen real estate and users' privacy of data. Coincidentally these considerations were addressed by moving sensitive information to a second page and implementing security walls in between the pages.
Since this feature was new, and we had to cater to users who are on different levels of tech savviness, onboarding was important. I adopted the structure of how the app does onboarding for other new features for this new card carousel feature, so that people do not have to learn a new interface to learn a new feature.
As part of the implementation, I wrote the copy and modified illustrations from an existing illustration library for these onboarding cards.
This feature was shifted from the ‘Profile’ page to the Home page following the new restructuring of the app. Following the launch of the new UI, information architecture, and design system, I updated this features to follow those guidelines.
