Introduction
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
Responsibilities
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.
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.
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.
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.
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.
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.
Digital Wireframes
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.
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.
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.
Usability Study: Parameters
Study Type
Moderated Usability Study
Location
Sacramento, CA
Participants
5 participants. Ages 30-65. 4 females and 1 male. Participants are people who volunteer multiple times a year.
Length
10-15 minutes each.
Goal
I would like to find out if users can find/register for volunteer opportunities quick and easy.
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.
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.
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.
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.
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.
Mockups
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.
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.
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.
Mobile
Tablet
Desktop
Takeaways
Impact
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.
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.