Josh Peters

Bowflex JRNY App

The major hurdles in any transformation is finding a routine that makes you feel comfortable and staying motivated between achievements. Bowflex has long been a company that could offer the hardware to a fit life, but had less means to help their customer achieve the aspirational fitness goals after the machine was delivered. As one of two lead designers at Slalom, we partnered with Bowflex to deliver a personalized fitness platform that adapts to and motivates customers to exceed their fitness goals.

Client: Bowflex (at Slalom)

Role: Experience Designer

Duration: 10 months

During this project, I led the development of interactive prototypes for various feature experiences the app included. I collaborated with SDEs to define and optimize the motion principles and interactions for the iOS and Android platforms. The majority of the visual design and component work was done by another designer.
Boxflex

Sample screens from the JRNY app that users connect to their Max Trainers.

Where were they at?

Prior to the most recent release, after Bowflex sold a Max Trainer, the relationship the company had with their customers was pretty much non-existent. Each customer had to motivate themselves and track their own data to measure their health progress. In the ultra-competitive digital fitness arena, legacy brands like Bowflex are contending with an endless field of new challengers and fresh ideas. They had never focused closely on the post-purchase success of their customers nor thought much about how the rise of digital services could help a hardware-driven company generate additional revenue by investing in their customers health journeys.

What did we do?

The Slalom Build and Bowflex teams partnered to create the Max Intelligence apps (iOS, Android) as well as an extensible cloud platform for data analysis and custom workout delivery. When paired with the popular Max Trainer hardware via Bluetooth, the Max Intelligence Platform delivers an integrated experience that helps motivate customers and celebrate their successes as their fitness journey progresses.

The team consisted of about 12 engineers, 2 projects managers, 2 designers and 1 technical architect.

With our design sprints being about 2-3 ahead of development, I had ample time to develop interactive iterations for various features as they got prioritized. During these sprints, some work would be lower fidelity which was delivered to the Bowflex research team to evaluate with customers. As features approached higher-fidelity, I began to collaborate with our SDEs on approaches for the interactions to be conceived technically. Througout this process we would do informal reviews with the Bowflex PM and UX team members to ensure features were aligning to product goals.

My ResponsibilitiesPrototyping, Interaction Design, Visual Design, Design Story Validation
My Deliverables:Interactive Framer prototypes, Visual Design Comps, Feature Concept Flows

What challenges did we work through?

At the start of this project, my experience with Framer was rudimentary. With another designer handling the visual design, I was able to devote much more time into learning Framer and bringing to life the application prior to development for the Bowflex team.

The client was new to an Agile workflow and had misconceptions and undefined goals that were large risks to meet the delivery date. Between design and project management, we worked with them to more clearly define their product goals, stories and helped them get up to speed in how an Agile methodology can allow for open-ended work, which can also inform more strict development schedules.

How did it turn out?

As of April 2019, 20K+ JRNY capable machines have been sold, but the adoption of the app per unit sold is out of my purview.

Bowflex Max Trainer Workout

Initial Beginnings

Prior to our initial development sprint, I was asked if I could help the client visualize the future based around our initial discovery deliverables. Our goal was to give the client an initial shot of excitement for what would be an iterative process over the next 10 months.

Through a mix of visual design assets and code, I created a Framer prototype that demonstrated some common and dynamic interactions that brought a more realistic vision together for our team to present as the path forward to close our initial discovery.

(video) - Initial conceptual prototype that I built at the end of discovery. - View the prototype here

Device Setup and Onboarding

Connecting devices via Bluetooth in theory is easy, but we've all struggled at one point or another. We knew well that this could be an immediate frustration point once the customer was ready to setup their device. I developed these prototypes (even lending my voice) to explore how we could address both happy-path and alternate states Max Trainer owners may find themselves in during device setup and sign up.

These were provided to internal user research to validate. The second version is fairly close experientially to the final version.

(video) - Version 1 of an onboarding flow includes a bit of voice dialog as a an element of delight and helpful guide as you get set up. View the prototype here

(video) Version 2 features a different connection interaction and modified experience in the sign up form. View the prototype here

Bowflex Max Trainer Workout

Beyond happy paths and interactions we also considered alternate states for other devices being present or the user not being in range to connect.

Home Screen Explorations

From the outset, Bowflex wanted to assist their customers and guide them to optimal fitness. The algorithmic approach was intended to reduce anxiety around what workout to do, so we built interactive concepts that we could test on device with customers to see what felt best.

Bowflex Max Trainer Workout

This gif includes three interaction concepts that surface initial workout recommendations, but allow for modifying them to the customer preference as necessary.

Following low-fidelity explorations, I worked through evaluating various approaches to the visual interface and content interactions.

Bowflex Max Trainer Workout

With the desire to surface future content for customers, this concept explored helping the user navigate back and forth using a touch and swipe model.

Bowflex Max Trainer Workout

This alternate concept surfaced the content surrounding the tachometer, but was a bit busy and too abstract for users to grasp.

Home Screen

Following the previous iterations, we landed on a home screen design that we moved forward to production with. I built higher-fidelity prototypes for users to test the interactions on machine and the results of that work follow.

Bowflex Max Trainer Workout

Here you can see the working prototype of our time and difficulty interactions in situ. As you modify either, the workout intervals change accordingly giving the user the opportunity to tune the workout if they desire to do so.

(video) - This prototype was used to investigate the visual transition in and out of the tachometer from Home to Workout. It was also used to show a simulated experience of the customer using the device as they transition through burn and rest periods the research team validated through user testing.

Workout Complete

We wanted to motivate customers post-workout to continue on their fitness journey. Utilizng a blend of Lottie animations and Framer, we added a bit of life to a results screen while they viewed their achievements and summarized their satisfaction with the workout.

Bowflex Max Trainer Workout

An overview of the experience after a workout is completed.

Bowflex Max Trainer Workout

A few of the animations that are included in the app today. Row 1: Workout Satisfaction - Row 2: Virtual trainer waiting/working animations - Row 3: Bluetooth connections states

Throughout this process, I mostly focused on the prototyping work, but also was vital in refining the visual work, contributing to feature development and also validating the work according to story requirements.