JRNY App Workout Modals Redesign

To select a workout in JRNY, users browse through a collection of workout cards and tap one that interests them. This opens a workout modal with more information. They can begin their workout from there or continue browsing. We realized that users were browsing longer than we expected, resulting in less time working out. The users weren't getting enough information. This redesign aimed to fix that issue, and allow for flexibility to add or change elements in the future.

Where did we start?

The existing workout modals gave users a basic set of information, but not enough to confidenty select a workout. They would often select one and try it out for a few minutes before choosing a different workout. In addition, without scrolling there was limited vertical space to show all the information available.

Overview

• Long term project for Bowflex's JRNY App, affecting all strength, cardio, and whole body workouts for iOS, Android, and embedded screens.
• In Collaboration With: Hanna Risberg, Trent Edwards, Edyta Blaszczyk
• Tools: Figma, Miro, Confluence

Initial Assessment

The existing modals didn't provide enough valuable information to confidently select a workout. There were a few things we knew we wanted to improve:

1. We know time is an important piece of information to our users, so it should be big and easy to find on the modal.
2. We tell users the details about the workout type, but we don't explain what they mean. There needs to be more detail here.
3. There are two workout profiles displayed, but neither of them give much information. There only needs to be one that shows more detail.
4. The top section takes up too much valuable space. Some of the elements can be moved into this area.
   
5. Add more detail to the workout profile to make it more useful for our users.
6. Update and unify JRNY's visual design.
   Make it more clear to users that program workouts adapt to their fitness level.
7. Make the modals scrollable to remove the vertical limit for content.
8. Use a component-based system for easier design and implementation.

Gathering the Available Info

I researched all the available workout data and compiled a list of what we could show, then put together initial ideas using Miro for easy sharing and collaboration. Those data pieces were:

• Time
• Workout Name
• Workout Image
• Workout Profile
• Description
  

• Workout Type
• Regional Information (ETW only)
• Workout Plan
• Instructor (Trainer Video only)
• Workout Style

• Entertainment
• Tags
• Equipment
• Intensity
• Date Completed
  

First Iteration: Presenting the Info

I mocked up designs for the modals based on our existing style, and what we already knew about our users. I put an emphasis on the workout time, unique details, and what to expect in each workout, with the most important information visible without scrolling.

The biggest benefit of this modal design is that each piece of content lives in its own separate block with typography and spacing rules, and allows designers to swap out or rearrange any piece of info in future designs.

To the right are the modals for Programs, Explore the World, and Trainer Video workouts with animation to show the initial scrolling behavior.

The charts above outline the priority of information for our users for each workout type.  Each workout type had slightly different priorities, but we were able to find some patterns and design in response to those patterns.

User Testing & Feedback

Our research team tested the modal designs with 7 in-person users and got their feedback on the updated modals compared to the existing ones. Findings were overall positive while still being able to pinpoint areas of improvement needed, as well as the desired priority of information. 

Needs to be improved:

• Intensity is a top contributing factor in picking a workout, but you can't really tell from the brickyard what the intensity is.
• Users had to be prompted on the modal that they could scroll - it wasn't obvious.
• Some users stated they weren't quite sure what the brickyard was showing on the card - intensity or elevation.
• Users saw the dots and "Virtual Coach" as well as "Auto-Adjust". However the dots blend into some backgrounds making them slightly more difficult to notice.
• "Untimed" text on Explore the World workouts was somewhat unclear. Assumed it was part of the workout title.
• Titles of workouts don't mean anything to users.
  

Positive findings:

• The order of information we present on the modal was appropriate to users.
• Users loved the "See more from xyz trainer".
• Users really appreciated the Region/Scenery/Season information.

Second Iteration: Responding to Feedback

Feedback from user testing gave us valuable insight into what is most important to our users and what we could do to improve. Below are 

• The select button was moved to the right to better balance the upper elements and save on vertical space.
• The intensity label was redesigned to simplify the colors and show the possible options.
• Intensity label was also moved next to the workout profile area (renamed Intensity Map to better frame what it describes). 
• The Workout Type labels were updated to better differentiate them from the description. 
  

Next Steps

After the second iteration, I shifted my focus to another project; BowFlex's next gen treadmills. This work continued under the expert direction of other designers on the team; Hanna Risberg, Edyta Blaszczyk, and Trent Edwards. Below are the continued improvements they made.

Scrolling Behavior

• The team collaborated with developers to implement a scrolling behavior that improves the amount of content shown without losing important interactive elements.

Button Placement

• With the updated scrolling behavior, the Select button was moved to a fixed section at the bottom of the modal to be available at all times.
• A gradient was added to the bottom section for readability and to reduce cluttered visual elements.

Updated Workout Tags

• Workout tags were toned down to avoid looking like buttons.
• Colors were simplified to reduce the overall visual noise of the modals.
  

Updated Workout Profile

• Additional information was added to show the estimated burn rate (cal/min) of a workout.
• Time indicators were added to the x axis of the workout profile.
• More defined chart area to indicate vertical and horizontal limits.

The Final Result

In February 2024, JRNY release 2.19 featured the updated modal designs, capping over a year of work for our design team. The talented developers at BowFlex implemented the changes flawlessly, greatly improving the overall navigation of JRNY. 

Above are the tablet and phone versions of the new workout modals.

Below shows the content organization and scrolling behavior of the Program, Explore the World, and Trainer Video workout types.

Overall, the project achieved many goals:

• Provided more information to the user to make confident selections for their workout.
• Illustrated the function and benefits of adaptive workouts.
• Removed the vertical limitation of information in our modals.
• Allowed easy changes or addition of information in the modals.
• Simplified the design and development process by limiting to 3 total sizes: embedded, tablet, and phone.

jkulhawik@gmail.com