Design and UX for a mobile app designed 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 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 guide you through creating 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 workout screen
SmartFiit 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

While a limited budget meant that we unfortunately couldn’t put too much time and effort into user research, I wanted to make sure that we talked to some users to get a feel for their needs before starting design. I allocated a few days for research early in the project and was able to survey 17 fitness enthusiasts with the primary goals of seeing what apps were in use and if there were any missing or desired features from current offerings. Their responses indicated that there doesn't seem to be a clear market leader but they overwhelmingly wanted strong tracking and history functions, and many liked the idea of being able to get pre-planned workouts. My favorite request was a feature that locked your phone out of social media app until you finished you workout, an idea that's actually pretty genius and might be worth investigating as a product of its own.

 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 seemingly common workout terminology would be rather foreign to a novice user and discussed integrating video examples showing how to correctly perform exercises into the app. The scope of the project didn't allow for in depth exploration of how we'd implement video examples, but it would definitely be a priority for future iterations.

SmartFiit stepper prototype
SmartFiit slider prototype

Wireframes, prototypes, and testing

After a first pass at initial wireframes, prototypes were an ideal way 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 the smaller variance in repetitions.

I used Principle to create simple prototypes demonstrating each method then did some guerilla testing with 6 different potential users to get 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 the previously used weight and rep count as a starting point so a user’s adjustments during their workout would likely be minor.

The final solution based on user feedback was to go with a stepper to enter repetitions while using the slider to record the potentially more widely variable weight used on each set.

SmartFiit wireframes

Initial wireframes for SmartFiit

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 many fitness enthusiasts 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 Activity Feed screen
SmartFiit Logbook screen
SmartFiit Influencer Store screen
SmartFiit Activity screen

Wrapping up

My final deliverable to the client was a clickable prototype built in Principle that allowed a user to move through the different screens and test the workout functions. 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 I have a chance to continue working on the project, I'd like 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 possible method of scheduling workouts.

SmartFiit Prototype walkthrough