Overview
Opportunity
Deliver a personalized fitness platform that would help evolve Nautilus from an equipment manufacturer into a digital-first, experiential powerhouse.
They wanted to provide the customized workouts of a personal trainer, the motivation of a running buddy, the data of a smart watch
Outcome
The JRNY app launched as part of the Black Friday 2018 product launch of the M6 and M8 training devices. Slalom's involvement in active app development ended in the spring of 2019.
As of April 2019, 20K+ Max Intelligence capable machines have been sold and the app as of 2023 is doing $16M ARR.
Work Highlights
User Onboarding
Goal:
Help guide the user through setup and registration step, adding delight via the interactions
My Work
Created initial concepts, final design and interaction specs for user setup and onboarding
Workout Selection
Goal
Taking inspiration from the existing physical machine, create unique directions for the workout selection interface.
My Work
Designed and developed multiple iterations of the workout selection home screen. The interface was created from scratch to emulate the existing physical interface that would be obscured when
Home to Workout Animation
I took inspiration from the Max Trainer display and modern car interfaces to explore how transitions help lend a sense of delight while preparing customers for the upcoming workout.
Overview
Opportunity
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.
Outcome
The JRNY app launched as part of the Black Friday 2018 product launch of the M6 and M8 training devices. Slalom's involvement in active app development ended in the spring of 2019.
As of April 2019, 20K+ Max Intelligence capable machines have been sold, but the adoption of the app per unit sold is out of my purview.
The app continues to be in active development and assisting customers on their fitness journeys.
My Role
Explorative Design and Prototyping
As stories were prioritized for initial design development, I built early interactive prototypes using Framer for the purposes of interaction exploration and to test usability with Bowflex customers.
Delivery Prototyping
I created high-fidelity prototypes in Framer using a mix of code and assets. These were used to communicate and confirm essential experience flows, interaction details to stakeholders for review and utilized for user research by the team at Bowflex to validate with customers.
Feature Story Definition
The Nautilus team worked with Slalom to develop and define the initial backlog of features. Given the technical-forward Agile process Slalom employs, my role in feature definition was to meet with client stakeholders, gather desired outcomes and work backwards to develop requirements
Design Engineering and QA
I managed much of the translation of design elements into functional code. I collaborated with the engineering team to ideate on approaches, create handoff resources, inspect and log bugs and approve story sign off prior to committing to releases
Early Work
Following the initial discovery phased led by another designer, I was asked to breath some life into what had been static screens up until that point.
Discovery Prototype Vision
To capture the aspirational vision of the delivery phase, I created a simple prototype with Framer JS that showed the potential of our collaboration with Nautilus going into the future.
Beyond basic navigation, I found areas that I could add small bits of delight through interaction design that would speak to what our team could bring to life in the near future.
Device Connection
One of the first experiences a customer has is connecting their device via Bluetooth to the Max Trainer. While connecting via BT is common enough, most people have faced challenges getting two devices in sync. We couldn't actually prioritize a wired connection because of a patent by another exercise company, so we decided that instead of leaving it to chance, we would lean into the challenge.
First Iteration
As the visual design was in progress, I wanted to bring together a cohesive vision for the initial first-run experience.
This helped us evaluate the mechanics, flow and feel of a desirable experience and establish principles that would guide the rest of the interactions work.
Second Iteration
This iteration evolves the device connection and shows additional visual design iterations upon receiving feedback from client and user research (done by client)
This version is closest to that which shipped for the launch of the app in 2018.
Workout Selection
As the centerpiece of the initial experience, the workout selection screen was the most scrutinized and a high priority to get right as it would be the primary interface for daily user by Max Trainer customers. We utilized a continuous discovery process over a span of months to build, test, learn and deliver this work.
Low-fidelity concepts
Early on, given the blue sky nature of the project, I explored how the home screen might work with the concept of recommended time workouts.
The hypothesis at the time was that following an assessment workout, the customer would have three optimal workouts shown that meet and exceeded their capabilities.
New Requirements
As I started to build new concepts around surfacing customer content and recommendations, Bowflex communicated that the physical tachometer was an essential element to the Max Trainer experience and that it needed to be carried over into the app.
It seemed completely obvious soon enough, when the placement of a holder for devices ended up obscuring the tachometer from view while in use.
Throughout iterations, I explored and evolved the workout selection interactions and content layout. I brought the interface to life by tying together time and difficulty to specific interval and burn rate visualizations.
Workout Selection
After exploring multiple iterations of the workout selection this was the direction pushed into development.
Throughout the process, these prototypes were provided to the Bowflex UXR team for usability testing and I incorporated feedback into the work at various stages.
Start / Run Workout
As the Workout Selection UI elements were solidified, I dove deeper into transitioning between experiences, exploring how the tachometer would function in a variety of contexts.
Home to Workout Animation
I took inspiration from the Max Trainer display and modern car interfaces to explore how transitions help lend a sense of delight while preparing customers for the upcoming workout.
Workout Simulation
As the customer would be viewing this device during a workout, I needed to translate the existing experience on the Max Trainer to a digital emulation.
Essential to this was showing the oscillation between recover and sprint sessions and how the input from the device would work once the software and hardware were connected.
Workout Complete
We wanted to motivate customers post-workout to continue on their fitness journey. Utilizing a blend of Lottie animations and Framer, I added a bit of life to a results screen while they viewed their achievements and summarized their satisfaction with the workout.
