Designing an inclusive experience

for high school students looking for opportunities to fulfill community service hours or volunteer to help their local community, no matter their background or ability.

My Role: UX Designer — Research, Sketches & Wireframes, UI Design, Prototyping
Time frame: 2 weeks
Tools: Adobe XD

View prototypes

🧐 Research

The objective of the survey is to gauge student access to technology and information as well as existing volunteer experience.

👤 User Personas

Student

16 years old
Junior at Midtown High School

Needs to fulfill 100 hours of volunteer work to apply to his dream college

Teacher

English Lit Teacher at Midtown High School
MHS Key Club Advisor

Needs to monitor and record the activities of student volunteers

Volunteer

Program Director at Green Gardens, a non-profit org

Needs to coordinate with schools and staff regarding volunteer activities

🎯 Defining the problem

How might we provide a platform that connects students, schools, and organizations to promote volunteer work and community service opportunities?

⚖️ Competitive Analysis

What existing options are available to users, how are they conveying their mission, and what can we learn from their user engagement?

MobileServe is an app that measures social impact of an individual or organization.
Target audience: Companies, Non-profit organizations, Colleges & Universities

• Reports and measures social services
• Leverages users' personal networks to promote organizations and causes
• Aggregates data into infographics and images to share and promote activity

Youth Volunteer Guidebook is an app that allows users to find active volunteer opportunities in their community.
Target audience: Users based in Westchester, Rockland, and Putnam counties in New York

• Age-specific volunteer requirements
• Explore content including videos, articles, advice, volunteer resources, and interviews
• Users can organize their own local collection drive that supports a cause

✏️ Design

Visual accessibility

One step toward designing for inclusivity includes WCAG compliance, ensuring legibility of text and clear layouts.

Green was chosen as a primary color to represent growth, harmony, and generosity.

Onboarding screens

Options to link social media accounts to encourage sharing volunteer activities and promote causes
Customize interests to refine recommended opportunities
Implementation of points system as incentive

Profile page

User information
Service hours accrued
Points earned from service activities
Volunteer history

Check-in feature

QR Code associated with each user for ease of access to profile
Volunteer activity details—location, date, hours served
Signature requirement to authorize and confirm volunteer service
Email requirement as confirmation and record of volunteer service
Points gained from activity
Share option to promote organization and opportunity

User flow

This new user flow considers the 3 different types of users—student, teacher, organization.
Omitted flow: Existing or returning users would bypass onboarding and directed to their profile feed.