DUMBBELLS: Gym appointments made easy- UX/UI Case Study

Paula Deschamps
12 min readNov 25, 2020

My first UX project, developed in 5 days for a Open Class Course

Dumbbells app

The Challenge

How to make the experience of gym members better during the pandemic?

  • Duration: 5 days
  • Tools used: Figma, Miro, Google Forms, Marvel app
  • Key methods: CSD Matrix (Certainties, Suppositions, Doubts), Empathy map, User journey, Persona, Survey, Interviews, Crazy 8, Sketching, Wireframes, High fidelity prototypes, Usability test

Objective: Come up with a solution to make going to the gym during the pandemic a better experience.

Problem: Since gyms were allowed to open with a limited capacity due to COVID, members went back to them but they are still afraid to catch the virus. The app tackled this issue.

Solution: Through research, understand the main issues that could be improved to make the experience for gym members better when going to the gym during the pandemic. The solution brings capacity control, data such as number of people allowed at a time at the gym to make people feel safer, and scheduling and cancelling appointments made easier.

The Process

Dumbbells is an app that makes easier for the gym member to schedule its gym time, as well as cancel them and have visibility on the amount of people they are going to be in contact with. The can also report positive Covid testing anonymously so the gym can gather data to improve their service and health norms.

Good research and various methods gave me a base to start defining the best way to solve the problem. I ended up having data enough to consider that working on a service design approach could work and an app would as well. Due to the pandemic I chose the app for the viability to test it with gym members.

It was a 5-day-project (Nov. 17th, 2020 until Nov. 21st, 2020) with sprints and I used the double diamond as my compass:

CSD Matrix (Assumptions)

Survey and interviews (Discovery)

Persona, User Journey and empathy map (Definition)

Crazy 8 and wireframe (Design)

Prototype and usability test (Prototype and Testing)

01: Assumptions

To gather good and reliable data I used a survey and interviews. But in order to get to good questions to be answered, I needed to understand the problem a little better. I started with a CSD Matrix where I pointed out all my certainties, doubts and suppositions regarding gym members that chose to go back to the gym even though the pandemic is not over:​​​​​​​

CDS Matrix

02. Discovery

Survey

Focusing on the doubts and suppositions I had, I used them as a base to create a form to understand if I was going on the right direction and also to check about demographics. I got 51 responses but from them, I could only use 31 which were the people that effectively go to the gym (I used this question to understand user habits and filter the right users for the app). The most important data I found and that guided me to create my empathy map and user journey were the below:

  • Do you have a smartphone with internet access? (confirmed my doubt: Everybody that goes to the gym owns a cellphone)
  • Do you have any fitness app or smartwatch for this purpose? (partially confirmed my supposition: People that go to the gym have at least one fit app installed on their phone. The majority of people that go to the gym do have, but it is not everyone)
  • How often did you go to the gym before the pandemic? and Are you going to the gym during the pandemic after it reopened? (understand user habits)
  • What do you think of packed gyms?(confirmed my doubt: People that go to the gym don’t like it when they are packed)
  • Would it be good if there was a way to know the least packed times to go?(partially confirmed my supposition: People would not go to the gym on a given time if they knew beforehand that it would be packed. Most people answered they would like to know the best time to go, but on the previous question 61,3% said they don’t like it when it is packed but tell will go inside and workout anyway. So basically it would make the gym user happier to know, but not necessarily will mean they won’t go if it is packed)
  • Are you afraid of getting COVID at the gym? (confirmed my doubt: Even though people are going to the gym, they are still afraid of getting covid)
Most important survey results

Interviews

After the survey I filtered and read the data acquired, and I needed to understand more in-depth from the people going to the gym during the pandemic, so I asked 3 people going to different gyms (one going to a major gym network in Brazil, one going to a big gym in São Paulo and another one going to a medium sized neighbourhood gym). The questions I’ve asked:

– How does it work to sanitize the gym equipment after use?

– Are you able to schedule your time? If yes, how does it work?

– What is the limit of people inside the gym each time?

– Does anyone control the amount of people inside?

– Does anyone control if people are using the mask all the time and if they are cleaning the equipment after use?​​​​​​​

Interview responses summarized

Some similar comments from all the interviewees:

“I don’t think what they provide at the gym to clean the equipment is alcohol 70%”

“No one controls the amount of people leaving the gym, therefore I don’t know if the gym is over the allowed limit or not”

“I have never been given the information of the gym’s capacity”

“The gym should provide more alcohol and paper towel stations”

“I’d like to know how many people are working out at the same time as me”

With the survey and interview information, I was able to confirm a couple of things:

• Scheduling is welcome by the gym member and it must be simple and instantaneous: users confirmed they would like to be able to schedule their times, check if the gym was packed and the interviewee 2 and 3 informed that WhatsApp is not a good method (slow), and having no schedule option is terrible.

• Users would like to have more information about the sanitation rules, such as limit capacity: on the interviews, people said they didn’t have this information but would be good to know

• Users do not trust that the gyms are actually providing alcohol 70% (recommended to kill the virus when cleaning a surface): interviewers said they think it is not alcohol being used, and this concerns them a bit

• Gym members don’t like packed gyms: some will go inside anyone, some will just go back home and not even enter, but all of them would like to have a way to avoid it

03: Definition

With a better understanding of the users, their pains, their wishes and their experiences, I was able to create, with a couple of methods and tools, visual representations of my findings. Those helped guiding me through the solution and with the further development of my case. For this stage, I used persona, Empathy map and user journey:​​​​​​

Persona
Empathy Map

It made a lot of sense for this case to map the journey of three users to better understand their pain points, frustrations and tackle them appropriately:

The Solution

04: Design

The tools used on step 4 were really useful to come up with ideas of solutions for the problem. At this stage I was sure there were possible solutions to improve the user experience at the gym itself (so physical solutions) and also solutions to work on this improvement online. Due to this idea, I got the below doing the Crazy 8:

Crazy 8

After analyzing what I came up with, it was a moment to decide which solution made more sense. I thought about the time that I had (two days and a half), the resources I had (working alone, it was Wednesday night and pandemic still going on) and finally possibility to actually test my solution (needed to be done in one day, but even if I had more time, how feasible would be to actually get a gym to test my ideas?).

With the 3 questions answered, the best option was to go to the digital world and work on an app instead of working on a service designe. Initially I came up with 7 screens that made more sense to start with, because they represented the first screen the user would see (login area), the main menu and the main functionality of the app (schedule gym time). ​​​​​​​

Sketch used for prototype on paper

Before working on the wireframe, I used the marvel app and showed my sketches to a 5 friends (if you’d like to see my prototype on paper (in Portuguese): https://marvelapp.com/1391dic4). As it was very abstract, there was not much to point out, but they gave me good feedbacks:

• To make sure the user could select an activity type since some gyms have spinning classes, crossfit, yoga, etc.

• They approved the little bar before confirming the schedule that points out how many people are already schedule for the activity, at that time.

• They thought it would be better to be able to schedule just the day the person is at and the next day, due to the covid questions asked and to have better data visibility.

Knowing I was in the right track, I started my wireframe using Miro. I designed 30 screens representing nearly all the screen the user could encounter:

30 wireframe screen for the app created using Miro.com
Wireframe in Miro: https://miro.com/app/board/o9J_leO45JE=/

Once again, I asked for the same 5 people to see and let me know their thoughts. I didn’t want to waste time making a high fidelity prototype of something that didn’t make sense to the final user. This did save me some time, as I got as feedback:

• When deciding an exercise, to use pictures and scroll instead of a carousel

• To not use as statistics the amount of people the user encounter as it would make the user to feel bad and scared

• To discard the functionally of advising people that someone with covid had worked out at the same time as they (e.g. Celia did spinning on Monday at 10am and so did Jeff. Jeff tested positive for COVID on Saturday, reported in the app and Celia got an alert that someone in the same activity as she confirmed testing positive for Covid)

  • On the other hand, they liked the idea of people being able to inform the gym if they tested positive for COVID, so the gym would have this data and take action if the cases started to rise, especially in a particular time and activity.

05: Prototype

With a good wireframe in hands, it was show time. Using Figma I was able to create a high fidelity prototype with some main function, which were: scheduling gym time, cancel gym time, check-in to the gym, check-out of the gym. Typography, color palette and buttons styles were mentioned at the top of the Figma screen:

High fidelity prototype designed using figma
Prototype on Figma: https://www.figma.com/file/st0cw2P9TWaJc52V7RtibZ/DUMBBELLs?node-id=0%3A1

Here, we can see some user pain points being addressed:

  • Users wanted to be able to schedule their gym time so they can avoid packed gym
  • Users wanted to be able to schedule in a simple matter, and whatsapp was not simple nor fast as it depended on someone from the gym being attentive to the phone all the time, and it made appointments very early in the morning or very close to the hour difficult to make
  • Check-in and check-out gave the users visibility of how many people they were working out with, and also gave the gym a tool to control if people were actually working out within their determined time
  • The transparency of being able to see, in real time, if the gym was getting more packed than the user would like gives control to s/he to leave the gym at that time

06: Testing

The moment of truth, was the prototype good? Was it simple? Was it understandable? Did it have everything the user needed? I asked 4 people to help me out with these question. My usability test took place with 2 people in the same house as me, and virtually with other 2 people. I asked them to execute 4 tasks in this order:

  1. Schedule an activity
  2. Cancel an activity
  3. Check-in to the gym
  4. Check-out of the gym

All of them were able to execute all of the tasks, but they pointed out 3 points that needed to be improved and one addition idea that I thought made sense to add:

When trying to schedule an activity, the way I first designed the time that could not be selected was not very clear. They understood there was something different with that button but they couldn’t instantly say why it was different from the rest.

Solution: I took off the drop shadow from the button and added an inner shadow. Also, I changed the color of the font to be lighter than the rest of the buttons that could be selected:

Buttons change before and after

I used slide button in some actions that I wanted to make a bit more difficult for the user to confirm so they would not press it by mistake. However, my first designed button was rectangular and even though it had another rectangle at the edge with a different color, the users didn’t understand they were supposed to slide.

Solution: recognition is a bless. I turned by odd rectangular button into a regular slide button similar to iPhone’s turn off button.

Slide button before and after

Users loved the idea of having a little progress bar showing the number of people schedule for the activity and the limit of the gym, however, they questioned me why this was only visible when scheduling and post-check-in.

Solution: added the exactly same progress bar close to the appointment they had, so that could be updated if the user was connected to the internet every time someone scheduled or cancelled that same activity on the same date and time.

Progress bar on main screen. Screen before and after

The users asked about how the user would know when their time was up, so I came up with this screen as well:

Timer added

The Conclusion

Being able to work on a whole project in five days was a very nice experience. Using sprints and having a good research definitely help the project to develop smoothly. Also, taking my time to test several times in several stages of development helped me to save time and work on a solution that was user centered from beginning to end.

I hope you enjoyed it, and please feel free to comment and leave any suggestions or compliments.

*UX Case Study for IDP Open Class, Nov. 2020*

Below is the video of the app being used produced using Figma:

#ux #ui #userexperience #doublediamond #prototype #uxresearch

--

--