Having recently gotten back into exercise, I found myself searching for an interval training app to manage my workouts. There are plenty of apps out there, but none struck the right balance between customization and simplicity. I tried to solve this problem by limiting options and presenting them progressively along the user journey.
- Create a "playlist" of 30 second exercises
- Set number of reps
- Set time between each exercise (rest)
- Set time between each rep (recovery)
- Customize alarm sounds
- Make me feel like I'm training for the 1972 Munich Olympics
After defining the requirements, I created a flowchart to identify the most efficient paths a user would take to accomplish their goals. This helped me find dead-ends and redundancies that made the tasks confusing and awkward. This allowed me to eliminate potential problems before the prototype stage.
It's not until we actually hold an app in our hands and start navigating do we really know what's working and what's not. After having some friends test it out, it became clear that the exercise creation screen was confusing. To fix this, I added an 'empty' icon at the end of the sequence. I also removed the clutter a bit to provide some clarity. Afterwards, the screen made more sense and users were more easily able to create and manage workouts.
Color & Typography
The 1972 Munich Olympic system, developed by the German born designer Otl Aicher, provided a vibrant color palette. This effect
is accomplished by both hue choice and by saturating the warmer hues more than their cooler counterparts.
I started with Univers, the typeface used in the original Olympic system. But since it was not optimized for modern screens, I chose San Francisco as a simple and legible alternative.
With the structural questions answered, I was able to focus on evoking the bold, dynamic feeling that the Munich Olympic system is famous for. I created custom icons based on the same grid to represent different exercises. I then worked on finding the right color combinations to feel vibrant, but maintain legibility while giving users cues about interactions.
I set out to design a simple app for managing workouts. I think it came together pretty well, but if I were to continue development I would add micro-interactions and transitions to make it feel more lively and responsive. After iterating through the user flow until it felt natural, creating a low resolution prototype for testing, and crafting the look based on a legendary design system, I think it meets the requirements and I would definitely use this app for my workouts.