Fitness Hut

redesign an app

In this project, it was supposed to redesign the Fitness Hut app, with a specific focus on improving the class booking feature. UI design skills were utilized to enhance usability and visual appeal. Through research, competitor analysis, and wireframing, issues such as confusing navigation and design inconsistencies were resolved. A hi-fi prototype was created, providing valuable insights into the significance of research and wireframing in UI design.

Role
UX Design;
UI Design;
Discovery and Research;
User Journey
Mid-fidelity and High-fidelity design;
Interactive Prototype;

Tools
Figma, Notion, Canva

Team
Individual

Timeline
3 days

overview

the product

Fitness Hut is the biggest fitness chain in Portugal, with over 30 gyms spread across the country. As a frequent visitor myself, I am familiar with their app and how it works. The app is primarily used by people to book the classes offered by Fitness Hut. However, I noticed that this particular feature could use some improvements. Therefore, I chose to take on the challenge of redesigning the app with a specific focus on enhancing the class booking tool.

understanding

ui issues - original app

The first page of the app can be confusing because it requires users to scan a small QR code to access the gym, but this often doesn't work well. I suggested improvements to make it easier to use.

The app has five main functions: workout plans, class booking, personal trainer, home fitness, and nutrition. However, my research showed that most people only use the class booking feature. So, I decided to focus on improving that function.

Aside from design issues, there are also problems with usability in the app and booking section. Users frequently encounter errors when trying to schedule or cancel a class. These issues make it difficult for users to manage their bookings effectively.

To solve these problems, I recommended making improvements to the booking system to make it more reliable and user-friendly. By fixing the errors and simplifying the booking and cancellation processes, users would have a better experience and be able to schedule their classes more easily.

USER FLOW book a class - original app

HOME

  • Small QR code

  • Some icons used are not clear in representing their respective functions

  • The overall design lacks a modern touch.

  • Inconsistency between the icons and the brand they represent.

  • Moreover, the menu bar contains an excessive number of features, I would adress in future steps to streamline the user experience.

TRAINING

  • Again, some icons used are not clear in representing their respective functions and are not consistent with the rest of the design.

  • These tools are not very used by the users, maybe they need an improvement to encourage the users to use them more.

RESERVATIONS

Clicking on the booking button, you have options for different classes, indicated by different colors. I asked the gym staff, but even they couldn’t explain the meaning behind the colors.

The problems seen on the booking page are also presented on the reservated page on the right, and the design could have a modern update.

BOOKING

When you click on a class, there’s a brief explanation of what the class is about. However, for a first-time user, it can be challenging to understand the actual experience since the images don’t correspond to the class. There’s only the company logo.

RESERVATIONS

After completing a booking, only the date of the class is displayed, making it unclear about the specific time and the day of the week.

the design process

competitor analysis

I drew inspiration from the best in the business, focusing on the key elements commonly found in their designs. To further validate my own ideas, I utilized the Gympass and BodyTech apps as references, as they provide gym-related services and convenient class booking options. Through a comprehensive analysis, I examined the organization of their features, the color schemes and patterns employed, and various other design elements.

BodyTech App

Gympass App

the moodboard

I made a moodboard using strong blue pictures and designs to inspire me in the process of redesigning an app brand. The collection of intense blue visuals matches the existing brand’s color and adds strength and impact to the redesign. The moodboard is like a visual guide that helps me get creative and direct the brand makeover.

Moodboard

the final project

hi-fi wifreframes

Redesigned flow

key learnings & next steps

Reflecting on this experience, I have gained a deeper understanding of the UI design process and the importance of research, wireframing, and competitor analysis.

For the next steps, I will focus on interviewing users to gather insights, adding new features to enhance functionality, completing the app’s flow, and conducting further usability testing to improve the overall user experience.

I plan to apply these learnings to future projects, allowing me to continuously grow and refine my UI design skills. I’ll keep these lessons in mind for my next projects!