Alter Screen

Enhancing strength workouts for seamless focus and motivation.

A significant problem with the original design was the confusing structure of the strength workouts. Each workout was divided into three ‘blocks,’ a term not commonly used in the fitness world. Users had to complete each block for three ‘sets,’ a phrase usually referring to repetitions for a single exercise but was incorrectly used here to describe a group of exercises performed together. To align with users’ mental model of a typical workout, I revised the agenda using standard exercise terminology. I replaced ‘block’ with ‘circuit,’ a familiar term representing a group of exercises. I also used ‘round’ to indicate the number of times a circuit should be completed and ‘set’ to denote the number of repetitions for a single exercise. Using standard terminology made it clearer for users to understand where they are in the workout.

Another significant issue was the excessive number of individual screens and the time spent on each. For each round, users were shown a series of screens, including the workout agenda, circuit structure, and tutorial, for a total of 40-50 seconds before their first set. After each set, they spent another 10 seconds evaluating the Screen’s feedback on their form while waiting for the next set to begin. This large downtime caused users to lose momentum and become demotivated over time. To create a seamless workout structure, I consolidated the screens and used animations to showcase the user’s progress as they transition between different rounds and circuits. Collaboration with engineering was necessary to test the timing between various states in order to give users just enough time to rest and prepare for the next set.

Our final challenge was to introduce uniformity and consistency to an interface that previously lacked both. For instance, the timer had inconsistent placement and visual style across screens. Additionally, excessive text on the screen posed a significant issue for users with low vision, as they often stood 4-5 feet away from the display. To solve these issues, I designed modular components that could be reused across various states. For example, the 'dynamic island' and timer elements were consistently positioned at the top of every screen state, providing users with clear information about their current workout status and remaining time. I also used color coding to help users easily identify the circuit they were in; UI elements appeared green during strength circuits and blue during cool downs. By being intentional with reusable components and color, strength workouts became more motivating for users to complete.

To streamline engineering workflows, I started to build the foundation for a design system. I first created a comprehensive color sheet complete with hex values to ensure consistent usage across the designs. I applied the same approach to document and standardize text styles. Lastly, I built a reusable component library using atomic design principles to clearly document various states and properties for engineering to reference.

To celebrate the user’s milestones, I started to explore different variations for the workout summary screen. The goal was to end the workout on a high note by showing key metrics that would boost the user’s confidence. Given the additional engineering resources required, we decided to include these designs in an enhancement update after the engineering team addressed the most critical issues.