The Stationery Pack: Gamifying Civic Engagement
Year
2024/2025
Services
Web Design
UI/UX
Client
Singapore Government Partnerships Office
Overview
To amplify brand awareness, SGPO launched an interactive, web-based personality quiz designed to connect the general public with local community initiatives. The goal was to help users discover their unique "participation style" and uncover tangible opportunities to drive positive change in Singapore. The concept centred around The Stationery Pack—a charming cast of quirky, "derpy" stationery characters embarking on a mystery quest to save the day. Inspired by bold, Y2K retro video game aesthetics, the story-driven quiz engaged users through narrative-based choices rather than dry, topic-based questions. By calculating user responses behind the scenes, the quiz matched individuals with a specific character, their "best buddy" traits, and tailored actionable ways to contribute to the community. The successful launch resulted in high public engagement, a complete sticker pack merchandise line, and a social media campaign adaptation.
To amplify brand awareness, SGPO launched an interactive, web-based personality quiz designed to connect the general public with local community initiatives. The goal was to help users discover their unique "participation style" and uncover tangible opportunities to drive positive change in Singapore. The concept centred around The Stationery Pack—a charming cast of quirky, "derpy" stationery characters embarking on a mystery quest to save the day. Inspired by bold, Y2K retro video game aesthetics, the story-driven quiz engaged users through narrative-based choices rather than dry, topic-based questions. By calculating user responses behind the scenes, the quiz matched individuals with a specific character, their "best buddy" traits, and tailored actionable ways to contribute to the community. The successful launch resulted in high public engagement, a complete sticker pack merchandise line, and a social media campaign adaptation.
My Role
As the UI/UX Designer and Web Developer on this project, I bridged the gap between creative storytelling and technical execution through the following phases:
Concept & Strategy: Participated in initial brainstorming sessions alongside copywriters and illustrators. I helped shape the narrative direction, balancing story-driven engagement with character logic, and co-developed the algorithmic points-tallying system to ensure accurate character matching.
Visual Direction: Collaborated on establishing the art style, leveraging moodboards and typography to land on the bold, nostalgic retro-game aesthetic that defined the project.
UI/UX Design: Formulated the user journey by creating initial wireframes for page layouts and flow. I then built interactive, and responsive prototypes in Adobe XD to visualise the desktop and mobile experiences.
Web Development & Launch: Led the front-end building of the responsive web experience, which included managing the Content Management System (CMS) and optimising visual assets.
Testing & Quality Assurance: Lead the User Acceptance Testing (UAT) phase, debugging layout inconsistencies and logic flows to ensure a seamless, glitch-free launch.
As the UI/UX Designer and Web Developer on this project, I bridged the gap between creative storytelling and technical execution through the following phases:
Concept & Strategy: Participated in initial brainstorming sessions alongside copywriters and illustrators. I helped shape the narrative direction, balancing story-driven engagement with character logic, and co-developed the algorithmic points-tallying system to ensure accurate character matching.
Visual Direction: Collaborated on establishing the art style, leveraging moodboards and typography to land on the bold, nostalgic retro-game aesthetic that defined the project.
UI/UX Design: Formulated the user journey by creating initial wireframes for page layouts and flow. I then built interactive, and responsive prototypes in Adobe XD to visualise the desktop and mobile experiences.
Web Development & Launch: Led the front-end building of the responsive web experience, which included managing the Content Management System (CMS) and optimising visual assets.
Testing & Quality Assurance: Lead the User Acceptance Testing (UAT) phase, debugging layout inconsistencies and logic flows to ensure a seamless, glitch-free launch.
Impact
1 Landing Page • 8 Narrative Questions • 8 Unique Character Profiles
Features: Downloadable results for social sharing.
Outcome: Highly positive public feedback, cross-platform social media adaptation, and a digital sticker pack release.
1 Landing Page • 8 Narrative Questions • 8 Unique Character Profiles
Features: Downloadable results for social sharing.
Outcome: Highly positive public feedback, cross-platform social media adaptation, and a digital sticker pack release.
