Case Study - October 2021
GivingBack App and Responsive Website for Community Service
GivingBack is a nonprofit organization focused on matching volunteers with nonprofits. Its target includes people who want to help their communities, give back, and make a difference.
MY ROLE
UX designer leading the app and responsive website design from conception to delivery.RESPONSIBILITIES
Conducting interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, iterating on designs, determining information architecture, and responsive design.Problem
Most people want to give back and volunteer, however, it is difficult to fit it into their schedule or find family-friendly ways to volunteer.
Goal
Design an app that matches people to causes they are interested in, providing many options for flexible schedules, ongoing, and other filters that meet their availability.Understanding the User
I created a survey to gather information on a wide range of users from a wide range of ages and backgrounds and found most people want to give back to their communities, but most people can’t seem to find the time or the right opportunities to take part in.
Personas
Problem statement:
Emma is a full-time worker who needs to find volunteer opportunities that align with her schedule and passion because she wants to give back and make a difference.
Problem statement:
Harold is a dad and professional who needs family-friendly volunteer opportunities because he wants to teach his kids a valuable lesson and contribute to his community.
Competitive Audit
An audit of a few competitors’ services provided direction on gaps and opportunities to address with the GivingBack app.
Ideation
I did a quick ideation exercise to come up with ideas on how to address gaps identified in the competitive audit. My focus was specifically on finding the right opportunities and being able to track and share activities.
Digital Wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the GivingBack app. These designs focus on delivering personalized opportunities to volunteer.
Starting the Design
Low-fidelity prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of viewing opportunities to booking an opportunity and manage it through their profile.
Usability study: parameters
Study type:
Unmoderated usability study
Location:
United States, Remote
Participants:
5 participants
Length:
10-15 minutes
Usability study: findings
Navigation:
People want to find the right place to go as the icons are difficult to understand.
Wording:
People had difficulty understanding what they were singing to.
Editing:
People found it difficult to see multiple upcoming opportunities booked and how to edit or cancel them.
Refining the Design
Mockups
High-fidelity Prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
View the high-fidelity prototype
Accessibility considerations
Clear labels for interactive elements that screen readers can read.
The initial focus of the home screen on personalized recommendations helps define the primary task or action for the user.
Responsive Design
Sitemap
Responsive Designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit the specific user needs of each device and screen size.
Going forward
Takeaways
Impact:
Users shared the app was something that they could use to volunteer and keep track of their volunteer work.
What I learned:
I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were useful.
Next steps
Conduct further research on how the app helps people find the right opportunities to volunteer and give back to society.
Add a social aspect where users can share and connect with others for accountability and connection.
