UI/UX Case study of Gym app🏋️
Take care of your body, its the only thing that you need to live with — Jim rohn
There are generally 3 types of people
- Fitness freaks: Those who exercise all day
- Require a push: People who want to be fit but are lacking the knowledge or the motivation
- Couch potatoes: People who regularly eat junk food and exercise minimally
Most people I have encountered lie in the second category. In college I encountered the same issues and realized that even the gyms were not very well equipped. Over the years things have changed however many challenges remain the same. There could be many gyms but it’s hard to find good and educated coaches. To solve these issues I envisaged a gym app concept.
I call it Fitz. Hopefully it will solve a couple of good user problems.
My Design Process
I follow a Lean UX Design thinking process. It starts with getting to know the personas we’re designing for. Without them, we wouldn’t know what to design, how it should work, or why it matters.
I have divided my process into 4 steps as below diagram:
Persona
1/3rd of the young (under 30) Indian population suffers from Lifestyle diseases. Some facts are stated below:
- 4% people are suffer from high cholesterol, followed by 7.7% with diabetes and 6.7% with thyroid
- Improper nutrition, lack of sleep and stress are adding to the fitness woes of Indians
Based on online research and my understanding of people I knew and have interviewed, I created a more detailed persona. The purpose of this persona was to guide me during my thought process. It allowed me take design decisions and prioritize.
Job stories
I went to people of different age groups and had asked them some questions. They were done in order to create job stories. Some of these stories are as follows:
- I don’t have access to good coaches, so there is no one to guide me.
- My college is starting in 2 months and I want to gain muscle mass to look great and feel confident.
- For the last 8 months I have been on a junk food diet and on a zero workout plan. I want to start exercising and move towards being fit.
Once I have my job stories, let focus in problem statement.
Problem statement
Because of Sunil’s eating habits and zero workout regime, he has gained fat around his belly. Now he wants an app that helps in understanding how to exercise and motivates him towards a healthy and fit life style. Furthermore he also needs an app that logs his everyday workout and acts as a ‘go to guy’ for any health related information.
Concept and Wireframes
After going through the above process, I made a couple of wireframe sketches to begin with. Check them below:
Highlights: I always been a fan of minimalistic approach and have applied the same here. Even the information collected is precise so that relevant results can be given with less input. AI uses the information given by the user and uses it to motivate the user to complete his/her tasks. Highly relevant results obviously help this cause. Furthermore color selection and
layout are arranged in such a way that a user can easily scan the screen, see what is important and take a decision.
Visual Design (UI)
Splash screen
The splash screen is an important part of an app, as this screen welcomes the user. It is a critical decision point where the user will login only if things are impressive and clear. I used an illustration of a hero and small text with a CTA. Furthermore, I incorporated animation to increase user interest.
On-boarding flow
I have divided the whole process into steps, so that the user is not overloaded on any single step. If a user does not signup initially the app will ask a few questions needed for pitching a plan. This allows the app to be used. The user can signup later. I have used a conversational on-boarding style.
Dashboard
Once user done with on-boarding & selected a particular plan user will be asked to set workout alarm. User don’t have to add any additional alarm on phone. After setting of alarm user will be landed on dashboard where he can access whole workout charts, score etc.
ZDA — Fitness buddy
Bot named ZDA, introduced. Bot will fuction as a personal assistent where user can get any help like finding nearby gym, get recipies for evening snacks, get workout scores, videos etc.
Takeaways
A muscle is like a car. If you want it to run well early in the morning, you have to warm it up.
India’s health raked 154 on Healthcare Access and Quality Index — 2015, but I think now over the year it is improving in some cities. I went through some common issues which I tried to solve my designs.
There are many cases that are not shown here, only few cases are shown and discussed.
Note: This case study, research and UI screens are done by me for own study and not for any company.
A many thanks for reading! Please show your love by tapping 👏🏻clap button.
If you want to collaborate, talk about product design, or just want to say hello, write to me at amit1.art@gmail.com or connect via LinkedIn. Also please visit my Dribbble page for more works.
