Through
Your
Ears

Through Your Ears responsive website animation design

Through Your Ears is a project celebrating nostalgic memories of Qatar, in a form of tangible sound waves. The memories are captured by sound recordings from different places, and of people of diverse ethnicities and languages in Qatar. For each memory, there is a unique physical object with a barcode, which takes the user to a virtual portal that stores the sound memories.

Project type

Web Development

Tech stack

React.js, Mapbox, p5.js, DatoCMS, FaunaDB, Netlify

Link
http://throughyourears.com

1 — Vision

The client needed a website to create an immersive, visual and sonic experience to complement the tangible interaction with the physical object. She also wanted it to show their “journeys” as the Qatar sounds travel around the world – marking where they were recorded and where they will be listened to via the website.

2 — Design

I created distinctive audio-based animations, unique to each recording, which move with the sound wave. This immerses the user in an audio-visual digital experience. To illustrate the sound journeys I used a Mapbox integration for an interactive map marking recording locations as well as where they have been played from.

Through Your Ears responsive mapbox integration

3 — Implementation

To achieve custom functionality and interactions, I created a React.js website, which feels like a mobile application as it will be almost exclusively accessed via scanning the barcodes on mobile phones. The app saves user’s location when they access the sound page and adds a pin to the journey of Doha sounds on the map.