I started out trying to make an app that I could see myself using, a fitness app. Below was my first attempt at making a fitness app in Axure. This is a dashboard I made to log information to get healthier, shown are screenshots of adding a running workout: In order you would press the plus button in the top right and a popup would come up, after selecting “Running” it would let you select how long you ran for and the distance you ran. Finally after saving the run your Log is updates with your run at the bottom.
The Competition
I decided to start fresh on this project. I did some research into other popular fitness apps like Sworkit, Fooducate, Daily Workouts, Freeletics: HIIT Fitness Coach and the Fitness app that comes with every iPhone. All of these were rated among the best fitness apps currently available but none of them track both the food you eat as well as exercises you do.
This is Sworkit, it is designed for different levels of fitness including beginner, intermediate and advanced it teaches you how to do each exercise and keeps track of the ones you’ve done. It does not track food and you can’t add any workouts that aren’t already on the app.
Fooducate is nice for tracking how much you eat and knows how much you should be eating based on your age, body dimensions and activity level. However, it only tracks food so if you are into fitness odds are you’d need this as well as another app to track the exercises you do.
Freeletics is another fitness app that has “Training Journeys” you can do. It gives you a set of workouts about 3 days a week for you to do and tracks the workouts you’ve done. This is another nice option for people who need guidance for what they’re doing in the gym, they can follow what the app says and they’ll get fit.
Someone who could use a better fitness app
Here we have an average gym goer named Paul. Paul goes to the gym 3 days a week every week. He tries to eat healthy and keeps track of what he does in the gym using the Notes app on his phone. He has recently downloaded the Fooducate app to help him keep track of his food intake and loves it, if only he could also put in the exercises he does at the gym to get a better idea of the calories he’s burning to build his body better.
The fitness app I designed is for people who know what they’re doing. The people you see at the gym putting their sets and reps into the notes app in their phone. I’m building the perfect app for people like Paul, he doesn’t need an app to teach him how to squat or bench or do a push up, he’s looking for a place to put his fitness notes, his food intake, and personal measurements to get the body he wants. You can put in the exercises you’re doing each day and the app adjusts how many calories you need to replenish what you lost working out. If you’re looking to build muscle the app can tell you how much protein you need each day to maximize your gains. It also keeps all of your workout, food and weight information in one app, organized by days so you can track your progress and reach your goals.
I liked some of the ideas I saw in the other apps and tried to incorporate parts of them into mine like the date selector at the top to easily navigate between days and the food progress bar at the top. The app would also take in information about the user and their goals to make suggestions like how much protein and carbs they should be consuming each day.
Pre-Design Planning
I started with laying out how I wanted a user flow to work with the app, how a user would navigate to different pages and get some of the activities done.
Wireframing
From there I created a wireframe or a rough mockup of how the app would look. It shows in more detail the user flow and gives you an idea of what a user would see while navigating the app
Final Design
Finally I added images and colors to give the app a more polished look. This would be what the users would actually see when using the app. I skipped a couple of pages from the wireframe but it gives an idea of what the user would see while using the app. Below is an interactive prototype (works best in fullscreen) and below that are some screenshots of the pages. Try clicking around in the prototype to see all the different pages.
