Interaction Design: Ambient Soundscapes App
The Concept
As an occasional Dungeons & Dragons DM, I had an idea for a tool to set the scene using ambient audio. I wanted a mobile app that could quickly switch between different types of environments and easily turn on and off looping background sounds. I knew the technical requirements were relatively simple, so I felt like this would be a good opportunity to design an interface and prototype using animation.
Check out the fully interactive prototype here!
https://share.protopie.io/KqRaXMT5cMC
UX Design
Competitive Research
Existing apps were either awkward to use, or too limited in functionality.
I discovered a number of apps and websites that performed a similar function, but found them each lacking in some way. Some were simple to use, but didn’t have the customization I wanted. Others had a lot of controls but were awkward to use. So I knew there was a usability sweet spot I could aim for.
Initial sketch of the screen layout, with ideas on how different button states should look.
Wireframes
I sketched out a wireframe version of my design on paper, and decided that the user flow could be very simple. Each group of sounds would form a “scene” corresponding to a particular type of environment, with users able to swipe from one scene to the next.
Wireframe screen layout, including menu and mute buttons I eventually decided to remove.
Lo-Fi Screens
Using Sketch, I created a sample low fidelity screen, first with placeholder boxes, then with icons to represent individual sounds.
UI Design
Hi-Fi Screens
Continuing in Sketch, I put together a high fidelity screen design, refining the look of the icons and adding a background image to suggest the location for that particular screen, and with a photographic style to make the simple outlines of the icons stand out. I experimented with different visual styles of buttons and settled on simple outline shapes for maximum contrast with the background.
Early version with only the icons for buttons.
The circles around each icon better represented the idea of interactive buttons, and were easier to indicate an active state.
Prototyping
Up to now I’ve used inVision to create interactive prototypes, but for this project I wanted to model the animation of the interface. I looked into Principle, inVision Studio, and Framer Studio, but finally settled on ProtoPie as the prototype tool with the right feature set. It had pretty robust animation controls, and most importantly, it could play audio files.
The button animation in action.
Animation
I found it pretty easy to get up and running with ProtoPie, importing my screen designs directly from Sketch, defining the screen are to be able to scroll horizontally with a swipe, and animating the position and opacity of the buttons to correspond with the position of the scrolling background.
The ProtoPie interface with my two demo screens. The user can swipe between them, with corresponding buttons animated onto the screen.
The button active state changes in action.
audio setup
I collected audio files from Creative Commons resources like freesound.org, choosing a sound file for each button in the app. In my research, I had seen apps that allowed complicated volume mixing for each individual sound, or others with premixed audio and no customizing possible. My solution was to allow simple audio mixing with a tap of the button: one tap to turn on the sound at full volume and keep it looping, a second tap to turn it down to low volume, and another tap to turn it off. After trying a few options on how to indicate the different button states, I figured out how to use a mask to animate the fill of the button with each tap, which provided a clear visual metaphor for the button’s operation.
volume controls
I ran into a problem when I discovered that ProtoPie had no ability to control the volume of audio files. All it’s able to do is play and pause. So to simulate volume control in the prototype, I created two versions of each audio file, one loud and one quiet. Tapping a button in the app starts the loud version playing, tapping it again stops it and starts the quiet version, and tapping it again stops the quiet version.
Another problem I noticed was that the audio files didn’t loop perfectly - there is a short gap when the file starts over. This seems to be a limitation of ProtoPie. In a fully developed app, this shouldn’t be a problem, and I decided it was good enough for a proof of concept prototype.
Testing
Since ProtoPie offers a mobile app which can run its prototypes, I was able to load my fully working prototype onto an iPhone and test it with users. I was happy to see that users understood how to use app immediately, and enjoyed discovering how it worked and experimenting with different sound combinations. I noticed that they would sometimes try to swipe between screens but had to try a few times. For it to work, users needed to swipe in the parts of the screen in between the buttons, while swiping across the buttons did nothing. This felt quite natural to me during my own testing, but I discovered it was counter-intuitive to other users. So I made adjustments to the prototype’s interaction layers and figured out how to let users swipe anywhere on the screen, while keeping the buttons working properly.
Future Considerations
I’m really happy with how much interactive functionality I was able to build into my prototype using ProtoPie, and how well it worked when I tested it with users. For my next steps I want to build more screens with new collections of audio. For example, based on tester suggestions I’ll create a “fan sounds & white noise” screen for helping with sleep. I’d also like to implement some kind of timer, to automatically stop playing all audio after a set period of time.
And of course I ultimately want to implement my design into an actual app that can run on iOS or Android, whether as a native app using Swift or a web app using JavaScript and React.