Volunteer Sign-up
App and Website
Project type
UX Design App and Responsive Website, Adobe XD
Date
July 2023
Location
Louisville, KY
Role
UX Designer
Project Overview
​
The Product
The Volunteer Sign-up App and Website connects community members to their local charity organizations. The users are of all ages and demographics. The goal is to give them a platform for convenient search and sign-ups.
The Problem
There is not an all-in-one platform for users to find information on local organizations, volunteer events, and available donation centers in their local community.
​
The Goal
To create an app and website for local community members to conveniently search for volunteer opportunities and donation centers in a one-stop platform.
​
My Role
UX designer and researcher designing an app and responsive website for both mobile and desktop formats for the Volunteer Sign-Up platform from conception to delivery.
​
My Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The User
User Research: Summary
I conducted interviews and created empathy maps to understand the users I’m
designing for and their needs. A primary user group identified through research
was adults ranging from 18-70 years old who enjoy volunteering and being involved in their local communities.
This user group confirmed initial assumptions that it is challenging for individuals to find upcoming volunteer events and donation locations. There is not a convenient way to discover or sign-up for these events.
Problem Statement
Carla is a restaurant manager who needs access to available food banks/kitchens because she always has leftover food from work to donate to the unhoused community.
“I feel very blessed in my life, and want to give back as much as I can to the community.”
Goals
-
Look up on the go and at work the local donation drop-offs
-
Stay in the loop with alert notifications for events and drives
Frustrations
-
Not a site/app including all organizations’ community information for volunteer and donation opportunities
-
No message board for updates and questions
Wireframes and Prototypes
Ideas On Paper
The paper wireframe sketches were meant to quickly jot down my ideas for the layout of the beginning of the app’s main flow. I wanted to also brainstorm the pages in which the user navigates the main flow, and additional aspects on the website and in the app.
.jpg)
Mobile App
Website-- Mobile
Website-- Desktop
Go Digital
​
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. These are completed mockup digital designs for the mobile and desktop website, and the mobile app.
Website-- Desktop
Website-- Mobile
Mobile App
Low-Fidelity Prototype
Using the completed set of digital mockups, I created low-fidelity prototypes. The primary user flow I connected was searching for and signing up for volunteer events, so the prototype could be used in a usability study.
​
View the Volunteer Sign-up’s Lo-Fi Prototypes:
Desktop Website-- Main user flow
Mobile App-- User flow, including connections from Menu screen
Redefine the Design
Usability Study Findings
Round 1:
Users want more options for exploring the event and organizations pages.
Users need more clearly labeled action buttons.
Users want an easy and straightforward sign-up process
Mockups​
​
Usability Study 1
The usability study showed that users needed more division within the page to help organize the information. The subtle color palette theme also created a less overwhelming Home page.
Usability Study 2
The usability study showed that while moving through the prototype, users wanted to have more options to return to the previous page or Home page. The menu bar always remained, but many users expressed the desire to have "back" and "home" buttons at the bottom of each page.
High Fidelity Prototype
The final high fidelity prototype presents a clean user flow through searching and signing up for an event, as well as searching donation sites, viewing the user's account, and registering an organization. The navigation and process is clear, and efficiently gets the users through the Main Flow.
​
View the Volunteer Sign-up’s Hi-Fi Prototypes:
Accessibility Considerations
-
Division and spacing was adjusted throughout the design process. More space and organization proved to be most beneficial to users.
-
Navigation buttons traveling to and back from pages gave a clearer understanding of navigation to the user.
Takeaways
Impact
Users of all ages and demographics are able to access this platform through any computer or smartphone. This takes away limitations, which is especially good for this product whose purpose is to give a platform for all users to do good in their community.
​
What I Learned
While designing the app and website of the volunteer platform, I learned that the ability to reach out to all demographics starts with accessibility. Creating both a responsive website and mobile app makes the product available to users using a variety of technology, from public computers to personal smartphones.
Next Steps
-
Create a message board on the website for people to inquire about existing events, and post questions, comments, or concerns about community needs and plans of action.
-
Have a monthly calendar of All Events available on the site.