Project Overview
Embedded Files
HealthyDeeds is an app that allows people to find volunteer opportunities within their local communities; specifically focusing on local access to healthy foods and meals.
Role:
UX/UI Designer
UX Researcher
Responsibilities:
User research and analysis
Persona creation
Wireframing
UI Desing
Prototyping
Iteration of designs
Project duration:
October 31, 2022 - November 2022
Tools:
Figma and Miro
Project type:
Conceptual
The Problem
According to an article written by Julian Agyeman, "54 million Americans don't have access to healthy food." Communities are always in need of volunteers who can help equalize the food gap. Volunteers often need help finding or accessing opportunities quickly, and the process of signing up for said opportunities can take a matter of days depending on the organization. Most potential volunteers face the problem of “time”; time to find an opportunity, time to sign up, time to travel to an event, and so forth. So the question now becomes: What can we do to help minimize time pain points, so that more volunteers can help out their local communities?
The Solution
To make an app for volunteers to quickly search/access local volunteer opportunities with the ability to rapidly reference dates, time (duration), and sign up for volunteer positions.
User Research
Initial user research began with a user survey based on demographics, volunteer experiences, and user hurdles. Before administering the surveys, some assumptions leading into the research were:
Users will initially conduct searches to volunteer via a computer desktop rather than a mobile device.
When searching for volunteer positions, users will start with a Google search OR conduct a search based on known volunteer organizations.
Time will be a factor as to why users do not volunteer often.
Large families with children are more apt to not volunteer versus smaller families or single users.
The target user of a volunteer app would be within the younger range of 18 - 30 years of age.
Fourteen people participated in an online survey yielding insightful data. Below are some of the findings from the survey.
Key takeaways which influenced the ideation process:
92.9% of survey participants would prefer to conduct a volunteer search on their mobile devices.
I should start with a mobile-first design approach (dedicated app then responsive web mobile view).
100% of participants could only dedicate 1- 5 hours of volunteer time and 6/14 (42%) wrote in their biggest challenge when volunteering or looking to volunteer was time.
I need to find a way to incorporate and showcase times to help minimize users' time when searching for a volunteer position.
The 14.3% of participants that do volunteer for their local community fall within the age range of 35 - 44 and vary in family sizes. 50% of participants showed interest in volunteering.
Age and family sizes may not be a major factor in terms of target users, however, the older range of 35 - 44 provides some good insights into what age range may actually volunteer and use the volunteer application.
User Personas
The insights and data gathered also supported the creation of user personas. I created two personas, one within the main age range of actual volunteers and family size (according to research findings) and another within the younger age bracket and smaller family size. These personas share the main user survey pain point of time.
Meet "Jacob"
Meet "Sara"
Ideation
Sitemaps
How Might We/Crazy 8's
I initially started my process with “How might we” questions and then transitioned into crazy 8’s. During Crazy 8's, I focused on creating a dashboard screen for the volunteer application. I really enjoy this process of quick design ideation as it really gets my brain flowing and thinking about what the user needs in order to meet their goals.
Wireframing for Dedicated App and Lofi Prototype
During this phase of the design process, I sketched out 5 different screen options for each screen within the user flow of searching for a volunteer position. After five screen options were created, I starred elements that I liked on each screen and refined my sketches incorporating the starred elements into digital wireframes.
User flow: Search and sign up for volunteer opportunity.
Usability Testing
A lofi usability test was conducted with 4 participants. The results revealed themes and insights to better enhance the user experience. The success rate of participants was 100% with 4/4 of users completing the task of the main user flow. A problem encountered was that some elements slowed down the user experience in completing the flow quickly and confidently.
Usability testing revealed 3 key insights:
75% of participants said the calendar was very confusing and not a useful feature.
50% of the participants said the text was small and the dashboard seemed cluttered.
100% of the participants said the confirmation overlay was too fast and did not allow them to exit on their own accord.
Hifi Mock up/Prototype for Dedicated App
A participant during the usability study commented that during the search process for volunteer opportunities, there was not a clear indication of how or why volunteer opportunities would be suggested.
I had decided (early on) that the onboarding process would allow users to select their preferences in terms of categories, time, and volunteer location/distance. However, I did not provide easy access for users to quickly change their preferences. I added a flyout menu for users to change their preferences quickly.
Accessibility
To ensure that my color palette was accessible, I checked the color contrast of the text and backgrounds used within my design. I also incorporated icons for specific categories to enhance user comprehension.
As I continue with my design, I will look into the usability/contrast of the gradient buttons and if it enhances or inhibits the overall design. The welcome title is not highly contrasted enough and will need to be changed.
The hifi prototype for the dedicated app showcases two user flows with iterated designs based on usability testing. The first user flow is to find and sign up for a volunteer position. The second user flow is to find and donate money to organizations.
Hifi Responsive Designs
When designing the responsive website, I started with the mobile view first, following the data gathered from user research. Many of the elements and layouts are similar to the dedicated mobile application to create a seamless transition from the application to the website.
The desktop view of the website presents larger features and cards. This version mimics the mobile view of the responsive website but on a larger scale.
Responsive Mobile Design Hifi Prototype
Responsvile Web Design Hifi Prototype
These two prototypes showcase the same main user flow as the dedicated mobile app. The flow allows users to search and sign up for volunteer opportunities.
Next Steps
Learnings
Conduct a second round of usability testing.
Iteration based on findings.
Check the color contrast of the gradient buttons.
This project was my favorite of the three I have created thus far. I truly feel that I have a better sense of how to navigate through the design process. I was able to take what I learned from the Schoolfit case study and apply it to my initial research and ideation phases of this design process.
I was able to quickly set my sights on clear goals, and not be distracted by "too many options". I have a much better understanding of the design process, user-centered design, and a better feeling for UI design.
A challenge that I will continue to work on is the research phase of my process and focusing my findings toward a clear goal. I need to continue to explore what questions are best to ask to gain insightful data during the user research phase.
Page updated
Google Sites
Report abuse