Work - Workout tracker and motivational app
Translating a beloved workout journal into an app experience
Description
The idea for this app (iOS) came as a request from a weight lift trainer’s clients. She developed a journal that they used to track workouts and complete what she calls mental training exercises. They are kind of like focused meditations and reflections to make you a better athlete. Her clients love the exercises, but didn’t love lugging around a notebook at the gym. So, I was asked to help create an app for them to use in place of the notebook.
Task at hand
I could quickly see that the biggest challenge was going to be translating the printed book into an app, and making it sticky - so that people found value in using it. The client wanted a way to be able to add new mental training exercises, so there would be fresh content coming in. I knew that we’d want a way to feature those, while keeping the experience simple so the user would be able to track in workouts while they were at the gym.
Discovery
I began by trying to understand what the user would be doing while they are using the app. In the absence of a user research budget for the project, I conducted an interview with a user client. What do their workouts look like? When will they be using the app? What is important to them? I conducted a competitive audit of other workout apps and journaling apps.
Design
User workflow
Once I felt like I understood the user better and had a feel for what they might want, I got started on a workflow to help begin to shape the architecture.
Information architecture
We felt like this workflow made sense, so I used it to create the architecture of the app. Since we knew a big touch point for using the app is during a workout, I wanted to make it very easy to enter information while you might be somewhat distracted at the gym. Therefore, the first screen you are presented with is the current day, since we knew users likely logged workouts as they go along. The current day would contain the options to enter workout goals, enter the workout, then finally, take note of what you learned.
Since we knew that users often completed the mental training exercises later in the day, or on another day, at home, those were to be included in a separate area.
Finally, the ability to see all of your workouts and mental training exercises that you have completed would be the third area. We have ideas for further expanding that area in the future, to include stats and other types of tracking information.
Wires
Next, I got started on the wires. I began working at a higher fidelity for these wires than I often do, because I felt very confident about the information architecture and user workflow. I wanted to see how the interface would begin to take shape.
Visual design
The wires went through a round of feedback with the client and the developer on the project. Then, I created three style tiles for the client to choose from. They capture the essence of the printed notebook, but are interface-friendly. The client really wanted to carry the photography from the printed journal into the app, so all other visual elements needed to work with it.
The client chose option three below, Classic Journal, for the visual design direction. This was personally my least favorite of the three options, but it’s not about me, it’s about the client and end user! This option is clean, reserved, simple, and really lets the photography shine. Letter Gothic was chosen as the typeface for the headers. The printed journal used a typewriter font designed for print that the client loved, and I wanted to mimic that with an interface-friendly font. The body font is Lato. Icons are a simple stroke style in black, and really vibe well with the images.
Visual direction option one: CLEAN TYPEWRITER
Visual direction option two: MODERN COLORFUL
Visual direction option three: CLASSIC JOURNAL
Next steps
This project is currently in development.
