Gymondo — a UX/UI case study
If you’re one of those women who’s constantly thinking of registering to the gym but had eventually to reconsider because “that place is full of leering former inmates who seem have never seen a female for years” (this and that overwhelming lazy side of yours, let’s not kid ourselves), fear not my friend because first, I’m with you, and second, the solution is at hand (or pocket, or purse, basically wherever you keep your phone).
One of the very few advantages of being in a digital era is the infinite availability of applications which enable you to basically achieve anything, even set a reminder for peetime during movies (true story, it’s called “Runpee”). This to say that if you’re like me and like to exercise for real without trying to hide in the most isolated corner of the gym, apps like Gymondo are your call.
The Challenge
With just a few taps (Gymondo has a desktop version too, but let’s stick to the app for now), any user can see that the app has nice visuals and colors (ah pink, you just get me) and an overall young a vibrant feeling. But then the critical UX eye descends upon you and you start “seeing things” (I wish it was because I was high, but that’s not the case)
First of all, the content is a bit overwhelming, the user can access to a menu with way too many features that are a bit disconnected from one another (sure, still related to fitness, but why adding so many features when the basic ones are still in the iterating phase) and the IA feels a bit all over the place. All of my users were confused about the difference between “programmes” (the big umbrella, which includes a series of workouts) and “workouts” (a workouts list, which you can filter according to which part of the body you’d like to exercise that day) when they first saw them, they understood only once they opened the tabs but only because I asked them to. The Profile was hard to locate and it didn’t let the people change the info (e.g. goals of the user) they inserted when they first accessed the app.
Since I believe what a fitness app should provide essentially is the fitness part (nutrition and gears are a plus), I focused my energies on redesigning the main navigation and the screen for the workouts, which are the most confusing part.
Let’s ask the users first?
(Duh.) My target group were females between 25 and 40 years old. When I asked some of my friends who fall into this category, I gathered the following:
- 3 out 5 wanted to be shown programs as the main content (the “all workouts” is a nice to have for some who doesn’t like to stick to one program alone).
- Some of them don’t like the routine so they’d like to keep the workouts list, but they find the labels are confusing.
- They’d like to filter programs also according to whether the equipment is necessary or not.
- They can’t “see” what filters are applied, unless they click on the filter themselves.
Seems very straightforward to me?
How I solved it
1As the users asked, the programs are the first content they see. Nonetheless, they’ll have the chance to access all the workouts together if they feel like following random but fun exercises that adapts better to their necessities. Both sections can be filtered.
2The navigation bar is placed at the bottom and replaced completely the burger menu that was placed on the top left corner (not easily reachable). On top right I left only the search bar and the favourites’ list.
3 Filters are specific to the programs (I added the option of filtering the program also according to whether the equipment is needed or not). I wanted to have filters for programs separated from workouts’ filters, that’s why I decided to use different colors for the panel that opens. (see following image). As you can see, I wanted a clean option for the filters because they’re so many and instead of letting the user scroll down to read all of them, they can have first an overview and then decide which one to open.
4The filter button is close to the navigation bar to make it more visible and easier to click on (for those using only one hand to tap), instead of having it placed on the top bar.
5 The color of the filters for the workouts varies, even though is a complementary one. It should have a different tone because this way the users won’t get confused between the selected filters tags (see image below).
6After selected, the filters are applied and can be removed easily from the main screen itself. This way the users always know what filters are selected and what they’re currently seeing. The different colors make the user understand to which category the filters belong.
The end is only the beginning.
Honestly speaking, this app has lot of potential, the design is already quite clean and captivating, the colors are targeting the right users without being too cheesy or predictable and you can find everything you need (well, it might take you a while to find it). The informations should be better structured and some features should give space to more important matters (like a profile, for instance), but as the damn ux freak I am, I’d loved the exercise.
I think finding flaws in something that it’s not even close to a finished product is very easy (is a product ever “finished” though? I hear you, ux community!). Nonetheless if you have some interesting challenge like this one or even a tougher one, please do share!
And again, claps and feedbacks are appreciated as much as a chocolate bar. 👏
