Songs of the Sea

An educational game-design aimed to teach students about how sound affects ocean ecosystems.

Role

UI/UX Designer

UX Researcher

Digital Artist

Group Members

Srishty Bhavsar

Beatrice Maggipinto

Jamie Espinosa

Alexander Wang

Harvey Zheng

Tools

Figma

Photoshop

Procreate

Unity

Duration

14 weeks

Class

Designing Educational Games - New York University

Problem

Most people are uneducated about the beneficial and harmful, environmental factors that sound has on ocean ecosystems.

How Might We?

How might we design an educational game that suggests how the varying sounds of different ocean animals can create unhealthy imbalances and healthy balances within their environment?

Introduction

Learning Goal

By combining the two topics of music theory and ocean biology, we can teach players about the health of symbiotic relationships in an ocean ecosystem, through frequencies and sound qualities.

Target Audience

By combining the two topics of music theory and ocean biology, we can teach players about the health of symbiotic relationships in an ocean ecosystem, through frequencies and sound qualities.

Young adults with an interest in biology or ecology

Young adults with an interest or understanding of music theory.

Young adults who like to play games.

Research

Environmental and Sonic Database

The assistance of Marine Biologist, Tim Lamont, linked us to a database of marine animal sounds. Focusing on the coral reef, we created our own database of sounds of the creatures necessary for an envisioned scene.

While these sounds don’t have resemblance to the real natural sounds of the animals, we used the categorization of 2 parameters: frequency (high, mid, low) and quality (harmony, melody, rhythm, and bass).

Competitor Analysis

Our team was still unclear how we would design a game surrounding the information in our database. Within a competitor analysis, our team was able to analyze the challenges found within other ocean ecosystem and music theory games.

Lo-Fidelity Ideation

Paper Lo-Fidelity Prototype

Through an initial paper prototype, we speculated and tested how our game could intuitively organize the key sonic elements of rhythm, melody, harmony, and bass. In this prototype, users have the ability to drag and drop animals into the ecosystem

Prototype by Jamie Espinosa

Insights

Insight #1

If the purpose of this game is to be therapeutic and educational, a time constraint on picking the correct creatures may create tension, stress, and make the game incredibly difficult overall.

Insight #2

If we want users to empathize with the ocean ecosystem, annotations which depict feelings of “danger” or “loneliness” within the creature may be a useful indicator of emotion.

Insight #3

Adding human pollution to the game, is a very good idea for broader learning concepts about ecosystem health. However, it would make out game more complex and not fit within the scope of our projects time limit.

Insight #4

There is a lack of evaluation in the game. Adding a quiz after each level to ask questions about the learning content/goals would help the users recall and store the information better.

Design

Digital Art & User Interface

We wanted the overall experience of the game to feel relaxing, pleasant and positive. We thus decided on a colorful and playful art direction. Our color palette is cohesive and modern. Our illustration style looks like a hybrid of hand-drawn and digital elements. All artwork was drawn on procreate and illustrator into individual asset layers

Prototype Generation

Using a combination of illustrator and Figma, we designed various prototypes. We initially ideated the idea of having the four sound quality variables: harmony, bass, melody and rhythm, be separated into four different panels. When these panels were clicked on, players could see which animals were associated with the sound quality. When these animals were dragged into the scene, they were accompanied with a unique sound. As a result, the respective bubble would begin to fill. Players would need to try and get all bubbles to equilibrium.

While we liked the drag-and-drop mechanism of the animals into the scene, we found the game to be extremely simple as players already knew what animals were associated with their sound quality by uncollapsing their panels.

We finally decided on a design layout that would keep the sound quality bubbles horizontally at the bottom of the screen. On the right side of the screen we would display a bank of randomly assorted animals. This ensured that players would have some level of challenge in matching the animals to their sound quality. In addition, we incorporated a level progress bar that would inform users how close they were to completing the level. The incorporation of the progress bar was speculative. As a team we decided it make sense to only design one level of medium challenge.

High Fidelity Prototype and Tutorial

As we approached our final play testing and design deadline, we needed to create a functional high fidelity prototype on Figma that we could use to gather play testing data. This was a very important stage in the project because it was the last instance to redesign before creating our final game design on Unity. As we completed the design of the prototype, we thought it would be helpful to screen record ourselves using it and utilize it as a tutorial to show before players interact with the game.

Within our high fidelity Figma prototype, we incorporated annotations which indicated the emotions of the animals in the scene. We additionally decided we would stick to the four sound frequencies of low, mid, high, and bass. These sound frequencies appeared to be the easiest for users to match animals to in comparison to more complex sound qualities of rhythm, harmony, and melody.

Why did we need a tutorial?

At first glance, players would not know how to play the game! Because our game is primarily visual, we decided a video tutorial would be more beneficial to players than instructions in understanding how the dragging and dropping of animals affects the balance of sound frequencies. The one major flaw of our tutorial is that we could not incorporate audio.

User Testing and Evaluation

User Journey Map

A user journey map was derived through a contextual inquiry testing of our prototypes. At each phase of the game, we briefly asked users how they felt without interrupting their process. The mapping of the users feelings at each stage, models a “curve,” indicating the influxes in how users may feel throughout the prototyped game with respect to the game mechanics and interactions. Based on this data, we were able to design a user storyboard which would inform the key user flow of our final prototype.

Storyboarding

Though our game lacks narrative, these emotions and their influxes from start to finish shown in the user journey map tell us a story about certain interactions. As a result we created a matching user storyboard graphic which essentially visualizes the screen of the user throughout the game.

Final Playtesting Design in Unity

On the final day of play testing our game, we prepared our final design! Because Figma lacks the interactivity and freedom needed to simulate a game, the developer on our team, Alexander Wang was able to utilize our design assets and replicate the game in unity as accurate as possible.

Unmute the video to hear the sounds!

Reflection

We were pleased that the audience liked the aesthetics of the game and found it a soothing and pleasant experience. I personally was very proud of the level of work I had put in because I had never done a game design before this, and using my user experience skills to incorporate educational principles into a creative project was very challenging and impactful on my problem solving skills. Though I think our game lacks the full educational goals our team desired to achieve, I believe there is a huge scope for re-thinking, re-design, and re-development to teach players about how sound pollution affects ocean ecosystems. Finally, I was am very proud that my visual design and digital art skills got to be included within this project. It was very satisfying to see the ocean scene come alive.

Final Play Testing Insights

Insight #1

There’s a lot of knowledge about seascapes that we took for granted to be understood

Insight #2

Users appreciated the game tutorial video because it helped them get accustomed to recognizing the frequencies of the animals in the ecosystem.

Insight #3

Users found the playable level in the final digital prototype difficult to understand and pass.

Insight #4

Users seemed to be surprised to learn that reefs are noisy places, but they found it hard to connect our musical sounds to the real natural sounds.

Insight #5

Users were surprised to learn that coral reefs are noisy places.

Insight #6

Users found it hard to connect the musical sounds in the games to the real natural sounds of the animals.

Key technical issues with the digital prototype:

A bug where the level always said 80%
Lack of feedback on choices
Missing features that were depicted in the tutorial such as annotations.

Key issues with the game narrative and logic:

It is possible that players will have a hard time acquiring and storing memory about animal frequencies based on this game. Players may end up relying on a mix and match logic to win the game.
The game assumes a very complex knowledge of sound and music theory. It's possible that this game over-simplifies a complex topic in an attempt to make it fun interactive, and aesthetic for players.

If I got to continue working on this project my next steps would be:

Re-evaluate different game mechanics past drag and drop that could explain the frequencies to players
Deliver feedback after each level to summarize what was taught
Work on building easier levels first, that slowly train users to pick up knowledge about animal sound frequencies
User test different sounds
User test novices and experts in music theory and oceanography
Design for more ecosystems than just a coral reef