top of page

Humanitarian Helpers

Volunteer Application and Responsive Website Case Study

Humanitarian Helpers Application and Website Case Study: Image


My Role

Sole UX Designer for Humanitarian Helpers. Designed both the app and the responsive website completely from beginning to end.

Project Duration

July 2021-August 2021


Conducted interviews, competitive analysis, user personas, empathy mapping, journey mapping, information architecture, paper and digital wireframes, usability studies, affinity mapping, low and high-fidelity prototyping, and accessibility accommodations.

The Product

Humanitarian Helpers is a fictional Sacramento based organization that consolidates local volunteer opportunities and helps potential volunteers register for these opportunities. They need a brand new app and responsive website. Their target audience is anyone that has the desire to volunteer and help their community.

The Problem

Those who are interested in volunteering have trouble knowing where to start finding volunteer opportunities. For those who are able to find opportunities, they usually cannot find a clear description for what each volunteer job entails.

The Goal

Design an app and responsive website that helps users find and register for local volunteer opportunities.

Humanitarian Helpers Application and Website Case Study: List

User Research: Interviews

I started the design process by conducting interviews of users that have found and registered for volunteer opportunities online. This helped provide me with a better idea of pain points that users have had previously. This ultimately guided how I would go on to design my app and responsive website. It was clear that users had 2 main issues with previous volunteer experiences. First, some users did not know where to start finding these opportunities. A lot of times, they only heard about opportunities by word of mouth. The 2nd issue was that volunteer apps/websites did not give clear descriptions for what the job actually entails. This made the user feel uneasy about what they were signing up for.

I was surprised to find that these organizations were not clear in terms of what each job entails. I expected that job descriptions would be one of the most important parts of a volunteer site. With that being the main function of a volunteer site, I thought it would have been made a priority for that organization’s UX. 

Humanitarian Helpers Application and Website Case Study: Text

User Research : Pain Points

Not Sure Where to Start

Users were not sure where to find local volunteer opportunities. Most of the time, users found out about volunteer opportunities via word of mouth.

Poor Job Descriptions

Users noticed that previous online volunteer opportunities had very poor description of the job’s duties. This made them feel uneasy about what they were signing up for.

Lack of Contact Info

Users were not able to find contact information if they had questions regarding the volunteer opportunity.

Lack of Event Day Info

Users complained that they did not know where they needed to meet on event day. The time and place for the initial meetup was not provided when they registered.

Humanitarian Helpers Application and Website Case Study: List

User Persona: Selena

Problem Statement

Selena is a soon-to-be retiree who needs a volunteer app that consolidates local volunteer opportunities because she has trouble knowing where to start the volunteer process.

Humanitarian Helpers Application and Website Case Study: Image

User Persona: Jonah

Problem Statement

Jonah is a generous young professional who needs a volunteer registration website with clear and detailed expectations for each job because he wants to be prepared and make sure he is a good fit for the job.

Humanitarian Helpers Application and Website Case Study: Image

Paper Wireframes

Paper wireframes were critical to my design process because it allowed me to combine all of the research I had gathered previously to begin designing the 1st version of my application. This would be the starting point for all of my designs.

Humanitarian Helpers Application and Website Case Study: About

Digital Wireframes

Screen Shot 2021-08-07 at 1.48.01 PM.png

Based on my initial design interviews, I wanted to ensure that my app had clear descriptions for the event and the job duties. User were sometimes confused about what they were signing up for and were frustrated without clear descriptions and job duties. In addition, I wanted to make sure my app had contact information in case a user had questions regarding the opportunity. Previously, users explained that they had no way to ask questions regarding an opportunity.

Screen Shot 2021-08-07 at 1.49.18 PM.png

Based on the initial design interviews, users were frustrated that past confirmations did not tell them where they needed to be on event day. They also did not really receive a time to arrive. I wanted to make sure that the time and place to meet on event day was clearly communicated on the confirmation screen. If anything about that information was unclear, I also wanted to provide the coordinator’s contact information again if the user had questions.

Humanitarian Helpers Application and Website Case Study: Features

Low-Fidelity Prototype

The low-fidelity prototype included the primary user flow of finding and registering for a local volunteer opportunity. The process began with using a zip code to find an opportunity and ended with a registration confirmation screen. After the prototype was created, it was used in a usability study.

Humanitarian Helpers Application and Website Case Study: About

Usability Study: Parameters

Study Type

Moderated Usability Study


Sacramento, CA


5 participants. Ages 30-65. 4 females and 1 male. Participants are people who volunteer multiple times a year.


10-15 minutes each.


I would like to find out if users can find/register for volunteer opportunities quick and easy.

Humanitarian Helpers Application and Website Case Study: List

Usability Study: Findings

Special Prerequisites

Some users have had previous volunteer experiences that required special prerequisites to volunteer. They wanted to have that information prior to registering.

Birth Dates

Some users mentioned having had past volunteer experiences that required them to be a certain age. Users typically had to enter their birthday on registration forms.

Confusing Wording

Certain wording on the app was too vague and confusing for some users. At various places in the application, users need clearer terms and phrases.

Humanitarian Helpers Application and Website Case Study: List

Design Iterations

Post Usability Study

Based on the information that I received from the usability study, I made several changes to the application design. The hope is that these changes will improve the user experience.

Screen Shot 2021-08-07 at 2.04.15 PM.png

Actionable Insight #1

One of the actionable insights that I implemented was adding a section that listed special prerequisites. I wanted to add this on the initial search results screen so that users could quickly disregard opportunities that had special prerequisites that the user might not possess. Prior to the usability study, users had no way of knowing is an opportunity required special prerequisites.

Screen Shot 2021-08-07 at 2.05.19 PM.png

Actionable Insight #2

The 2nd actionable insight that I implemented was including a date of birth field on the registration form. Users mentioned that a lot of volunteer opportunities require you to be a certain age. Including this section will help ensure that the user is eligible to volunteer. Prior to this addition, a minor would be able to register for an 18+ volunteer opportunity.  This should prevent issues like that from occurring.

Screen Shot 2021-08-07 at 2.07.00 PM.png

Actionable Insight #3

The 3rd actionable insight that I implemented was making some of the app’s terms clearer. Users were confused by “Job Title”, so I changed it to “Volunteer Title”. This ensures that the user knows it is not a job, but rather a volunteer opportunity. In addition, “date/time” was changed to “event date/event time”. Hopefully, this change makes it clear for the user that this is the event date/time for volunteers to work.

Humanitarian Helpers Application and Website Case Study: Features


Screen Shot 2021-08-07 at 2.08.34 PM.png
Humanitarian Helpers Application and Website Case Study: Image

High-Fidelity Prototype

The high-fidelity prototype uses the same user flow as the low-fidelity prototype introduced earlier. I used the usability study insights to make changes with the hope that they make finding/registering for volunteer opportunities a better experience for the user.

Humanitarian Helpers Application and Website Case Study: About

Accessibility Considerations

Throughout the design process, I made sure to think about various accessibility considerations. Hopefully, this makes my design more inclusive for everyone.

Pictures of the volunteer opportunity will have alternate text to make sure those with accessibility needs can have a description of the picture read aloud to them.

Registration form fields will follow a logical reading order, so a screen reader can read everything in a logical way.

Color contrast for the entire app passes the WCAG AA/AAA color contrast analyzer.

Humanitarian Helpers Application and Website Case Study: List

Information Architecture - Sitemap

After completing the dedicated mobile app, I started to design a responsive website for Humanitarian Helpers. I created a sitemap to help organize and structure the layout of the website. This proved to be extremely helpful in maintaining consistency across varying screen sizes.

Humanitarian Helpers Application and Website Case Study: Image

Responsive Designs

I modified my designs to accommodate for mobile, tablet, and desktop viewing. Each screen size has a unique layout based on the use cases of each device. However, I also maintained consistency of critical elements across devices to ensure the user can have a truly cross-platform experience.


Screen Shot 2021-08-07 at 2.21.32 PM.png


Screen Shot 2021-08-07 at 2.23.17 PM.png


Screen Shot 2021-08-07 at 2.24.09 PM.png
Humanitarian Helpers Application and Website Case Study: Products



Both the dedicated application and the responsive website should help volunteers, organizations, and the overall community. By providing a digital experience that is easy to use, volunteers and organizations will be able to partner up more efficiently. As a result, the overall well-being of the community will improve.

Quote From the Usability Study

“This app is really nice if you don’t really know where to begin the volunteer process!”

What I Learned

I learned about how big of an impact a digital platform’s UX can have. Being prompted by Google to design for social good, I really saw how far good UX reaches. This project is designed to help prospective volunteers and organizations looking for volunteer help, which in turn benefits the local community. This really illustrates how a company’s UX can help in both the micro and the macro.

Areas for Improvement

With limited time, I was only able to have 1 search filter. An area of improvement would be to add more filters. I found that most of the competitors in my competitive audit had a lot of search filters. With limited a visual design background, I would look to improve the UI of the cross platform experience.

Humanitarian Helpers Application and Website Case Study: List

Next Steps

Next Step #1

Design more filters so users can further narrow their searches.

Next Step #2

Refine the UI elements of the designs to create a more aesthically pleasing look.

Next Step #3

Add the functionality for users to be able to start their own independent volunteer projects and recruit others.

Humanitarian Helpers Application and Website Case Study: List

Get in Touch

Thank you so much for taking the time to review my work. I would love to hear your feedback. My email is linked below.

Humanitarian Helpers Application and Website Case Study: Text
bottom of page