BowFlex JRNY App Headphone Connect

Connecting Bluetooth headphones through JRNY relied on the standard Android system settings. This meant that users were taken out of the app momentarily to connect their headphones, resulting in complicated extra steps, interrupting a workout, and the loss of immersion in the app. This project aimed to simplify the process and keep users immersed during their workout. 

Overview

Two month project for BowFlex (formerly Nautilus)

Tools: Figma, Miro, Confluence

Where did we start?

Below were the steps needed for a user to connect their headphones through JRNY. There are multiple extra steps that I evaluated and planned to simplify.

Step 1: Tap on the Bluetooth icon in the top right corner.

Step 2: Select Bluetooth Headphones from the three buttons at the bottom of the drawer.

Step 3: Put your headphones in pairing mode. (We are now outside of JRNY and into the system settings.)

Step 4: Select your headphones from the list of available devices.

Step 5: Confirm you want to pair your headphones. It also gives a checkbox to allow access to your contacts and call history, although JRNY never uses this functionality.

Step 6: Wait for headphones to pair with the machine. Spinner animation plays during this time.

Step 7: Close the Bluetooth menu. This takes you back into JRNY.

Finished. Notice there is no indication that headphones are currently connected to confirm the process was successful.

Initial Assessment

There were things we needed to improve:

• Keep the user within JRNY during the whole process.
• Simplify the steps needed.
• Give users indication that their headphones are connected.
• Make it easy to disconnect or connect to a different audio device.

Evaluating Solutions

Option 1: Connect directly through the drawer.

Step 1: Tap the icon in the top right corner to open the Bluetooth drawer.

Step 2: Select your headphones from the list of available devices and tap "Connect".

Step 3: Wait for Bluetooth connection. An animated dot graphic will appear.

Step 4: Your headphones are now connected, indicated by the green icon and Disconnect option.

Option 2: Connect through the drawer plus a modal.

Step 1: Tap the icon in the top right corner to open the Bluetooth drawer.

Step 2: Tap on the headphones row to open a list of available devices.

Step 3: Select the device you want to connect to from the list of available devices.

Step 4: Wait for the connection to be made. A set of animated dots let you know it's in progress.

Step 5: Your headphones are now connected, indicated by the green icon and Disconnect option.

Option 3: Connect through the drawer plus another drawer page.

Step 1: Tap the icon in the top right corner to open the Bluetooth drawer.

Step 2: Tap on the headphones row to open a list of available devices.

Step 3: Select your headphones from the list of available devices and tap "Connect".

Step 4: Wait for the connection to be made. A set of animated dots let you know it's in progress.

Step 5: Your headphones are now connected, indicated by the green icon and Disconnect option.

Which is the best solution?

Option 1, connecting directly through the connect drawer is the simplest with the fewest steps, but there are concerns about cramming too much information in a small area. If the user has a long list of available devices, it could be frustrating to manage them with the other devices listed.

Overall, we determined option 1 would still be the best solution since reducing the amount of steps was a top priority.

What does the improved process look like?

Below is a walkthrough of the improved process using the Connect drawer in JRNY. Let's look at our goals for improvements:

• Keep the user within JRNY during the whole process: This process keeps everything within the connect drawer so the user stays immersed in the JRNY app.

• Simplify the steps needed: We took the total steps from seven to four, greatly reducing the steps in the process.

• Give users indication that their headphones are connected: The user can open the Connect drawer at any time to see which headphones are connected to their machine.

• Make it easy to disconnect or connect to a different audio device: The uer can open the Connect drawer to disconnect their device just as easily as they did to connect it.

Thank You

Thanks to our amazing team of developers, QA testers, project managers, and researchers, we were able to get these improvements implemented into the JRNY app to reduce user frustrations by making this area of the experience easier to use and more delightful overall.

jkulhawik@gmail.com