‘Blue Echo’ App Prototype

HES Class: User Experience Engineering

Have you ever wondered if whales are traveling near your local beaches or shores?

Blue Echo brings the magic of whale watching to your fingertips with real-time whale watch sightings! With Blue Echo, you can immerse yourself into a wonderful whale-watching learning experience. Play games to learn about whales, explore other fascinating marine species and discover conservation efforts in your area. You can also track familiar whales around your area, or see where they were last spotted in the sea.
Whether you're a passionate whale enthusiast or just curious, Blue Echo makes learning about these incredible creatures exciting and accessible for everyone.

View Project in Figma

Demo Video

What?

Blue Echo is a whale tracking and discovery app designed to educate, inspire, and connect users with the world of whales. It offers real-time sighting data, species information, and interactive whale trail maps—creating a dynamic platform for exploration and learning.

I designed the prototype using Figma to bring this concept to life and showcase how technology can make marine science more engaging and accessible.

Why?

Each year, over 4 million people take part in whale watching, but their curiosity often ends when the boat docks. Blue Echo aims to extend that wonder beyond the tour by giving users real-time access to whale sightings, migration routes, marine species data, and conservation efforts. By transforming passive sightseeing into active learning, BlueEcho empowers a more connected, informed, and conservation-minded community of whale watchers.

Who?

Blue Echo is designed for passionate whale watchers and curious minds, especially teens and young adults eager to explore the world of whales and marine biology. Whether you're a first-time adventurer or a lifelong ocean lover, BlueEcho brings marine life closer, making learning engaging, accessible, and fun.

How?

Blue Echo was developed through a full-cycle product design process—from initial concept to interactive prototype. As part of this term project, I:

Conducted user research and developed personas to understand the target audience
Mapped out user journeys to identify pain points and opportunities
Defined five core user stories to guide feature development
Created wireframes and high-fidelity mockups in Figma
Iterated the design based on usability testing and feedback to deliver a final, user-centered prototype

This end-to-end process grounded BlueEcho in real user needs and aligned the design with the app’s educational and exploratory goals.

Personas

Emily Davis is a 16-year-old ocean lover and aquarium volunteer from Monterey, CA. Passionate about marine life, she wants to track her favorite whales even after moving away for college.

Miss Stephanie is a middle school science teacher who embraces tech-driven tools to make marine biology engaging and accessible for her students.

User Journey Map

User Stories

Story 1:
As a frequent whale watcher, I want to view information about my favorite whale so that I can check on her status whenever I'm curious.

Story 2:
As a resident in California, I want to check where the most recent whale sightings happened so that I can see some whales for myself.

Story 3:
As a middle school student, I want to learn about beluga whales so that I can complete my science homework.

Story 4:
As an older sister, I want to show my younger sister a fun game about whales so that we can keep her busy while we wait for our whale watching tour to begin.

Story 5:
As an environmentalist, I want to read about the effects of climate change on whales so that I can encourage others to protect our oceans.

Mockups & Lo-Fi Prototype

I created two UI packages to explore distinct solutions for each user story. For each, I designed a mockup illustrating the expected user interactions. After gathering initial feedback, I developed two low-fidelity prototypes and conducted user testing. Based on the user testing outcomes, I formulated a plan for updates to move forward to the final prototype.