Helping Hands

Helping Hands is a fictional mobile application that seeks to connect volunteers with community service events near them. In this project, I was tasked with designing the application and logo.

ROLE

UX/UI Designer, Branding

Project duration

2 weeks

View prototype

Background

Helping Hands is a company with a mission to connect non-profit organizations and volunteers. They want to be the go-to platform for volunteers to find community service opportunities near them. They hope to make a difference by making it easy for people to find and sign up for volunteer events.

project scope

In this project, I was tasked with designing the logo and mobile application's main user flows.

CHALLENGES

Because showing nearby volunteer events is not a new concept, the challenge of this project will be to differentiate the application from others in the same industry.

Understanding the industry

Ultimately my goal of this project is to design a product that makes it easy for volunteers to find an event. In order to design an improvement, I had to first understand what I was improving. For my research, I wanted to understand how volunteers currently find their volunteer opportunities and what frustrations they may have from the experiences.

Research goals

1

Learn what motivates a person to volunteer and what activities they look for

2

Understand how a volunteer searches, finds, and signs up for a volunteer activity

3

Determine what users would expect to know about an activity before signing up and what they would expect from an app like Helping Hand

Industry analysis

In order to understand how a person finds a volunteer event, I searched for the current websites and applications that provide the same services as Helping Hands. I wanted to analyze the strengths and weaknesses of each of the competitors in order to understand how Helping Hands can provide a better user experience. Additionally, I wanted to understand common UI patterns and trends in branding.

Upon my research, I learned that users typically find their events based on a volunteer interest (ie. homelessness). Because of this, I knew I wanted to include the option to search by interest as well. However, the amount and types of categories varied greatly from site to site.

Organizing the volunteer interests

In order to understand which volunteer interests I wanted to include within Helping Hands' design, I first analyzed to see the top 30 or so categories with the most event listings between all of the sites. Next, I conducted an open sort card sorting activity to see if the users could condense the volunteer interest into shared categories.

Ultimately, the users had a difficult time condensing the categories. Below you can see the dendrogram of the card sorting activity. The users only agreed on condensing the following categories: crisis support, disaster relief, and emergency & safety. Because of this, I decided to only condense these categories into an overarching "emergency" category and leave the others untouched.

User interviews

Next, I wanted to understand what motivated a person to volunteer and how they found a volunteer event. To do that, I interviewed 3 people between the ages of 18-28 who all had an interest in community service. The conversations were centered around the volunteer's motivations, how they found their opportunities, and their overall expectations as a volunteer.

Once I transcribed my interviews, I was able to categorize and summarize the comments onto post it notes. This format allowed me to clearly see the patterns and form my own takeaways from them. Below is a snapshot of this method.

Click to enlarge.

Research takeaways

My main research goals was to understand what methods a volunteer currently has to find their events. I analyzed the industry to understand how current methods were lacking and how Helping Hands could differentiate themselves. Afterwards, I conducted user interviews to understand the user habits and feelings from the volunteer perspective. In summary, I learned:

Persona development

With my research takeaways, I was able to create a persona that reflected the goals, needs, and frustrations of the typical volunteer. In summary:

First stage of wireframes

Next I designed low-fidelity wireframes. I chose to allow the user to start a search without creating an account. They would instead be forced to create an account once they were ready to sign up for an event. I designed it this way because forcing them to sign up right away would deter people from trying out the application before understanding what it is offering.

I learned during user interviews that users preferred to view events based on their own interests. Because of this, the user can choose any number of interests.

Included in the event description is a section about volunteer requirements and what the volunteer will be doing to provide enough information and set expectations.

Lastly, at the bottom of the screen the user can find information about the organization.

Logo design

For the logo, I knew I wanted a design that captured the essence of community service and integrated it with the two H's from the name. On the right are three of my top designs. The left is the letters shaped into a heart, alluding to the caring side of volunteering. The middle is the letters with wings as a reference to angels. The rightmost logo is just the letters in cursive ending as a heart, with the handwritten format making a "personal" feel.

Brand style

I decided on the leftmost logo because I thought it would fit best for a mobile application and would be the most legible when small. For the colors, I chose colors that were comforting and friendly. After finalizing the brand style, I inserted the colors and fonts into the prototype to create a high-fidelity prototype for testing.

Usability Testing

In order to test the effectiveness of my design, I conducted a usability test with three participants. I gave them some tasks to complete and recorded their response and amount of effort done. The main goal of my testing was to see if users could easily adjust their search settings and sign up for an event with little effort.

Testing Results & Next Steps

Once I conducted my testing, I created an affinity map where I logically grouped the comments and determined if the comments were positive, negative, or an opportunity for improvement. Ultimately I learned that the users found the process to be easy. They thought that it could improve with a few UI patterns that were missing. Based on the amount of participants who shared the comment, I determined the following high priority revisions:

HIGH PRIORITY REVISIONS

1

Add a way for the user to sort the results (by date or distance)

2

Add a way for the user to sign in using other social media platforms

3

Allow the user to edit interests under filters as well

Conclusions

In this project, I was tasked with designing an application for a fictional company called Helping Hands. Ultimately my goal was to improve the current methods of finding volunteer events, as most methods required you to visit multiple sites. My design allowed the user to sign up for a volunteer event with just a click of a button.

The challenge of this project was designing a product fit for a mobile screen that consisted of a lot of categories and information. Ultimately, I believe my design was successful in presenting this information in a consumable way, making it easier for the user to sign up for events that are relevant to them.