Visual Design
UI Design
1 x Design Lead
1 x Senior UI Designer
2 x UX Designers
March 2021 - April 2021
(1.5 months)
Visual design is directly correlated with users’ level of trust in the Singpass app. In its 2+ years of development, efforts were directed towards scaling and visual cohesion was not top priority.
Over time, the app’s visual design started to fall apart slowly. My team did not want to wait till it’s too late to take action and decided to use its 3rd anniversary in October 2021 to lay a foundation for a new visual design language.
Note: Work on this project was split evenly between a senior UI designer and myself. I was part of all discussions and decisions, and the senior UI designer and my design lead made final approvals.
This new visual design language was launched in October 2021 with the new structure of the app, and it's currently used today by two product teams.
The new visual design language was stress tested on different screens, keeping similar layouts and content before and after.
Home screen - before/after
Authentication screen - before/after
Notification screen - before/after
Tutorial screen - before/after
The professional and clean theme gives the app the look of legitimacy that reinforces users’ trust in the app.
A consistent theme that ties all the elements together helps not only with learnability of the app / locating of information, but also increases scalability of engineering efforts and reduction in the need to design and create new UI.
The visual system is created based on the atom design model where components are made to be easily reusable.
Solid colors (red, blue, range of grey, and white) were specially chosen to make colors easy to pair while maintaining good contrast for readability. Using the brand’s Singpass Red as the starting point, the colors and step between colors were meticulously picked by the senior UI designer to have an increased number of color pairs that adhere to WCAG’s international standards.
I went through the app and component libraries to take screenshots of visual elements and put them in respective buckets to understand how much components differed from each other... and it was a lot.
No clear type hierarchy or font pairing used.
Inconsistent use of icons within buttons, and inconsistent colors used in disabled states
There was no defined style for icons and they were used interchangeably between outline, filled, emojis and illustrated icons.
A huge reason why the team decided to refresh the app’s UI was because Singpass had undergone new branding earlier that year. In order to align the look and feel of the app to the brand, we used the brand guidelines (tonality, personality, and values) as a start point.
We were each assigned themes to create a moodboard on after our discussion. I created did explorations for Minimalism, Retro, and a combination of gradients and glassmorphism.
We narrowed down to four themes for further exploration — Whimsy, Minimalism, Gradient, and Retro.
Content gathered included use of colors, iconography style, font pairing across consumer-facing products to enterprise products.
Six screens with varying layouts with different content types were selected for stress testing to see how our selected themes might look and scale across them.
The themes were evaluated based on scalability of visual design for future proofing because the app is rapidly growing with a huge possibility for new features, and therefore new screens in the near future.
The team applied our chosen themes to the screens selected for stress testing. While layouts would probably change (because there’s an ongoing project to restructure the app), we minimized changes to the layout of the respective screens so that the evaluation is focused on the theme itself.
I applied the minimalism and retro themes. I quickly learned that the retro theme was not scalable, and chose not to pursue it further halfway through.
For the Retro theme, it was difficult to do layers in a Retro theme, and the app had layers of data that had to be represented as such visually. As such, I was not able to scale the theme to this screen.
For the Retro theme, exploration of theme went towards a direction that made the app look too rough and unprofessional.
Using the minimalism theme, and applying the best of the other two, we were able to arrive at a final visual direction, and eventually applied this this new visual design language to the newly created IA.
The glassmorphism theme was an internal hot favorite but the team had to decide against it because of potential problems with computing power required. Our focus was to make sure that we can serve the most number of people and to empower to access the government services or resources they need. The glassmorphism theme created sections without having explicit lines, and we applied this principle when we combined themes.
The minimalist theme was chosen as a base theme because the app needs to be able to provide users with a sense of trust and security.
From the Whimsy theme, the squircle (circle + square) shape was chosen to be emphasized as a core element that gives the app a unique personality.
The team adopted the way the gradient theme handled the creation of sections — sections were created without explicit solid lines but with the use of white space that run off the screen.
The app was moving into its next phase following restructuring of the app. I created all components in Figma from the ground up. These components were immediately used in the new revamped app and simultaneously documented to be added into the design system. You can read about the design system project here.
This UI exploration and revamp project was an eye-opener for me to learn more not only about colors, layout, designing UI, but also about accessibility, scalability, and how these all tie together with engineering constraints.
I’m proud to play a huge role in developing the new visual language system to continue developing the trust that users have of the app, and future-proof the app for its new features.