High school students often face barriers such as transportation availability, skill requirements, and time management when seeking out opportunities to fulfill service hour requirements or give back to their communities. VolunTeen eliminates these barriers by providing teens a platform to quickly find and register for local service opportunities based on their skillset, transportation options, and personal interests.
1 week (Nov 2021)
Ideation, Interaction design, UI design
01 — Research Process
1 — Accessibility to transportation
2 — Not considering physical requirements of volunteers (e.g. lifting heavy objects)
3 — Tracking and organizing service hours and events
I started the project by analyzing three main categories of mobile applications to identify problems out of the market. These three categories of mobile applications addressed issues of volunteer opportunities, timesheet and work logs to track time, and apps tailored to high school students, each with their own strengths and weaknesses.
Identifying users pain points and finding out essential features
I interviewed one New Jersey high school student who has required volunteer hours for National Honor Society. From this, I found two pain points, which are about recording monthly service hour totals and having limited access to transportation to and from volunteer events.
02 — Design Solution
Recommending volunteer opportunities based on categories (animal care, food banks, sports, etc.), distance, and skills (CPR certified, first aid, food safety, etc.)
Project Goals & Features
1 — Find, sign-up, and track service opportunities in one place
1. Organize explore page into two sections: personalized, featured events by user interest and upcoming events
2. Opportunities displayed in card form and easy in-app sign-up
3. Familiar calendar to organize upcoming sign-ups in two views
2 — Easily track monthly service hour totals
4. Service hours tracked in user profile by month
5. Log of previously completed events in chronological order for specific event information
3 — User taste-oriented
6. Onboarding process for user data collecting includes categories of interest, available transportation, and location
7. Ability to "star" and save events of interest for later registration
1 — User taste-oriented for event interests
2 — Progress bar indicating sign-up status
3 — Large icons to indicate transportation type availability
John usually searches for volunteer opportunities online via search engines, but today on his way to school, he searched the app store and downloaded VolunTeen. Unlike other apps, he paid attention to its neat, straightforward design. On the onboarding process, John was able to select the types of volunteer opportunities he was interested in, animal care and food banks, and select the methods of transportation available to him, walking and public transit. John found the onboarding process very simple and short, taking only four steps.
Explore Opportunities - Main
1 — Features 3 events at top tailored to user's interests
2 — Ability to search and filter upcoming and featured events
3 — Includes basic location, date, and category information
When searching for volunteering opportunities, John likes that the app recommends him featured 3 volunteer opportunities that match his interests and are accessible by the transportation option(s) he specified during onboarding. He sees that the screen displays at most 5 events at a time, which makes the explore page digestible and easy to read. He also likes that he can further filter the events based on when he's available and by distance if he chooses. Lastly, he likes that he can quickly skim all events for their location, date, and category information and star those he's interested in, optimizing his chance for finding volunteer opportunities.
Event Sign Up
1 — Includes checks to ensure student is available and fulfills requirements
2 — Links to organization's website and directions for more information
3 — Easy in-app sign-up
Typically, for each volunteer activity he finds online, John has to sign up based on the organization's specifications or call the organizer. John appreciates that the sign-up process for each event is easy and standardized--he doesn't have to leave the app to sign up, but has the opportunity to read more about the organization if he wishes. John likes that the volunteer events are explicit about requirements. As he cannot lift heavy objects and has seasonal allergies, he appreciates that the event details state whether or not physical labor is involved and if the event is outdoors or indoors.
1 — Favorite opportunities of interest
2 — Ability to quickly view all saved opportunities
3 — Encouraging to register for saved events
John likes that he's able to easily navigate to a list of all opportunities he starred. He feels motivated to review the details of this filtered list of opportunities and register for them. The saved events are ordered in chronological order, with the event with the closest date appearing at the top. After he registers for a starred event, it appears on the "registered" screen when filtered out. This way, he can double-check that he registered for the events he's most interested in volunteering at.
1 — Upcoming events in chronological order
2 — Month preview with dot icons indicating event date
3 — Minimal calendar view
As a busy high school student, John is extremely used to the layout of the calendar tab, which mimics the calendar design of other productivity apps he uses, making naviation easy. He likes that he has two views of upcoming events, a list of upcoming events with the name and location of the event, as well as a month view that, when selecting the day, displays the events on the given day. The calendar is simple, without an overwhelming number of customization or filters, as the only events displayed are the ones John is truly interested in and signed up for.
1 — Monthly hour totals with bar graph visual
2 — Total volunteer hours since app use
3 — Top categories of registered events
John enjoys that he can quickly access how many hours of community service he completed since downloading the app along with totals from the past 4 months. This way, he can quickly fill in the hours he completed for a given month and navigate to the calendar for more information about the events he volunteered at for that given month. He also feels extremely accomplished when seeing the total accumulation of volunteer hours, making him feel more confident and excited to continue helping out his community. He also likes how the top 3 categories of volunteer events are listed. This tells him what he's genuinely interested in, but also encourages him to try something new.
I separated the overall flows into 5 stages. Onboarding for user data collecting, an explore page to find opportunities, customizing the user’s experience by having a place to keep track of saved opportunities, a calendar for productivity and time management, and a basic profile to house community service hour totals. These 5 stages translated to onboarding plus the four main navigation screens.
03 — Design Process
Before reaching the final design, I did some quick low-fi wireframes for the general layout of features. Based on the user flow, it was easy to break down each section into a navigation tab then add features from there. For the wireframe, I had simplicity in mind--how could we solve the problem and use a simple UX structure with the proper amount of information necessary? Does the service have clear and intuitive visuals so that users can easily recognize find volunteer opportunities to register?
Onboarding - Interests
Explore - View All
Event - Register
When deciding on the style of the user interface, we wanted colors that were assertive and bold. We decided on blue as the main color as it evokes a sense of balance as well as calm intelligence. Another side reason we decided on blue was that the most common types of colorblindness (protanopia and deuteranopia) can see the color blue. To contrast and accent the blue, we went with a dark orange that would constrast clearly with black, blue, and white, while adding to the sense of calm intelligence and encouragement.
Furthermore, we chose Avenir as the font family, as it is clean and friendly while being exceptionally easy to read on mobile devices. For an application that has a lot of text and repetitive elements, I made it a priority to ensure that the interface felt inviting to the user.
04 — Future Considerations
Build metrics for measuring success on a new feature
Mixing cards helps users to explore new categories in the home tab. For this feature, I think I can track active volunteers' data. This feature can broaden users’opportunities to find new types of volunteer events and lead to an increased volunteer rate. For its feasibility, I can try a/b testing whether this feature is helpful for user retention and actually make user explore other categories of volunteer events.
Gauge usability of map event view
While we initially included a map view such that the user could explore nearby events, we later discarded this idea because of the "distance" filter when viewing all of the events in the card list view. We also figured that for users with limited motor skills, pinching and zooming in and out of a map would be difficult when finding nearby events. We could perform user testing to see whether or not this conclusion is valid and whether or not to include the feature.
This project allowed me to hone my prototyping skills and expand my understanding of user experience design. Having no formal understanding of user research, I learned about various methods of user research, was able to perform a competitive analysis, and conducted my first ever user interview. In addition, I was able to hone my prototyping skills on Adobe XD. While I am a frequent Figma user, I was able to easily apply my Figma skills and attend workshops to gain more insight on Adobe XD. Overall, I'm super proud of what I was able to build (while balancing schoolwork) and can't wait to participate in another creative jam!