UX is a key differentiator in the crowded headphones market, and having a companion app that allows the customer to engage with additional features and tweak settings until their heart's content contributes to a positive experience across physical and digital ends of the product. With over 20k downloads thus far on iOS and Android, the app also creates a resource for B&W customers to easily update their product software or reach customer service if something should go awry.
My Role: I was the only designer on this project, so I owned UX, UI, and visual design. After my designs were delivered to the developers I continued to project manage the development.
The PUI of the headphones is efficient but ultimately limited. A companion app allowed us to create a software interface for settings and features that are difficult or impossible for the user to access through the PUI. Customer-requested features like a quick start guide and a set up assistance flow have been balanced with aspects important to the business like analytics, registration, and OTA product updates.
Although the app is not imperative for enjoyment of the products, it is an important platform and first step in the continued development of competitive features like voice assistants, home automation, or even augmented reality.
Wireframes And So Many Iterations
I was fortunate to work closely with B&W engineers and the contract developers from the beginning stages of the project. I started with just rough ideas, sketches, and stories and the team was able to give me feedback on feasibility almost in realtime. I was able to move quickly into building frames and flows which I presented at a workshop with our software team in Taipei. From there it was all about finding the right UI that balanced the look of a premium brand with customer needs and product requirements.
I arrived at finished design specs through many, many cycles of revision. In the end, there were a few standout requirements and constraints that moved the design in the direction it took.
Quick start guide with just enough information: B&W customers tend to be older with little experience with Bluetooth accessories. Surfacing the most important product info and guiding the user through the process of set-up was an effective way to alleviate this pain point.
Optimized for one-handed navigation: The app is almost entirely made up of sheets and swipe gestures to keep on-the-go users comfortable and in easy reach of the main functions.
Futureproof architecture: The simplicity of the UI came from a need to carefully plan the density of information and controls in an app that will eventually need to support more complex features.
Postures like a luxury brand: It’s white, it’s clean, it’s Avenir, it’s subtle shadows. Fits well with the utilitarian B&W brand.
Out of Box Experience / Quick Start Guide
The overall UX paradigm of the app, a confluence of hardware and software, is best illustrated by the OOBE flow. Users in possession of headphones can “add” their products to the main dashboard which triggers the app to scan the vicinity and return Bowers products available to be added. The user is walked through a series of product-specific set up screens before being automatically connected to their headphones and continuing into the main settings screens of the app.
Reusing 3D renderings from packaging and adding a few bytes representing CMF to the product’s Bluetooth advertisement packet, we were able to allow users a simple way to recognize the exact color and model of their headphones in the UI. A friendly name on the bottom sheet further assists users to quickly locate and connect their headphones even with multiple products added to their dashboard. The overflow menu in the upper left contains links to support pages and other global app settings, while the product-specific settings are revealed by tapping the image or swiping up the bottom sheet.
With the sheet pulled up, users are able to access noise cancellation settings, manage connections, listen to soundscapes, and adjust various other settings via horizontal swiping pagination.
Aside from the additional granular control afforded by the ambient pass-through slider, this interface mirrors the design of the PUI. I found that some users just prefer to use a visual interface, but I think the real value of this screen is to educate the user about the different ANC modes while providing a space for the “AUTO” mode to grow in complexity as the feature is developed further.
Functioning as a sort of virtual patchbay, the connections screen gives users the ability to quickly manage the source devices connected to their headphones. With firmware that supports two simultaneous connections and a history list of previously paired devices, being able to disconnect your tablet and swap it with your TV all while sitting down is a great feeling.
Made up of six looping recordings of nature, soundscapes is a collection of atmospheric noise designed for relaxation and focus. I was looking for a low-complexity approach to experimenting with content delivery while giving our products a competitive advantage over something like Bose’s Sleepbuds. Because I was able to source and produce all the content myself, we were able to set up a content platform MVP with a lot of potential for monetization at virtually no additional cost.
Thanks to Northern California’s rich biophony, the right field recording equipment and a few car trips was all I needed to gather the content for the soundscapes feature.
I'm proud of the work, and I think this is a solid companion app. That being said, it's just a companion app and not necessarily a make-or-break for a customer who simply pairs their headphones and never looks back. At 20k users, there's still a decent number of people enjoying the app, but the aim moving forward is to either justify the app's existence with more robust feature offerings or see if customers can live without it.