The Ocean Soundscape Website & Installation
Overview
This project required us to respond to a current world issue, and the solution had to adapt to 2 different screen sizes. I chose standard website dimensions and an installation wall that was 20ft by 5ft (intended to be exhibited in an aquarium). For both experiences, I wanted users to be able to learn about the ocean soundscape, how humans are impacting it, and what we can do about it.
The website is more informational and includes a feature that allows users to see how loud different sound sources are in the ocean compared to each other. My goal for the website was for people to be able to navigate and choose the information they wanted to learn more about.
The installation is an interactive screen that allows people of all ages to simulate an ocean and its sound sources. By releasing different sound sources into the "ocean," users can see how each one affects each other, and which potential solutions have been proven useful.
Client: Design Challenge
Length: 4 weeks
Completed in: Spring 2023
Role: End-to-end design including research, content organization, storyboarding, iteration, wireframing, prototyping, user testing, and final presentation.
The Challenge
Climate change has typically been an issue that people push aside because it is very complicated and overwhelming to address. Although one website or installation can't tackle every climate issue, the goal for my project is to show people that ocean sound pollution is something we can tackle now, and to spread awareness about the solutions that are currently effective and available.
The 2 breakpoints should work together to achieve this goal, with consideration to both the context of use as well as the expectations that users will have when interacting with each screen. Websites about climate change are typically information heavy, so the challenge for this project would be to make learning about this issue more fun and effortless. And for the installation, people of all different ages and abilities will have access, so making sure the interface is accessible will be very important.
Design Process
Research: I looked at various different websites and articles for content, information, and inspiration. These included:
-
Sound libraries with both human made and animal made ocean noises
-
Reports that compare how sound travels in versus outside of water
-
Explanations of the harmful effects that sound pollution has on different ocean animals
-
Websites that list current solutions for sound pollution and how affective they are
-
Interactive games that make climate change easier to learn about
-
Large screen installations at museums and other public spaces
Content Organization:
Wireframes:
Major Considerations / Design Pivots:
-
My initial idea was to prototype a website for mobile and desktop views. However, after consulting with other designers, I chose to design installation because it aligned better with the overall goal of the project: to make learning about ocean sound pollution more accessible and easy to understand.
-
The Website underwent a lot of design changes, especially on the "Overview" and "Experience the Noise" pages. I iterated a lot more on these pages to increase the interactivity and use the space more effectively. Below is the final prototype of both screens.
-
Instead of translating all the information from the website onto a larger screen, I decided to take inspiration from gaming formats with the goal of making learning interactive and fun for people of all ages. With this new prototype, multiple users can use the installation at the same time, and every action by one user can effect the entire screen.
Website Final Prototype
Reflection
Through this project, I learned a lot about how designers can use different screen sizes to customize an experience. The added challenge of making a single concept successful across 2 breakpoints showed me how to prioritize and use each screen size to my advantage. The installation screen was the largest format I have ever designed for, and it was really interesting to see all of the different considerations I had to work through to get to the final product. In addition, designing the website also allowed me to practice designing a user experience that made something that seemed purely informational and straightforward, into a playful and interactive solution.