My role

UX Design Lead

Collaborators

Project Manager: Kristen Vise

Content Design: Tanya St. John

UX Research: All team members

UX Design: Andrew Pham

Designed for

UW HCDE User-Centered Design Class (Autumn, 2022)

Time frame

Oct 2022 - Dec 2022


Volunteering made easy — Google Maps new feature.

We designed a Google Maps Volunteer feature during a User-Centered Design class in the University of Washington’s Human Centered Design and Engineering program. The overall goal of this project was to create an interactive system that addresses the changing climate. We believed that through volunteering, anyone could find an opportunity to address the needs of a changing climate. This perspective led to the creation of a Volunteer Feature that is integrated with Google Maps.

As the lead UX designer on this project, I designed the mid-fidelity wireframes, implemented changes according to usability testing, and designed the high-fidelity prototype.

 
 

Research Questions

Understanding the true needs of our users was a core part of our design. We identified questions that we needed to answer to refine our design.

  1. Are college students looking for volunteer opportunities?

  2. What barriers do college students face when looking for volunteer opportunities? 

  3. How likely are college students to volunteer if they were provided with incentives? 

  4. What type of incentives would make them more likely to volunteer? 

  5. What type of volunteer opportunities are students currently engaged in? 

  6. What type of volunteer opportunities are students looking for/interested in? 

  7. Do students feel more inclined to volunteer if they can share their volunteer experiences? 

Our class was given a prompt to follow, “design for a changing climate". With that in mind, we narrowed down our design question:

 

How do we streamline the process for finding impactful, Seattle-based, climate change volunteer opportunities for students?

 

User Research

We conducted a competitive analysis by scouting existing volunteering apps/products on the market. Takeaways from this method that we got from our competitive analysis were that search engines (although not working fully in some apps) and visualizations of individual metrics were incorporated in 3 of the apps that we looked at and something we wanted to include into our own design.

 
 
 
 

I sent our survey using several platforms, including slack and the University of Washington’s subreddit. Our key findings, based on 27 respondents, were:

54%

37%

68%

Want to be able to find opportunities easily

Don’t know where to start looking

Volunteer for a cause they care about

 

Through the result of the survey, we wanted to focus on a solution that would help people find volunteer opportunities that they care about easily.

 

Personas

Based on the cumulative data from our user research, we created three fictional personas to better empathize with our users. We focused on primary personas (UW students looking for volunteer opportunities) for this project. Our personas represent a fictional user’s needs for our system, frustrations, and demographics. After we developed our primary personas, we honed the scope of our project to focus on them.

 
 
 
 
 

Ideation

After collecting data from research and having a clear image of what our potential users need, we started ideating. Our ideation was done through a combination of design sketches and affinity mapping with sticky notes. After the initial phase of this activity was done, we then categorized each sticky note into clusters and each of those clusters shared some commonality between the ideas. This resulted in a list of categories that helped us start conceptualizing what our design should be. 

We identified 11 themes (circled in white) in our affinity map.

In our group sketching activity, we each created several sketches that could encapsulate some of the functionality mentioned within the categories we created during affinity mapping. After critiquing each others’ sketches, we selected the top three sketches to narrow down even further while also highlighting each sketch's strengths and weaknesses. The end result of these three sketches would eventually become our final design decision which was a volunteer feature within Google Maps rather than a completely new volunteering app.

 
 
 
 
 

Guiding Principles

After ideating and completing our initial user research, we crafted a set of design goals that guided our initial design. We wanted students to be able to: 

 
 
 

Information Architecture

 
 

Our IA diagram was based on our storyboards and ideas from our brainstorming session. The IA diagram served as our blueprint for creating the user flows in the next step of the design process. We used color and text in our diagram to differentiate between existing, new, and revised pages.

 
 

The colored (green and gray) boxes represent the new flows added to Google Maps with the implementation of our new feature. The green boxes are the flows that we ended up prototyped for.

 
 
 

User Flows

We mapped out the series of steps our users would take to achieve specific goals using our system. We created user flows for 3 core actions users would take using our volunteer finding feature. I created user flow 2.

 
 
 
 
 

Mid-Fidelity Prototypes

Leveraging our three user flows and our IA diagram as guides, I created three medium-fidelity prototypes to show the interaction design of our new volunteer feature within Google Maps and how it is related to the larger app experience. My intention with this step of the design process was to create flows conveying our proposed design so we could test it with potential users of the system. We used a visual design approach of simple lines, grayscale images and text placeholders, and the accent color of green to highlight the primary elements and selected controls on a page.

 
 
 
 
 

Usability Studies

For usability testing, we conducted remote, moderated Think Aloud testing over Zoom with three participants. The users were asked to test three specific user flows and share what they were seeing, thinking, and feeling while interacting with the prototype. Within the 3 flows, users were asked to explore the new volunteer feature and sign up for a volunteer opportunity, create and share a volunteer list with a friend, and filter volunteer opportunities by a specified feature (date). Below is an image showing the must-fix issues after conducting usability studies. 

 
 
 
 
 

High-Fidelity Prototypes

Based on insights discovered after analyzing our usability testing results, I iterated on our medium-fidelity prototypes and revised our flows into two high-fidelity prototypes. 

The high-fidelity prototypes use the existing material design system that underpins Google Maps. Because our feature is envisioned within the Google Maps app, I created an interactive mobile prototype that guides users through our volunteer feature in the app. This helped us tell the story of our volunteer feature during the project showcase.

 
 
 
 
 

Easy onboarding

Easy onboarding process and a clear view of all volunteer opportunities near you. Information about each opportunity includes a learn more and sign up button, and other details such as duration and ratings. This will reduce the time spent for a new user to get familiar with the feature.

 
 
 
 

Filter opportunities by cause

Filter volunteer opportunities by various volunteer causes. Different volunteer causes have a specific icon associated with them for users to easily distinguish them. This solves the problem for users who don’t know where to start with volunteering.

 
 
 
 
 

Set a date

Filter volunteer opportunities by a specific date to find opportunities that fit users’ busy schedules. This gives users more volunteering incentives by showing the opportunities available on the days they are free.

 
 
 

Video Prototype

We made a video prototype that briefly explains the functionality of the new volunteer feature.

 

Reflection & Next Steps

What worked…

Our secondary and primary research was critical to understanding the needs, desires, and frustrations of our users. Additionally, the ideation phase of sketching and brainstorming was pivotal in allowing our team to synthesize, visualize, and communicate findings from our research and potential solutions to our design challenge.

If we had more time…

There were several key features that we would have explored further:

  1. Admin experience

    • Given time constraints we were unable to design the Google Maps volunteer feature from the perspective of the volunteer organizations. Working directly with volunteer organizations to include features that fit their needs would be an important next step. 

  2. Add features — Impact Tracker

    • One thing we learned from our user research is that our users wanted to know that they were making an impact through volunteering. One feature we explored was an Impact Tracker. This feature would capture and report the impact of each volunteer experience and would be individualized to the user.

Our project culminated in a student showcase where we had a booth representing our project and were able to explain our new volunteer feature to folks who stopped by our booth. We also had devices so visitors could interact with our design. Overall, we heard from visitor after visitor that they wished this experience existed and that if it did, they would use it.

From left to right are Andrew, me, Kristen, and Tanya

 

Back to all projects