Heal The Bay
UX Design Case Study (student)
Overview
Heal the Bay is an environmental nonprofit based in Santa Monica, CA. One of their biggest annual commitments is helping to facilitate Coastal Cleanup Day – a massive volunteer event dedicated to preserving Los Angeles’ coastal ecosystems. My team was tasked with creating a mobile platform for Heal the Bay to help them both onboard more volunteers for Coastal Cleanup Day as well as make the volunteer experience more engaging.
UX Research & Design Team: Joseph Routt, Tierney Sadowski, Aleia Hayag
Tools Used: Sketch, Figma, Slack, Zoom, Miro
Time Frame: 14 Days
The Problem: Heal The Bay needs a mobile solution to increase their number of volunteers and challenge them to collect more garbage than ever before when they participate in volunteer events. The solution should be usable before, during, and after Heal The Bay events.
The Solution: Our team delivered a mobile platform for iOS which allows users to register for and participate in Heal The Bay events, communicate with their fellow volunteers, and access news + educational resources in regard to sustainability and conservation.
Research
We began our process by conducting a brand analysis of Heal the Bay, as well as several other comparable nonprofit groups. Heal The Bay's desktop website had significant overlap in features when compared to the online presences of other organizations, and integrating an experiential mobile platform would certainly make them a model of progress in their sector.
We then conducted user interviews with 6 participants to gain a greater understanding of their habits, attitudes, and feelings - particularly as the aforementioned pertain to mobile device usage and community involvement. We further synthesized our interview findings by affinity mapping the different quotes and sentiments that were expressed by our interview participants.
We used out affinity map in turn to generate a user persona: Chuck - who represents all of the feelings, motivations, and attitudes that we can expect from the average eco-conscious user.
Hello, Chuck!
Chuck's Problems
• Chuck needs a platform to easily connect with the Heal the Bay community so that he can actively participate and feel fulfilled with his volunteer experience.
• Chuck needs a way to access unbiased and simplified conservation information & events, so that he may become more educated and involved in the volunteering space.
• Chuck needs increased connectivity during events so that he can foster a more rewarding relationship between what he is doing and the cause at hand.
Chuck's Flow
After prioritizing features for the platform by using the "Moscow Method" (organizing features by their importance to the project), we generated two separate flows for Chuck - an event discovery flow, and an event experience flow. These charts demonstrate Chuck's ideal path for navigating this platform on his own time, as well as when he is connecting with his volunteer teammates.
Design
After we established Chuck's two flows, we iterated low-fidelity hand-sketched wireframes into a medium-fidelity prototype. These first drafts laid the framework for the platform, allowing us to create a strong foundation before adding all of the bells and whistles. Our prototype went through two rounds of user testing and subsequent iterations before we landed on our high-fidelity prototype.
Iterations
Our team conducted six usability tests via Zoom, and discovered several key areas for improvement:
Our first area for improvement was the drop-down menu options at the top of the "Home" feed. Users reported the size of these menu's to be undersized, and the "sort" option to be unnecessary. In turn, we removed the "sort" option and resized the "filter" menu.
Our users also expected to land on a scrolling single-column feed of links when they clicked on the "Events" tab, so we switched the default away from the monthly calendar view to a daily view.
The Chat feature of the platform initially required a log-in code for volunteers to join a chatroom with their volunteer teammates, but users found this screen to be confusing. We removed the screen entirely to better meet their expectations of already being sorted into their team chatrooms by the time the event begins.
After our first round of user testing and design iterations, we tested the updated platform with seven users via Maze. The results from these tests were overwhelmingly positive, indicating to our team that it was time to begin the high-fidelity build.
Final Product
Our end deliverable provided Heal the Bay with an accessible and engaging iOS platform for eco-conscious users, particularly residents of Southern California with an interest in volunteering.
Platform Highlights
•A quickly learnable and usable way to view news and events
•Accessible pathways to interact with content and register for events
•News updates displayed in a familiar chronological feed
•Events displayed chronologically with the option to view by month
•Events categorized by color for quick referencing
•Chat facilitates communication between team members and team leaders
•Enlarged buttons make the camera and microphone more accessible when working with protective gloves or dirty/wet hands
•Map function shows team locations and provides a direct link to contact leadership
•Meter at the bottom of the Map Tab displays time remaining and garbage collected
*please note that this prototype is event-based, and facilitates experiences for two separate sequential instances. Click on Heal The Bay's fish logo in the header of the account page to proceed from pre-event to the day of the event.
Next Steps
•Build an achievement system to better reward and motivate volunteers
•Supplement informational resources to include more articles with more depth
•Integrate social-sharing for the news feed, events, and achievements
Follow-Up
Thank you for taking the time to review my case study.
Please feel free to reach out to josephroutt@gmail.com with any questions or feedback, and be sure to connect with me on LinkedIn!