Willing Hearts Website Redesign

Willing Hearts operates as a charitable organisation, providing daily meals to the underprivileged throughout Singapore via their soup kitchen initiative. The organisation relies on volunteers and manages volunteer scheduling through an online portal, enabling bookings for volunteer slots.

MY ROLE

Project manager • User research • Responsive design • Information Architecture • Competitive & Comparative analysis • Prototyping • Usability Testing

TEAM

4 UX/UI Designers:

Alex Zeng

Nathaniel Aleja

Tan Seow Wei

Leanna Teoh

TIMELINE

2 week sprint

26 Mar – 8 Apr 2024

The Brief

Identify the gaps in the current user experience and propose potential solutions

Objectives

Enhance the volunteer registration process to make it more user-friendly and efficient
Increase volunteer engagement and retention by addressing any pain points in the volunteering experience
Enhance the efficiency of the donation process by optimising payment methods

The Process

In my UXDI course at General Assembly, our team tackled the challenge of redesigning the Willing Hearts website. Our goal? Uncover pain points for volunteers and donors, and optimise processes for all stakeholders.

Other Projects

Willing Hearts Website Redesign

Willing Hearts is a a charity organisation that runs a soup kitchen in Singapore where volunteers register on their website through a portal.

UX Design

Heuristic Evaluation

While assessing the website, I struggled with navigation despite being familiar with it. We identified UX issues and prioritised improvements in key areas:

Streamlining donation process (include recurring donations)
Restructuring information architecture
Enhancing design consistency with clearer CTAs

Below are some of the screenshots of the current website to validate our findings:

User personas

Drawing from insights gathered through 15 user interviews spanning various levels of experience in volunteering and donating, I utilised affinity mapping to distill these findings into 3 prioritised user personas for our design solutions.

Problem Statement

Lucy needs to be ready before assuming the role of a volunteer as she feels uneasy entering unfamiliar situations without preparation.

If we could provide Lucy with clear instructions and information about the various volunteer roles, it will make Lucy more confident when volunteering.

Solutions

Andy needs information about the organisation and a secure donation method because he is very doubtful when he donates online.

If we could provide Andy with comprehensive information and a secure payment method, it should boost the credibility of the organisation.

Sandy needs a better way to volunteer as a group because she is socially motivated.

If we could provide a more streamlined volunteering process for Sandy and her friends, it should encourage her to volunteer more.

Ideation & Design

Initial Sketches & Brainstorming

With the team, we kicked off the ideation process with good old pen and paper sketches and some design thinking exercises. I find it really helps me to:

Dive into low-risk designing
Collaborate and align ideas with the team
Iterate multiple times seamlessly
Jot down ideas for key functions and overall flow

What's this? An overview of the final layout before we start wire framing digitally.

Streamlining the Information Architecture (IA)

The current site map included various call-to-action links that opened new browser windows. We simplified the flow and reorganised the information architecture to streamline navigation and enhance user experience.

Hover on the map to view the new IA

Usability Testing

ITERATIONS

The usability testing highlighted some issues with the added features on the volunteer page.

"Site Map" threw people off and needed clearer indication that the map showed information on the different volunteer roles
Blue labels were replaced in order to avoid confusion with the pink drop pins and to make it look more clickable

Volunteer page

How might we provide information on the volunteer process for Lucy?

We revamped the volunteer page to feature:

Essential operating details for the soup kitchen
A user-friendly kitchen map with drop pins showcasing volunteer roles
Clickable drop pins that reveal a step-by-step guide for users to navigate their volunteer day

How might we provide an easier way for Sandy to volunteer as a group?

We made some enhancement to the volunteer portal:

Now, you can easily join slots with friends
We revamped the design system to match the site's overall look and feel
Plus, we've added clear CTAs to make navigation a breeze

How might we provide Andy with a simple and safe way for payments?

We smoothed out the payment process by:

Adding an embedded form to gather details and send payment confirmations
Integrating various payment gateways directly into the site

The Competition

What's this? Our delightfully messy dive into our competitors and a rundown of what we unearthed.

Our major discoveries (so you can skip the details above)

Necessity for clearer volunteer role information
Prioritising simplicity in donation processes to reduce dropouts
Competitors offering secure payment methods directly on their websites

Volunteer portal

The hurdle we faced was the lack of clarity in actionable items on the dashboard.

We improved the clarity of the blue cards indicating registered slots (often mistaken for available slots)
Additionally, we revamped the design of the Friends list to enhance visual hierarchy

Reflections

Looking back

In this 2 week sprint,

We generated over 60+ wireframes
Revised wireframe designs 4 times
I facilitated around 13 team meetings
I ensured the team stayed on track and adhered to schedule
I coordinated delegation of work

I loved collaborating with the team and embracing diverse design ideas! While I see room for improvement (the journey never truly ends!), I'm thrilled to discover existing best practices to learn from, especially in backend development. It fuels my passion for learning and growth—because let's face it, learning never stops!

Going forward

If I had a chance to do this all over again,

Perhaps integrating an event management system like Eventbrite for volunteer enrolment would have been a smoother and more efficient option.
I wish I had dedicated more time to benchmarking trusted payment methods tailored for non-profits, like PayPal.
There's definitely still room for exploring simpler ways to sign up for events with friends, without all the headaches of software development!

There may be some regrets, but failure is always a learning point for me! It's these experiences that shape my growth and deepen my understanding, ultimately making me a stronger and more resilient UX Designer.