Ministry of Culture, Community & Youth (MCCY)
In partnership with the Ministry of Culture, Community & Youth (MCCY) and GovTech Singapore, I was assigned the responsibility of designing a social grants portal. This portal aimed to streamline the process of delivering government assistance across various sectors, including the arts, community, heritage, social welfare, sports, and youth.
Within a compact UX team of two members, my primary role was to focus on the User Interface and Interaction Design. This encompassed tasks such as establishing comprehensive brand guidelines and UI principles, coordinating stakeholder workshops, and assisting research activities involving agency staff and user participants.
The creation of the brand identity hinged on the development of a series of illustrated characters inspired by a curated mood board. Using Adobe Illustrator, these characters were meticulously crafted to embody and closely mirror the diverse grant applicants they represent. The final illustrations emerged through a thorough process, involving two rounds of sketches and valuable user feedback, ensuring that they resonated authentically with the target audience.
Building on the foundation of our illustrated mascots, we seamlessly extended the defined illustration style and color palette throughout the entire grant application ecosystem. Every grant icon was meticulously crafted to reflect the unique essence and purpose of each grant opportunity.
For instance, take the Young Changemakers (YCM) grant, designed to support youth-led projects benefitting Singapore's community and society while empowering young decision-makers to evaluate and mentor project applicants. Leveraging the theme of empowerment, the YCM grant icon illustrates a triumphant moment with lifting of trophy, adding an engaging animated element.
Furthermore, I introduced unique, three-second animations for all icons triggered by micro-interactions. Collaborating with another designer, we used Adobe After Effects to animate and Lottie for integration. These animations serve to boost user engagement, infuse moments of delight, and act as pre-loaders during the application process, creating a more engaging and user-friendly experience.
Encountering error pages like 404 or 500 can be a frustrating experience for users. To mitigate this frustration and guide users, the implementation of animated illustrations coupled with playful and quirky copywriting adds a touch of humor. This is aimed at easing the tension and making the error page a more user-friendly and engaging experience.
I started by browsing through online resources and gathered similar themes of copywriting and visuals as creative inspirations. My approach is to create unique scenes based on the main mascot cast and pairing with appropriate copy for the error pages.
404 Error Page Concept
Starting with 404 error page, let us picture Keiron, the child art prodigy, embarking on an enchanting after-hours museum adventure, where he unexpectedly encounters a mummy emerging from its coffin. The concept comes to life with captivating animated interactions between Keiron and the mummy.
Furthermore, the message 'Oops...looks like you took a wrong turn' carries a dual meaning. It serves to indicate that the user has reached the intended domain but found an uninformative URL path, while also cleverly playing on the theme of Keiron taking a wrong turn at the museum.
500 Error Page Concept
Imagine Philp, the dedicated engineer burning the midnight oil, meticulously troubleshooting errors and fine-tuning the server. The concept comes to life with intricate details such as scrolling lines of programming code, a relentless ticking clock, and the flickering lights of the machines, creating an illusion of time in motion.
The message, 'Something went wrong, but we are on it. Please try again, or contact support,' serves a dual purpose. It offers a user-friendly, generic description of the issue and a potential solution, while also encouraging users to empathize with the hardworking engineer at the heart of the action.
From Initial Paper Sketches to Low-Fidelity Digital Screens
The design evolution kicks off with paper sketching, where I explore ideas, layout concepts, and key components on similar dashboard designs. These rough sketches lay the foundation for the next phase, as they are translated into low-fidelity digital screens before eventually introducing design system and refining interfaces for production.
In the early phase, It is pivotal to focus in addressing user needs and objectives, including the reduction of form completion time (by addressing redundant and repetitive fields), the prompt notification of application status updates, and the overall enhancement of the grant processing efficiency for officers.
A snapshot of a short interview and Clickable Prototype Usability Test by one of the research participants:
Profile
• Miss Tania, Freelance Artist & Writer
• Grant Applicant since 2009. Have previously applied for Creation Grant, Presentation & Participation Grant Market and Audience Development Grant
1. Reliability of Current Platform (STARS):
• "Each time you fill up a form, you get logged out after some time and it will not save your information. I have to constantly save my drafts.”
• "I like it when there is a human to identify the project with. It is great knowing first hand which officer handles the grant from the long officer list. "
2. Status Notifications:
• "To prompt applicants with warning messages if they are not eligible but still be allowed to progress to the rest of the form.”
• "Email notifications for my disbursements will be assuring as I moved around often.”
3. Usability and Informative:
• “The portal should enable me not to bother any of the grant officers with attachments or questions”
• “More clarity of the approved grant amount.”
• "Will the proposal questions overlap in the new form?"
4. Application Appeal (Feedbacks after usability test):
• “For me, visually this really works well. It is much better than any government websites I have seen.”
• “The fonts are great!”
• "I rate 8 out of 10. Compared to STARS, I will give you 20 or even 25."
The wireframes were refined following several rounds of usability tests involving both agency staff and participants which aimed to validate the effectiveness of the colorful visuals and user flows. Eventually, various design components were then adapted into user flows and extended across portal and dashboard. During the production process, my support was offered to ensure engineers have the necessary resources and knowledge to execute the design effectively.
Post Launch Performance
1. Efficient Grant Identification: Applicants can now swiftly identify the most suitable agency grant for their needs. This streamlined process has led to a remarkable 50% reduction in the time it takes from the initial search to submission.
2. Streamlined Workflows and Faster Evaluation: The establishment of a centralized data center has effectively streamlined workflows across agencies. This enhancement ensures that applications reach designated grant officers promptly, significantly boosting their productivity and enabling them to evaluate a greater number of applications.
3. Enhanced Application Visibility: Applicants now have the convenience of reviewing their application status via a dashboard, providing them with real-time insights anytime and anywhere. This feature empowers applicants to plan ahead and instills confidence in the accessibility of government services.
4.Reduced Call Inquiries: The implementation of the web portal has led to a substantial decrease in the volume of call inquiries. This reduction not only indicates a more user-friendly and intuitive system but also allows agencies to allocate their resources more efficiently, contributing to a smoother application process overall.
This project was a fantastic canvas for me to channel my passion for visual design. I had the privilege of bringing illustrations and animations to life for a government portal which is often seen as boring and mundane. It's not every day that you get to don your creative hat, especially on a government portal tailored for the youth and arts.
Throughout this experience, I gained valuable insights into areas for improvement, such as stakeholder management, workshopping, and research methods. Collaborating with a fellow experienced designer, whose skills complemented mine, was a rewarding experience that enabled me to learn and grow on the fly.
Visual designer with a passion to create great experiences.