Project overview
The product:
The Make a Difference app was designed to serve the community by encouraging people to participate in volunteer opportunities in their community.
Project duration:
June 2022 - July 2022
The problem:
Volunteers are needed to support local communities.
The goal:
Create a mobile app to increase the number of volunteers in local communities.
My role:
Product 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, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Understanding the user
User research | Personas | Problem statements | Competitive audit | Ideation
User research summary
User group: I decided to focus on young adults, age 25-34, as the main user group after discovering that they are the least likely to volunteer.
Things that encourage volunteering include:
The top reasons people choose not to volunteer include:
Skills, interests, and aspirations based opportunities
Having an enjoyable experience
Meeting people
The top reasons people choose not to volunteer include:
Lack of time
Unawareness of opportunities
Research resources: – National Council for Voluntary Organisations – Pathways through participation
Jonathan
25 | BA student
Problem statement:
Jonathan is a working student who needs to find volunteer opportunities where he can use his skills and experience because that is what motivates him to volunteer.
“I wish there were volunteer opportunities where I could use my skills and experience.”
Goals
– Find volunteer opportunities where I can use my skills and experience.
– Volunteer with friends and family.
Frustrations
– “It’s hard to stay motivated to volunteer when the time spent feels wasted.”
– “Being acknowledged and hearing that my contribution is valued is important to me.”
Bio
Jonathan is a 25-year-old student and part-time employee who lives in Billings, MT. He’d previously volunteered at his school but hasn’t volunteered again since. Jonathan believes that he’ll be more motivated to volunteer again if he finds volunteer opportunities related to his skills and experience or if he volunteers along with his friends and family.
Abeer
29 | Accounting | Salesman
Problem statement:
Abeer is a full-time employee who needs to find enjoyable volunteer opportunities where he can also make new relationships because he wants to have fun in his spare time.
“I’ve never volunteered because no one asked me, but I would volunteer in fun opportunities or activities related to my hobbies.”
Goals
– Find out what volunteer needs exist in my community.
– Have a fun time volunteering.
– Meet new people.
Frustrations
– “I don’t know what are the volunteering needs in my area.”
– “I find it difficult to commit to activities that are not enjoyable.”
– “Working long hours and being single makes me feel lonely sometimes.”
Bio
Abeer is a 28-year-old single salesman living in Phoenix, AZ. He’d never volunteered before because he was not asked and he was not aware of volunteer opportunities. However, he would love to participate in activities that are fun or that involve his hobbies. Also, he will be excited to have the opportunity to connect with new people and make friends.
Competitive audit
An audit of a few competitor’s products provided direction on gaps and opportunities to address with the Make a Difference app.
Click to zoom
Ideation
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit.
My focus:
Make the experience fun, engaging, and tailored to each person’s interests and availability.
Starting the design
Digital wireframes | Low-fidelity prototype | Usability studies
Digital wireframes: Homepage
Low-fidelity prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of signing up for a volunteer opportunity.
Usability study: parameters
Study type:
Moderated usability study
Location:
US, remote
Participants:
5 participants
Length:
About 30 minutes per participant
Usability study: findings
These were the main findings uncovered by the usability study:
Additional Information
People expected to see more options such as adding their name and location in the begging, and adding skills based on keywords.
Videos
People were not sure what types of videos they would see.
Redundant content
People felt that content was unnecessarily redundant on the home page and navigation bar.
Registration flow
People were confused about the About page and wanted more details about the schedule.
Refining the design
Mockups | High-fidelity prototype | Accessibility
Mockup: registration
Based on the insights from the usability study, I made changes to improve the user experience.
One of the changes I made was reorganizing the registration flow and adding a screen for choosing the schedule.
Before
After
Mockup: videos
The usability study also revealed that people did not want to sync contacts before trying the app. So, I removed the sync screen from the intro flow and added the option for users to sync friends from the home page and friends page.
Before
After
Mockups
App Intro
Home page
Welcome/loading screen
Get started/login
Set skills
Homepage
Sign up to volunteer
Event details
Choosing a role
Choosing a schedule
Personal information
Additional screens
Home screen with future events
Opportunities videos
Search opportunities
Friends screen
High-fidelity prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype and include the design changes made after the usability study.
Accessibility considerations
Users can set preferences and filter results to view accessible and remote opportunities.
Headings & labels were used to organize the content and support assistive technologies.
Color combinations with enough contrast were used so the content is easy to read.
Responsive Design
Sitemap | Responsive design
Sitemap
With the app designs completed, I started work on designing the responsive website. I used the Make a Difference sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Click to zoom
Responsive design
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Figma Hi-Fi prototypes
Going forward
Takeaways | Next steps
Takeaways
Impact:
Users shared that the app made them more motivated to seek volunteer opportunities in their communities after seeing that the app could be tailored to their needs, interests, and skills.
What I learned:
This was my first project using external secondary research. I experienced firsthand how time efficient it is while still providing quality data. This was also an opportunity to practice empathizing with users despite not having direct interaction with them prior to usability studies.
