Fitness App
Category :
UX, UI and Product Design
Client :
Health and Fitness
Project :
Android & IOS App
Duration :
10 Weeks
Project overview
Fitness app is a project of a popular fitness trainer that wanted to turn his fitness regime into a complete digital course that others can use for their fitness & health activities.
Our job was to create the UI/UX of the whole app including its activities from the splash screen to the exit screen for a smooth user flow across the app.
Requirements
What Our Fitness Client Required?
The team wanted this fitness app to be subscription-only. It meant that only users who had bought the subscription for the fitness app by paying for it, could sign-in to the app. So, we had to create a login screen that would be displayed for every user who opens the app. Since the app is already available on the app store, only users who have paid for the app can get access to the data available.
Total number of activity templates included:
-
Splash screen – login
-
Dashboard screen
-
Exercise videos
-
Exercise video detail
-
Profile screen
-
Goals screen
The above list shows the number of templates we will create for the fitness app. Since we are creating a single template for the exercise videos page, we will replicate the same template for all exercise videos. We will be having 5 exercises for each part of the body by the trainer. These will be displayed separately on the activity screen.
Each exercise video detail page would include a timer, a graph, and a gif or a video (tutorial) of the exercise pose.
Solution for Designing the Fitness App
We used Protopie to create the user interface for the mobile app. Our intention was to create three different activity screens at first. Once they were approved by the client, we would have replicated the same to the whole app.
-
The first screen was the login screen
-
The dashboard screen with graph
-
Exercise video detail screen
These were the only screens that we created for the whole app because the rest of the apps were to be based on the same template. Once the app was ready, It was time to get the app design approved by the client.
Product Market Fit
We had to research the fitness industry to get an idea about what the app design should be. Fitness enthusiasts have now started using mobile apps. They download them from Google Play or Apple App Store.
From our research, this is what we thought about the fitness audience.
Audience
-
People looking for fitness courses
-
Professional fitness experts looking for a course outline
-
Beginners starting their fitness workouts and looking for a coach
Age
-
15 to 20 = 20%
-
20 to 40 = 60%
-
40 to 50 = 20%
Occupation
-
Professionals – 30%
-
Beginners – 50%
-
Old-age folks – 20%
Tools & Technology
-
Adobe XD
-
Adobe Photoshop
-
Protopie
Result: Single Template, Attractive Theme
As you can see in the above screenshots, the app has a simple UI, a smooth user-journey, and everything of importance for the user is available on the dashboard screen.
We have also added analytics on the dashboard that show his daily usage patterns and improves his morale.
Moreover, we have provided a section on top of the dashboard screen called ‘Goals’. The reason for this is simple: User doesn’t have to move to the ‘Exercise’ activity to know what exercises are waiting for him/her.
This decreases the number of steps, and the time that would be spent for the same. This small change of the ‘Goals’ activity has made the app more attractive, reduced overall bounce rate, and ensured that users do their exercises regularly.
Further, we also have added notification reminders that will be displayed on the user’s screen everyday to help them remember their exercise routines. This increases retention and engagement on the app even more.
