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.
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 verify 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
We translated our insights and constraints into the principles that guided the redesign. Reducing cognitive load, assuring guests at the critical moments, and giving them more room to personalise their stay all work toward the same end, making the process feel shorter, lighter, and more hosted than the clock alone would suggest. From the structure of the flow to the clear and immediate feedback at the tasks that matter most, every decision that followed was measured against these three intentions.
— Maxim, CEO, Trevo.ai
solutions
Reducing cognitive load
The first feature we proposed is a progress bar with 4 distinct stages: Guest Information / Room Configuration / Payment Information / Confirmation. Guests will not only be able to clearly see which part of pre check-in process they are in but also know what is coming next through the icon imagery. They will also be able to move back a stage to change any input, or exit the task entirely.
Trevo's original design had the email address input placed in the middle of the user flow so the confirmation email could be sent to guests. When we raised concerns about this being an extra step for guests when they would have already been provided a reservation number, Trevo informed us that this is a necessary step as the hotels would not be able to share the guests' email address. What we proposed was to bring forward this step right at the beginning and mask it as part of the reservation look-up process to streamline it.
A major design decision was to introduce components such as cards with clear system signals and visual cues. This way guests would be able to know their current completion status with a single glance.
Assuring guests at critical moments
The first critical task guests encounter is the capturing of their identification. A preparation page was placed after the reservation lookup step to set expectations and reduce surprise when this task arrives. During the identification step itself, clear graphics and animation guide guests through the capturing and auto-fill process while also occupying the wait as the system works. The facial capture was then placed together with the identity capture, so the two related steps are completed in one place.
The pre-payment redesign was simple; I utilised known payment UI formats so guests need not familiarise themselves with a foreign layout.
At the end of the pre-check in process, a clear, thorough summary is presented to guests so they can check their information and requests before submission. This allows for some margin of error in the entire process so guests can rectify should they need to. The final confirmation page closes the loop after the irreversible submission.
Service Requests and Upgrades
Here we answer the client's challenge to include upselling as part of our redesign. The original Trevo service requests and upgrades sections were both designed in a form layout, which contributed to their lack of organisation and appeal. I redesigned the two sections separately. The form layout was kept strictly for service requests, presenting the more common requests as suggestions with quantity inputs, alongside a manual text field for any additional details.
For the upgrades section, I moved to a card layout with overlays to increase appeal and ease of use. This makes room for product images that sell an experience rather than list it, supporting stronger upselling rates. To give guests with no need for upgrades a sense of agency, a "Skip this step" button allows them to pass over the section entirely.
Design system
I took the liberty to create a design system documentation of the new proposed design. Since this is a white-label, the specific colours and fonts used were not too important as they can be switched to the specific hotels' branding. The most important sections of the documentation would be the spacing scale and the component previews. Spacing helps to set the grid system and lock the UI in place, while the components help future clients of Trevo know the different "molecules" and "organisms" that exist in this product.
Iterations
A few test users did not realise that they needed to take a selfie for face verification and were surprised by this critical step even though a Preparation Page was implemented at the beginning. This told us that guests were inclined to finish the process as fast as possible and hence skip over important information critical to finishing the same process. What we did was separate 3 points into 3 separate screens, prompting guests to pause at each one.
Some test users were not sure which rooms were allocated to whom, especially when they wanted to make guest-specific upgrades and requests. They realised the assigned rooms only at the summary page at the end. To fix this, we implemented a name tag component on the guest cards with a down chevron button, to indicate that guests are able to swap the allocation on their own.
Finally, the user flow we designed required all guest information to be provided in one sitting, meaning all guests needed to be present at the same time while going through the pre check-in process. Test users pointed out that this was not efficient as there tends to be a primary guest handling the administrative side of this process.
We adjusted the user flow to allow multiple guests to use the same booking ID to check-in themselves and adjust room preferences, resulting in a Guest-Room toggle. The primary guest will still have to submit payment details to confirm the request.
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