Caring Coves — A UX Case Study

Introduction

Many people strive to find volunteering opportunities that align with their interests and needs. Organizations oftentimes struggle to find volunteers that suit the skills they are looking for. In a 6 week sprint, our team synthesized research, ideated, tested, and prototyped our ideas. We created a high-fidelity prototype that focuses on the user as a volunteer and allows them to find the best possible event for them.

Awarded Best Prototype

Meet the Team

Problem Statement

Many people struggle to find volunteering opportunities that align with what they are looking for in terms of interests, career goals, organization type, location, etc.

How might we create a streamlined platform for people to find volunteer opportunities and connect with their community?

Project Timeline

Research

We began by conducting a competitive analysis of 5 other apps used to find volunteer opportunities to see what they were doing successfully and where their users ran into issues.

These quotes capture key issues some of the apps had:

“There are no real volunteer events, it is only petition or donation collections.”

“Since the app collects opportunities through the web, there are often links to events that are not accepting volunteers or simply don’t exist anymore as it is not updated regularly.”

After the competitive analysis, we conducted a user survey which received 33 total responses. We learned from the survey that 81% of respondents had volunteered before and expressed an interest in volunteering. Most importantly, we learned that 86% of those that had volunteered before did so in order to give back to their community.

From the survey we also learned that the top 3 methods of finding a volunteer event were:

1. On-campus clubs
2. Word of mouth
3. Social Media

We also learned the top 3 challenges when it came to finding a volunteer event were:

1. Unclear job description
2. Event too far away
3. User time constraints

Following the user survey, we conducted 5 user interviews to gain a better understanding of user pain points and get a sense of what our information hierarchy should be.

Here are two insightful quotes from user interviewees:

“I’ve had experiences where organizations did not respect my time as a volunteer, which felt frustrating.”

“I like to know the time commitment, location, cause, kind of job, what is provided, who is leading the event.”

Ideation

Synthesis

We gathered our research findings and organized them into an affinity map and an empathy map to identify the user pain points we wanted to address. We also created two user personas to demonstrate the varying needs of potential users.

Sketches

We created sketches of potential solutions to the pain points we addressed.

The solutions we created include:

1. Allow users to easily find new events from a variety of organizations in their area.
2. Visualize users’ scheduled and saved events.
3. Create a calendar so users can quickly view the dates and times of their events.
4. Recommend events based on each user’s location and their selected interests.

Mid Fidelity Prototyping

Following the ideation phase and solidifying on a project direction, we translated our solution sketches into wireframes and determined user flow.

Main Features

1. Save and register for events

When clicking on an event card, users are sent to the event page, where they can learn more about the event’s specifics (time, date, location, qualifications, required tasks, and more). From this page, users then have the option to save the event for later reference or register for a time slot if they are interested.

2. Personalized suggestions

One of our goals when designing this app was to find methods of motivation to encourage users to volunteer. To do so, we wanted our app to provide personalized suggestions about events, organizations, and groups the user may enjoy based on their past activity and job preferences as indicated during onboarding.

3. Search for events and organizations

In addition to viewing suggested events and organizations, users can search or look up specific causes, events, and organizations they are curious about. The results of which should also connect the user to the event or organization page where they can learn more about each opportunity.

4. Visualize registered events

Users can view the times and dates of registered events in both monthly and daily views on a calendar. Users also have the option to toggle between displaying or hiding their saved events on the calendar.

5. Volunteer with friends

From the research stage, one key insight we took away was that users are more eager to volunteer if they can do so with their friends. As such, we included the ability to view the user profiles of other volunteers participating in an event to build a sense of community and encourage participation.

Big Change

Our initial mid fidelity prototype involved a separate homepage and community page. Our idea was that the homepage would display registered and saved events in addition to providing event suggestions, whereas the community page would display suggested organizations and groups the user might like. However, as we continued to toy with the design we realized there was a lot of overlapping or similar information between the two pages which resulted in confusion about the distinction between the pages. After multiple rounds of iteration and revision, we decided to combine the separate community and home pages into 2 tabs on the homepage instead: allocating the “Your Activity” tab for registered events, saved events, and saved organizations, and dedicating “Discover” to providing suggestions.

Usability Testing

Following our initial iterations, we performed user testing to help evaluate the overall organization of our app and receive feedback on our main features. Our participants were given a set of tasks to complete and we observed their process of completing each one to better assess our prototype.

Tasks Given

1. Search for a soup kitchen volunteer opportunity
2. Save an event you are interested in
3. Save an organization you are interested in
4. Find a place where you can see all the time slots for events you have registered for
5. View your messages
6. View updates for organizations
7. Find a place to edit your profile

Our Findings

Based on our app’s target audience, we conducted our testing with college students who shared varying levels of experience and interest in volunteering. Through 5 usability tests, we received feedback in three main areas: Navigation, Card Format, and Visual Design.

Navigation

After merging our homepage and explore page, we wanted to receive user feedback on this decision, especially in regards to our new navigation system. In general, we found that users did see parallels in our activity (previously “home”) and explore (previously “for-you”) pages which supported our idea of merging both into a single page through a tab-system. They also felt that our new navigation bar was straightforward and represented our key pages well.

This feedback helped us finalize our homepage user flow and build on our new navigation system in our hi-fi prototype.

Cards

Upon testing, we saw how users preferred to have information on the event’s date and time over the number of volunteers participating in the event. We also noticed how they found it confusing to save an event since it was initially only listed on the event page (opens when the card is clicked) rather than on the card itself.

In our revision, we decided to improve the organization of event details by replacing the volunteer information with the event’s date and time and also introducing the save button. We also made minor changes to our organization and group cards to make them more consistent with the structure of our event card.

Visual Design Feedback

From our testing, we received suggestions on how to refine our current design to improve both functionality and engagement. Based on this, we decided to brainstorm a design system that aligns with this feedback while also representing the values of volunteering itself.

High Fidelity Prototyping

Design System

To bring in a more lively aspect, we decided on a decorative font for our headings and a contrasting minimalistic font for the remaining information on our app.

To highlight how volunteering creates an impact on the world, we focused our design on colors that naturally appear on Earth (e.g. blue, brown, yellow).

To make our app feel more personal, we decided to incorporate an otter as our mascot. Otters are friendly animals with a playful personality which we thought would be a good fit for our app which encourages users to not only engage in volunteer opportunities but also enjoy doing so.

Final Design

Onboarding

During onboarding, users can input their personal information, select causes that they are interested in, and set their location radius. This information would be used to recommend relevant service events to them.

Homepage: Your Activity

The homepage would contain two tabs. The first tab, called Your Activity, would display users’ saved and registered events as well as their saved organizations. Here, users can decide to register for events that they have saved and deregister from events they are no longer interested in.

Homepage: Discover

The second tab of the homepage, called Discover, recommends events and organizations for users based on their location and selected interests. This allows users to find new volunteer opportunities.

Messages

The messages page allows users to access group chats for events they have signed up for. Here, they can ask questions and organize rideshares.

Search

The search page allows users to search for both events and organizations. It also displays the user’s most recent searches.

Calendar

The calendar page will display all of the user’s upcoming registered events. Users can view a monthly calendar of their events as well as a daily schedule. If a user is registered for multiple events that have overlapping times, they will be notified.

Profile

On the profile page, users can edit their preferences, view saved & past events, and view their achievements.

Challenges

1. Organizing large amounts of information

Since the app was geared towards consolidating volunteer opportunities currently published online in a single platform, we found it difficult to organize the many details of events and organizations without causing cognitive overload for our users. However, over the course of many brainstorming sessions and testing, we learned how to prioritize certain pieces of information over others.

2. Performing many iterations before settling on a smooth user flow

Especially in regards to our homepage, we found it challenging to organize the information without making our overall user flow confusing to our users. However, after several iterations and layouts, we decided on one that we felt was the most simple and which also received positive feedback through our user testing.

3. Deciding on a consistent design style

After developing our design system, we found it difficult to integrate our branding to our prototype in a consistent way across all of our pages. However, to tackle this issue, we used our mascot to help make our pages feel more cohesive overall.

Next-Steps

1. Allow for greater personalization to help our adapt to user needs

Knowing that many users interested in volunteering have different passions, goals, and schedules, we want our app to provide a tailored experience that encourages all users to volunteer in a way that aligns with their personal interests. Our current prototype was focused more on consolidating key information relating to volunteering, but we want to expand on this to introduce features that help users integrate our app into their own lives.

(e.g. connect our calendar feature to Google Calendar to help better visualize all events)

2. Create a stronger visual branding that is more consistent and representative of our app’s purpose

Currently, our design system hopes to bring a more engaging and lively aspect to our overall app to help users feel more connected to volunteering as an activity. Due to time constraints, we were unable to fully develop this aspect of our project, but if given the opportunity, we want to build on this goal by refinding our branding to distinguish our app from competitors and also build on our system to introduce a better storyline to support our design choices and especially our mascot.

(e.g. create more dynamic visuals to add movement to our otter mascot and bring in a stronger ocean feel to our pages)

3. Develop more elements for motivation

While brainstorming our app’s purpose, we wanted to highlight how volunteering helps individuals find community while also creating an impact on the world around them. To help motivate volunteers, we incorporated an achievement system that helps users reflect on their volunteer activity and feel a sense of pride for their impact as a volunteer. However, with more time we would like to conduct more research on what exactly encourages users to volunteer and expand on our idea.

(e.g. introduce seasonal challenges and allow users to create their own volunteer goals)