Project Overview

In a world where compassion can change lives, we embarked on a mission to reshape the digital presence of Willing Hearts. Guided by their noble vision, we set out to redesign their website, creating a virtual sanctuary that would inspire users and empower them to join the cause.

Problem

Amidst the cluttered landscape of the existing website, we discovered a pressing challenge: volunteers struggled to secure their desired time slots, and potential donors found themselves lost in a labyrinth of information. We witnessed the frustration etched on their faces as they yearned for a seamless and intuitive user experience.

Goal

With unwavering determination, our mission was to breathe new life into the digital realm of Willing Hearts. We aimed to create a captivating online sanctuary that showcases their impactful mission and empowers users to actively engage and contribute.
Through intuitive navigation and seamless infrastructure, we sought to unlock doors of opportunity, enabling visitors to easily find information, book volunteering slots, and make meaningful donations. Our ultimate aim was to spread the Willing Hearts message far and wide, igniting a ripple effect of compassion and inspiring a diverse audience to become change-makers.

Contextual Research

To gain insight into the perspectives of volunteers and donors, my team and I woke up early to volunteer at Willing Hearts from 5am to 9am to gain firsthand experience of working in a soup kitchen.

As we prepared ingredients and packed meals, we sat down with volunteers and heard their heartfelt stories of dedication and sacrifice, gaining valuable insights into their motivations and needs.
‍
We were also honoured to have a moment with Mr. Tony Tay, the visionary founder of Willing Hearts. His passion for serving the community was contagious, inspiring us all to dig deeper and unearth solutions that would amplify the impact of Willing Hearts' mission.

We were the dynamic chicken packing quartet that everyone wanted on their team!

User Research

As part of our user research, we conducted user interviews with not only members of the Willing Hearts community, but also with volunteers and donors outside of the community to gain a broader understanding of what motivates individuals to consider volunteering or donating.

Additionally, we interviewed a total of 20 individual and corporate volunteers/donors to cater to their different needs on the website.

Individual Volunteers

Corporate Volunteers

Individual Donors

Key Insights

What motivates individuals to volunteer?

Community and Cause Support
Organisational Affiliation
Belief in the impact of time vs. money
Flexibility and Convenience

How do individuals choose a charity?

Purpose and Impact
Value Convenience
Tax deductibility is not a deciding factor for donors

What information do donors seek when visiting a website?

Credibility of an organization
Reputability Perception
Third-party Endorsements

What is the perception of Willing Hearts' current website among individuals?

Challenging Navigation
Verbose Content
Desire for Updates

User Personas & Problem Statement

With the insights gathered, we compiled and created user personas for the two main groups of users of the Willing Hearts website:

VOLUNTEER:

Adeleine the Straight 'A's Student

Problem Statement: Adeleine needs clear onboarding information for volunteers and an efficient way to book so that she can fulfil her CIP requirements.

DONOR:

Celine the Charitable

Problem Statement: Celine needs a better way to find out about a cause and have the assurance that her donation is appropriately used to make an impact, because the information is difficult to find.

Solutions

After conducting user research and analysing the feedback and insights obtained from the user personas, our team identified several areas where improvements could be made to the Willing Hearts website:

Home Page

Convey the story and impact of the soup kitchen at Willing Hearts.

Volunteer Page

Simplify the flow for volunteer to sign up

Donate Page

Effectively convey the impact of
the donation.

Sketches

Home Page

To convey the story and impact of the soup kitchen at Willing Hearts to engage and motivate visitors.

This can be done through the use of visuals, testimonials, and stories of the impact the organisation has made.

Volunteer Page

To simplify the flow for volunteers to sign up by reducing the number of steps required and providing clear instructions and guidance throughout the process.

This will help streamline the volunteer onboarding process and reduce confusion.

Donate Page

To effectively convey the impact of the donation to donors to help them understand how their contributions make a difference.

This can be done through the use of infographics, videos, and real-life examples of how donations have been used to support the organisation's mission.

Information Architecture

BEFORE

Upon reviewing the content inventory of the current website, it was discovered that certain pages can only be reached through links provided on specific pages such as Home or About Us.

Information Architecture for the current website, multiple hidden links within the page

AFTER

In our proposed website, we consolidated the information into a select few primary pages that are prominently displayed in the header navigation bar, making it easy for users to locate and access the information they require.

Our Proposed Information Architecture, consolidated the information into few primary pages that are prominently displayed in the header navigation bar.

High Fidelity Wireframes

Hi-Fi wireframes for Home Page, includes visual illustrations showing of impact, CTA buttons and also featuring companies that have volunteered or donated to the organization.

Hi-Fi wireframes for Volunteer Page, instead of wall of text, we added more visuals illustrations for clearer visual hierarchy

Hi-Fi wireframes for Donate Page featuring companies' past contributions to the organization, shows the impact of each donation by demonstrating the ratio of donated amount to the number of beneficiaries who will receive meals.

Usability Test

Redesigned Impact:

Improved SUS score from 59.6 to 82.5, indicating a significant improvement in user satisfaction.
Streamlined sign-up flow reduced the time taken from 4 minutes to 2 minutes.

Overall, our redesign of the Willing Hearts website has resulted in significant improvements in both the usability and efficiency of the website, making it easier and more engaging for users to get involved with the organization's mission.

For the future:

Developing a user account system that allows users to save their information and track their volunteer hours and donations
Implement a user account system to personalise the website experience, track volunteering history and donation records, and improve database management for efficient organization of volunteer and donor information.
Creating an admin account page for data and content management
Enable authorised personnel to easily manage and update website content, ensuring it remains current and enhances the overall user experience.

My Takeaways

Working on a pro-bono project with a real client was a rare opportunity that allowed me to learn from the founder of Willing Hearts Singapore and gain a deeper understanding of the organization's mission and goals. I found this project to be particularly motivating and fulfilling because it had a clear purpose and meaningful impact on the community. Being able to propose our redesigned website to Willing Hearts and potentially contribute to their mission was a rewarding experience.

Effortless Giving:
The Redesigned Website for Volunteering and Donations

Length of the Project: