Orcasound

Improve Citizen Scientists’ Experience with Orcasound.net

Intro

The main goal of Orcasound.net is to let people be citizen scientists and help with the conservation of the majestic orcas in the Salish Sea. Hundreds of Orcas, also known as Southern Resident Killer Whales, lived in the Salish Sea before. In the last three decades, their population went down to only 73.

TIMELINE

October 2021-PRESENT

PLATFORM

Responsive Website

INDUSTRY

Scientific Research

MY ROLE

User Studies

Concept Ideation

Interaction Design

Data Visualization

Design System

Accessibility

TOOLS

Figma

Trello

 

TEAM SIZE

5+
Design Team

Problem

Conservationists interested in the southern resident orcas in the Salish Sea suffer from a lack of in-depth knowledge about orca vocalizations, which makes it hard to galvanize the public to help in conservation efforts to protect the species.
There is no single online learning platform that allows people on the internet to help them identify the sounds of southern resident orcas in the Salish Sea, compared to other marine life in the area.

Goal

Engage users to identify orcas that live in the Salish Sea based on their vocalizations, and encourage these users to assist in conservation efforts to protect these orcas.

Outcome

New user interface for learning section of the Orcasound website.

The team is currently working on the landing page of the website. I was designated to create a page to show information about Orcas. 
 
I am also revising user interview questions to create new personas.

A peek at what I do:

After synthesizing usability test results, we found an issue that a lot of testers found confusing. I also did a heuristic analysis to see what other UX principles can be applied to improve the usability of the app.

• There were too many screens unnecessary to finish a task. So I r
educed the screens for users from 5 down to 3. It was originally down to 4 and after a meeting with the design team, it was decided to remove the “Confirm” page.
 
• Added titles and instructions for users to avoid friction

• Option for users to click multiple buttons and not just one

• Consistency of buttons
 
• Added logo of the company for “thank you message”. I intended to add a picture of an orca to give the user an effect of joy or a reminder of why they are participating. 
Old Version

Old Version

Updated Version

My Revision

The Learning Interface

The team is currently working on the landing page of the website. I was designated to create a page to show information about Orcas.

Orcasound homepage sketch

The project owner saw what contents we had decided to add to the page, and he made a critical comment. My mistake was I did not double-check this on the project scope and instead just followed what my teammate started to do.

So, I had a conversation with the copywriter about changing the title and content from “What is Orca?” to “The South Resident Killer Whales,” as the project owner’s primary focus aligned with the scope. The copywriter will work on the topics and arrangement. She also agreed on the layout I designed, and we will keep that.

What is an Orca page

Call Catalog Page

I am also designing the Call Catalog page. 

Background Color

When we finalize the buttons and graphs we want to add to the page, we decide if a background color would appeal to users with some help from usability testing. The past designer chose to add a background color, and the project owner thought it was for dark mode. I decided to make it white because of accessibility and consistency, and I mentioned that dark mode should be available on all pages and can be set on the back-end.

Filter Options

The project owner liked this addition by the past designer, and he recently suggested adding a button for the types of tones. It is a great idea, but I’m unfamiliar with how scientists record and keep these data. I had to ask if all sounds have tags or categories linked to them to analyze better how to design the filters effectively.

Graphs

The project owner asked if the visualization plays when the play icon/button is selected or if it’s static like a “waveform” (amplitude vs. time graph). I  wanted to reach out to the developers about technical limitations before finalizing the design.

Call Catalog

Left: Old Version Right: Current Version

Work in Progress...

You can listen to Orcas and other sea creatures live or recorded!