JRNY Strength with Motion Tracking

JRNY is a digital fitness platform that offers personalized cardio, strength, and whole-body workouts that evolve as you do. My team and I helped Bowflex design and bring to market a new and improved strength-centric workout experience within the JRNY app that leverages motion tracking, form coaching, and voice commands.

CLIENT

Bowflex

COMPANY

Supply

ROLE

Creative Director, Product Planner, Design Strategist

jrny cover desktopjrny cover mobile

JRNY’s core value is its ability to provide adaptive workouts that evolve with the fitness journey of its users. Do do this it needs to be able to measure the user’s performance. For cardio workouts, this can be done directly by measuring user interactions via the hardware (bikes, ellipticals, treadmills, etc.). Weights and bodyweight don’t have this direct connection, which left Bowflex — a company known for their strength equipment — with a fitness platform that was very cardio-centric and left an important part of their audience underserved.

Democratizing access to fitness coaching.

In late 2021 Bowflex approached Supply and asked us to help them create a new JRNY experience that would make fitness coaching more accessible to people doing strength workouts at home with free weights. They wanted to help people improve their form and track their reps, all while using the phone or tablet they already owned.

In addition to running Supply’s design team, this project presented me with three distinct challenges:

01

Leading product planning efforts to enable product stakeholders to get aligned and set priorities.

02

Leading UX design for a type of workout experience that was unique to the JRNY platform.

03

Piloting a more collaborative design and development process with the Bowflex team to keep everyone in sync and leverage our shared expertise.

01

Product Planning

With a project team spanning UX design, voice UX (VUX), development, vision tracking, exercise science, and media production, getting all of us aligned on what we were building was crucial.

To support this, my team and I transformed our client’s existing knowledge and research findings into an extensive UX and VUX backlog, capturing user stories, design/dev sizing estimates, and notes on constraints or unresolved technical questions. All of these (200+ line items) were then organized into a streamlined format for easy review with stakeholders. As spreadsheets go it was a thing of beauty, and proved highly effective in aligning the team on features and priorities.

Our client stakeholders seemed to agree and asked me to share our process with their team so they could learn how to replicate it for other projects. Here are a few of the recommendations I shared:

Expect an iterative process.
Multiple passes (with mental breaks in between) will be needed to refine the language and capture everything clearly.
Stick to the traditional user story format.
Use this: “As a [user type], I want to [task] so that I can [achieve a valuable goal].” If you find yourself using “and” frequently, it’s a sign you should break the story into separate items.
Leverage your partners.
Review your first draft with design and development partners. Their input will help refine your stories and highlight gaps.
Use a consistent sizing system.
We used 1 point per designer or developer day for uniform effort estimates.
Include your notes.
Context and known technical constraints are crucial information for effective stakeholder discussions.
Provide a set of SWAG priorities.
Starting with a preliminary prioritization from the design team allows stakeholders to quickly agree on straightforward items, streamlining backlog reviews and freeing up time for deeper discussions on more complex issues.

Supply’s work exceeded our expectations. We even called on them to help us coach and build our internal teams’ practices and processes. We became a more effective team as a result of operating more like Supply.

— Steve Rodden, Senior Director of User Experience at Bowflex

02

UX Design

My team and I prototyped and designed a product experience that uses real-time motion tracking and voice-assisted feedback to help people correct their form and make accurate adjustments as they work out. Additionally, the app counted reps, recorded the actual weight being used, and factored all this information into more informed workout recommendations.

UI at a Distance

The integration of motion tracking introduced some unique challenges, as it required users to position their phone or tablet 8-10 feet away during workouts. This meant any new screen designs needed to meet a high bar for legibility at a distance, without losing their connection to JRNY's existing design system that had been designed to be viewed no further than an arm's-length away.

tablet - introduction to strength with motion tracking
Initial introduction to motion-tracked strength workouts.
tablet - initial positioning
Initial positioning flow that helps the user identify where they need to stand to be tracked tracked accurately across their full range of potential motion.
tablet - workout reps exercise
Workout screen showing a reps-based exercise.
tablet - workout duration exercise
Workout screen showing a duration-based exercise.
End-of-round screen to show the user how they did, and provide an opportunity to make corrections if they used a different weight or their reps were miscounted by the vision tracking system.

Communicating Form

An on-screen representation of the user’s form was crucial for coaching and demonstrating accurate tracking to the user. After iterating on several skeleton designs and testing their visibility within the workout flow, we chose the “open dot + radius” approach for its clean yet scientific look. The skeleton was overlaid skeleton on the user’s camera view for position calibration and when voice form corrections needed reinforcing.

A Visual Representation of Voice

To minimize the need for users to physically interact with the screen during workouts, we added voice commands for specifying weights and correcting rep counts if the vision system miscounted. Collaborating with the voice UX team, we created a visual avatar to indicate when JRNY, our voice assistant, was speaking, listening, or processing user commands, using visual metaphors to communicate each state.

Standby
"quiet / waiting"
VA state
Listening
"ears open"
VA state
Capturing
"hearing"
VA state
Processing
"drumming fingers"
VA state
Speaking
"radiating"
VA state
Confirming
"ok"
VA state

03

Collaborative Design + Development

At the start of this engagement I was asked to help the product design and development team operate more effectively together. The solution to this (in my mind) was simple — design and development needed to work as two equal parts of a single team. I immediately reached out to their technical project manager to figure out how to snap our two teams together.

Since development had a more rigorous approach to sprint cadence and rituals, I aligned the design team with their process, adopting a traditional agile model with 2-week sprints. This setup provided regular opportunities for each team to check-in and leverage the other’s expertise. In addition to enabling some really great conversations, this ensured we were designing an experience that solved for our technical reality.

By treating design and development as equal partners we gained the benefit of technical brainstorming and sign-off on concepts before they were locked. This enabled more informed discussions with our stakeholders, and stronger, more implementable solutions.

Outcome

Bowflex successfully launched JRNY Strength with Motion Tracking in January 2023 as part of its JRNY Fitness app on Android and iOS.