My Role and Responsibilities 
Lead UX designer/researcher for the app dev and responsive website design.
User Interviews
Competitive Audit
Visual Design
Personas
User Flows
Branding
User Journeys
User Empathy Maps
Wireframing
Usability Testing
communities connect.jpg
Service is an important part of the Falls Church City Schools IB curriculum. Currently students search various individual organizations websites for service opportunities, however, too often the events have past, no upcoming events are listed, and there is no easy way to sign up online. Additionally, organizations rarely fill their volunteer rosters and spend financial resources staffing positions that would otherwise be done by volunteers. Consolidating upcoming service events into one digital product would connect students to community service, help organizations fill their rosters, and spend resources in more beneficial ways. 
About the Project
Connecting students to service. 
Commitment made easy.
Communities Connect
welcome to
afac.png
communty connect logo iwth text-01.png
Project Goal
Creating a consolidated search for service opportunities, Communities Connect will allow K-12 students to easily search and sign up for local service opportunities, increase their annual service hours, improve their well-being, and help organizations better allocate their resources.  
mockup profile 5.png
communities connect2yellow2.jpg
3 months
Project Duration
iconspng.png
Competitors
A user-centered design process was incorporated into the research and design. 
Design Process
Empathize
User research
User interviews
Competitive Audit

 
Define
Personas
Empathy Map
Journey Map

 
design process copy.png
Ideate
User Flow
Card Sorting
Information Architecture 

 
Design
Wireframe
Visual Design
Branding

 
Test
Usability Study
Implement Feedback 

 
Empathize
  • has a range of service projects
  • can easily search 
  • tells you time and place
  • has several places closeby
  • has a range of service projects
  • can easily search 
  • tells you time and place
  • has several places closeby
service.png
hlper helper.png
My Responsibilites and Tasks
Lead UX/UI for mobile app and responsive website design.
User Research
Competitive Audit
Branding and Stylize
Interviews and Surveys
User Flow
Usability Testing
Personas
Card Sorting
Converting Feedback
Empathy Map
Wireframing
Presentation
Surprisingly there are few service app, and fewer that have local events. Three apps identified allowed one to sign up for service events, however their interface and user flow was not thorough and was very confusing. 
vomo-logo-full.png
  • has a range of service projects
  • can easily search 
  • tells you time and place
  • has several places closeby
  • has a range of service projects
  • can easily search 
  • tells you time and place
  • has several places closeby
service.png
communities connect2 blue_edited.jpg
  • has a range of service projects
  • can easily search 
  • tells you time and place
  • has several places closeby
  • has a range of service projects
  • can easily search 
  • tells you time and place
  • has several places closeby
point-volunteer-app.png
service.png
Students are passionate about advocating and serving specific causes.
Secondary Research

Volunteering Statistics for Virginia

  • 2.243 million Virginians volunteered in 2018

  • 34% of Virginians volunteer

  • Volunteered 232 million hours last year

  • $5.5 billion in economic impact

  • Virginia ranks 22nd in U.S. for volunteerism

  • Average volunteer time is valued at $29.14 

  • high school and college students volunteering has been in decline since 2005, less than 25% volunteer

Top benefits of  Volunteering

  • Provides a sense of purpose and teaches valuable skills.

  • Nurture new and existing relationships.

  •  Volunteering can advance your career.

  •  Improves physical and mental health.

Volunteering increases self-confidence.

Volunteering combats depression.

Volunteering helps you stay physically healthy.​

Qualitative User Research
Eight interviews were conducted including students, parents, individuals from school clubs, and local service organizations to best understand the user's pain points, needs, and desires. 
If it was easier to find and sign up for service events service participation would increase.
Students' well-being and character improve when service is performed.
Organizations want more volunteers and to strengthen community ties.
Key Insights from Interviews
Quantitative User Research
An online survey was conducted to obtain insights from students, parents, school staff, and organizations. Twenty four people participated in the survey. 
Questions and Responses

How often do you do community service in one year?

 

 

How far would you be willing to travel?

 

Who do you do your service with?

 

Do you volunteer for specific causes?

 

What would encourage you to do more service?

 

Do you find your events online?

 

Why do you do service?

 

If there was an app would you do more service?

 

< 5 miles
> 5 miles
close by
more opportunities
friends
make a difference
yes
no
 
yes
no
charts.png
<10 hours a yr
>10 hours a yr
family
friends
alone
no
yes
help others
required 
feel better
feel connected
communities connect2yellow2_edited.jpg
Key Insights from Survey
65% of interviewees served less than 10 hours a year and 60% served with their family. 
75% of interviewees like to volunteer for a specific cause and want to feel connected, help others, and because it is required. 
65% of interviewees would like to volunteer at places close to home to make it easier and be involved in their own community. 
65% of interviewees find their events online and 90% said they would use an app to find service if it was available. 
  • I want to be able to volunteer with my
       young children.
  • I have lots of activities so I want to look for upcoming events that work with my schedule. 
  • We could use a better approach to involving citizens in volunteering. 
  • My kids always feel better after doing service work, but it is hard sometimes to motivate them.
  • There is no smart solution for tracking student service hours. 
Say
Empathy Map
The data illustrated on the empathy map was based on interviews. We wanted to gain a much better understanding of their needs, feeling, and desired actions. 
  • Works with high school students who do service work. 
  • Works in a food pantry and registers new families. 
  • Participates in community service through church and Girl Scouts events. 
  • Is in Student Council and part of a service club at school-part of the Give Day ambassadors.
  • Participate in one large service project a year.
  • Their family could do more meaningful service work. 
  • High school students have a lot to benefit from community service. 
  • Feel more balanced when participating in community service. 
  • Would like an easy way to cancel an event if needed, and way to easily find last minute opportuntiies. 
Feels
Young woman
Father with his Son
mockup 4.jpg
persona-1 copy.jpg
Think
  • Students need a modern approach to signing up for service.
  • A range of causes to choose from allows students to focus their efforts.
  • During Covid we saw so many people do important service projects-we can all make a difference. 
  • Push notifications could help increase service by alerting students of new opportunities. 
 
DEFINE
"At most of our service days we only fill between 50-60% of our volunteer staff. We could really benefit from more volunteers and take our service to another level."--Susan, director of a food pantry
Young woman
mockup 4.jpg
Father with his Son
"I want to be able to validate my hours online and not have to get signatures on a paper and keep track of it. I also want to volunteer with my friends."
--Jessica, high school student
persona-1 copy.jpg
Personas
"I struggle to find opportunities to serve. I want to find an organization where we can develop a long-term relationship and volunteer frequently."
--Jeff, father of two boys age 14 and 8 
"So many students have so much given to them today. Giving back can help them develop a larger sense of gratitude, appreciation, and awareness for others. It helps them really integrate into the whole community."
--Lorrie, director of high school service organization  
Based on insights gathered during the empathize stage, personas are created to match user stories and force and solve problems, optimizing the user experience. 
Does
Ideate
User Flows
The user flow helps to understand the user navigation through the application and how to achieve specific goals. The flow begins at one entry point and establishes the various steps and actions a user needs to take to complete the specific task. 
communities connect2 blue copy_edited.jp
Untitled-4.jpg
Untitled-3.jpg
Select
an Event
User Flow
Create an Account to Select Event UserFlow
service details.png
top images4.png
profile.png
desktop social.png
Card Sorting
Card sorting helps to organize the information into groupings to give the optimal user flow. For this app there was the general search and the individual's profile and preferences. 
card sorting.png
DEsign
A volunteer service app would help bring together student service participation and organizations needing volunteers. Students want easy access to service opportunities directly from mobile apps on their phone. The following features were important for the mobile app design:  
a range of local organizations and upcoming events
friends sharing so they can participate together 
variety of causes with organizations per cause
gamify service hours and awards
Low-Fidelity Prototype
The low-fidelity prototyping focused on: 1) searching for events via upcoming events, organizations and causes        2) creating an easy few step sign up process 3) displaying the student's important information and motivating them to complete their hours and receive their service award
wireframesA.jpg
wireframesB.jpg
yellow background_edited_edited.jpg
Style Guide
The concept for the logo was to show people in connection centered around a common place. The colors chosen were soothing with an energetic pop accent and not  associated with any specific school colors. The contrast ratios passed WCAG AA and AAA ratings in all but one scenario which was avoided in the design. 
Primary Color
Secondary Colors
BBCAF8
#1D4578
F1E76E
Typography
Cc
Montserrat
Screen Shot 2022-07-05 at 2.35.55 PM.png
Montserrat Medium
Montserrat Semibold
PoynterOSDisp Bold
Icon and Button Style
Screen Shot 2022-07-05 at 10.59.59 PM.png
Gamifying for Motivation
Gamifying apps is one way to increase usage and encourage specific habits. We wanted to motivate students to complete their service hours and strive for achieving the top level service awards. We gathered a range of completion circles and progress bars.
gamify.jpg
gamify.jpg
gamify.jpg
High-Fidelity Prototype
The high fidelity prototype focused on creating a smooth simple approach to finding upcoming service events, selection, and sign up process.The next main aspect was to create a nice profile section that would communicate important information such as past and upcoming events, favorite causes and organizations, and their progress on completing their service goals. While most students will use the mobile app we created responsive website design to ensure all users, parents, staff, and organizations had easy access to Communities Connect. 
new shadows-01-01.png
iphone12-mockup-dark-11 copy.png
DisplayMockupCreator copy.png
Test
communities connect2yellow2_edited.jpg

1

Profile Information

The information on the profile needs to be refined. Friends needs to be eliminated and preferences and settings need to be included. 

Easy to
Sign Up

2

When users click on an event to preview they don’t want to preview the whole organization and other events.

Concise Language

The words need to be clear between events and organizations and My events and My organizations.

Events
Front & Center

The main purpose of the app is to find upcoming events. This information needs to be front and center in the app and able to complete in as few as steps as possible.

Event Confirmation

Users want to receive an official confirmation that their upcoming service event has been approved and there needs to be a confirmation page. 
Croods - Mobile-3.png
Croods - Mobile-2.png
Usability Testing
The usability testing identified several pain points and organizational challenges that confused the user. The main reason for the app is to sign up for events so this information was put front and center and that user flow was prioritized. Some of the language needed to be revised to clarify between items identified as favorites and those in the general selection. We also smoothed out the confirmation page to ensure users had a chance to make a final confirmation before finally agreeing to the service event. 

PARTICIPANT 1
teacher

The most important reason I am using this app is to sign up for an upcoming service event. I want to see that information first over anything else. 

PARTICIPANT 2 
student

When I am signing up for an event, I want to see all the confirmed details and then click confirm. I don't want it to sign me up without a confirmation

My daughter is going to want to do service events with her friends. How can she share the event with them? 

PARTICIPANT 4
parent

I will scroll for content but with actions I want to be able to click right there without scrolling. 

Stuck at Home - Searching.png

PARTICIPANT 3 
parent

Power Moves - Calendar.png
Stuck at Home - Stats and Graphs copy.png

IMPACT

Communities Connect increased student service hours by 75% the first year and by 145% the second year. 

Power Moves - Standing.png

Service betters self

IMPACT

Communities Connect increased their service hours in the primary schools by 65% the first year and up another 55% the second year.

Committment made easy.

IMPACT

The school increased students achieving their Prism Service Prize from 30 students a year to 166 students the following year.

What users said
Lessons and Takeaways
Palz - Social Media Meeting.png

2

3

3

4

5