Gympass

A small navigation and design improvement of this Brazilian Startup (English version)

Portuguese version: https://medium.com/@rafaelvale/gympass-56dfed6be804

Quick Intro
I have a great friend who recently joined Gympass and tells me only good stuff about the company and the people who work for it. But I never used their app before. Coincidentally I received an e-mail about a Product Designer position at Gympass, and I decided to apply. When I was filling out the job post, I came across this question: “Tell us three problems of our product.” So as I had never used it, I downloaded the app and I started browsing and found some problems on some screens that here I try to fix them. I hope you enjoy it! 👍

Summary
1. Background
2. Problems
3. The final result

1. Background 📜

Gympass, a corporate benefit plan that gives access to gyms, is quietly transforming from a good local idea — born in the second country with the largest number of gyms — into a global business.

Founded five years ago, Gympass is already in 10 countries, including France, Germany, the Netherlands, Italy, and the United Kingdom. And soon in the USA.

But how it works? 🤔
Gympass is a corporate benefit tailored to a world increasingly concerned with health and physical activity: with it, a company employee can make unlimited visits to multiple gyms — and pays less than half the regular monthly fee.

Typically, a company’s HR contracts the Gympass and builds some plan options. Each employee chooses his plan, depending on what he is willing to pay. The company pays a management fee that depends on the number of eligible employees and the profile of the Gyms that will be used.

2. Problems 😢

Gyms Screen pt.1
Not mentioning a slow loading with no animation, as soon as you download and enter the app, it presents a screen with four buttons at the top, “Back,” “Gyms,” “How it works.” In addition to a hamburger menu, those famous three lines, you know ?! And just below three more buttons, “filters,” “List,” and “Map.” In my opinion, there are some things to be improved there. Let’s take a look:

Header highlighted

1- Just downloaded the app. Where will the button back take me? Yes, it does not work. When clicking it, it enters the active state (underlined), but nothing happens.

2- The “How It Works” should be the first thing the user sees when downloading the app. An onboarding explaining the app, how the business works and pricing plans would be pretty cool.

3- I think it’s the List button unnecessary since we are looking to the list. If we delete it we’ll gain more space and lessen the feeling of a mess.

4- I missed a search. Sometimes I want to know if the X Gym is in my plan, or where there’s a gym near my hotel when I go on a business trip to schedule it.

5- The hamburger menu here is playing the role of that closet you throw everything in there that you will not use, you know ?! Being that there are things in there that I think it is essential to look, like “business” and the login/register.

6- Unnecessary huge space between the first menu and the second menu.

Gym screen pt2
Now let’s focus on the list itself. There are problems here of spacing, hierarchy, organization, grid, etc. Another issue here is the top menu that disappears when we scroll. So if I’m down there on the list and I want to change my screen, I’d have to roll baaaaack up there.

Gym List and the vertical grid

1- Vertical spacing without a pattern on the grid. I found spacing of 11px, 16px, 13px, 15px, 33px … This problem is present on all screens.

2- Distance to the gym in the upper right corner, address in the lower-left corner .. Why not leave this Infos together ?!

3- With the search bar that I suggested above, we don’t need this “Gym in Brasilia,” thus gaining more space.

4- There is no size pattern on the images; some are taking up the whole screen width; some are not.

5- How about taking the arrows out of the images and putting only dots so the user knows he can see more photos? It makes the image cleaner.

6- On the prices, here I chose to put the gym’s best price to attract the user’s attention and make him want to click for more info.

7- The gym logo here is unnecessary; it increases the mess.

Maps Screen

Following the nav, I clicked on the map to see what it was, and as expected, it was a map with the nearest gyms. Cool! But I also believe there is room for improvement.

“Have several options for gyms is a great idea, but I can not find any of my plans because the app and the website are terrible. The map says that there is no gym close to my Zip Address, but at the list, it tells me that are several closes to me. When I get the address, they are too far. “ (Complaint got from the app store).

1- The pin on the map is tiny, tough to click.

2- Without clicking the pin, I can not know which gym is there or what modality it offers.

3- If I click on the filter and apply it, the app exits the map and return to the list.

4- When using the filter > go back to the list> go back to the map again> and then click the “back” button, sometimes the filter resets, sometimes it goes to a screen that I did not even click …

5- The back button is essential because if the user wants to go to the list, he will think, “I’m going BACK to the list,” and he will automatically look for the back button in the upper left corner and not the “list” button.

"How it Works" Screen

This screen should be one of the most important in the app for new users; it has to be the welcome screen. In it, there are chances to present the business, app, subscription plans, in a very cool and light way. What was done here in the app was pretty much a responsive version of the website. There is LOTS of information, and we got tired of reading. This screen also suffers from the problem of the menu not being fixed. If you roll to the end of it and want to get back to the top to navigate is pretty annoying.

“The app is very weak, lots of text, poor usability.” (Complaint removed from the app store)

Gym Info Screen
In this screen, right away, I think it should have all the primary information of the Gym: Name, photos, addresses, modalities offered, academy information, price range. In the current version, there is a photo, which, when clicking opens a modal for others, logo of the gym, name, a filled heart icon, ratings, address, and the first plan option.

1- The default way we navigate between photos should be maintained. If on the other screen is a carousel here should also be. Here it looks like you only have one photo.

2- The heart filled gives the impression that I clicked on it. But I did not click, and the black filled is weird.

3- What modalities does this gym offer besides this first one that is shown? I’ll have to go all the way down to find.

4- Before the price plan, it would be nice to know more about the gym. I would not close such a package in the dark.

5- Call to action fixed on the bottom does not call any attention; it is tiny. It could be more significant and with a better call to action.

6- There is no map for me to know how to get there or where it is.3. The Final Result 😍

1- Gym List / 2- Gym Info/ 3- Onboard

New Gym Screen
First of all, I removed those buttons on the top that were a little confused and disorganized. I replaced it for a search bar so that the user can search for cities, names of gyms, modalities, etc. I also put some more used shortcuts filters and the filter button for more not-so-wanted options. And I added a bottom menu of important shortcuts down there.

I’ve also made a better organization on the vertical grid; it’s all in the standard 5px (5, 10, 15, 20, 25, 30, 35 …). It is remarkable how it gives comfort to reading the information. I also used less red, only in highlights, and I took out any color other than red and black.

I left the image of the gym very clean to give it more highlight, also placed the distance and price information down the image where all the texts are (address, name of the academy, primary modalities, prices, evaluations). In the original screen, we had only a line about the summary of the gym; it didn’t talk much about it, so I took it out to maintain the organization.

Gave a pattern to the side margins, and fixed the size of the images so that they were all the same size. Removed the navigation arrows and placed bullets.

New Map Screen
Here I tried to solve all the problems I mentioned earlier. The small pin, the not knowing which gym is on the map before clicking the pin, and also added prices on the maps for the user to see which is the cheapest gym where he is looking for

New Gym Info Screen
Here I focused on the first wave of information the user sees upon entering this area and solve the problems mentioned. I used the same pattern of picture navigation from the Gym List, removed the heart since we are in a non-logged in area, put all the modalities offered by the gym, added a shortcut to the map and also made a call to action more flashy, with information of the package selected.

New “How it Works” Screen
Here is one of the most significant changes. I tried to make everything light, simple, fun, and attractive. I explained in a few steps what Gympass is, how it works, and I highlighted the business plan, and indication.

Prototype

I also made a quick prototype to show how the navigation works.

Thanks for reading! Don't forget to clap and show your support 👏 👏👏

Any critic, suggestion, coffee invitations send me an email at rafaelmsv@gmail.com or access my LinkedIn.

Designer at Tonic App — linkedin.com/in/rafaelmsv