Bose
PinPoint

PinPoint Noise Filter

PinPoint is a desktop app for macOS and Windows that reduces distracting sounds from both ends of a conference call using Machine Learning.

PinPoint was Bose's first foray into subscription software that allowed users with qualified Bose devices to get PinPoint as a free upgrade.

The Challenge

How can we help Bose customers hear and speak with confidence on calls even if they don't have Bose's latest microphone array? 

Can we reliably deliver the benefits of noise filtering technology as a software that is easy to use and provides meaningful value to customers?

Outcome

Our small but ambitious team successfully launched and shipped multiple releases of Bose PinPoint starting in Dec 2020 to a select group of users and laying the foundation for future subscription business for Bose. 

From it's first release in 2020, Bose PinPoint has helped filter out noise over 18k minutes. 
Further, PinPoint also launched as an extension on the Agora marketplace which is one of the leading video, voice and live interactive streaming platform.

"I love the platform and the experience, it definitely makes a noticeable difference" - Jason

"Either way you guys are awesome! With two little kids at home, PinPoint changed the game for me during calls" - Mike
invite-update

Happiness seeing the email that the first batch of invites were out 🥳

My Role

I was the lead designer for the end to end desktop and web app experience. This entailed a close collaboration with platform specific engineers (macOS, Windows and Web) as well as stakeholders from Business, Product, Marketing, Machine Learning and a wonderful User Researcher. We were a very small team that set out on an ambitious timeline to ship multiple releases of PinPoint to customers.

Designing Desktop Apps

We first started designing our desktop apps since they were the most critical layer of user interaction and getting the ML model integrated on the app was a core piece of functionality that the project depended on.

 

desktop-app-anatomy

PinPoint UI anatomy

I started off on the wrong foot with the design iteration trying to see if I could come up with a “smart way” to provide an option to switch the input audio source.

Further, this design iteration enforced requiring a smaller and precise tap area for the primary function of the app which was to reduce noise. There was more area devoted to finding other devices. And thus it wasn’t meeting our desired user goals which was to make it as obvious and simple as possible to reduce noise.

initial-design

I was able to catch these concerns in my own design and we switched towards making the primary action feel stand on a surface on the card so that it’s visual prominence was higher. For the source switching, I recommended that we adopt the hybrid approach of using the current audio source of the system and providing a way for the user to select another one with a dropdown in case it was incorrectly set up. 

recommended-design

Recommended Design iteration

Next up, we knew one of the core pieces of functionality was going to be communicating free minutes left for users who did not have a registered Bose product.

I recommended we stick to a subdued visual banner and reserve visual prominence only for important system updates or once free minutes had expired.

I attempted several iterations for communicating messages in the banner. Getting the language right here was key. Here is where the final versions of banner messages landed -

banners

Different banner messages in context

Alpha User Testing

With the core pieces of the desktop app in place, it was time to conduct user testing. We got a working build of the PinPoint Mac app to test with people using a variety of communication tools such as Teams / Zoom / Slack / WebEx to test the app experience and perceived quality of noise reduction.

I worked with our User Researcher to plan and design a set of questions that required users to be on a call and use the app to perform a series of tasks and play background noises that we had provided.

The first batch of user testing revealed that while the app was effective at reducing certain noises, it consumed a lot of memory.

There was also praise for keeping the app User Interface simple and light but they wanted to see the status of whether the app was accessing their mic and filtering noise in the background.

Further, they wished there was a way for them to attach audio files where PinPoint wasn’t performing well and send that feedback through the app itself.

Showcasing state

Designing icons to showcase state of the application in the menu bar required some considerations to various states and conditions in the app. Particularly, users were interested in knowing if something was wrong with their audio settings and if the noise filtering was ON.

This is one of those rare cases where you can break the guidelines suggested by the platforms because of the context. While Apple’s guidelines recommend not to use color, the AirPlay icon in the menubar changes color to showcase the current screen is being airplay-ed to another source.

Similarly, for PinPoint, I suggested we showcase a change in color to the menu bar icon to showcase explicitly when any kind of noise filtering was ON. Looking at all the different cases to handle, here’s what we had for our menu bar icons.

System-Tray-Icons

System tray icons showcasing app's state

Takeaways

  • Guidelines are meant to be guardrails. If you have a solid rationale to veer away from the suggested guidelines and it communicates meaning to the user, it is okay to do so.

  • Providing any form of auto or magical switching should always come with a degree of user control.

  • Always take into account the scale at which users will see and use your application and the platform they use it on.

Designing the web app and Support pages

While I was wrapping up design work on the desktop front, our web engineer was setting up the back end services and API so we could build a UI layer on top that would provide users with the ability to upgrade to a Premium Plan and avail the upgrade for free should they have a registered Bose device on their account.

The goal was to showcase a simple dashboard which showed their current status and provided ways to download the app and see the Support Guide.

Web App Customer Experience

web-app-conditions

Once I had a solid idea for the what the overall customer experience would be, I recommended we use 2 kinds of page templates - one for the overall dashboard / billing pages and another page template for the Support page that would have links to different sections.

template-1
template-2

Here’s what the final designs along with content looked like. The dashboard provides the important information at a glance and includes a way to check for registered devices.

web-app-1
web-app-2

And the Support content pages with clear links at the side to quickly navigate what you are looking for. 

support-page

âš  Disclaimer - All the views presented here represent my own viewpoint and not necessarily of Bose.

Thank you for visiting this corner of the internet. 

utsav0909@gmail.com