2021
Mobile App • UI/UX
Fitness app
An app for online workouts that allows users to stay in touch with their personal trainers 24/7, make up training programs and share progress with friends.
-
IDEA
The customers came to us when they already had the pool of trainers to cooperate with.
The idea of the app was simple — to help people train and get consultations at home as in a fitness center.
-
How does it work?
There are two ways to use this app:
1. If a user practiced at a gym but decided to continue practicing at home. In this case, the app allows them to communicate with the trainer and watch video instructions for exercises.
2. If a user hasn’t practiced with a trainer before, they can download the app to find a trainer. After that, the trainer will create an individual training program for them.
We made a mobile app for clients so that they always have their exercises ‘at hand’, and a web version for trainers.
The killer feature is that a client can practice at home with the same trainer as at the gym. The client pays only for those exercises they need, not for full programs. For example, a client can get a workout plan for weight loss or back muscles enhancement.
How does it work from the client side?
A client creates an account and fills out the profile: goals and body measurements. They can find a trainer and discuss all the terms in chat — price, number of workouts and exercises. The training plan will be displayed in the calendar.
-
Signing in
-
Setting up the goals and body measurement
-
Setting up the goals and body measurement
-
Workout with the trainer
How does it work from the trainer side?
A trainer registers in the web app and fills profile with content — exercises they specialize in. The trainer can search for the clients, send them requests, and offer services.
-
Signing in
-
Filling a profile
-
Inviting the clients
-
Creating a training program
-
How did it turn out?
UI — we made a an attractive and modern interface with 2 primary colors: purple and pink
Clickable area — the size of buttons in Fitness app is 52px according to Apple guideline
-
Onboarding — the users point out their indicators and body measurements on one screen
Text in cards — we put the text on a contrasting background for better readability
-
Initially, at the design stage, we made graphs that show statistics of body changes but after project estimation, we decided to implement it after the release.
UI/UX-DESIGN
The reference for the Fitness app was one of our previous projects — Fitforce. The customers requested us to do something similar, but in the end we made a completely different design.
Development
- Language — typescript
- Mobile App — React Native
- Web App — React
- Backend — Node.js
At each demonstration, we showed a finished part of the functionality to the client so that they could ‘touch and feel’ the project and give feedback.
We used Vimeo for video, Auth0 for authorization, Pusher for chats between clients and trainers, and Stripe for payments.
A
Typography and colors
Inter
Regular
abcdefghiJKLMNOPQrstuvwxyz
abcdefghijklmnopqrstuvwxyz
Bold
abcdefghiJKLMNOPQrstuvwxyz
abcdefghijklmnopqrstuvwxyz
-
#27284A
-
#8763C4
-
#D455B1
Results
We are getting closer to the release and:
- Completing the system of subscriptions for trainers — the higher the subscription level, the more clients a trainer can take
- Completing the functionality of workout plans
- Adding the ability for trainers to send invitations to clients
Thanks for your inquiry. We usually take up to 24 hours to get back with reply.
Wanna schedule an online meeting?