top of page
Volunteer It
Mobile Volunteering Application
__________________________________________________________________________________________________
OVERVIEW
I began working on this project in 2023 and completed it over the course of 8 weeks. It is a mobile application for onboarding and managing volunteer groups. Below you will find a preview of the finished product followed by the process used to create it. This process includes the problem & goals as well as a chronological design procedure that addresses these goals along the way.
PREVIEW
Loading & Discover Pages
Discover Individual Pages
Home Pages
Additional Home & Notification Pages
Social Pages
Popup & Settings Pages
PROBLEM
After talking with an admin of a volunteer page, they shared that one of the most difficult aspects of hosting a volunteer-aided project was the onboarding process. An application that could address this problem would need to facilitate the onboarding process and ensure that volunteers were adequately trained before the event begins.
GOAL
The goal was to create an application that would simplify the onboarding process for both the hosts and the volunteers themselves. These app should ensure that hosts can easily train the volunteers and have the ability to monitor who has mastered the information needed before the work can begin. The app should also allow users to easily find new volunteering opportunities.
Features Table
STYLE GUIDE
The primary color of the app was chosen to be navy blue. However, on the main pages the background color was white with navy accents for readability.
Default Color Guide
The app used text with a sharp, bold typeface as well as various font sizes to help distinguish the most important numbers on the page. The main font used for the app was Poppins.
Poppins Font Example Usages
SETUP
To avoid finding out mistakes later in the design process, laying out the general locations as shown below gives an idea of a low-fidelity prototype & what the site layout will look like.
Low-Fidelity Wireframes
CREATION
Once all features fit appropriately on the pages, next up was creating the finished version of the application. I first created the discover pages using the previously shown color guide for reference. Many users requested better filtering to find events near them that were not already full. So, an in-depth filtering page was included as a popup to ensure this need was met. The categories for filtering were taken from a survey of the most common causes for which people volunteer.
Finished Discover Search Pages
Finished Discover Individual Pages
After the discover pages were created, I worked on what various areas within the home page should look like. The objective was to condense important information within one page while keeping it simple and easy to navigate. The home page would include a to-do list, a calendar with upcoming events, a section that gives detail on a selected day within that calendar, a list of tasks required before the next upcoming event, a group chat for upcoming events, and finally a series of earned badges for previous events.
Finished Top Home Pages
Finished Lower Home Pages & Notification
Once the home pages were complete, all that was left to do was make the social pages. This would be the far right tab on the navigation bar and would be the hub for communicating with group leaders and other members of the user's volunteer groups. The goal with this section was to make it simple and allow for direct messages and group messages. If a host of a volunteer opportunity wishes to invite someone directly without them searching for the position, this option would be available. So, the social page would also store the invites for users to accept or deny.
Finished Social Pages
FINAL THOUGHTS
Overall this project went well, but it could have been better. The design of the application seemed good after finishing. However, looking back I think that a thinner font should have been used for the body text of the clicked events within the discover pages because it nearly matched the thickness of the headings and did a poor job of sectioning off the different blocks of text. To avoid this, I should have checked the project after finishing to make sure that no design principles were being violated. Another note is that on the home page I created designs for various sections to simulate what scrolling down would look like. However, Figma allows features that let you put content on a page and simulate an actual scroll within one frame. If I could do this project over again I would utilize this feature as it would surely be done this way in a real-world situation. Finally, while I designed the notification banner for this app, I since learned that there may be constraints on which notification banners can be customized, so it would be important to check the device constraints before designing these if it were to be done again. While several parts of this project could be improved or done differently, I think each provided a good learning experience which made the project a success overall.
bottom of page