Wireframing: Fit For Free Gym App

As part of my Ironhack UX/UI bootcamp pre-work I was asked to perform a wireframing exercise of an application of my own choice. As I like to go the gym every now and then I thought it would be nice to pick my local gym app. As I’m a frequent user of this app I’m excited to share the main flow and all the things I like and dislike about it.

I was asked to choose one workflow (sequence of actions to achieve a certain goal) and focus on this. As Covid is now the ‘new normal’ Fit For Free asks all their member to book lessons or free workouts online in advance. Together with a QR entry/exit system this is the main flow of the app and probably the only reason why members download it. That is why I choose the booking sequence of a free workout as my main point of focus for this story. This flow consists out of six steps as portrayed in the picture below.

Task analysis

In order to book a free workout you need to go through five steps.

Step 1: open app and press book in the bottom bar

Step 2: press the red ‘ book’ button

Step 3: ‘select free workout’

Step 4: select date and time slot and press book (it automatically selects the current day)

Step 5: accept the Covid conditions

And that’s it!

Wireframing and prototyping

The assignment was to make a medium fidelity wireframe of the chosen flow. I decided to use the online platform Figma and created a clickable prototype. Here’s the result. I’m curious to hear what YOU think about this wireframe. Is is clear enough for you to understand the flow and go through it? Let me know.

Quick design audit

I wouldn’t be an aspiring UX designer if I hadn’t made a quick design audit of the chosen workflow.

Likes

1. UI: the contrast between white and black makes it easy to read
2. The buttons are clear and descriptive
3. Although not very pretty, the green color is very productive as you notice it straight away
4. Once you get the hang of it the app is quite fast. In only five clicks you can book a free workout

Dislikes (soo many)

1. The white home page frame (first page) looks like a slide up/down UI. But it’s not…
2. There’s an inconsistent use of the brand logo throughout the app
3. There’s a bottom and a top menu and some of the features seem to have similar functions (name/Reep and profile)
4. There’s a lot going on on the homepage… too much?
5. When you press book you don’t enter the booking screen. First you land on your current bookings. If you wan’t to proceed to booking you have to click on booking again…
6. Covid pop-up (Meh)
7. You don’t get a clear sign that you’ve made a booking. You come back in the booking screen and see a green sign on the booked class. It’s a bit unexpected…

This is it for now. Hopefully you’ve enjoyed the results of this wireframing exercise. Hit me up with notes or feedback.

Thank you!