Problem
Government agencies frequently need illustrations for their digital products, collateral, and presentation decks. Without sufficient design resources, individual teams used various inconsistent stock illustrations that failed to represent Singapore's diverse population.
My Role
Developed over two month-long hackathons (Jan 2023, Jan 2025)
- Jan 2023: Create the complete illustration system in Figma with 1 other designer
- Jan 2025: Collaborated with 1 designer, 2 engineers, and 1 PM to launch a public web builder for non-Figma users
BYOS used in various government products and mediums
Process
1. Designing our character
We wanted our characters to be unique, relatable, and versatile. Worked with other designers who often used illustration in their work to establish a personality scale and principles that would suit the government's tone of voice—approachable without being too quirky or serious. I iterated on the base character and then expanded it to develop more Singaporean personas.
Creating the foundations for the illustration system
Creating Singaporean personas
2. Creating modular characters on Figma
We transformed these personas into a modular Figma system with interchangeable components: eyes, mouth, upper/lower body, objects, and accessories. This setup gave us even more character permutations while allowing users to vary colours by skin tone and brand colours.
3. Designing scenes
Individual characters weren't enough, we wanted to create ready-to-use compositions and scenes that were familiar and could be used across diverse communication needs.
4. Creating a builder
When we released this internally within our organisation, it gained significant traction and was quickly used in our existing products. However, our marketing and non-design members were not familiar with Figma but wanted to use the illustrations in their collateral and decks. We then created a web-based builder to extend our illustration system to any public officer, regardless of design skill.
The builder had to retain the key functionality from our Figma versions:
- the ability to customise characters in preset compositions,
- the ability to adjust colours based on skin tone and brand guidelines,
- ease of use for anyone to customise and export illustrations.
As a fun bonus, when we launched our builder at our 2025 Hackathon, we created an interactive map where users could add the characters they built. The map also contained familiar Singaporean sights and many tiny Easter eggs like the Milo van from our childhood or an elderly man sending well-meaning "Good morning" messages.
Impact
- Used by 700+ government officers outside our agency
- Integrated into digital products used in daily Singaporean life (ActiveSG, HAS, Redeem) and widely used in their island-wide marketing campaigns.
Reflection
Despite spanning only two months across two years, BYOS became one of my most fulfilling projects, seamlessly combining my passions for UI design and illustration. It showed how authentic representation and thoughtful constraints empower non-designers.
The entire process was genuinely joyful: from people-watching to capture authentic Singaporean moments, to illustrating nostalgic local scenes, to witnessing the diverse compositions others created using our system. The most memorable validation came when I saw a photo of an elderly man posing beside one of our illustrated characters because he felt it looked exactly like him— proof that we had achieved our goal of making every Singaporean say "that's me."
If you haven't already, try it out here!
