Presenting a “Sound” Design—Rapidly prototyping UI controls for noise-canceling headphones
My associates and I were approached by a new start-up here in Berlin and presented with the opportunity to help them design a prototype for an app accompanying their physical product. Happily, we accepted and began working. This is an account of our collaboration with a Berlin-based start-up focused on the latest in audio tech.
Their product— Noise-Cancellation Headphones using Augmented-Audio technology.
Some key features of the headphones:
~ Able to pinpoint a variety of individual and groups of sounds
~ Can control the volume of each group of sounds individually
~ Multiple microphones allow earbuds to focus directionally
THE PROBLEM
The technology exists and the product was being developed, but what was missing was a defined target user and a user-centered app to accompany the earbuds.
THE GOAL
Our goal was to define our user and then to create an easy to use application which would provide them the ability to control their earbuds and decide what they hear in their auditory environment.
TEAM AND ROLES
This project was completed with my classmates Sarah Rae, Mackenzie Fly, and Claire Alexopoulou. Claire assisted us with the UX Research and Ideation and the rest of us worked on the project from Research all the way through to Prototype Design and Pitch.
DESIGN PROCESS
Let’s begin….
RESEARCHING
We conducted our research with qualitative and quantitative methods, by putting together a survey, and also doing personal interviews. Here were some of our findings:
- 96% of respondents were disturbed by noise at their workplace
- When asked which noise was most distracting at work 90% of respondents said that it was people talking
When the workplace is too noisy, people would often try to block out the sound by blasting loud music through their headphones, which seems to only exacerbate their distraction and can contribute to future hearing loss.
Whoa!
We knew we had an issue with this at hand, and were able to get a better idea of who our target users might be.
EMPATHIZING
From there, we did an affinity diagram to map out our thoughts. We laid out all concerns and feedback from our interviews and surveys and organized similar topics in groups together so that we could get a better idea of the biggest pain-points and focus areas for our users. We then developed How-Might-We statements for each group and dot-voted on the statement we felt would most benefit our users.
With our goals more clear we were able to develop our user persona. We defined our user as a young working professional named Laura. She works in a very loud (and at times distracting) office. We used our persona’s pain points to form an ideal “Job-To-Be-Done”.
“When I’m in a noisy space, I want to be able to control what I hear, so that I can concentrate and be more productive.”
We considered some undesirable user journeys which our persona might have faced and compiled an empathy map to better understand her desires and experiences.
IDEATING
With our JTBD at hand and ease-of-use in mind, we began our ideation process. Deciding quickly that we would want to keep the design simple and easy to use with just a few clicks. If noise is something that troubles you, you should be able to reduce it within seconds. We each created a list of features and organized the alike ones together. From there we voted on which features would be MVP and went to work on implementing those features into the design.
We started with a site map. Our clients asked us to focus on sound volume controls and audio direction selection alone and not to spend any time on a user page, so we left that out for our prototype.
Unlike other projects that we had worked on, this site map was simple. We only needed to design two pages with just a handful of features in them. The trick was how to design them to be easy and intuitive.
Below you can see some rough sketches of our low-fidelity prototype and many other sketches and diagrams from our design process.
PROTOTYPING
With only one week to work on this project iteration, sketching (marker) quickly gave way to Sketching (app) and we were busy designing our mid-fidelity mock-ups. We found some simple icons and UI-kit form elements to help us get a better idea of how our sound control design will be.
The audio-direction control page required a bit more thought. While we know that the headphones have multiple microphones that can pinpoint audio in several directions from each ear, they kept silent on just how many were included. So, keeping our design ‘finger-friendly’ we decided to keep the directions to a maximum of five on each side. What resulted was a decagon, with several clickable or slidable sections. Using a cartoon we found online, a vectorized head was created and placed in the center of our control page.
We decided that we wanted the head to face the direction that the user would be facing when they held their phone in their hands, a move which later made many users scratch their heads. Although we have not had a chance to test it further, we still feel it is a wise decision. As the cartoon itself was a hot topic later we are not sure if any user angst is caused by the direction of the head (seemingly upside down) or the artistic direction of the head (seemingly creepy and oddly lifelike).
When our mid-fidelity was complete… we tested.
We redesigned our creepy head… then we tested again.
Then we began designing the hi-fidelity. Still being uncertain about the exact capabilities of the augmented-audio we decided to simplify the control design for the prototype to only show four audio group options. We opted for a light colored minimal style which was intended to draw the users eye to the audio adjust sliders, which were the darker elements on the screen.
The design of the sound steering page was a bit more tricky. We found several conflicts on how to tackle the layout and the design of the head shape. We reverted back to paper for a round of Crazy-8’s and threw out some of the most ridiculous ideas you could imagine. I’m talking decapitated heads suspended in spider webs… it really got quite silly. But then we cracked down and made a few serious attempts at a final design.
ANIMATING
We tested our concepts with a few different colleagues and came up with an option that we all agreed was best. The next step was to make the prototype clickable and record an animated demonstration of it in use. To do this, Sarah and I used InVision Studio to animate our desired user flow.
PRESENTING
With the prototype animations complete, our final steps were to organize our data and detail our design process into a short pitch to present to our clients. With no actual audio buds to help with the demonstration, we relied on a few strategically placed friends to act as our “office noise” and to let us turn them down with a touch of a button. It was a lot of fun! I can’t recreate the skit here but I can give you a nice view of our app in action below.
The results of our project were well received by our clients and even by our peers, as we were asked to present this UI design at the Ironhack hackathon week. The pitch went off without a hitch, with our clients in the audience to support us, and thanks to our presentation and design we voted as finalists in the Hackathon and each won a prize of a year-long subscription to Adobe Creative Cloud. For a designer, this is like striking RGB(255,215,0)!
FOLLOWING UP
Future steps to the design would be to focus on aspects other than just audio control. Some future features include Bluetooth connectivity, battery monitoring, and geo-location-based presets.
We have been asked by our clients to continue our research and UI design conceptualization with them as they move forward with their product design. I enjoy the challenges that this project brought and look forward to having an update on this post in the future.
