Case Study: Hero Up, a Responsive Web App for Social Good
Case Study: Hero Up, a Responsive Web App for Social Good
Embedded Files
Project Overview
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
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
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
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
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
Starting the Design
Sitemap
Sitemap
Designing Hero Up involved translating the design across different devices, so I developed a sitemap to keep a consistent user experience.
Paper Wireframes
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
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
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
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
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.
High Fidelity Prototype
High Fidelity Prototype
Going Forward: Takeaways
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
Next Steps
Ideation & Usability Testing
Ideation & Usability Testing
- Flesh out the volunteer application functionality in greater detail.
- Flesh out the volunteer leadership functionality and test further.
Page updated
Google Sites
Report abuse