Project Overview
The Problem
Communities lack a streamlined platform for participating in local community service activities, leading to insufficient volunteers and missed opportunities for positive social impact.
The Goal
Design an app that connects individuals and groups with hosts seeking volunteers for local community service events.
The Timeline
5 weeks
Roles
I took up the following roles in this project:
User experience designer
Interaction designer
User researcher
Deliverables
Competitive audit
Personas
User journeys
Storyboards
Low fidelity wireframes
High fidelity wireframes
Usability studies and findings
Design systems
Mockups
Tools
Figma
Miro
User Pain Points
Group Registration
Groups often face difficulties when attempting to sign up for volunteer events due to cumbersome registration processes and limited group coordination features.
Accountability
Event hosts often see many individuals with fake profiles signing up. They would like an improved verification process.
Flexibility
Volunteers would like the flexibility to access the site from their phones or desktops.
Research Summary
I started the research process with a competitive audit where I utilized a couple of volunteering sites and apps and tracked strengths and weaknesses of each. This gave the basis to identify user pain points and develop user personas accordingly.
User Personas
User Journey
I mapped Oliver’s journey to register his team of 15 members for a community service event. It gives a volunteer’s perspective as they browse events and sign up.
Mobile Wireframes
Paper ————> Digital
Desktop Wireframes
Paper ————> Digital
Mobile Lo-Fi Prototypes
—————>
Desktop Lo-Fi Prototype
Research Goals
Determine if users are able to successfully create a group, verify members, and register for an event.
Identify any possible pain points as users navigate through the prototype.
Usability Studies
Methodology
Remote study with 5 individuals across the USA
Each participant was given 30 minutes to complete 5 tasks followed by a 10-question system usability scale
The study took place 2x. Once with a lo-fi prototype and once with a hi-fi prototype
Participant Profiles
Have volunteered 1-2x since the start of the year
Aged between 21-60
One participant listed English as their second language
One participant has a visual impairment
Study #1 Findings
1.
Users would prefer that the home page and search are consolidated into one for simpler navigation.
———>
2.
Users would like to see similar events to one’s they are interested in.
———>
3.
Users requested a way to see skills needed for an event and identify the ones that match their capabilities.
Mockup
Design System
Study #2 Findings
1.
Users are seeking a page to view the events they signed up for.
2.
Users are interested in knowing the number of steps required for the registration process.
———>
3.
Users would like to filter by the number of open spots left on events.
High Fidelity Prototypes
Impact
Service Society is designed to add value for both volunteers and hosts equally. It increases volunteer engagement with a simple registration process and supports hosts with a robust volunteer verification system.
Learnings
Although this is a design for a volunteer app, I did not restrict myself to taking inspiration from only volunteering apps. I looked at products like Zillow, Ticketmaster, and Cars to identify design features that I liked and felt would benefit this project. This is an action I will take for future projects too.
Mobile App Inspirations
1.
Before I designed the website, I was using a plain green background. However, upon redesigning the website version I chose a stock image that I wanted to integrate into the mobile app for consistency. After brainstorming different ideas, I took inspiration from the Wells Fargo app’s sign-in page which has an image in its background.
———>
2.
When conducting design research I was looking for different pages that would benefit an app like this. I visited other event-based apps like Ticketmaster and Stubhub and eventually took inspiration from Ticketmaster to create a “My Events” page.
———>
Website Inspirations
1.
I took largely took inspiration from Zillow’s site when designing Service Society’s site. The home page is an example of this. I liked the clean design and wanted to translate something similar to my Service Society.
———>
2.
In my initial wireframes, I planned to have a new page created every time a user clicks on an event. However, I chose to move ahead with the Zillow design which gave a more seamless transition.
———>
3.
I also like the experience that Zillow designed to transition from the property page to the tour scheduling form. I decided to utilize a similar approach with my registration form.
———>
