BOSE CONNECT
Developing gesture-based volume control for Bose Frames.
ROLE
Lead Experience Designer
TIMEFRAME
2019-2020
TEAM
Cross functional team of six mobile developers, project manager, and QA.
OVERVIEW & PROCESS
Bose Connect is a companion app to Bose’s suite of wireless headphone speakers. It allows you to set up and personalize your product, as well as manage your paired devices, control your music, get over-the-air firmware updates, etc.
OUTCOMES
I researched, designed, and oversaw implementation of ‘Press N’ Turn,’ a gestural volume adjustment feature for audio sunglasses in the Connect app, as well as created detailed accessibility guidelines for Dynamic Type and Dark Mode.
BACKGROUND
The Bose team developed firmware for a gestural volume-adjustment feature called Press N’ Turn for the Frames audio sunglasses. My team was tasked with implementing the feature in the Connect app.
The first step of my process to was familiarize myself with the product and understand the mechanics of the Press N’ Turn feature.
Press N’ Turn allows wearers to control the volume using head gestures. By holding the single button on the Frames while turning their head left or right, wearers can adjust volume like a dial. Once the desired volume level is achieved, wearers set the volume by releasing the button.
I worked with the Frames team to lay out steps to successfully implement the feature in the app:
Conduct user research to understand the ideal implementation of Press N’ Turn into the product tour and onboarding of the Connect app.
Conduct user research to understand how feasibly a user would grasp how to use Press N’ Turn.
Create a promotional experience within the Connect app to notify Frames owners about Press N’ Turn, as it is disabled by default.
Work with the mobile development team and QA to ensure that firmware and hardware requirements are met in the Connect app.
THE PRODUCT TOUR
The product tour provides a centralized area for Connect app users to learn more about the functionality of their device and how to use product-specific features.
Product Visual
There were a number of considerations for the Press N’ Turn visual in the product tour including point of view of the Frames, speed of the animation, flow between the screens in the tour, app size, and render style.
Associated Copy
The copy for the product tours is almost always viewed secondary to the visual, so the copy needed to be clear and concise, but still descriptive enough to convey the directions for how to use the feature.
Product Tour Ideation
USER RESEARCH
I worked with a UX Researcher to conduct a usability study, with the primary goal of identifying the rate at which a wearer learned to use the Press N’ Turn feature given the copy options.
Outcomes and Learnings
All 21 participants were able to learn how to use the feature within a reasonable amount of time, regardless of the tutorial or assets presented to them or their level of experience with the Frames button control.
18 out of 21 (86%) participants immediately understood how to use the feature after reading the copy and 3 of 21 (14%) participants felt unclear after reading the copy, but managed to correctly use the feature after a few tries.
User Research Copy Options 1 & 2
FINAL IMPLEMENTATION
After going through the results of the usability study and iterating on the copy and visuals, I created the final screen for the Press N’ Turn feature in the Frames product tour.
Though creating the product tour screen was my main task, I proposed incorporating marketing screens to increase the likelihood of Press N’ Turn’s adoption, since the feature is disabled by default.
Lastly, I implemented a ‘confirmation state’ for when the feature was turned on successfully.
Final Screens: Confirmation Banner, Product Tour, Feature Promotion
ADVOCATING FOR ACCESSIBILITY
Bose prioritizes accessibility and strives to meet AA compliance outlines by the Web Content Accessibility Guidelines (WCAG 2.0). Of the five years the Connect app has been in production, it hadn’t met AA compliance and most of the accessibility designs had been kept in the backlog.
When I joined the team I advocated for AA compliance, and worked with the development team to implement Dynamic Text and Dark Mode in the app.
Dynamic Type & Smart Invert
LEARNINGS
Cross Functional Collaboration
In order to successfully implement the Press N’ Turn feature, I had to work outside of my normal project team and meet regularly with the Bose Frames team, as well as the Legal, Marketing, Firmware, Copywriting, Research, and Animations team. This constant collaboration taught me how to clearly communicate my asks, facilitate conversations between teams, and make rational decisions amongst differing opinions.
Working With Limitations
Before I joined the Connect team, a handful of designers had already established norms within the app. Working within an existing system can sometimes be limiting, but throughout this process I learned how to push the barriers while maintaining integrity to the Bose brand.