Challenge
Students and families want to participate in community service but struggle to easily find opportunities in the area.
Solution
The solution was to create an app that would facilitate students in grade K-12 grades and their families to easily search and sign up for community service events in the local area.
My Role
My role was lead UX designer leading the app and responsive website design and the main UX researcher.
My Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, iterating on designs, branding for app, information architecture, and responsive design.
RESEARCH
For the research phase interviews were conducted, identification of local organizations where service events could be done, and a competitive audit looked at current websites and apps that allow one to sign up for community service. In person interviews were conducted with directors of a popular school organization, parents, students, and a non-profit.
Insights
No Service Curriculum
At school level there is no cohesive service component in the K-12 curriculum for service learning.
Increase Ease=More Service
Families and students would sign up for service events more frequently if it was easy to find events and easy to sign up.
Personal Development
Service has incredible benefits for the students' well-being and character development.
No Apps Specific for this Area
Few apps that help connect people to service events, but not a collection of causes/organizations and not easy to find.
Not Enough Volunteers Organizations often don't have the amount of volunteers they need to fully operate.
"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
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
"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
IDEATE
During the ideate phase ideas were generated about the brand, the user flows for selecting an event, the profile page, and gamifying service hours to encourage a healthy competition for the greater good. The logo design was to represent a connection of people, more than two individuals, and with a cool color scheme that was in balance and yet still a level of contrast. There are many ways to gamify service hours and show completion circles when one has completed their goals. The design wanted to incorporate some aspects of gamifying to motivate the students to achieve their service hour goals.
My Responsibilities
Initial Concepts
Easily find nearby places to serve
Have a variety of causes to choose from
Increase awareness for organizations and challenges encountered
Allow participants to serve with friends
Gamify hours & award
prizes for achievements
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Branding & Logo
The concept for the logo was to show people in connection centered around a common place. The colors chosen were more soothing with a little bright energetic pop and not "school colors." The contrast ratios passed WCAG AA and AAA ratings in all but one scenario which was avoided in the design.
Color Exploration
Gill Sans Semibold
Montserrat Semibold
Brainstorming
The aspect of gamifying was examined looking at different completion circles, leveling up awards, and how to motivate the students to do service work.
The two main pages that I explored layout were the landing page and the profile page. These were two pages allow the user to take the app in many different directions so the information needed to be well organized and strategic so the user could find what they were looking for.
Landing Page
Profile Page
Gamify hours and rankings
Wireframing
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, and 3) integrate a profile that displays a nice amount of information to the student, motivating them to complete their hours and receive their top service awards. The design has a variety of different layouts but the structure and the placement of the information was consisted to enhance usability.
TESTING
Usability Study
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
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.
2
3
4
5
What was said?
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.
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?
I will scroll for content but with actions I want to be able to click right there without scrolling.
PARTICIPANT 1
teacher
PARTICIPANT 2
student
PARTICIPANT 3
parent
PARTICIPANT 4
parent
Revisions
Lo-Fi Mockup
Hi-Fi Mockup
Lo-Fi Mockup
Hi-Fi Mockup
Lo-Fi Mockup
Hi-Fi Mockup
Lo-Fi Mockup
Hi-Fi Mockup
SOLUTION
Communities Connect is designed so the students and families can easily find events or organizations or causes that they want to do service work for. In the profile they can save their favorite organizations and find their events.
The various screen sizes were designed with behavior in mind. With the mobile app, people want to touch, tap, drag, swipe easily and have information stored in the user profile. With the tablet, similar gestures are still used but there is more space for text and additional information. With desktop, people will navigate with arrow keys and a mouse scrolling and using drop down menus. The text and images could be larger and include more details. Additional information and logo/mottos could be included. Click for prototype.
Takeaways and Moving Forward
IMPACT
Communities Connect increased student service hours by 75% the first year and by 145% the second year.
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 achieving their service goal.
