Whale Friend
Making Marine Conservation Interactive and Accessible
Final Prototype
UX Designer from conception to delivery
February 2023
Adobe XD
Figma
Challenge
Many species of whales are endangered, largely due to human forces. While most people are aware of this issue, digital tools for conservation are often limited to static information pages or donation platforms that fail to engage users effectively. This results in:
A lack of interactive, hands-on ways for users to contribute to conservation efforts.
Users feeling disconnected from the impact of their actions.
Difficulty in finding a centralized platform that encourages ongoing participation and tracks real-world impact.
The Solution
Design an engaging and rewarding digital experience that empowers users to actively contribute to whale conservation through a simple and motivating platform.
PROCESS
Research & Analysis
Information Architecture
Wireframing & Prototyping
User Testing & Iterating
Visual Design & Style Guide
DISCOVERY
User Research & Findings
To better understand user attitudes toward marine conservation, I conducted 1:1 interviews with 8 participants (ages 23-40). The research revealed that while users were aware of environmental challenges, they hesitated to take action due to several key reasons:
Financial Concerns – Users associate conservation efforts with donations but are skeptical about where their money goes.
Desire for Direct Involvement – Users prefer hands-on action over passive donations.
Information Overload – Many organizations provide too much information, making it difficult to know where to start.
Lack of Accessible Resources – Users don’t know how to engage easily with conservation efforts.
Competitive Analysis
Next, I assessed the digital landscape of conservation tools. Through this, I identified strengths, weaknesses, and opportunities that set Whale Friend apart. Key insights included:
Most conservation platforms rely on donations, with minimal user engagement beyond financial contributions.
Limited gamification exists in conservation apps, missing an opportunity to drive motivation and long-term involvement.
Users want real-time impact tracking but often lack a tool that visualizes their contributions effectively.
Target Audiences
From the discovery phase, I identified two key user groups who would benefit from Whale Friend:
Group A: Conservation Beginners
Interested in learning how to take action but unsure where to start.
Limited exposure to conservation technology.
Looking for a simple, accessible tool to help them make a difference.
Group B: Active Environmentalists
Already passionate about conservation and looking for more ways to get involved.
Seeking a digital platform that allows them to track and optimize their efforts.
Want to see real-time impact from their contributions.
DEFINING
Problem Statement:
Our user is a socially responsible user who wants a digital solution that provides a hands-on way to contribute to conservation efforts. She seeks a platform that goes beyond passive engagement, offering interactive ways to participate in saving endangered species of whales while clearly showing her impact.
How Might We...?
To address this challenge, I asked:
How might we create a simple and rewarding experience for users to take direct action?
How might we keep users hopeful and motivated to stay engaged?
How might we use gamification and tracking to encourage long-term participation?
How might we provide transparent feedback loops so users feel connected to the impact of their efforts?
IDEATING
After evaluating multiple concepts against user needs and business goals, I chose the beach cleanup tool for its hands-on, engaging approach. It simplifies conservation efforts, making action both accessible and rewarding—bridging the gap left by traditional donation-based platforms.
LOW-FIDELITY PROTOTYPE
Low-Fidelity Prototype
I drafted initial wireframes and created a low-fidelity prototype for the main user flow: hosting a beach cleanup. Users were prompted to input their name, the date, the location of the beach, and the amount of trash collected at the beach. I created a point system to motivate users to collect more trash and host more beach cleanups.
TESTING
Test
My first usability study provided key insights into how users interacted with the beach cleanup feature. Participants completed the core task, and their feedback highlighted three main areas for improvement:
Effectiveness: Users completed tasks successfully but found some steps unclear.
Engagement: Users appreciated the interactive format but wanted more dynamic feedback.
Motivation: Users needed stronger incentives to continue using the app.
Key Design Improvements
To address these challenges, I made the following updates:
Improved Guidance: Added step-by-step instructions and a progress bar for better clarity.
Enhanced Engagement: Introduced interactive pop-ups with whale facts and challenges.
Increased Motivation: Implemented a points system, medals, and social sharing options to encourage continued participation.
FINAL PROTOTYPE & DIGITAL EXPANSION
I iterated on my initial designs to address the pain points found in my first usability study. Results showed that users needed more guidance on the steps involved in hosting a beach cleanup, fun features to stay engaged, and a way to set a goal and track progress to reach a high level of satisfaction upon completion of the activity.
Key Features
Gamified Cleanup Activity: Users collect points based on the type and amount of trash they remove.
Personalized Engagement: Whale Friend addresses users by name, making the experience feel interactive.
Impact Visualization: Users receive real-time feedback on how their actions benefit marine life.
Social Sharing: Users can share achievements to inspire others.
Seamless Mobile & Desktop Experience: Optimized across devices for accessibility and ease of use.
Start Cleanup
Starting a beach cleanup is easy and accessible, with the beach cleanup button located right on the main navigation bar. Brief instructions are displayed to help new users navigate through the activity. A point system with medals is presented on both the home screen and beach cleanup page to help motivate users.
Input Name & Date
Adding the name of participants and the date of the beach cleanup creates a more personalized experience. The user is referred to by his/her/their name throughout the rest of the activity, as if the whales are speaking to them directly. The calendar creates a quicker and more efficient process.
Find Location & Whales
Users can easily locate their beach by inputting the name of the beach, city, zip code, or by clicking on the map. Once the location is found, a list of whales nearby is generated with a brief description of their characteristics and level of endangerment. Learning about specific whales nearby shows users how their actions are directly helping life around them.
Collect Trash
Types of trash are separated into four categories: Plastic, Metal, Paper and Glass. Users can input pieces of trash manually or click the plus or minus buttons for added convenience. As users add more trash, they collect more points. Pop-up windows appear throughout the activity with fun facts and thank you messages told from the perspective of a whale, which aims to motivate users to continue the activity.
Complete Activity
After users reach their goal, they have the option to continue the activity, save their progress for later, or complete the activity. Once users complete the activity, they are given a detailed summary of their accomplishments. They are awarded points based on the total number of trash collected. They are given the option to share their summary on social media.
RESPONSIVE WEBSITE
Expanding to a Responsive Website
After finalizing the app, I developed a responsive website with a complementary focus:
The app is designed for hands-on action and gamification.
The website serves as an educational hub and engagement platform.
Information Architecture
I began planning the information architecture for the Whale Friend responsive website by creating a hierarchical sitemap. I recalled important information about my target users and narrowed down elements to include on the website accordingly.
Prototyping
After completing mockups for the mobile version of the Whale Friend website, I proceeded to complete mockups for a tablet version and a desktop version. I then connected all screens to create three different prototypes for testing.
Mobile
Tablet
Desktop
STYLE GUIDE
Inspired by the deep ocean, the design prioritizes:
Dark blues and blacks to mimic the depths of the sea.
Electric blue highlights for call-to-actions and impact visualization.
Rounded elements and a glowing effect to create a futuristic, immersive feel.
REFLECTION & NEXT STEPS
Future Improvements
Expanding User Research: Testing with younger demographics and broader user bases.
More Interactive Tools: Introducing new conservation actions beyond beach cleanups.
Data-Driven Impact Reports: Providing users with deeper analytics on their contributions over time.
Conclusion
Whale Friend transforms conservation from a passive activity into an engaging, interactive experience. By leveraging gamification, impact tracking, and real-time user engagement, the platform redefines how people interact with conservation efforts in the digital space.
See more work
Michellada - Merchandise Customization App & Website
Flori - Flower Catalogue App