PROJECT
VOLINTERACT
Volinteract is a mobile app focused on creating community through volunteering and find opportunities to volunteer. It is a central hub for non-profits and volunteers to connect.
Introduction
From personal experience as a volunteer, being an officer who tries to find volunteer events, and working at a non-profit, the volunteer process is very difficult. Communication issues and long forms are two of the issues people face when it comes to volunteering, and for many, those issues may cause people to not want to volunteer. While there are platforms that cater to advertise volunteer events, it does not showcase all non-profits available within the community. Volinteract was developed to combat these issues of finding and communicating to organizations and have a central platform catered towards community help.
Volinteract is a social media app that functions where people can meet up and volunteer at events or non-profits, as well as connect and build a stronger presence of community.
My Role
For this project, I was the lead product designer tasked to design and develop the concept of the app and its branding.
Research Methodology
What this app was trying to solve was to promote more transparency between volunteers and their organizers when it comes to volunteering. Many users have been frustrated or confused prior and during events because of the lack of direction of what volunteers should do during events.
Volinteract eases the stresses of individuals who want to go out to volunteer and promote more community involvement.
To learn more about the struggles volunteers face, I conducted two interviews to get a sense of volunteer needs.
-
Interview 1: Desire to do good for others / contribute to the world
Interview 2: That's easy. I want to die feeling like I've done something to help others long-term :). Volunteering takes a small amount of time to leave a significant amount of change
-
Interview 1: Cause & type of work: no specific cause but gravitates towards food banks and animal shelters // How to find? Online, by googling, typically book a time slot online
Interview 2: I find volunteering events through the internet. Then I choose the ones that respond back to me
-
Interview 1: Screen people more with volunteering, meaning the initial process is more difficult because places require training
Interview 2: The hardest aspect of volunteering might be the numerous hours that we spend for certain events, but they're equally rewarding!
-
Interview 1: Takes about 2 or 3 days, typically through email
Interview 2: It takes about 4-5 days for an event; anything past that date I'll likely leave out of my volunteer list
-
Interview 1: More centralized platform to orchestrate volunteer signups
Interview 2: I would love to see a way to volunteer with random people outside of my organization. I've learned to love connecting with people and making new connections 😄
Interview 1 was a former regular volunteer whereas Interview 2 was an officer for an organization that focused on community engagement. Both interviewees had experienced struggles during the volunteer process. These are the questions I asked these individuals to gain insight to what needs to be a solution in order to ease the volunteer process.
Upon the responses of my two interviewees, I created a persona that aligns to a typical user’s wants and frustrations when it comes to volunteering. The persona helped easily identify a targeted member for my audience who would use Volinteract to find volunteer opportunties.
Establishing the Brand
The two goals for Volinteract that was the core for the creation of this app would be:
Improve communication between non-profits and volunteers
Introduce a social aspect for volunteers to connect with other volunteers regularly.
With this app, I wanted to create a sense of confidence in communication and community.
Core Features of Volinteract
Explore volunteer events: Allow users to find events for causes they are passionate in
Sign up and create events: Allows verified community members and organizations make volunteer events in the app without the hassle of going through application forms
Message friends and non-profits: Instant messaging to allow users to talk to other volunteers in the chosen event or talk to the coordinators directly to clear up any confusion
Gain achievements for volunteering: Showcases volunteer achievements to display on their profile to promote community building
Userflow
This userflows highlight how a user will navigate from the homepage to other features in the app.
The main features are about a user:
Finding events
Tracking their events
Creating volunteering events.
It also highlights the user flow of what a user may interact with during initial sign up on Volinteract.
Iconography Study and Low Fidelity Sketches
With these sketches, I brainstormed ideas of the concept of community and interacting through volunteering. I wanted to create a modern design that did not make the brand feel too busy but also staying relevant to idea of community. The mood I was creating would be calming and togetherness. I referenced logo iteration #3 for my final logo design.
While designing, I sketched out layout designs for the homepage, profile page, and the volunteer dashboard. These designs allowed me to visually brain dump any possible layouts I can think of that were feasible with the overall design without hindering the functionality of the app.
The Development Process
The app design for Volinteract started with low fidelity wireframing. Once I developed my layout, I started creating components to develop a UI kit that allowed me to reuse components for a the high fidelity mockup. The UI kit also involved creating the color palette and typography as tokens for my design. With a design system in place, I mocked up a high fidelity prototype of Volinteract. The illustrations used were open sourced and icons came from Google’s Material Design, along with other open sourced icons.
Low Fidelity
Low fidelity allowed me as a designer to visually place an initial groundwork of design and help me point out potential components to make for my design system. This included the navigation bar, input, and buttons..
Design System
A Design System was developed to allow me to reuse components easily for my final design. It also allowed the app to have overall consistency when it came to components such as iconography, photo cards, and buttons.
High Fidelity & Prototype
With layout and components made, I was able to design a more refined version of Volinteract. I used the user flows created earlier as a guide of all the other pages in-between to establish so users are able to navigate areas easily. I prototyped the app to give it more functionality and to allow Volinteract to be more interactive than regular mockups. Overall, I thought about the functionality of the design and kept in mind of what is the easiest way for a user to complete each task whether it is finding an event.
