VolunteerNow
Course: UX Design Professional Certificate, Google
Duration: March 2023 - July 2023
Team members: Solo project
My roles: User Research, Interaction Design, Visual Design, Motion Design
Overview
.png)
VolunteerNow is a tool that lets people find volunteer opportunities near them. This tool is designed to drive positive change in society. Users who use VolunteerNow will be able to search and sign up for volunteer opportunities.
The goals for this project were to build on what I learned in the first two course projects and design both a dedicated mobile app as well as a responsive web app for social good. I completed this end-to-end project using Figma.
Project Background
Volunteering is one of the best and easiest ways to spend your time while helping others in need. It can provide a healthy boost to your self-confidence, self-esteem, and life satisfaction. From disaster relief organizations to local nonprofits, there are millions of opportunities to volunteer, and VolunteerNow is designed to make that as easy as possible.
This was the third and final project of a UX Design professional certificate course offered by Google. The purpose of this project was to build on concepts that I learned throughout the course, and showcase my ability to design both a dedicated mobile app, and responsive website for social good. This was a solo project to be completed using the design tool of my choice, and I chose to use Figma.
Some key achievements have been listed below:
-
Designed for social good. I not only created an enjoyable experience for my users, but I was also able to address problems in my community and drive positive change in society.
-
Designed for multiple devices. This was my first time designing for more than one device, so I couldn't just think one dimensionally when creating the designs. I had to consider my user's motivations, geographical location, and access to reliable internet when deciding which device to design for first in order to ensure the user had the same great experience no matter the device they're using.
-
Designed at a higher level. Since I already had some experience with Figma I was able to create higher level designs. I wanted to challenge myself by trying things I wasn't comfortable doing in previous projects, and I tried doing everything in the most efficient way possible rather than just getting it to work.
Process
What's the problem?
Many people are in favor of volunteering their time to help others in their community, and would do it more often but they aren't sure where to look for opportunities. Additionally, busy working professionals who use many devices to access the internet get frustrated when websites don't scale well.
Why VolunteerNow?
VolunteerNow allows users to browse opportunities easily, and adjust their search radius and filters to find volunteer opportunities that meet their specific interests and availability. Users can register for these events without the need for a third party, and save the opportunities they do regularly. Currently, there are very few products like this in the market, and in my opinion there should be many more.
The goal:
Design a dedicated mobile app and a complimentary responsive website that allows users to browse, save, and register for volunteer opportunities
Understanding the user
I conducted foundational research to get to know the potential users of my product, and better understand their behaviors, needs, and motivations. I coordinated remote research interviews through google forms with people of varying degrees of volunteer experience. These users range from 22-57 years old and and vary greatly in their preferred device and technological experience.
My research encompassed:
-
Defining user groups through personas
-
Understanding the user goals and needs through user stories and journey maps
-
Uncovering pain points with existing products
The personas, user stories, and journey maps for the two user groups are listed below:
User story (Gloria)
-
"As a 41-year-old finance manager, I want to find and register for an upcoming blood drive so that I can give blood like I do every month."
User story(Jason)
-
"As a high school senior, I want to easily find a volunteer opportunity near me that I can do with my friends so that I can satisfy my school's service hours requirement for graduation."
Pain points
-
Time. Most people support volunteering their time to help others, but they don't like spending lots of time finding and registering for volunteer opportunities. They want to quickly find one that aligns with their availability, beliefs, and interests, and continue with their day.
-
Responsiveness. Many people, especially working individuals and younger users, are always on the go and switch from one device to another often. Websites that don't scale or work well on certain devices frustrates them.
-
Connectivity Issues. Nothing frustrates people more than losing their progress and having to start over from scratch. Users who start the process of finding a volunteer opportunity on one device should be able to seamlessly continue it on another device.
-
Accessibility. Tools for finding volunteer opportunities are not universally accessible. Users with any and all disabilities should be considered, whether they're permanent, temporary, or situational. This was especially important for this project since I was designing for social good.
Understanding the competition
I conducted a competitive audit of 4 different volunteer opportunity search tools to gain strategic insights for planning the next steps in the design process. Through this, I was able to uncover the strengths and weaknesses of both direct and indirect competitors of my product as well as identify gaps in the market. The results from the audit were used to inform design decisions going forward. View the complete competitive audit pdf here.
Ideating the solution
Before I could begin sketching designs and building out wireframes, I first had to define the problem I was trying to solve. I did this by creating a problem statement to clarify user needs that needed to be addressed during the ideation stage.
Two problem statements were drafted for the two personas. They are listed below.
"Jason is a high school senior who needs to find a volunteer opportunity near him that he can do with his friends because he needs to complete a minimum of 10 service hours for a graduation requirement."
"Gloria is a 41-year-old finance manager who volunteers regularly. She needs to find and register for an upcoming blood drive because she gives blood every month."
Once I had a solid understanding of the needs and problems of both user types, I was able to determine that I should design using the progressive enhancement approach and start with the dedicated mobile app before moving on to the responsive website. This is because my users are most likely to use this tool from a mobile phone whether it be the mobile app or mobile version of the website.
Creating the designs (Dedicated mobile app)
In order to bring my ideas to life and begin drafting the first iterations of the wireframes, I completed several sketching sessions including the "crazy eights" exercise. Through this I was able to visualize the designs, and generate enough ideas so that only the best ones made it into the refined wireframes.
Based on the sketching sessions, several key features were revealed that aligned with the product vision.
-
Search customization: The two main user groups have different motivations for using this tool, however they both require an effective search process that yields specific results. Users should be able to use as many filters as needed to yield only the result(s) they're interested in.
-
Simple visual design: Users should be able to use this tool to find all relevant information regarding a volunteer opportunity, but they shouldn't be distracted by unnecessary details or be confused at all when it comes to registering for an event.
-
Event tracking: Users should be able to view and track any upcoming events they signed up to volunteer for directly in the tool, as well as receive any updates through email or their preferred contact method.
Wireframes & Mockups
After empathizing with my users to discover their needs, and ideating potential solutions to their problems, it was time to move to the design stage. I began drafting wireframes on paper first before making the digital version in Figma. These wireframes and mockups were used in both the low-fidelity and high-fidelity prototypes.
I followed the 60/30/10 rule and utilized color psychology when creating the color palette for my mockups. These colors fit the tone of volunteering:
-
White (60%) symbolizes purity and hope
-
Teal (30%) symbolizes decency
-
Purple (10%) symbolizes pride and devotion
Homepage
Wireframe
Mockup
Opportunity Details Page
Wireframe
Mockup
Profile Page
Wireframe
Mockup
Testing the designs
I conducted a round of usability studies after designing each prototype in order to collect valuable data on the different flows users take in the app, as well as receive feedback on different areas of the app's design. These studies were conducted with a diverse group of potential users, and the findings were used to guide the designs of the final high-fidelity prototype.
Round 1 findings
-
Users need a page to select preferences for volunteering after signing up
-
Users need larger text boxes and buttons
-
Users need "forgot username" and "forgot password" buttons when logging in
Round 2 findings
-
Users need a way to post their own volunteer opportunity
-
Users need a more accessible font and menu background color
-
Users need more directional buttons and arrows
Creating the designs (Responsive website)
After creating and testing the designs of the dedicated mobile app, it was time to move on to the responsive website. This meant having to adjust the layout and design elements so that it was optimized for a larger screen size.
A key feature that aligned with the product vision was revealed based on the sketching sessions.
-
High level of detail: Those who are using this tool on a desktop or laptop most likely have more time to read added details and information than someone on a mobile device. Since I was going from a smaller screen size to a larger one, and had already designed the core features required to get users through the main user flow, I decided to add more elements to this version (e.g. an information page about the organizations behind the opportunities.)
Wireframes & Mockups
The visual design was already completed for the most part since I had created the designs for the dedicated mobile app first, so the layout was the only major change to the wireframes and mockups.
Homepage
Wireframe
Mockup
Opportunity Details Page
Wireframe
Mockup
Profile Page
Wireframe
Mockup
Testing the designs
I conducted usability studies after each prototype with a similar group of users so that they were able to compare the overall usability of the two products. This group of users consisted of individuals who would use this tool on both a mobile phone and a desktop computer. The feedback received from these studies helped guide the designs of the final high-fidelity prototype.
Round 1 findings
-
Users need a "submit another opportunity" button
-
Users need more options to filter search results
-
Users need a more intuitive order of additional opportunities so less scrolling is required
-
Users need more clear navigational buttons
Round 2 findings
-
Users need more obvious buttons and navigational links
-
Users need more filtering & sorting options in the "My Events" page
Accessibility considerations
Designing with accessibility in mind remained at the forefront of my design process. Those with any permanent, temporary, or situational disabilities were considered in order to create a more inclusive product.
Some key accessibility considerations are listed below:
-
Optimized button and text size. I increased and decreased the size of some of the buttons and text boxes after testing the product with users to improve readability for visually impaired users.
-
Used accessible colors. I double checked that my color palette complies with AA and AAA guidelines.
Takeaways
Impact
VolunteerNow helps society by making it as easy as possible for volunteers to make a difference in their community. Anyone who wants to can research nonprofits, use filters to search for opportunities that fit what they're passionate about, and track their progress in those opportunities. All the users included in the research studies felt their needs were taken into consideration.
One quote from user feedback:
"Overall, I think this is just about perfect. It felt like I was looking at an already active website, and the colors go together so well."
Next steps
-
Test the final high-fidelity prototype with additional user groups to discover any needs that weren’t included in the preliminary and design research.
-
Conduct additional usability studies to validate whether user needs have been effectively considered, and address any additional pain points that have emerged post launch.
-
Consider ways to improve accessibility.
-
Add an element of gamification where users can keep track of their volunteer hours and view leaderboards.
Key takeaways
This project was by far my favorite for several reasons. I have been using Figma now for two projects prior to this one so I was able to use the skills I have gained from previous projects to try different things I was not comfortable doing before. I also enjoyed designing for social good because it gave me a sense of satisfaction knowing I can use my design skills to drive positive change in society.
Some key takeaways from this project are:
-
The first way isn't always the best way. It's important to remember that designing is an iterative process, and that sometimes it takes several tries to get something right. I originally planned to take the graceful degradation approach and design for the larger screen size first because that's what I thought was best for my users, but after revisiting my research results I realized I actually needed to do the opposite.
-
Quality user research is paramount. The user is at the top of the pyramid when designing any product, but it is especially important to consider them when designing for multiple devices. I had to understand the specific preferences and motivations as well as the behaviors and needs of each user group to determine which device to design for first.
-
Visual design isn't everything. It may seem like how a product looks to users is all that matters, but what goes on behind the scenes is just as important. Keeping my canvas organized, with a structured design system only helps streamline the process after handing it over to the engineers, and allows for a better overall experience for my users.