volunteer-mobile-mockup-banner.png
hopelink-logo-vector-white-01.png

Hopelink is a nonprofit that serves people outside of Seattle, providing many social services including food banks, housing, transportation, and more. Hopelink required a better volunteer portal to help encourage more volunteers and create a better user experience.

Project duration:

March 2022 - May 2022

My role: 

UX designer and researcher 

Design type: 

Desktop portal

Problem

Hopelink requires volunteers to maintain their food assistance program. The current portal has poor user experience for new viewers. When users first arrive on the site they are confused when it appears there is no available volunteer opportunities.

Goal

Create a user-friendly volunteer portal that encourages new users, by displaying volunteer opportunities to all, and creating a simple and clear signup experience.

Artboard – 1.png

initial user research

Hopelink is a local non-profit that serves 65,000 people each year. Some of the programs and services Hopelink offers are made possible by continuous help from volunteers, and Hopelink is almost always in need of more volunteers. The current Hopelink volunteerhub website has some issues that can’t be solved because of the limitations of volunteerhub’s program.

 

 When Hopelink puts out a call for people to sign up for volunteers, people report back confusion that it appears there isn’t any shifts and therefore must not be any need for volunteers right now. This happens on social posts where people comment this and then it creates a domino effect of misinformation that prevents people from signing up. Even with that many people still create an account, but few go through orientation. I believe this is because of a lack of clarity around the process.

 

I aim to solve these problems with my new design.

pain points to solve

1

 

Confusion

When users go to the site, it appears that there are no volunteer opportunities at all. This stops people from signing up as it appears there is no need for volunteers at this time. The new site will show volunteer opportunities even before creating an account.

2

 

Process errors

Hopelink’s volunteer hub doesn’t effectively notify volunteers about the need to complete an orientation and background check before they can sign up for shifts. This can be remedied with design solutions and a clear language.

3

 

Missing details

Volunteer hub doesn’t explain volunteer shift types, or provide requirements for each volunteer opportunity. The new design will provide clear and meaningful info so users can make informed decisions. 

user Personas

pexels-streetwindy-2267812.jpg

“Time is running out to get my volunteer hours in.”

Aria is an 18-year-old high school student who’s about to graduate high school and lives with their parents. They work part-time after school and are applying for colleges and looking forward to moving out. They are also red-green color blind.

 

In order to graduate she must complete 40hr of volunteer work during her senior year at school. Aria is frustrated at the poor quality websites most volunteer systems use that aren’t mobile-friendly and have poor color contrast which makes them hard to read. She hopes to find a better volunteer sign-up process.

Goals 

  • Be able to easily sign up for volunteer activities.

  • Not have to commit to a long-term thing.

  • Find an opportunity with time slots that work with her schedule.

Frustrations 

  • Difficulty finding volunteer opportunities.

  • Some volunteer opportunities want you to commit to long-term volunteering - which she can’t do.

  • She can’t volunteer during school hours or work hours.

pexels-marcus-aurelius-6787355_edited.jpg

“I’m hoping to find something to keep me busy each week.”

Jerry is a retired project manager for Microsoft. He lives with his wife in their home about an hour outside of Seattle. After retiring he has become bored and wants to fill his time with volunteering for a few hours every week. He hopes to find a continuous volunteer opportunity with great people so that he can meet new folks and give back to his community now that he has free time. 

 

Jerry had a hip-replacement last year, and overall shouldn’t lift super heavy items. So he needs to make sure the volunteer opportunity he finds is suitable. 

Goals 

  • Find a volunteer opportunity that doesn’t require too much heavy lifting.

  • Be able to sign up to volunteer on a weekly basis.

  • Wants to give back to the community and meet new people.

Frustrations 

  • Some volunteer sign-ups don’t explain what you’ll be doing.

  • He doesn’t want to have to re-signup every single week.

  • Gets frustrated easily with complicated websites.

user Journey map

I created a user journey map for my user persona, Jerry, to identify pain points and opportunities for improvements for the user experience of signing up to volunteer.

jerry-user-journey-volunteerhub.png
20220531_193514_edited_edited.jpg
20220531_193528_edited.jpg
20220531_192029_edited.jpg

Paper wireframing

Creating quick paper wireframe sketches I worked to find a layout for the primary pages that allowed users to quickly and easily find pertinent information.

digital wireframing

After creating a plan for the main pages, I began to build out digital wireframes for the main user flow - creating an account and signing up for a volunteer shift - for multiple screen sizes. 

volunteerhub-wireframes.png

low-fidelity prototype

This user flow allows people to visit the site, see what volunteer opportunities are available, then go through a step-by-step process to create an account, sign up for an orientation, and then finally sign up for a volunteer shift.

lo-fi-prototype-volunteerhub.png

usability studies

To better understand user needs, I conducted a moderated usability study with 5 participants.

I revised my designs based on feedback, then did another usability study to further improve usability as well as test new functions for clarity.

Study findings

  • Users needed the volunteer orientation requirement to be more apparent.

  • Users requested disability questions be a fillable text box instead of a check box for a more engaging and welcoming experience.

  • Users wanted more ways to navigate between related pages.

high-fidelity prototype

After implementing a number of changes, the new high-fidelity prototype gained new screens and pages as well as additional overlays to help create clear and useful information and navigation.

Mockups

Accessibility considerations

1

 

color contrast​

High contrast colors were implemented to ensure WCAG AA accessibility for people with visual disabilities.

2

 

TEXT FOR SCREEN READERS​

All information is provided in text form even when icons are used, to ensure proper understanding for those using screen readers.

3

 

lANGUAGE CHOICE

Other languages were not added as of yet because Hopelink doesn't yet have the ability to train volunteers in languages other than English. 

impact

“The whole proess was very clear and unambiguous. I knew what to expect and where to go throughout the process.”

takeaways

This project helped me improve my understanding of user flows that involve creating accounts and how to make the process user-friendly and simple.