Art direction, design, and UX for a mobile app that will create workouts to get in you and out of the gym efficiently

"Do your best and forget the rest"

Workout apps are a dime a dozen these days, with everyone from Chris Hemsworth to Peleton to Nike telling you they can get you the ideal body with just a download (and a nutrition plan, a new pair of sneakers, an exercise bike that costs as much as a used car, and whatever else they might be able to upsell you on, but I digress). But what if there were a fitness app that would let you target certain muscle groups while keeping you on schedule so that you’re in and out of the gym efficiently?

That was the idea behind SmartFiit, a project I worked on initiated by a bodybuilder who saw a need for a workout tracker that would help users save time in the gym. He had the idea to produce an app that would allow you to create a workout to fit an allotted timeframe with an accompanying timer so you could get in and out of the gym on your schedule. I was brought in by the development firm to lead the design and UX efforts.

SmartFiit iPhone workout screen
SmartFiit visual branding

Naming and branding

I was able to start on the project at an early phase to help with naming, branding, and art direction before diving into the user experience aspects. We decided on the name “SmartFiit” with the double i’s referencing High Intensity Interval Training (HIIT). The initial aim of the app was weight lifting, but future plans included the possibility of expanding to other cardio and calisthenics workouts. The identity for the app was created with a sporty, athletic feel in mind, and a navy and orange color palette was decided on to set it apart in the crowded fitness app marketplace.

Research and planning

The client came in with an idea of the general features they wanted to include, but a limited budget meant that we unfortunately couldn’t allocate too much time and effort into user research. I used a simple survey form with a group of about twenty fitness enthusiasts to get a sense of what fitness apps they were currently using, what their needs would be in a workout app, and any additional features that would be desirable. The responses showed that a good number of potential users liked the idea of being able to get pre-planned workouts and that few apps on the market presented adequate tracking and workout history, both items that we wanted to include as core components of SmartFiit.

I also created two simple personas to help frame the problem, one of an experienced bodybuilder and another of a person who was new to the gym. This helped us evaluate the terminology and exercises from different perspectives and make sure the app was accessible for people of varying skill levels. We discovered that a lot of terminology would be rather foreign to a novice user and discussed how to integrate video examples of exercises into the app. The scope of the project didn't allow for in depth exploration of how to implement video examples, but it would definitely be a priority for future iterations.

SmartFiit stepper prototype
SmartFiit slider prototype

Initial prototypes and testing

I wanted to use prototypes to test out a few features, primarily different methods of recording workouts. My research showed that most workout apps use either numeric keypad entry or stepper controls to enter weights and repetitions, but it occurred to me that a slider might be a more effective way to adjust the weight used on an exercise with a stepper used for repetitions.

I used Principle to create simple prototypes demonstrating each method then did some guerilla testing to get user feedback. Users overwhelmingly preferred the slider for entering weight, finding it far faster and more efficient than the stepper. As a user established a workout history the app could also use that data for more efficiency, defaulting to a previously used weight and rep count so a user’s adjustments during their workout would most likely be minor.

The final solution based on user feedback was to go with a stepper to enter repetitions (which would generally only vary by a few reps) while using the slider to record the potentially more widely variable weight used on each set.

Content and design

I met with the client several times to talk about what they wanted the app to be and how our user surveys lined up with that. The user surveys indicated a desire for pre-planned workouts and workout tracking above all else, so based on that data we narrowed down the app into 5 main modules consisting of a user feed, a logbook for seeing your past and scheduled workouts, a store for purchasing influencer workouts, an activity tab to view graphs of your progress, and the primary screen for loading and creating workouts.

The client initially suggested the idea of a floating action button, something that most fitness oriented users would be familiar with from the popular My Fitness Pal app. I dismissed the idea at first, but after evaluating how it was used in other applications realized that it might be an appropriate use case for the primary workout button in the app. Having a main button with multiple options would allow a user to quickly choose to create a new workout, load an existing one, or plan their week from any screen in the app. The navigation would need to be further tested and refined, but in initial tests users responded positively.

SmartFiit floating action button
SmartFiit Workout screen
SmartFiit Activity screen
SmartFiit Store screen
SmartFiit Feed screen

Wrapping up

My final deliverable to the client was a fully functional prototype built in Principle that allowed a user to move through the different screens and test out a workout. The plan moving forward is to use the prototype to demo in a promotional video and Kickstarter campaign to fund development of the actual app.

If the project continues I'd want to invest more time into the functionality of the workout module and in particular how a user would plan their workouts for the upcoming week. I created a quick mockup of this screen for the prototype, but moving forward I'd want to do some prototyping and user testing to find the best method of scheduling workouts.

SmartFiit Prototype walkthrough