How might we improve browsing for workouts in BowFlex's JRNY App?
To select a workout in JRNY, users browse through a collection of workouts and tap one that interests them. This opens a modal with more information. They can begin their workout from there or continue browsing.
Since JRNY users see these modals every time they want to do a workout, our project managers saw this as a way to make the most impactful design changes to the app, improving both the visual design and usefulness of the modals.
Where did we start?
The JRNY UX team looked at user stats for ways to increase user engagement and retention. We found that users were spending time browsing workouts but not necessarily starting one. If users don't perform workouts, they are less likely to continue using JRNY.
When our UX research team got input from current users, these were the major takeaways:
- The modals don’t show enough information. Many users would only know the contents of a workout if they had done it before.
- The effort level chart was not detailed enough. Users generally understood that it shows the intensity of the workout, but without labels, it was hard to comprehend.
- Users were unsure what an adaptive workout meant. Since this is a major differentiator for the JRNY app, it was important to make this clear.
The existing workout modals gave users a basic set of information, but not enough to confidently select a workout. Users would often select one and try it out for a few minutes before choosing a different workout.
The goals for this project were to:
- Provide more information to our users to make confident selections for their workout.
- Highlight the benefits of adaptive workouts.
- Allow more room for workout information.
- Simplify the process for design and development through use of our design system.
What could be improved?
The existing modals didn't provide enough valuable information to confidently select a workout. I performed a heuristic evaluation on the existing modals and reviewed my findings with the UX team. There were a few things we knew we wanted to improve:
- Space: The top section takes up too much space better suited for the most important details.
- Time: We know the workout's time is important to our users, so it should be big and easy to find on the modal.
- Workout Type: We tell users the details about the workout type, but we don't explain what they mean.
- Workout Profile: There are two graphics displayed, but neither of them give much information.
- Scrolling: Make the modals scrollable to remove the vertical limit for content.
Initial Concept
My initial design aimed to fix the issues outlined above, to be tested with users to confirm our hypotheses.
- Space: I reduced the height of the top section and moved the most important pieces up.
- Time: I increased the font size and weight of the workout time and moved it to the top of the modal.
- Workout Type: I added descriptions to the workout types like "Adaptive Workout" and "Virtual Coach".
- Workout Profile: I added some more detail to the workout profile and changed the title to "Intensity Map" to clarify the significance.
- Scrolling: The modals now scroll to allow more content to fit.
User Testing
My team tested the initial concept with 7 JRNY app users on a BowFlex treadmill, comparing it against the existing app. We also got their feedback on how important each piece of information was. During testing, 100% of our users preferred the updated modals to the existing version, but that didn't mean my job was done. I looked at the feedback from users to further improve the modals. Below is some of the top items from that feedback.
- Users wanted to see even more content upon opening the modals.
- Scrolling wasn't obvious. Users had to be prompted on the modal that they could scroll.
- Users were unsure what the workout profile indicated: intensity or elevation.
- Some of the colors on "Virtual Coach and "Auto-Adjust" blended into backgrounds making them slightly more difficult to notice.
- Titles of workouts don't mean anything to users besides identifying them for a later time.
Order & Amount of Information
Based on feedback from users, the information was updated to focus on the most important pieces first, displaying enough content for them to make an informed workout choice.
Updated Concept: What was improved?
We updated the following parts of the modals based on feedback from users:
- Order of information was updated so the most important pieces appeared "above the fold".
- Minimized the top section even more to show more information.
- Made scrolling obvious by fading the information behind a gradient.
- More details were added to the overview section to show time and calories per minute.
- One column was used to make it easier to read and easier to design and develop.
- Effort summary section was added to show even detail about the workout intensity to users.
The Final Result
In February 2024, JRNY release 2.19 featured the updated modal designs, capping nearly a year of work for our design team. The talented developers at BowFlex implemented the changes flawlessly, greatly improving the overall navigation of JRNY.
Overall, the project achieved the following goals:
- More information is provided to the user to make confident selections for their workout.
- Highlighted benefits of adaptive workouts.
- Added scrolling to allow more room for workout information.
- Utilized our design system to simplify the process for design and development by over 50% by limiting to 3 screen sizes: embedded, tablet, and phone.
