Organising the Singpass app Inbox for close to 4 million users (Part 2 — UX Design)
After gathering insights from our user studies, the design team set out to translate the findings into an improved Inbox design. We came up with a suite of design solutions with the principles to 1) guide users to find information more easily, 2) group similar information together, and 3) reuse familiar design patterns from existing products. Together, these design solutions aim to help users better organise their Inbox and have greater control over their messages.
1. Category pills
We explored different visual methods to categorise messages. Some methods we tried (from left to right) included using a grid, horizontal scroll lists, fixed list items, and tab bars to segregate messages.
We eventually decided to stick with pills, an existing pattern used in the Singpass app homepage that allows users to toggle between their different identity cards. The pill names are consistent with the various groupings we gathered from our card-sorting exercise.
2. Threaded messages
Currently, some users’ Inboxes can get cluttered with messages, such as “Profile Retrieval” notifications which users receive after retrieving their personal information via Singpass for a transaction. A user study participant who works at a hospital and accesses her work portal several times a day mentioned:
“Access messages can happen many, many times, in my case, 20–30 times a month.”
To ease the learning curve, we wanted to introduce a design pattern used in a common tool that users are familiar with: emails.
Grouping messages on the same topic under the same thread helps to reduce repeated messages in the user’s Inbox and, at the same time, allows users to find related messages more easily.
We also iterated on the design of threaded messages — whether they should look similar to individual messages. After exploring and studying the design of threaded messages in multiple messaging apps, we saw value in differentiating threaded messages from individual messages to reduce confusion between the different message types. This simple difference in UI was sufficient to help users identify threaded messages.
3. Pinned messages
To future-proof the Inbox from an increasing volume of messages, it is useful to ensure users can flag out specific messages that they want to give attention to at a later time. This feature is especially helpful when different government agencies send various messages that are time-sensitive. Payment reminders are one such example.
Aside from ensuring pinned messages were usable, we looked into making them more discoverable. Some considerations to improve discoverability and usability had us exploring different naming and interaction details:
- If Favourites (represented with a Star icon) could be a suitable semantic for the feature?
- Aside from the swipe interaction, would introducing a tap interaction make it more discoverable?
- In the event of a swipe interaction, where would the Pin message button be best positioned?
Semantics
We decided to go with Pin instead of Favourite, Flag, or Star. Pin is more suitable for messages sent by different government agencies that are mainly utility-based, compared to Favourite or Star, which can sound more personal. Pin was chosen over Flag as the latter is more commonly associated with Outlook emails.
Swipe over tap
We saw a lesser need for having the same icon (to tap) across all messages, as this can lead to more visual clutter in the Inbox. Hence, we decided on the swipe interaction to pin messages. However, some stakeholders shared concerns over how the swipe interaction might be less discoverable for a new feature. To address these concerns, we inserted illustrations to educate users on how pinned messages work (shown below).
Position of the Pin message button
The previous swipe-left interaction on an Inbox message only allowed the user to delete the message. When Pin message was added, we introduced the swipe-right interaction to separate the pin and delete message functions. Ensuring constructive and destructive actions are not placed side by side helps prevent users from unintentionally tapping on either button.
For iOS users, we also added a tap-and-hold interaction (an existing pattern) where users can launch the context menu to pin messages. This pattern is common on messaging apps like WhatsApp and Telegram, which users engage with daily. Adding more entry points helps to improve the feature's discoverability.
4. Notification settings
One of the noticeable pain points users faced was receiving notifications on messages they felt were excessive or irrelevant. Users who were frustrated with these notifications would turn off notifications from the Singpass app completely.
This had negative implications as these users would miss important messages like security alerts or upcoming appointments. Thus, we need to give users more personalised control over the notifications they receive.
This converged nicely with our new message categories, enabling us to match the notifications controls with the Inbox message categories, creating a direct relationship between the two and reducing the need to introduce another conceptual layer to users.
Notifications on critical ‘For Action’ messages are set to ‘Always on’ to ensure users are notified of these potentially urgent messages. The other two categories are customisable to meet each user’s needs.
Hint text and message examples on each category also give users an idea of the types of messages they would be receiving and helps users make a clearer decision on which to leave on or turn off.
Design takeaway
While working on the features such as category pills, threaded messages, and pinned messages, it felt like there were minimal design updates to be made, given that the features have pretty direct interactions. This assumption was proven wrong when we started interacting with the technical team. The three new features overlapped strongly, and there was more to design than expected. For instance, we had to work through complexities such as “what happens when users pin a thread, then pin an individual message within a thread.” When they pin a thread within a particular category, should it be pinned in another category as well? We had to think through these interactions.
One of the learnings I took away as a designer is that fewer new screens does not mean lesser interactions to design for.
Conclusion & next steps
We delivered an updated Inbox design that gives users better access and organisation to their messages, and the ability to control the types of notifications they receive. Instead of reinventing the wheel, our team used existing conventions to improve users’ organisation and control over their Inbox.
The next steps for the design team will be to gather quantitative data on the various features to assess the effectiveness of the proposed design. Lastly, we will conclude this three-part series with the final piece on the engineering challenges faced in the delivery phase.
