Fitness Mobile Application - Designing an Interactive Interface targeting Identity Reinforcement


QUAD tackles identity reinforcement and self-accomplishment through a fitness mobile application. The scope of the project was to investigate whether such an idea would motivate individuals to embark in a new fitness programme and subscribe to the gym. The fitness app would be linked to one specific gym environment via a fresh colour-coding system, and thus the main research conducted was primarily based on colour theory, perception of colour and UI/UX design. The project will be creating a brand new gym's visual identity, which is connected to a mobile application that will serve as product design for the fitness centre.


In order to design the Brand Identity and the Mobile User Interface Screens, the following assessment path to was taken to ensure that the key objectives were at their forefront:

Design Process: Brand Identity & UI/UX Design


The name QUAD has been chosen since the gym structure is mainly composed of four principle workout rooms, each tinted in one of the brand colours. Thus, the idea of having four partitions is translated in QUAD (quadrilateral) - the equivalent of a four sided polygon. The branding and the mobile UI design created upon the visual identity are perceived to be two separate studies, however, it was made sure to keep brand consistency and continuity, to deliver a specific brand message via the gym’s visual identity, brand elements, style and values.

Brand Design Mockup


QUAD aspires to explore the relationship between colour, gym environments and fitness technologies. The selection of the gym’s brand colours are a combination of neon colours and contemporary UI gradients. The pivotal area of research in this case study is colour. In fact, the fitness UI design project links the user and the gym environment via a colour-coded system; all facilities, fitness equipment and machines are tinted in QUAD’s brand colours (as shown in the gym environment image).

Interior Design - Gym Environment


The platform links the user and the gym environment via a colour-coded system. The main scope of this project is to investigate whether individuals would find such an interactive tool motivating to embark in a new fitness programme and subscribe to the gym.


After defining the user flow, I started sketching out the wireframe and started the design process. The following are features incorporated within QUAD's fitness app:
(a) instant notifications sent via the application regarding general information, re- scheduling of classes, changes in opening hours or any other relevant news,
(b) virtual personal trainer acting as a gym buddy,
(c) a preset library of various training sessions according to time available at the gym, and
(d) workout library, gym equipment, workout stations and anything inside the gym’s facilities are linked in a colour-coded system within the mobile application.

Wireframes - Low Fidelity Designs


Minimal illustrations of people working out in QUAD’s gym environment were created to aid the user during training sessions. Such images clearly show in which room the exercise should be performed. In fact, the machines, equipment and other facilities depicted are tinted in accordance to the type of exercise, thus corresponding to one specific QUAD room. Besides this, the QUAD Trainers serve as a quick guide for users to show how exercises should be performed in great form for maximum results.

Gym Illustrations - QUAD Trainers
Mobile Application Design_Workout Screens


The QUAD workout aims to offer a fully-functional link between the user, the mobile application and the gym facilities. As described previously, each colour correlates to one of the four workout rooms inside QUAD's fitness centre. The aesthatic of the workout section reverts on an extremely minimal and direct approach in order for the user to perform a full training session in a fun yet structural manner.

QUAD Slogan_Banner Design


Get in touch. We'd love to hear from you.

Send Message