Singpass App Design System
|TIMELINE||November 2020 - February 2021 (Phase 1 / 4 months) ; May 2021 - Present (Phase 2)|
I initiated and led this project to build a design system with robust foundation to support the growing team, and allow designers to contribute to it.
I'm extremely excited to share that the Singpass design system just moved into its second phase of design/development in May 2021. Much of this project is still in the works, as such, details can only be shared at a later date. However, please feel free to reach out and I'll be happy to share more separately.
I joined as the 3rd designer on the team. During my onboarding, I had difficulty locating files and materials and had to frequently trouble my teammates. There were plans to make the product grow, which meant that the team would be looking to hire more designers.
I initiated the idea and then led this project to create a design system which would
(1) Allow designers to contribute directly to it. This shifts the responsibility to upkeep and improve the design system to the team, rather than leaving it to an individual (the team does not have dedicated design system designers).
(2) Support the growing team & support the adjacent teams working on the Singpass app
(3) Include newly configured components (using variants and interactive components in Figma) that account for reusability and scalability to support different screen sizes and different/potentially new design use cases. This would allow designers to prototype faster.
(4) Have more transparent workflows and developer-handoff processes, to increase collaboration and working relationships with engineers.
Results / Next Steps
I'm pleased to announce that the design system has been launched and is adopted by designers on their new projects. I would count this as both a personal and team success, but there is still lots to be done to improve the workflow and usability of the design system.
Moving forward, I'll have to dedicate some time per a week to tidy up edge cases, work with designers on how to refine the system (based on their feedback), etc. Additionally, I want to create an even more collaborative workflow between designers and engineers to facilitate discussions and updates to components.
My personal future plans for the design system is to advocate for it on a principles level. If you've any advice, please feel free to let me know!
At the start of this project, I set an underlying principle for the design system: this system will be in beta for quite a while, and since the team don't have dedicated design system designers, it should be structured to allow for anyone to contribute easily.
(1) Did an audit on old sketch files, and moved relevant material into Figma.
(2) Rebuild all the components in Figma - used variants for easy swapping and auto-layout to allow components to scale when prototyping for different screen sizes.
(3) Organized multiple sessions with designers to onboard them and to receive their feedback.
(4) Created a workflow to allow for multiple asynchronous points of entry for designers to leave feedback, propose components/changes, a change log of updates, etc.
(5) Had conversations with engineers to understand their current implementation workflow.