Fitness App

App redesign to improve class booking functionality

What I worked on

— Heuristics

— Benchmark

— Wireframing

— Design System

— Prototyping

— Testing

Role

UX-UI Designer

The project happened during the Bootcamp at Ironhack, Barcelona

Field: Fitness business, App

Timing: 3 days — Nov. 2022

Team: Solo project

Overview

DiR is a fitness company from Barcelona that has several gyms located in the province of Barcelona, Girona and Madrid.

The app contains the following features: user profile, organize, and book training & nutrition sessions according to user’s needs and the real-time availability of DiR´s team.

However, the interface of the app is not very intuitive, especially when it comes to booking training classes it has a difficult path.

— Challenge

Provide to My DiR App users with an effective, easy and user-friendly UI and a pleasing visual aesthetic.

How might we make MyDiR users want to join the activity classes at the gym?

Product analysis

Analysing the app's main user flow

Through heuristics that are experience-based techniques for problem-solving, learning and discovery, this allows to think through the possible outcomes quickly and arrive at a solution that may solve a unique problem. Below, we analyse the current user flow to book the classes:

Home screen

  • Image on image

  • So big user image

  • It is not clear what is clickable and what is not.

  • What does AADD and EP mean?

  • Is it necessary to book twice (if this is the only way to do it)?

List of activities Screen

  • Endless scrolling

  • Confusing class information (no differentiation between classes).

  • Is the favourite button necessary?

  • Useless filters

Reserved Screens

  • The information text on the reservation policy and activity info is something the user should already know.

  • Visually, it looks saturated and inconsistent

  • Once booked, you will be returned to the activity information section.

Competitor analysis

What's out there?

Through the following pros and cons of the My DiR app, it was concluded that the Atles Export app offers most of the solutions to the heuristics detected in the current app.

Prototype

Lo-fi Wireframing - First Steps

Focus on the main problem path we started to do the first wireframes:

  • Main task: book a guided activity on a specific day

  • Added filters: classification of class type, centre and professional.

  • Making the path shorter: unifying booking screens.

  • Create a section for upcoming classes.

Designing closer to the final product

Once we had worked out a solid structure, making sure we didn't forget anything or leave any dead spots, we started exploring ideas with Mid-fi wireframes in Figma and finally turned the most viable ideas into prototypes for user testing.

Style guide

Where our inspiration comes from

Through this set of graphic pieces, we tried to express the emotions and concepts that represent the new visual identity of My DiR App.

How we build it

This is the UX Kit, the basic elements that will make up the final structure of our prototype.

High-fidelity prototype and Testing

How does our new design work?

On the homepage, we have completely changed the layout, keeping the functions of the current one.

Now the image of the user has been reduced, as has the header image, which now gives space to the rest of the interactions with greater clarity.

In addition to giving greater prominence to the activities, promoting them, making them more attractive through these 3D modelling that I did.

No more endless scrolling.

Filters have been added for the centre, type of activities, coaches and the date of the activity.

In each card, all the data is displayed with icons that allow us to see all the information at a glance.

According to the usability test carried out on 8 users, they found the content much clearer and tidier, and emphasized that the addition of images helps to differentiate the activities easily.

Two screens have been merged into one, as the information about the activity, according to the usability test, is not usually read.

The confirmation is clearer, and does not "invite" us to unsubscribe, as some of the users who tested the original app commented.

Now, instead, we get a pop-up confirmation of the booking.

The option to cancel the booking from the list has been added.
In addition, we can see the number of the reserved seat.

The end

Less is more

Key Learnings

✔ Stay focus on the user.

✔ Solve first the main problems.

✔ Be organized in prototyping.

✔ Test the prototype as soon as possible.

Next Steps

➤ Further test the prototype with users of different visual abilities to check if they see the smaller icons adequately.

➤ Apply the improvements from the user.

➤ Develop the rest of the features: filters and menu.

Thanks for your attention ☻

HMI Design, work methodology at EDAG across diverse client projects