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.
Process
Competitive analysis
User research
Wireframe the designs
Created the final design
Target is people from 1a8 to 55 years old who work/study from home
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.
Customer journey map
Creating a journey map for the customers allowed us to make a practical solution. It addressed their concerns and needs at different app stages.
Task flow map and information architecture
The extracted feature set lead to the below flow map and information architecture
Low fidelity wireframes
I presented the wireframes to the users for review. They made some key changes to fit the users’ needs.
FIT2 app brand identity and colour palette
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.
Auto-layout makes sure elements stay consistent
Iconography
- Touch icon sizes: 48 x 48
- Icon size: 24 x 24
- Icon corner radius: 8 pt
Button
- Internal spacing: 8 px
- Standard padding: 16 px
- Extra padding: 32 px
- Corner radius: 8 pt
Components
Wireframe the designs
- Internal spacing: 16 or various multiples of 8
- Standard margin around the screens: 24 px
- Space between the main components: 24 px