Design

Sounds of Aulus

An illustrated, interactive sound map built from field recordings made during an artist residency in Aulus-les-Bains, France — conceived, illustrated, designed, and hand-coded as a solo project.

Role Solo — Concept, Illustration, Design, Code
Timeline Jan – May 2025
Tools HTML, CSS, JavaScript, Procreate, Figma
Type Interactive Audio Experience
Visit the Live Site →

Overview

Sounds from Aulus is an illustrated, interactive sound map built from field recordings I made during my artist residency at Camp.fr in Aulus-les-Bains, a small mountain town in southern France. I wanted to capture what it felt like to be in that place and share it the way an audio postcard might, inviting visitors to explore locations on a hand-drawn map and listen to what those places actually sounded like. Clicking on a location opens an audio player alongside context about how and where the recording was made.


Process

I started with a design system, developing a color palette, choosing a typeface (Neucha), and creating a set of hand-illustrated location drawings for the map, including the thermal spa cave, camp residence, church, and smaller cave. I then built wireframes in Figma before moving into the full HTML, CSS, and JavaScript build from scratch.

The interactive map uses a panzoom library for zooming and panning, and JavaScript event listeners for the audio popups. I applied three UX principles throughout the design:

  • Jakob's Law Used familiar map gestures like pinch, pan, and zoom so the experience felt intuitive from the first interaction.
  • Miller's Law Limited clickable locations to four, well within the recommended range for short-term retention, keeping the experience focused rather than overwhelming.
  • Aesthetic-Usability Effect Developed a cohesive, playful visual system to reduce friction and make the experience feel considered and inviting before the user even presses play.

After building the first version I ran remote usability testing with two users, one on desktop and one on mobile. The desktop user had click confusion, not realizing the illustrated buildings were clickable rather than the signboards. The mobile user accidentally dragged the map off screen and could not get back. I fixed both issues, expanding click target areas, repositioning the mobile popup, and adding a reset button.

Sounds of Aulus map illustration Sounds of Aulus interface Sounds of Aulus design system

Reflection

This was the first project I built entirely from scratch, from concept to code. I learned that designing for sound is different from designing for images or text. The experience has to earn the listener's attention before they will press play, and everything around the audio has to feel considered.

I also learned that usability testing always surfaces things you did not anticipate. Both of my testers found issues I had not considered at all, and fixing them made the project significantly better.

← Boston Open Mic Next: Spotify →