FIT2 Fitness Mobile App

Personal project – March 2022
Role: UX/UI designer


I designed the FIT2 app as a personal project in 2020 during my initial exploration of UI/UX design. I did extensive research which laid the groundwork for the app’s design. I’ve condensed it into a Medium article available here.

With more experience, I circled back to revisit and enhance the app’s UI design. I reevaluated due to my growing understanding and skills in the field.

Hypothesis

The FIT2 app is trying to provide simple yet effective personalised exercise methods. They work for both indoor and outdoor use. To make up for the lack of social interaction, they plan to add a feature. It will send notifications to people exercising nearby. The app will be personal and motivating. It will collect data and track activities. It will offer personalised moves. These moves will be based on the choice of indoors or outdoors. The interface must be entertaining, engaging, and motivating. It is to provide the best experience and ensure that users keep using it.

I did Competitive Analysis first. It was to get an idea of the current market and potential “competitor”. Three apps of Sweat, Cantr, and Sworkit are what I studied and analysed.

Creating a journey map for the customers allowed us to make a practical solution. It addressed their concerns and needs at different app stages.

The extracted feature set lead to the below flow map and information architecture

I presented the wireframes to the users for review. They made some key changes to fit the users’ needs.

It is important for the fitness apps to be motivating, easy to use, modern and adaptable.
When designing this app, I decided to use real-life images, videos, and assets. This means the rest of the colours should be adaptable and not so bold. The palette has a series of colours with different shades. Each shade is for a different use.

  • Touch icon sizes: 48 x 48
  • Icon size: 24 x 24
  • Icon corner radius: 8 pt
  • Internal spacing: 8 px
  • Standard padding: 16 px
  • Extra padding: 32 px
  • Corner radius: 8 pt
  • Internal spacing: 16 or various multiples of 8
  • Standard margin around the screens: 24 px
  • Space between the main components: 24 px