Roku Audio
Lead Interaction Designer
OVERVIEW
In 2018, Roku introduced its initial set of wireless speakers to address the declining audio quality of thin TVs. I was given an incredible opportunity to lead Roku's audio product line. This included crafting a seamless out-of-the-box experience for existing Roku TV customers and later redesigning it to incorporate an expanded audio product line.
As the Roku audio products continued to grow, we recognized the need for flexible setup options and set out to achieve three goals:
-
streamlining setup for various device combinations
-
ensuring compatibility across Roku platforms
-
minimizing setup time
Roku TV wireless speakers
This project had many facets that included a UI component, physical setup of the devices (wires, batteries, & placement), & audio instructions.
The Roku wireless speakers bundle included 2 wireless speakers, a voice remote, and a tabletop remote.
We tackled the speaker setup first. I worked with product and engineering to determine the required steps to set up each speaker and understand the technical limitations of our system. The largest limitation at the time was that one speaker needs to pair and update before the system can start looking for the second one.
Next, I used existing system layouts to create wireframes for each step of the flow. Roku's design system where most screens are split into two panels. Whatever happens on the left updates what is happening on the right. For example, if the user is given instructions on the left, there is a visual representation of it on the right.
Research
Through usability testing, we learned that many users don't read product manuals.
This posed a problem for us because the speaker setup did not automatically begin on TV. We needed to find a different way to communicate instructions on how to invoke the setup process on their TV without requiring them to read the manual. Testing also showed that users immediately plugged in their speakers upon unboxing the product.
We decided to use audio instruction to tell the user how to start the wireless speaker setup process.
"Hello. To begin, make sure your Roku TV is on. Using your existing TV remote, press the home button for 5 seconds. Then, select speakers. (Pause) To repeat these instructions, press the pair button on the speaker.”
Initial solution
My designs supported the 2018 product launch of Roku speakers and continue to be adapted and refined as new products are introduced.
BUTTON INTERACTIONS
The speakers had two buttons on the back: Reset & Pair.
​​​
1
Reset Short Press
When reset is short-pressed:
-
No audio instructions
-
Speaker will immediately restart
2
Reset Long press
When reset is long pressed then:​
-
After 3 seconds, audio will tell the user to "Continue to hold to reset your device"
-
After 5 seconds, device will do a factory reset
3
Pair before setup
If button pressed before the speaker is paired to the TV,
-
Audio will be spoken:
“Make sure your Roku TV is on. Using your existing TV remote, press the home button for 5 seconds. Then, select speakers. (Pause) For help, go to go.roku.com/rokutvspeakers.”
4
Pair button after setup
If button pressed after speaker is paired to TV,
-
Help instructions will be spoken:
“For help, go to go.roku.com/rokutvspeakers ”
Redesign
As Roku audio products expanded, users required flexible setup options. A user could be setting up wireless speakers, a wireless subwoofer, and/or a Streambar.
The Problem
-
The Roku TV or Player needs to know what devices a user is setting up in order to suggest the optimal sound configuration
-
Due to technical limitations at the time of the 2018 launch, users couldn't set up multiple audio devices together leading to a cumbersome setup process
EXPLORATIONS
Accessory setup varies depending on the Roku platform. For example, with Roku TV, users can set up a remote (see the setup here), wireless soundbar, speakers, and Bluetooth devices. To evaluate accessory setup options, I initially considered several choices and narrowed them down to four:
1
Singular Itemized Setup
-
Each device is set up one at a time
-
No context of which order devices need to be set up in
-
If user purchased a device bundle, you have to come back and set up each device
2
Singular Categorized Setup
-
Devices are categorized by type (Remotes, Audio, Bluetooth)
-
All of one device type can be set up together
-
If user purchases a bundle with two device types, they need to come back to the page to setup (e.g. speakers + remote)
3
Multi-select Setup Together
-
Each device must be selected on its own
-
multiple devices can be selected
-
set up happens on the same screen but can be modular
-
One starting point for all of setup
4
Multi-select itemized Individual Setup
-
Each device is listed
-
One starting point for all devices
-
Multiple devices can be selected on initial setup screen
-
Bundle the setup of devices in a single category (e.g. if user selects speakers + sub + remote, speakers & sub setup happens together)
-
Modular & scalable for new device types or bundles.
Solution
After testing different layouts, we chose option 4 - multi-select itemized individual setup. It offered the greatest flexilibty for setup without putting the burden on the user to figure out which order devices needed to be set up in.
SCREEN OVERVIEW
-
Checkbox enables multiple-item selection.
-
Imagery to represent each device type.
-
Instructions guide device preparation for setup.
-
Continue button progresses setup.
-
Disabled category indicates unselectability.
-
The already set-up streambar is grayed out in the image to indicate its inclusion in the setup.
-
The left side provides speaker placement instructions for the user.
-
Layout options, along with the system's recommended best layout, are presented to the user.
-
The left highlight corresponds to the right image. For example, when "Rear speakers" is highlighted, the image displays speakers positioned behind the couch.
