Bodybuilding App UI UXCase Study
Background
Improving your body must have been one of your New Years resolutions. Our body is our most important asset and tool, and being in a good shape should be one of the primary priorities. And since every aspect of life is slowly but surely going to apps, this aspect isn’t the exception. Being just a tap away from your coach and a meal/workout plan is so amazing. What a time to be alive!
My good friend is a fitness coach with a lot of success and having many clients at the same time, started to be exhausting. One, he is messaging with Gmail. The other 5 via WhatsApp and a couple more via Messenger. Hard to keep track and be organized, especially with similar but different limitations and options on each of the apps. They definitely weren’t build for sending weekly workout and diet programs. And having me as a UI UX designer, he realised — why don’t I make my own app.
Now that you know the background, we can go on. We discussed the idea, and I pretty liked it. Sounded like a ton of fun, because I hit the gym myself, and my friend is becoming my client.
Let’s design!
Before rolling into design software, we need to determine the whole process that we are going to follow. You should have more or less the same system approaching every new project, that will give you the best results most of the times. Mine looks like this:
- Research
- Inspiration (Moodboards)
- Designing
- Testing and Polishing
Research
Research for me means getting as much relevant information as possible. It involved talking with the client about his clients, to get the know the average user. A key to a good UX is knowing the user. You can’t make a small car for the F1 and a formula for agriculture. You need to know who is the user.
An important factor was age because it will determine the look and feel of the app. For kids, you want bright, saturated colours with illustrations, while it surely won’t work for the elders.
Inspiration (Moodboards)
This may be the most important step for every project I do. I learn a lot from it every single time and find amazing solutions other designers have pulled off. My main source is Dribbble, but I like to check out Medium and Behance as well. These 3 combined work like a charm.
Although, this time it was a bit easier since my client knew this competition and had the rough look he wanted to have. Mostly VShred and Milan Strongman.
Designing
Here goes the fun part. Using every information we gained to complete something unique. I’m obsessed with good UX, every time I work I want a user to feel it is familiar and easy to navigate. You will judge if I succeeded.
Onboarding and Home Screen
Onboarding are used to gain information about user — his or her gender, age, height, weight, activity and goal. After registering and picking 15 day trial, here goes the homescreen.
On home screen I didn’t have tough time. I just needs to show Training, Diet, Rest and Calculator tabs. Not big of a challenge, but a nice result anyways.
Calendar
Although important for the user and the admin, calendar was a challenge that I’m the most proud of solving. One of the nicest UI’s that I made. Calendar needs to show this months calendar and day by day if it is a training day or the rest or cheat day. Admin imputs these to each user with his admin version, and apart from just information what it is, we need to show couple of information about the day — for example is it a leg day, or a chest one. Let’s see what I did.
Training and Diet
A true core of the app. Essential for user experience, being able to see the training (workout, reps, sets and how it is done) and diet (today's meals, calories, ingredients and the recipe). Not many personal trainers have this kind of stuff, especially here in Serbia. I’m glad that I packed everything that is essential for the user just 2 taps away.
Rest
is just static blog like page with couple of stock photos and text about the rest and how important it is (for body surely, but for this case study not much). So, let’s move to complex stuff — calculators!
Calculators
Basic math calculator was invented all the way back in 1642. but how does it correlate with bodybuilding app? Of course, it is not normal math calculator, rather calorie and and water needs calculator. Now it makes sense more sense, tho. We wanted to have them linked to onboarding screen information by default and to be easy to input them and get quick results. Client gave me special accolades for this one.
Progress
Tracking the progress is a must when working with clients, and therefore was very important for the project. We needed to track it by water consumption, notes, pictures and of course weight. I came up with an idea to have charts that will show water and weight over the time, which worked like an interesting solution.
User testing
When I do user testing, I mostly care about how they feel when they use my apps, and how effectively they complete the tasks I demand from them. I ran the testing on my college and former highschool friends, because the app was mostly build for these types of users. The feedback was very positive, with 94% of successful completing of tasks and after minor changes and polishments, this is the final result.
Summary
That was about it, ladies and gentlemen. Chat is just a normal chat which is not user to user, but user to admin, to get in touch with the trainer, and profile is standard profile that almost every app needs to have. Special thanks to my friend and client for this fun opportunity. App will be available on the Playstore in May 2021.
Contact
If you liked this case study, please leave a comment. I would love to hear your opinions and critics. If you want to collaborate, feel free to email me on naucidizajn@gmail.com
