While in Berlin in 2019, my associates and I were approached by a new start-up that was in the early stages of developing a cutting-edge product and looking for help bringing it to market. Their product— Noise-Cancelation Headphones using Augmented-Audio technology. Unlike most headphones, these earbuds would remove all external sound and then filter in any sounds you want to hear. You could choose to phase out all traffic noise near your office and only hear the voices of your coworkers (or do the opposite if you prefer car horns to the voices of your colleagues).
The folks at Hearable Labs were already far along in completing the design and functionality of the headphones, and they turned to us to assist with two other crucial goals of theirs:
The finished product would have the following features:
Our clients were interested in targeting users with a need to drown out noises in the workplace. We surveyed adults in the workforce spanning several industries. When it became evident that office workers had a higher level of issues with concentration due to noise, we conducted personal interviews with volunteers around office complexes in Downtown Berlin. Here were some of our findings:
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.
We knew we had an issue with this at hand, and we were able to get a better idea of who our target users might be.
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”.
We considered some undesirable user journeys which our persona might have faced and compiled an empathy map to better understand her desires and experiences.
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.
Here you can see some rough sketches of our low-fidelity prototype and many other sketches and diagrams from our design process.
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. Each earbud was to include 5 microphones that could pinpoint audio in several directions. So, in an effort to keep our design finger-friendly we decided to use a layout that resembled a decagon, with several clickable/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 that 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).
We began designing the hi-fidelity prototype. 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 a user's 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.
We preference tested a few concepts with 6 participants and came up with an option based on feedback. 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. The results can be seen in the video below.
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 friends, strategically placed around the conference hall, to act as our “office noise”—and to let us mute with a magical 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.
Hearable Labs was pleased with our design proposal and kept in touch long into their product development phase. Unfortunately, the earbuds either never took off or the technology was acquired by another company—so we may never see if our design concept made it past the prototype phase. However, we enjoyed the opportunity to focus our skills on UI for physical products—a welcome change from our usual web design. Since moving back to The States I've kept my eyes open (and my ears too) to see if these earbuds ever hit the markets in Germany. I know I could use a pair!
"I continue to be grateful for and impressed by your work." - Pauline O'Callaghan - Founder & CEO, Hearable Labs
