AlexPaul

Fitness App UI Design

Fitness Industry | Team: 1 Designer & 1 Developer

A mobile app that started from an idea to help personal fitness trainers and their clients by making the experience of discovering, communicating, and working with each other as simple as possible

Project Overview

I was initially brought onto the project as a consultant to help the developer with advice on the app's initial version, which he already had developed. However, we quickly began to discover more and more issues with the existing app and eventually decided that a complete makeover was needed, so I transitioned to being the UI/UX Designer on the project. We took an iterative approach to the development of the app. Initially planning, designing, and developing an MVP with a set of features based on our assumptions and ideas for the product over which we kept iterating once we started to get some feedback from our group of test users.

Project Overview

Visual Design System

For the UI Design phase, I began by drafting some high fidelity mock-ups of the key screens of the app from which I developed a style guide detailing colors, typography, and imagery. I also extracted a set of components that evolved throughout the design process.

Visual Design System

Key Design Points

We wanted to accommodate both user types (clients & trainers) in the same app and to make everything as painless as possible for them. Below are a few of what I feel are the key points of the app.

Key Design Points

Profiles

The profile screen is the main screen for both trainers and clients. For clients is the place where they set up their availability schedule and describe their expectations and needs for all the trainers to see. For trainers is the place where clients first land to check if they are a good fit. It displays things like their rating, what type of training they do or what gyms they train at.

Profiles

Discovery

The discovery features are more focused on clients looking for trainers allowing them to discover new trainers or group classes through a range of search methods. They can search by keywords, specific locations or areas as well as various attributes of the trainers. Trainers can also discover potential clients and engage with them but in a limited way to avoid spam.

Discovery

Collaboration

Once a trainer and a client start collaborating they can manage everything in the app. The client can set up an availability schedule and his expectations from the trainer while the trainer can plan workouts based on the client's availability and prepare their meal plan. They can also communicate and send updates through the in-app messenger.

Collaboration

Management

Trainers can easily manage their business through the app. They can keep track of each of their clients, create and manage group classes, stay organized with the in-app calendar and make informed decisions about their business based on in-app analytics.

Management

The Outcome

The outcome of this project is a set of high-fidelity screen mock-ups illustrating all the features of the app and a fully developed version 1.0 of it.

The Outcome