UX Research | UX Design
Future Connect
A mobile app service that helps high school students discover and apply for volunteer opportunities to fulfill their community service hours.
Conducted market research, user research to understand the pain points and explore potential needs from target audience.
Took lead on developing the storyboard, user flow, and Lo-fi wireframes
Designed brand guide through Adobe Illustrator and Create a hi-fi prototype using Adobe XD. Iterated and Finalized the prototype and UIs based on users' feedback.
MY ROLE.
PROJECT DESCRIPTION.
Future Connect is a mobile app for all high-school students to search and apply for volunteer opportunities to fulfill their community service hours. With the colors and hierarchy, our app is especially friendly to the audience with colorblindness. We also provides educational workshops to increase students' awareness on social issues and the diverse community.
TYPE OF ENGAGEMENT.
Adobe x Amazon Design Creative Jams
Duration: 2 Weeks (November 2021)
SKILLS & TOOLS.
User Research, Journey Mapping, Market Research, UI/UX Design, Illustration
Adobe Illustrator, Adobe XD
MY TEAM.
UX Research: Myself & Wanjing Li
UX Design: Myself & Wanjing Li
This is an Adobe Creative Jam + Amazon competition project that Wanjing Li and I developed in November 2021. In the end, we ranked top 10% out of 430 competitors (215 teams).
Shortlisted in Young Ones ADC Competition in 2023 (UX/UI Catagory).
🏆 AWARDS & RANKING.
DESIGN PROCESS.
Research has shown that while over 90% of Americans want to volunteer, only 1 out of 4 actually does. If most of us want to volunteer and believe it is good for us, why aren't all of us volunteering?
My teammate and I wanted to address the problem, starting with high schoolers which individuals are in the critical stage of shaping one's values and identity. We designed an app that gamified the volunteering process. We gave personalized volunteer recommendations that best matched high schoolers' interests based on their onboarding application and refined results through the search filter. Moreover, to ensure students are willing to participate in volunteer experiences later on in life, we focused on connecting individual volunteers with their community.
The mandatory volunteer process in high school was already fraught with requirements even before the pandemic. With limited in-person opportunities and mask protocols, high school students find volunteer experience unfavorable.
PROBLEMS & CHALLENGES.
How might we help aspiring high school students find new volunteer opportunities that fit their interests and needs more efficiently? (especially during pandemic)
During adolescence, much of the identity development process takes place, with psychologists identifying it as the primary psychosocial task during this period. We've chosen to focus on 12-18 year-olds because they are in a critical phase for developing their goals, values, and beliefs. Our aim is to educate and guide them during this time so that more individuals can actively participate in volunteering and enjoy a fulfilling experience in adulthood.
AUDIENCE.
To validate our research and assumption, we interviewed 8 different high school and middle school students. We reached out to a mixture of people who had volunteered prior to and during the pandemic to see if there were any significant similarities or differences between the circumstances.
USER RESEARCH.
During or After the pandemic
USER INSIGHTS.
Students are surprised by the complicated requirements for school volunteering.
The process of searching ideal opportunities is time consuming and stressful.
Lack of up-to-date information from organizations online
USER PERSONA.
USER JOURNEY.
Based on the insights and research, we also developed an existing user journey map and assumption of where Future Connect introduced to user while they are searching, applying, and completing a volunteer experience. Based on our user research, we decided it would be best to narrow down our scope to mainly focus on the experience of in-person volunteering opportunities.
OUR GOALS.
Based on our in-depth user research and feedback analysis, we have identified three primary goals that our solution must fulfill
1
Assist high school students in efficiently discovering opportunities that align with their interests and aspirations.
2
Motivate students to actively complete their community service hours while instilling the values of community service.
3
Addressing color blindness accessibility concerns based on feedback from two interviewees with this condition.
USER FLOW & INFORMATION ARCHITECTURE.
We initially utilized the Crazy 8 brainstorming technique to generate ideas, and subsequently, we refined these ideas by identifying design features that enhance accessibility for users with color blindness. Additionally, we integrated motivational elements into the UX designs to inspire users to achieve their goals, resulting in more inclusive and engaging user experiences.
To validate our user flow and assess the app's usability, we developed a low-fidelity prototype based on our proposed screens. We then conducted a series of think-aloud tests, with a specific emphasis on the personalized homepage designed to help users discover and engage with various opportunities. Participants were asked to role-play as high school students seeking volunteer opportunities tailored to their interests within the application, allowing us to gather valuable user feedback and insights.
LO-FI RAPID PROTOTYPING.
We ensured that our design catered to high school users by employing a primary color scheme featuring yellow and blue, which are visually appealing and relatable to this demographic. Moreover, since majority (70% +) of colorblind people has reduce sensitive to red and green light. So, we decided to use yellow and blue colors as our primary color, since they are generally accessible to individuals with color blindness, and suitable for creating an inclusive and user-friendly design.
COLOR GUIDE.
FINALIZED STYLE GUIDE.
IDEATION & MARKET RESEARCH.
KEY FEATURES DEMO.
Future Connect provides a user guide for first time users, which allow them to quickly get starting to use the Apps.
User Guide:
Connect organizations with volunteers and help users understand the benefit of community services, develop leadership as well as learn skill acquisition through immersive workshops.
Educational Workshops:
App will automatic provides volunteer options based on users profile and location. With the filters, user will can more refined results based on their personal preference. All of the opportunities listed on Future Connect are updated regularly and available for application!
Personalized Filters
Users can check on their histories to review the opportunities’ details. Users also able to contact the volunteer workers, reset the number of volunteer hours, or invite their friends to volunteer together through this section.
The app will also collects users’ achievements and tracking their hours after users attend each volunteer work and educational workshops.
Event History & Hour Tracker:
SOLUTION DEMO.
👉 Check Out the Interactive Demo 👉
Community Service strengthens a sense of community and gives people hope for a post-pandemic future.
This project helped me realize the inherent value of community service and the importance of color blindness community among young people, an often overlooked part of a high school culture. It was eye-opening to interview other high schoolers who wanted to explore deeper sense of volunteer works- community service reminded them of a future when we can help each other and get through the pandemic together.
By conducting research, we found that lacking community service knowledge is one of the key reasons high schoolers don't actively volunteer outside of required hours. We foresee that the educational aspects could be more immersive in our app. For example, during the application process, we could help users learn topics related to their preferred categories by recommending them some workshops in application detail page or notification page. Also, we could use pop-ups to provide a single piece of volunteer knowledge. Thus, users could passively learn more about volunteering.