Back to the gym with UX
Fitness5 & Gym — AppDesign Case Study
Disclaimer
This is my own project. The Fitness5 & Gym didn’t ask me to design the app.
Used tools
- Paper & pen — for sketches, low-fi protos
- Miro board — for organize the project and screen design
- Figma — for prototyping
- Invision app — for personal testing
- iPhone built in screen recorder — for personal testing
- Movavi — for remote testing
INTRODUCTION
The gym where I go to TRX — Fitness5 & Gym Savoya — has its own group application interface for class applications (https://savoya.dix.hu/m/, later dix).
My experience of applying for the classes led me to this project. Dix has been optimized for desktop use and is not responsive at all. On a smartphone, especially on a small screen (I use it on an old iPhone SE), it is difficult to read, and navigating the schedule is problematic. The gym website and dix are two separate interfaces. This is not in harmony with the gym’s website.
One important recurring experience for me and many other users was that they signed up for the wrong time workout.
During the UX course, it occurred to me that something could be started with these. The two websites should be combined together to be usable as one interface on any device. It should access functions that are currently only available on one of them, e.g. to register for a group lesson.
I had several ideas (a thorough redesign, application) of what was the result, how and why, I will present in this case study. I designed the interface for iOS. The screens appear on iPhone 11 Pro.
After the course, this became my first project. Based on my own research and my own and others ’experiences.
Unlucky factor: I started the project during the first quarantine of COVID-19, which caused several problems for e.g. desk research and in the organization and conduct of user tests.
Problem
The interface is non-responsive, very difficult to use from a smartphone, especially for smaller displays; the calendar does not show the current week causing the often failed applications.
When used on a desktop, class registration works perfectly. Because the text is clearly visible and legible, there is less chance of accidental mis-clicking. Page contrast is less of a problem.
When used from a phone, navigation on the dix is difficult, the letters are small at the classes, the text is hanging off from the buttons, it doesn’t send an error message in case of a possible incorrect user or password, so they don’t know if we type something wrong or frozen. If I had to rate it, I would give 2 out of 5 stars.
The coach regularly raised our attention to apply so that she could put together a more accurate set of exercises. On several occasions, the number of applicants didn’t match the number of those present. Many times I ran into the situation where I applied but still not the one I wanted because I didn’t pay attention to the date and applied for the workout of the following week. The default date is one week later.
I checked in regularly from my phone, I also tried to do it even at home or at work, because it was a challenge to zoom in and pick the right day and class while shaking on a bus or tram. I wasn’t alone with these annoyances, others have told me similar experiences.
Purpose
The goal is to create an interface where the info on the website and the registration for classes are in one place. Navigating the calendar is simple and straightforward, and signing up for classes or if needed cancelling is quick and easy. Primarily it should be usable on mobile. This is important because the vast majority of gym users manage their affairs on mobile, including applying for a workout.
Required functions
- Create your own profile, attended workouts, show season ticket info
- Filter — classes, coaches, rooms
- Simplified timetable / calendar
The structure of the project
The structure of the project is based on design thinking and a slightly modified double diamond (more like a snail or lollipop)
- Desk research
- Usertest
- Design / iterate
- Repeat
The order changes from time to time
I carried out the project in parallel with two personas.
The two groups:
- Regular users
- New users
This was important because those who use the interface regularly have different needs and insights and those who are new.
DESK RESEARCH NO. 1
In the first phase of research, the idea was to create a mobile version that could be opened from a browser, so I searched the net. I checked out several gym / gym chain websites. How to register, how to register for classes:
As well as other sports-independent sites with a large number of users, I looked around for registration forms:
- HBO GO
- Oszkár
I tried them on both desktop and mobile. I created small user flows for them. In several gyms I had a problem with applying for the workout.
Unlucky factor: All gyms were closed during the quarantine, registration for the class didn’t work. I shaped the mindset a bit, moved on with the project, replaced the tests after the quarantine.
My impressions:
- Check-in after registration or login
- In some places the registration / login is not clear
- You can either only create an unusable account or can’t create one at all
- Not responsive
- Due to quarantine, certain services are not available in several places — logically
- In the case of the Sportkártya / AYCM you can create a profile — count the occasions — this can be useful for season ticket information, for example
USABILITY TEST FOR THE EXISTING PLATFORM a.k.a test for the Dix
As I mentioned, I divided the participants into two separate groups for the test from the beginning.
The two groups:
- Regular users
- New users
Recruiting users
Regular users: I wrote a post in the closed facebook group on TRX that such a project / product is being made and I would like to ask them for help in testing it. Here we can observe the peculiarity of social media that out of 100 likers (one click doesn’t hurt) there are 10 active commenters, minimal substantial reaction. So at the next workout, I personally asked my mates to take part in this test.
New users: it was a bit easier, I asked a couple of good friends and acquaintances to help with the testing, they were willingly available.
The task of the test
Find the given workout, sign up, and then cancel the class. The task of the two groups differed in that regular users logged in with their own account and new ones had to register (in case of problems they could log in with mine — all two groups). That’s why it was important for me to follow the registration interfaces as well.
Lucky factor: Testing has been timed so that quarantine has already been dissolved. This allowed me to personally take the tests with my own phone’s built-in screen capture feature.
I conducted the test with 8 people, 4–4 regular and new users. The following result was obtained:
Appearance
- Responsiveness
- Readability
- Current date of the calendar
- Display the timetable view on one screen
Function
- Filtering, listing — room, sport, coach
- Own profile
- Manage notifications
The biggest problem
The biggest problem was navigating the calendar. You have to swipe between the rooms. You can easily tap at a workout by accident and also have to pay attention to the date.
DESIGN
From the test results, it became clear what the flow would be, what the functions were, and what screens would be needed.
Planned flow: log in, find the right and / or the specified class/workout, log in and then cancel.
Planned main features:
- Timetable-calendar
- filtering option (room, workout, coach)
- show own profile
Planned screens:
- Login / Reg
- Timetable
- Workouts “card”
- Confirm subscription
- Own profile
- New home screen
How might we most easily show a timetable?
This project is the main How might we? question, which stems from randomly marked classes or dates in the tests — due to visibility and readability issues.
In parallel with the design, another round of research began. I was trying to find the best solution to manage the calendar-schedule. The schedule is basically a horizontal element, the appearance of which on a monitor is not a problem. But if the user begins to use the interface on the phone — which in a narrow but vertical direction is almost endless — it becomes unusable. It falls apart, the user has to zoom in, inevitably comes across something the user didn’t want. I was specifically looking for appointment booking sites and apps not only on sports: where can booking an appointment be important in everyday life? That’s how it came to my mind: the cinema. I checked the cinema city reservation system. How to choose a movie and then book a ticket for it. It gave a lot of ideas.
When I felt that I was getting ready for the first test, I asked my former teammates to look at what they thought, if they found a flaw in it.
Quite a few things have changed:
The most significant change was that “the hamburger ran out,” meaning that the number of items on the hamburger menu was reduced to such an extent that it lost its meaning. Rather, the elements of a tab bar of its own emerged. Here comes the point that instead of a mobile version that can be opened from a browser, an application will be created with stand-alone navigation. Although the elements of the tab bar had not yet emerged clearly, more and more the other screens were beginning to gain meaning. In addition to the menu system, the structures of certain screens and the labels of some buttons have also changed.
Lucky factor: Due to my engineering and graphic design background, I basically draw sketches, screens, low-fidelity prototypes by hand. Thanks to the update of the miro board, it is great to make screens and wireframes even at a high-fidelity level. I stepped to a mid-fidelity level and carried it through. I really liked this tool, I had a good experience with miro before.
The first test was performed after the iteration.
USABILITY TEST FOR THE PROTO №1 a.k.a. The Panic
The first test among regular users didn’t turn out the way I planned. Because of my first prototype test, I couldn’t manage the test well so I didn’t have to help with the task — it was a great lesson. Users could only go through the task with help. 3/3 tried to sign up for a class/workout at “Következő edzés(ek)” (Next workout(s)) and “Válassz edzést!” (Choose workout!). The “Órarend” (Timetable) button in the tab bar didn’t even come up as a solution. The placement of “Árak” (Prices) and “Hírek” (News) was frustrating. This didn’t come up in consultation with the team, probably because they paid more attention to how it would work and be used.
“What am I doing wrong?” (this was a cry for help from one of the testers)
After Tester 3, I iterated one, “Válassz dátumot!” (Select a date!) button came first in “Órarend” (Timetable). See if this small change can lead to more successful tests. I did two more tests with this version, here they went through the task successfully. This matched up with a WOW experience, and even such a seemingly small change brought a significant improvement.
In this version, there was one way to apply for workout: “Órarend” (Timetable) option at the tab bar -> tap “Válassz dátumot!” (Select date!), select the workout and check in.
Note to self: start user testing as soon as possible.
After processing the tests, this result was obtained:
- There are several ways to apply for training
- A button from the main page could take you to the schedule if you have not recorded a workout yet
- “Árak” (Prices), “Hírek” (News) appear elsewhere
Looking at the tests and the state of the prototype, some changes have occurred in me as well — there was too much text, no icons or images, the whole thing was too dense.
Lucky factor: One of the testers (my coach) had some suggestions from specific apps I didn’t know (F&M, SportMate).
Note to self: it is also worth talking to people who are not necessarily users of the app, but are at home in the profession, in this case fitness. E.g. coaches.
USABILITY TEST FOR PROTO №2–3 a.k.a. The ‘Final’ Version
After the iteration, 3 paths were finally developed to apply for the workout
The task of the test
Select the “Savoya VIP” gym, sign up or log in, then check in the TRX workout on Sept 15 and cancel it. After that find the gym’s e-mail address.
After the iteration, 3 paths were finally developed to apply for the workout. The users used these in equal proportions.
Paths
- “Megnézem az órarendet” (View Timetable) button on the main page -> selects from the calendar in the “Órarend” (Timetable)
- “Megnézem az órarendet” (View Timetable) button on the main page -> “Edzések” (Workouts) button on the “Órarend” (Timetable)
- “Edzések” (Workouts) button on the main page
Path to “Órarend” (Timetable): “Megnézem az órarendet” (View timetable) button on the main page, bottom tab bar icon
Path to “Edzések” (Workouts): “Edzések” (Workouts) button on the main page, at “Órarend” (Timetable)
⅔ of the testers used the “Megnézem az órarendet” (View Timetable) button on the main page. The remaining ⅓ is used the “Edzések” (Workouts) button, also on the main page. The “Órarend” (Timetable) button in the bottom tab bar didn’t appear as an option for anyone.
The result thus calls into question its legitimacy, although it has not been specifically tested. No changes have been made in this regard. Wherever the user is in the app, the tab bar will be available most securely. The other two buttons are only available from one screen at a time.
This test was already much more successful than before, with participants being able to solve tasks quickly and easily.
Between the tests, an iteration took place again, and an application or cancellation was added to the flow. Avoiding any accidental tapping aside. After the iteration, three more testers went through the tasks and the “application” successfully.
Some feedback
“I think it’s perfectly fair, it’s clear what I’ll find where”
“It was about like when I drive home from Budapest. Everything is going and you don’t really know how it just happened ”
This video shows the last version of the proto. The flow: regular user log in, she/he has no workout yet. Choose the “Megnézem az órarendet” (View the timetable), then tap on the “Edzések” (Workouts), then choose TRX, check in, and cancel at the end.
CONCLUSION — RESULT — TAKEAWAYS
Positive experiences:
- Getting 1st own app design
- I was able to apply what I learned in the course
- I handled the pandemic in the meantime
- All the while I persevered and time stretched longer than I planned
- Positive feedback from testers
- UX snail
Mistakes:
- At first, I was very attached to my own opinions and ideas, I had to let go of them
- I was at a low point, thinking that the app is not good. But that was not the case
- It should have been tested before the group discussion
- The tests were processed long after they were completed, which caused annoyance several times, e.g. when the recording failed and I did not check this immediately after the test
WOW experiences:
- I was incredibly proud to associate from a completely different sector / area with a solution that worked well there and tried to transpose it in a customized way — cinema
- In miro you can create wireframes, icon library, smiley library
- Even a small change can be a great success
Recommended tool:
Miro board — screen design — you can design a screen in it. Best after paper
Be aware tool:
- Invision app mobile — I used it for personal proto tests. If you are designing in figma and you will personally test a prototype in invision, you need to pay attention to what device you are designing because the images exported from the fig may not fit the invision devices. If you work in figma, test with it, if you work in invision, test with it. Not good to mix.
- Loom — I would have used it for remote tests, but it is time limited
- Movavi — I used to record remote tests — if the earpiece is plugged in, the tester will not be heard on the recording. Sometimes it doesn’t record either a picture or sound.
I had a great time because I managed to create something from my hobby that is useful for others and supports health, which can also be commercially viable. The end result was a design of an application I wanted to create. It fit the purpose perfectly and I also received feedback during the last tests. It went very well. Since it was my first independent job after the training, it was helpful to see how much work needed to be done alone, no team to help or to throw the tasks apart. Fortunately, the old team still helped a lot.
Check out my website: https://arpasanna.com/