ItsRainingRaincoats.
Project Background
ItsRainingRaincoats (IRR) is a Singapore based charity that aims to improve the welfare of migrant workers and close the integration gap between them and Singaporeans. They seek to engage not only our migrant worker brothers, but also volunteers and donors as well as corporations and organisations.
Our team picked IRR for Project 3 of General Assembly's UX intensive course to decipher potential challenges one might face when interacting with their dedicated website and proposed solutions for them.
ROLE
TEAM
3 Members
TIMELINE
3 Weeks
Research
Phase 1 of the research process was conducting user interviews with volunteers, donors of social initiatives and charities as well as migrant workers to understand their attitudes when interacting with charity websites. By the end of Week 1, we acquired 16 interviews. Here are three insights we uncovered:
Emotional appeal alone does not persuade one to contribute to a charity. They also need trust.
Due to past instances of charities in Singapore misusing donations and funds, people are more wary about their potential contributions and want to know where they are going to before they commit.
The logistics of a volunteer program are just as important as the cause of the program.
Potential volunteers are taking time out of their busy lives to contribute. The practicalities of the volunteering need to fit and accommodate to lower the barrier of participation.
Migrant workers, as recipients of the charity's efforts, are not concerned about using the website.
A few migrant workers were not even aware that IRR has a website. Those who were exposed to the website to fill in applications had trouble doing so due to a gap in digital literacy.
Phase 2 included a usability test on the existing IRR website with 4 of our interviewees to understand any challenges a potential donor or a volunteer might face when trying to use the website. Here are some findings:
Users appeared inundated from the overpopulated content and could not scroll with a purpose. The amount of time scrolling without pausing to digest the content was disproportionate to the amount of words written.
Users also appeared to have a hard time looking for specific information for volunteer programs, such as entry criteria and commitment hours. The information was found scattered across multiple pages, often outside of the main website and in Google Sheets and Google Forms. This leakage is not as important for a non-profit website, but in a mobile experience where redirection to Google apps occur, it could cause confusion and an unintuitive experience.
Personas
A key decision regarding personas:
Our user interviews with migrant workers themselves told us that because of limited internet usage and technology literacy, they are largely unaware of IRR's website and do not interact with it.
They also stated that even if they are aware of the existence of IRR's website, they would still not choose to use it to retrieve information or procure support for themselves. They instead opt to contact IRR representatives directly through WhatsApp and phone calls.
Hence, we have decided that our proposal of IRR's user experience redesign would not include migrant workers as a persona and instead focus on Donors and Volunteers:
Li Wei is not an impulsive donor. Before parting with money or goods, she wants to know if a charity is credible and that its mission and values align with hers. However, trust is hard to earn when the information meant to build this trust is difficult to find and verify.
The issue is that IRR is not withholding the information, rather, the information was drowned in the overwhelming text, especially in the homepage.
Problem Statement:
Li Wei needs to easily find and digest the charity’s values and actions so that she can build trust in the organisation.
Though Charmaine is doing well in her career and has a lot of responsibilities on her plate, she wants to make an effort to give back to the community. Before she signs up for anything, she needs to know if a program will fit her busy schedule. Furthermore, she wants to be able to know quickly if a certain program is compatible with a life that is already full.
Problem Statement:
Charmaine wants to find enough information about programs quickly so that she can determine compatibility with her own schedule before deciding to participate
design directions
Guided by our research findings from both user interviews and usability tests, as well the personas in mind, we developed 3 principles to shape our proposed redesign. We want to reduce the overwhelm of the site, optimise key information sharing on programmes, and keeping the participant journey native rather than sending them elsewhere to act. We believe this direction would keep IRR's website more coherent and intuitive because people who give their time to charity also deserve to save some time themselves.
solutions
Reducing Overwhelm
The first action we took as a team was to focus on reducing the amount of written content on the homepage. We took large chunks of descriptions and turned them into previews with short call-to-action liners without taking away the essence of the original content. As UI Lead, I introduced new components such as carousels and cards for the preview effect.
Visually, I kept a consistent colour palette using the original brand colours, with a pleasant beige background for easy reading. I also made use of the logo's font (Libel Suit) as the headers.
As we rearranged certain information within the website's architecture, it was important that the original content could still be easily found. We took the Mission and Goals section away from the homepage and hosted it in its own page.
This restructuring of the information architecture lead to a redesign of the navigation menu, with clearer divisions of content (About Us, Get Involved, Media Highlights) and clear icons. Each of these divisions further lead to more information.
The original media highlights page of IRR was a long scroll of content starting from the latest year to 2015.
Here I introduced a quick preview of the latest media features on the homepage. Upon clicking "View More", I employed a filter function that filters the media highlights by year.
Optimising Key Information Sharing
Homepage programmes preview
Volunteer programmes page
Our goal for sharing programmes information was to have interested people tell what the key details are in one single glance. As UI Lead, I introduced new elements to do this job.
Progress bars with a small blurb on how many slots are left to convey current capacity. Tags with different metadata are employed and colour-coded to quickly communicate programme details according to context, such as the programme date, medium used, and venue The tag that stands out is the commitment level (Up to 3 hours/week), as we found through our research that it is the most important factor in volunteer uptake.
Keeping Participant Journey Native
Rather than relying on external apps and services like Google Docs, Forms, and Sheets to present important information and facilitate sign-ups, we propose keeping the participants journey native to the website.
Frequently-Asked-Questions (FAQs) are now immediately accessible on specific programme pages, with an accordion to minimise endless vertical scrolling. A simple form layout is also employed for relevant programmes.
reflection
Being the only member with a visual design background, I was more than happy to take the lead on the user interface front. It was however not without its challenges especially coming from the perspective of the advertising industry. I learned to shift my thinking from a macro, conceptual space to a micro, evidence-based spot by being actively involved in the research process, and delving deep into the user insights and making sure that feeds the design thinking that arose. The clear insights-to-solutions connection was very rewarding.
Interacting with the stakeholders (the Trevo client team) directly to retrieve and clarify pain points was also a great experience. It allowed us to learn of certain limitations we had to work with, such as the email address input situation.
© Fabian Ong 2026 All Rights Reserved