Case Study: Hero Up, a Responsive Web App for Social Good

Project Overview

Key Challenges

& Restraints

Charity organizations spend a great deal of time and resources on recruiting volunteers and ensuring continuity through leadership and knowledge transfer.

Target Audience


Charity or nonprofit organizations administrators aged 18-75 are the primary target audience.

Project Goal


Hero Up is designed to help charity organizations spend less time on managing volunteers by providing a framework for volunteer vetting, identifying leaders, efficient communication, and mentorship.

The Product


Hero Up is a volunteer management app designed to help charity organizations recruit and retain volunteers.

My Role

UX designer leading the
Hero Up responsive web app design

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design

Project Duration

January-June 2022

Understanding the User

I conducted moderated studies with 4 users at different levels of charity organizations ranging from volunteer to board member.


My initial assumptions were that the paperwork reduction that the app offers would be emphasized in the feedback but after the research I learned that the features addressing volunteer recruitment and retention added to the usability and enjoyment of using the app.


User Pain Points

Recruitment

Users felt they did not recruit volunteers effectively and felt they could probably get more volunteers if they could leverage their network better.

Continuity

Passing along experience and expertise to new volunteers is a challenge. It would be helpful to identify mentors and match them with newcomers.

Leadership

There is not a single system to identify leaders and offer leadership opportunities to create future leaders.

Paperwork

Volunteers come from different countries and because networks of volunteers operate remotely, eliminating paper-based application materials is essential.


Persona & Problem Statement

Juan is a charity board member who needs a mobile volunteer management tool because he has to recruit and vet medical volunteers from all over the world.


User Journey Map

I created an empathy map to identify Juan's pain points and possible improvement opportunities. Juan represents a type of charity administrator who has to handle a range of volunteer management responsibilities in addition to the heavy logistics of the missions his charity organizes overseas.


Starting the Design

Sitemap

Designing Hero Up involved translating the design across different devices, so I developed a sitemap to keep a consistent user experience.


Paper Wireframes

Designing Hero Up involved empathizing with the users of the app, primarily charitable organizations and secondarily, volunteers. In these wireframes, making the calls to action (CTAs) clear and accessible was the priority.



Low Fidelity Prototype

In this prototype, I translated the design across different types of devices, with CTAs clearly visible and above the fold for greatest accessibility.


Usability Study: Findings

Round 1’s study findings revealed roadblocks in the user flow that slowed users down in setting up an account.
Round 2 findings revealed the user flow was much more straightforward and clear.

Round 1 Findings


- Three out of 4 users found the flow to be straightforward and easy to complete.

- One out of 4 users found there was not enough information to assess the Hero Up offerings (pricing) prior to opening an account.

- One out of 4 users was confused by the confirmation step following the "adding a volunteer" step.

Round 2 Findings


-Four out of 4 users felt the account setup flow was easy to complete.

-Four out of 4 users liked the "adding a volunteer" function and importing an application already completed by the volunteer.

- One out of 4 users felt the dashboard screen contained too much information.



Refining the Design

The usability study findings revealed roadblocks in the user flow for making decisions to open a Hero Up account. Here, the CTA states, "Find your plan" to help users understand what step they are in the process, and what information to expect.


Accessibility Considerations

1


This design uses high contrast text for low vision and a consistent accent color across the site for CTAs

2


The design includes content adapted to screen readers.

3


Each image featured in this design has been designed to meet the requirements of the Website Accessibility Under Title II of the ADA so that adequate descriptions are contained in each image in appropriate HTML tags.



Going Forward: Takeaways

Impact


Ultimately, charity administrators liked the automation that the "adding a volunteer" function of Hero Up offers.

What I've Learned


I learned that by breaking out the user flow into smaller steps with more context can make a huge impact on the user experience.

Next Steps

Ideation & Usability Testing

- Flesh out the volunteer application functionality in greater detail.

- Flesh out the volunteer leadership functionality and test further.