Roku Wireless Speakers
Interaction Designer
OVERVIEW
In 2018, Roku launched its first set of wireless speakers. As TV's have gotten thinner, audio quality has gotten worse. To fill that void, Roku wireless speakers were created.
This project had many facets that included a UI component, physical setup of the devices (wires, batteries, & placement), & audio instructions. The goal of this project was to create a seamless out-of-box setup experience for existing Roku TV customers.
Explorations
sdkfjsldfkjlf
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 screen paradigm is called shoji 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
sdlfjsldfkj
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.”
Solution
My designs supported the 2018 product launch of Roku speakers and continue to be adapted and refined as new products are introduced
The speakers had two buttons on the back: Reset & Pair.
We reused the existing reset button interactions on Roku devices for these speakers and also added audio instructions:
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
When reset is short-pressed:
-
there will be no audio instructions
-
speaker will immediately restart
We used the pairing button to give the user audio instructions on how to start setup on the TV:
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.”
If button pressed after speaker is paired to TV, help instructions will be spoken
-
“For help, go to go.roku.com/rokutvspeakers ”
