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.
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.
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:
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:
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.
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.
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
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.
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:
Selected Works
MalakyeUI Design
BackpackerUX Design
JRNY Headphone ConnectUX Design
JRNY App Workout ModalsUX Design
JRNY Color RefinementUX Design
Harvard BCMP ShirtGraphic Design
Haddon CulinaryGraphic Design
Bliss ProvisionsGraphic Design
LeadfeatherGraphic Design
Ion Home KitGraphic Design
Transparent PathProject type