DoGood

A volunteer mobile app for high school students.

Design Overview

Summary

High school students struggle to find the local volunteer and set the goal on it. I and my partner conducted user research to understand what is users' painpoint and requirement. After I got the conclusion, I started ideation and brainstorming to add "Remote, Favort, Consent" features. I organized the user flow and create wireframe before prototype. During we did the user testing, there were 92% high school students would like to use the app to search volunteer event and share the event to their friends. We were branding the app called DoGood to improve users' experience to search or record their events.

Duration

14 days

My Role

User experience design, Interaction, and visual design

Tools

Adobe XD (wireframes, Prototype), Adobe Illustrator

Team

Angie Bai, Jane Kim

Problem

Situation: After I conducted user research, I found that high school student has the requirement of volunteering to apply to college, but a limited channel to search for events, and easy to lose the volunteer record, and don’t have a lot of options to choose based on their interests.

So, How might we provide a solution to help high school students find the local volunteer opportunities and set the goal on it?

Solution

Action: After all, we ran design thinking to explore potential ways to create a mobile app for high school students of any background or ability to find opportunities to volunteer in their local community, offering personalization to tailor the app's accessibility features, and suggesting opportunities that match the user's needs and interests.

01 About the Project

Mobile app design project “DoGood” has won an honorable mention(10th) out of 860 college students as part of Adobe x Amazon Creative Jam 2021.

The goal of the competition was to design an inclusive experience in a third-party mobile app for equity and high school students looking for opportunities to fulfill community service hours or volunteer to help their local community.

First, before touching on anything related to design, I wanted to dive into the research and individual interview 10 high school students.

Themes + Insignts

Theme 1: Search

My interviewees have no idea to find the volunteer events and get the information from the school, which decrease their interest.

Theme 2: Motivation

Students are not motivated by tasks, but external circumstances lead to internal motivation.

Theme 3: Communication

When surrounded by other classmates or friends, they are more likely to do more volunteer.

Conclusion: My interviews were 85% more likely to succeed when there was accountability for their volunteer goals

Claire is our potential user who is struggling to look for a volunteer chance based on her interest or location and she is also challenged to calculate her volunteer service hours.

Persona

02

Ideate

I started brainstorming with my partner to solve the problem.

03

User Flow

After ideation, we decided to have four features: search, save, message, and profile to help users how to search for volunteer events and keep them using the app. User flow clarifies the application's process.

04

Wireframes & Content Strategy

According to the sitemap, wireframes were created and prototyped in order to provide a visual understanding of a page early in a project to get the organizers and Amazon mentor's approval.

Started with Lo-Fi wireframes for my user flows and quick information testing to see how users want to interact with the app.

Current profile screens are confusing on where interaction should be (too busy, no emphasis).

Keep "You're going to" section, but delete "matches" and include it as an option under filter

Testing users are annoying for parental consent if every event requires it.

05

Final mockup

Finally was created the structure and logic of a wireframe but with the images, graphics, and UI elements. Final mockups make it much easier for anyone involved in a project to visualize and understand what the mobile app will look like.

06

UI Kit

After researching and interviewing high school students, We decided to use Tanned Leather as our primary color which means bright, positive, and fun.

Light Sea Green is a secondary color to highlight important information which means change, new beginnings, health, and wellness.

Color

Typography

Unique, Playful, Sturdy: Yuppy SC

07

She can follow her favorite group and they will show first under the ‘You might be interested’ section. She can communicate with the group leader and the organization rep via message. Because most of the users are minors, we embedded the ‘parental consent’ feature to make the process seamless for both the volunteer and the host.

Prototype

Claire would get an invitation to DoGood through text or email. DoGood would prompt a 5-question quiz to understand her preferences, interests, skills, and background. Then, the personalized opportunities will populate at the top of the home screen.

Result

Based on this creative solution and alignment of my partner, 90% of testing users would like to use DoGood to explore more volunteer opportunities to contribute to their local community, especially if they like the "profile" section to motivate them to be more active and achievement. The message function increases communication efficiency.

Project Learning

1. Seek out feedback early and continually: The trouble with most of us is that we would rather be ruined by praise than saved by criticism.

2. Simplicity is a strength: As a designer, we are often lured by attractive, trendy, and out-of-the-box designs. We must always remember the “why”. The primary goal is to understand the users, and their pain points and then come up with a design that solves it.

Let's connect

Get in touch for opportunities or just to say hi