Adobe x Amazon Creative Jam (2021)

A mobile app connecting teens to volunteer opportunities

Overview

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.

Timeline

1 week (Nov 2021)

Team

2 students

Role

Ideation, Interaction design, UI design

Tools

Adobe XD

How can we help high school students looking for opportunities to fulfill community service hours or volunteer to help their local community, no matter what their background or ability?

Design Prompt

This Adobe x Amazon Creative Jam challenge focuses on helping high school students find volunteer opportunities while considering equitable and equal opportunities.

Timeline

Day 1

Research about the prompt and identify problems

Day 2

Find insights and design concepts from the research

Day 3-5

Wireframe and solidify visual design

Day 6-7

Hi-fi prototype on Adobe XD

 01 — Research Process

Problem Space

1 — Accessibility to transportation

2 — Not considering physical requirements of volunteers (e.g. lifting heavy objects)

3 — Tracking and organizing service hours and events

Competitive Analysis

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.

User Interview

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.
Project Format

While a mobile application was required for this particular design challenge, the requirement makes sense, as teens have high technology literacy and typically have access to a smart phone device. As teens are travelling to in-person volunteer events to log hours, a mobile application is a more suitable format for the project than a desktop application.

Target User Group

As many students are required to complete community service hours and as specified by the design brief, this app aims to appeal to high school students. To appeal to a broader user group, opportunitities are organized by distance, requirements, and interest.

 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

Onboarding

1 — User taste-oriented for event interests
2 — Progress bar indicating sign-up status
3 — Large icons to indicate transportation type availability


User Scenario
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


User Scenario
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


User Scenario
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.

Saved Events

1 — Favorite opportunities of interest
2 — Ability to quickly view all saved opportunities
3 — Encouraging to register for saved events


User Scenario
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.

Calendar

1 — Upcoming events in chronological order
2 — Month preview with dot icons indicating event date
3 — Minimal calendar view


User Scenario
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.

Tracking Hours

1 — Monthly hour totals with bar graph visual
2 — Total volunteer hours since app use
3 — Top categories of registered events


User Scenario
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.

User Flow

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

Low-fi Wireframe

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

Filter

Event - Register

Visual Design

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

Next Steps

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.

Takeaways

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!