Volunteer UX Web App Design and Case Study
Volunteer UX Web App Design and Case Study
Shipnoise
Shipnoise
My Role
My Role
UX Designer
UX Researcher
UX Designer
UX Researcher
Project
Project
Volunteer
Group
Timeline
Timeline
6 months (Ongoing)
6 months (Ongoing)
Tools
Tools
Figma, Miro, Google Docs, Github
Figma, Miro, Google Docs, Github
Overview
Overview
The SRKWs are an endangered population of orcas affected by human activities, including decreased salmon populations and marine noise pollution from all classes of vessels and shoreside construction projects in the Salish Sea. The Orcasound hydrophone network monitors the marine acoustic environment continuously, including SRKW bioacoustics as well as noise pollution from vessels and other human-originating sounds. Noise pollution interferes with the ability of the SRKWs to hunt for their preferred prey source of salmon as well as communicate with each other to coordinate hunts, procreate, and other biological needs. A solution using Orcasound’s growing suite of platforms and tech solutions is needed to quiet the Salish Sea waters from human-originating noise pollution.
The SRKWs are an endangered population of orcas affected by human activities, including decreased salmon populations and marine noise pollution from all classes of vessels and shoreside construction projects in the Salish Sea. The Orcasound hydrophone network monitors the marine acoustic environment continuously, including SRKW bioacoustics as well as noise pollution from vessels and other human-originating sounds. Noise pollution interferes with the ability of the SRKWs to hunt for their preferred prey source of salmon as well as communicate with each other to coordinate hunts, procreate, and other biological needs. A solution using Orcasound’s growing suite of platforms and tech solutions is needed to quiet the Salish Sea waters from human-originating noise pollution.
Challenge
Challenge
Commercial Ship Pilots want to hear what the commercial ship they are piloting sounds like from Orcasound’s hydrophones during a voyage in the Salish Sea. They have tried in the past to listen to the sound that the commercial ship they were piloting was making by listening in real-time to Orcasound’s hydrophones, but could not hear the stream because of the ambient sounds on the bridge of the ship.
Commercial Ship Pilots want to hear what the commercial ship they are piloting sounds like from Orcasound’s hydrophones during a voyage in the Salish Sea. They have tried in the past to listen to the sound that the commercial ship they were piloting was making by listening in real-time to Orcasound’s hydrophones, but could not hear the stream because of the ambient sounds on the bridge of the ship.
Solution
Solution
Using Orcasound's network of hydrophones along the Salish Seas, we built a database of sounds which allows pilots to playback their ship noise and utilize this new information when planning future routes. Overall, this would create a quieter environment for the Southern Resident Killer Whales and marine life while minimizing disruptions to shipping routes.
Using Orcasound's network of hydrophones along the Salish Seas, we built a database of sounds which allows pilots to playback their ship noise and utilize this new information when planning future routes. Overall, this would create a quieter environment for the Southern Resident Killer Whales and marine life while minimizing disruptions to shipping routes.
1.
1.
Leverage Orcasound's Platform
Leverage Orcasound's Platform
The Orcasound sound library is a complete repository of vessel acoustics, allowing for information on a multitude of routes, ships, and locations. We allow users to review their vessel’s acoustic footprint in a controlled environment, turning noise pollution into reviewable data.
The Orcasound sound library is a complete repository of vessel acoustics, allowing for information on a multitude of routes, ships, and locations. We allow users to review their vessel’s acoustic footprint in a controlled environment, turning noise pollution into reviewable data.
2.
2.
Focus on User Efficiency
Focus on User Efficiency
Commercial maritime operations are high-pressure and time-sensitive. To ensure adoption, the UI was stripped down to a single, high-utility user flow designed to be completed in minutes
Commercial maritime operations are high-pressure and time-sensitive. To ensure adoption, the UI was stripped down to a single, high-utility user flow designed to be completed in minutes
3.
3.
Error State Implementation
Error State Implementation
In a technical environment where connectivity can be intermittent and data may be sparse, "failure" is a common user state. We treated error states as proactive prevention rather than roadblocks.
In a technical environment where connectivity can be intermittent and data may be sparse, "failure" is a common user state. We treated error states as proactive prevention rather than roadblocks.
The Design Approach
The Design Approach
Phase 1: Discover and Align
Phase 1: Discover and Align
In Phase 1, we looked to define the end user through interviews and affinity mapping, define the roles of personas that would be major stakeholders, and a journey map showcasing the commercial ship class.
In Phase 1, we looked to define the end user through interviews and affinity mapping, define the roles of personas that would be major stakeholders, and a journey map showcasing the commercial ship class.
Expert Interviews & Affinity Mapping
Expert Interviews & Affinity Mapping
Before moving into high-fidelity design, it was critical to understand the complex maritime ecosystem of the Salish Sea. We conducted targeted interviews with Subject Matter Experts (SMEs), including ship pilots, logistics experts from the PMSA, and vessel agents, to move beyond technical assumptions and uncover the human constraints of maritime navigation.
Experts Interviewed: 16 (including Pilots, Agents, and Environmental Stewards)
Data Points Synthesized: 100+ individual insights
Core Pillars Identified: 6 (Cognitive Load, Operational Timing, Economics, etc.)
Before moving into high-fidelity design, it was critical to understand the complex maritime ecosystem of the Salish Sea. We conducted targeted interviews with Subject Matter Experts (SMEs), including ship pilots, logistics experts from the PMSA, and vessel agents, to move beyond technical assumptions and uncover the human constraints of maritime navigation.
Experts Interviewed: 16 (including Pilots, Agents, and Environmental Stewards)
Data Points Synthesized: 100+ individual insights
Core Pillars Identified: 6 (Cognitive Load, Operational Timing, Economics, etc.)
"Some ships take 20 minutes to reduce their speed, so last minute slow downs aren't effective. Pilots need predictability, or forewarning so actions can be taken." - Pilot
"Some ships take 20 minutes to reduce their speed, so last minute slow downs aren't effective. Pilots need predictability, or forewarning so actions can be taken." - Pilot
"Recognition. Everybody likes to be recognized... Making an effort to participate and contribute to solution." - Pilot
"Recognition. Everybody likes to be recognized... Making an effort to participate and contribute to solution." - Pilot
"It would be useful if you could aggregate the data and associate it to specific ships." - PMSA
"It would be useful if you could aggregate the data and associate it to specific ships." - PMSA
To synthesize these hours of expert dialogue, we utilized Affinity Mapping to categorize raw qualitative data into actionable design pillars. This process allowed us to translate expert "pain points" into a clear product roadmap, ensuring the final UI addressed the psychological and physical realities of our users.
To synthesize these hours of expert dialogue, we utilized Affinity Mapping to categorize raw qualitative data into actionable design pillars. This process allowed us to translate expert "pain points" into a clear product roadmap, ensuring the final UI addressed the psychological and physical realities of our users.
The affinity mapping process turned expert dialogue into six actionable design pillars, revealing that the key to adoption lay in providing predictable, visual data that aligns with the economic and physical realities of maritime navigation.
The affinity mapping process turned expert dialogue into six actionable design pillars, revealing that the key to adoption lay in providing predictable, visual data that aligns with the economic and physical realities of maritime navigation.
User Archetypes
User Archetypes
Building on the insights from the affinity map, we ynthesized my research into four distinct user personas to serve as a strategic compass for all design decisions. These archetypes represent the diverse stakeholders in the Salish Sea ecosystem, ranging from the high-pressure environment of the ship’s bridge to the logistical coordination of shoreside offices.
Building on the insights from the affinity map, we ynthesized my research into four distinct user personas to serve as a strategic compass for all design decisions. These archetypes represent the diverse stakeholders in the Salish Sea ecosystem, ranging from the high-pressure environment of the ship’s bridge to the logistical coordination of shoreside offices.
The Ship Pilot
The Ship Pilot
They are independent contractors (Puget Sound Pilots). They are onboard for only a few hours to navigate high-risk waters.
They are independent contractors (Puget Sound Pilots). They are onboard for only a few hours to navigate high-risk waters.
“I need accurate, predictable data that doesn't distract me from the safety of the vessel.”
“I need accurate, predictable data that doesn't distract me from the safety of the vessel.”
Frustrations: Cognitive Overload, Tech Skepticism, Ambient Noise
Frustrations: Cognitive Overload, Tech Skepticism, Ambient Noise
Motivations: Professional Reputation, Operational Efficiency
Motivations: Professional Reputation, Operational Efficiency
The Ship Agent
The Ship Agent
Independent contractors coordinating commercial vessels through the Salish Sea, balancing safety, schedules, and regulatory compliance as the essential link between ships and shore services.
Independent contractors coordinating commercial vessels through the Salish Sea, balancing safety, schedules, and regulatory compliance as the essential link between ships and shore services.
"The shipping industry is highly regulated with many interested in the activity of foreign vessels."
"The shipping industry is highly regulated with many interested in the activity of foreign vessels."
Frustrations: Communication Friction, Data Fragments, Time Sensitivity
Frustrations: Communication Friction, Data Fragments, Time Sensitivity
Motivations: Operational Smoothness, Value-add Service
Motivations: Operational Smoothness, Value-add Service
The Ship Captain
The Ship Captain
Responsible for the vessel, the cargo, and the budget. Often from overseas with English as a second language.
Responsible for the vessel, the cargo, and the budget. Often from overseas with English as a second language.
“Show me how being quiet also makes my voyage more fuel-efficient and cost-effective.”
“Show me how being quiet also makes my voyage more fuel-efficient and cost-effective.”
Frustrations: Language Barriers, Schedule Pressure, Information Silos
Frustrations: Language Barriers, Schedule Pressure, Information Silos
Motivations: Economic Savings, Corporate Compliance, Safety & Authority
Motivations: Economic Savings, Corporate Compliance, Safety & Authority
Watch Standers
Watch Standers
Located in a command center (Marine Exchange). They monitor the whole Salish Sea 24/7; receiving information from a variety of sources and filtering who needs the info in realtime.
Located in a command center (Marine Exchange). They monitor the whole Salish Sea 24/7; receiving information from a variety of sources and filtering who needs the info in realtime.
“I need to filter out the noise so the right info reaches the right people.”
“I need to filter out the noise so the right info reaches the right people.”
Frustrations: Complicated processes, Lack of space, Danger
Frustrations: Complicated processes, Lack of space, Danger
Motivations: Bonding experiences, Price, Significance of oversight
Motivations: Bonding experiences, Price, Significance of oversight
User Journey
User Journey
Using our main user personas, we built out a user journey map indicating the major areas of contention the that a commercial vessel will go through along with where the Shipnoise app would play a role.
Using our main user personas, we built out a user journey map indicating the major areas of contention the that a commercial vessel will go through along with where the Shipnoise app would play a role.
Phase 2: Design and Validate
Phase 2: Design and Validate
Design Process
Design Process
Because our research highlighted Cognitive Overload on the bridge, the design philosophy was on efficiency. We pivoted away from a complex dashboard to a utility-driven tool focused on a single, linear user flow. Because of the high cognitive load of our users (Pilots and Captains), the UI was stripped of all non-essential elements.
Simple, Efficient Design: We focused on a single-entry user flow: Search (IMO/Ship ID) → Results → Analysis.
High Contrast & Legibility: Design iterations focused on ensuring that the data was readable under the harsh glare of bridge windows or in low-light command centers.
Because our research highlighted Cognitive Overload on the bridge, the design philosophy was on efficiency. We pivoted away from a complex dashboard to a utility-driven tool focused on a single, linear user flow. Because of the high cognitive load of our users (Pilots and Captains), the UI was stripped of all non-essential elements.
Simple, Efficient Design: We focused on a single-entry user flow: Search (IMO/Ship ID) → Results → Analysis.
High Contrast & Legibility: Design iterations focused on ensuring that the data was readable under the harsh glare of bridge windows or in low-light command centers.
Error State Documentation
Error State Documentation
Unlike many projects where error states are an afterthought, our process treated them as cognitive guidelines. Using the Material Design framework, we integrated the following directly into the design phase:
Prevention First: We designed the search interface to be proactive. For example, the search button remains disabled until a valid Ship ID format is entered, reducing the likelihood of a "No Results" error.
Empathetic Recovery: When data is missing, the UI doesn't just show a blank screen; it explains why (e.g., the ship hasn't passed a hydrophone yet) and offers an alternative action, such as viewing a map of active hydrophones.
Unlike many projects where error states are an afterthought, our process treated them as cognitive guidelines. Using the Material Design framework, we integrated the following directly into the design phase:
Prevention First: We designed the search interface to be proactive. For example, the search button remains disabled until a valid Ship ID format is entered, reducing the likelihood of a "No Results" error.
Empathetic Recovery: When data is missing, the UI doesn't just show a blank screen; it explains why (e.g., the ship hasn't passed a hydrophone yet) and offers an alternative action, such as viewing a map of active hydrophones.
Correct the input in real time and use an example format display to assist
Correct the input in real time and use an example format display to assist
Neutral state for CTA while giving the user an option to learn about how recordings are captured.
Neutral state for CTA while giving the user an option to learn about how recordings are captured.
Retry button inline with player.
Retry button inline with player.
Hi-fi Prototype
Hi-fi Prototype
The following interactive prototype demonstrates the core user journey: a Ship Pilot searching for a vessel’s acoustic signature and reviewing its impact. What to look for in this prototype:
Single-Line Navigation: A streamlined path from the Search landing page to the Sound Library results.
Visual Playback: The integration of the waveform visualizer, which solves the "bridge noise" problem by making acoustic data visible.
Informative Interaction: Interactive "Error State" triggers that show how the app handles invalid ship IDs or empty data sets without disrupting the user’s confidence.
Try searching for a vessel ID in the embed below to see how the system validates input in real-time.
The following interactive prototype demonstrates the core user journey: a Ship Pilot searching for a vessel’s acoustic signature and reviewing its impact. What to look for in this prototype:
Single-Line Navigation: A streamlined path from the Search landing page to the Sound Library results.
Visual Playback: The integration of the waveform visualizer, which solves the "bridge noise" problem by making acoustic data visible.
Informative Interaction: Interactive "Error State" triggers that show how the app handles invalid ship IDs or empty data sets without disrupting the user’s confidence.
Try searching for a vessel ID in the embed below to see how the system validates input in real-time.
Testing and Conclusion
Testing and Conclusion
Further Steps
Further Steps
Code
Code
Development Handoff
Development Handoff
I’ll be working closely with the Orcasound engineering team to hand over the Design and Error State documentation. My goal is to ensure the design is technically feasible and that the error states we mapped out are implemented to protect the user experience in low-connectivity zones.
Pageview
Pageview
Analytics and Tracking
Analytics and Tracking
Leveraging my background in data analytics, we’ve already laid the groundwork for our Google Analytics integration. Once the MVP is live, we’ll be tracking specific KPIs, like CTA clicks, session length, and number of plays, to see exactly where pilots are finding value and where they might be dropping off.
Edit
Edit
Redesign Based on Feedback
Redesign Based on Feedback
No design is truly finished until it’s been tested in the field. We plan to use the data we collect to drive future research and redesigns, making sure we stay aligned with the actual needs of the pilots and agents as they use the tool in their daily workflows.
Final Thoughts
Final Thoughts
This project was a major milestone for me, marking my first time collaborating on a professional design team and diving into the high-stakes world of marine conservation. I quickly learned that designing for ship pilots and captains meant balancing environmental goals with the brutal realities of their work, like heavy bridge noise and tight economic margins. The biggest takeaway was learning to stay flexible. We had to scrap our initial ideas for real-time streaming once we realized a visual, asynchronous library was the only way to actually fit into a pilot’s hectic workflow. Using Google’s Material Design system, I was able to turn these complex technical constraints into a clean, reliable prototype that helps protect the killer whale population. It was a hands-on lesson in how great design is less about following a script and more about solving the messy, real-world problems that users actually face.
This project was a major milestone for me, marking my first time collaborating on a professional design team and diving into the high-stakes world of marine conservation. I quickly learned that designing for ship pilots and captains meant balancing environmental goals with the brutal realities of their work, like heavy bridge noise and tight economic margins. The biggest takeaway was learning to stay flexible. We had to scrap our initial ideas for real-time streaming once we realized a visual, asynchronous library was the only way to actually fit into a pilot’s hectic workflow. Using Google’s Material Design system, I was able to turn these complex technical constraints into a clean, reliable prototype that helps protect the killer whale population. It was a hands-on lesson in how great design is less about following a script and more about solving the messy, real-world problems that users actually face.