Jenine Marquez

In November 2022, I signed up for Hotworx, a 24-hour gym with several isometric and HIIT classes that take place within saunas in the gym. Instead of traditional group fitness classes, Hotworx members sign up for classes at any time of day and follow video workouts inside the saunas.

Once I signed up, I learned I had to schedule for my classes on the Hotworx app. As a new member, I found that the Hotworx app was clunky and inefficient.

Current User Flow

Every time, the process would go something like this: 

1. Type my gym’s location into the search bar and tap Continue (I signed up for my membership at another location, which shows up as the Default, but my actual regular gym is different, so I have to type it in every time.)

2. Either choose By Session Type or By Time

3. If I choose “By Session Type,” I choose the day I want to go, scroll through the list picker to find the class I’m looking for, tap “Show Slots,” and scroll through the time slots, starting from 12:00 am to the end of the day

4. If I choose “By Time,” I choose the day I want to go, scroll through the time picker to find the time I’m looking for, tap “Show Available Sessions,” and scroll through the list of classes

5. If I want to go back one page to change the time or change the class, there is no back button - I have to press the Home button at the top of the page and go through the process all over again. If I want to change the gym location, I have to go back to the hamburger menu on the left side and tap “Book Appointments” again.

When going through the booking process, here were my main pain points:

1. Lack of a back button when I wanted to look at another time or session type

2. Having to take extra steps to change the location or selection method

3. Scheduling table that isn’t mobile responsive - having to scroll horizontally to see the entire row, including the availability

4. No information about the classes I’m signing up for

Goals

My main goals are to reorganize the layout of the different screens and improve the UI so that users can sign up in less time. If I can cut down the number of seconds it takes to sign up for a class, my goal will be reached.

Since this section is specifically for members and not prospective, I want to strike a good balance between satisfying new users and regular users who already know how the app works.

Opportunities

I compiled a list of nice-to-have opportunities that I believe could improve the user experience of scheduling classes:

Global Updates

• Make information more visual, and add pictures and videos when applicable to make the information more appealing without compromising brevity or usability

• Add a back button

Selecting Location

• Map

• Favoriting locations

• Studio info (hours, address, phone number)

Location Homepage

• Making the location header more useful

• Improving the list that shows scheduled appointments

Booking Classes

• Adjusting table layout to avoid horizontal scrolling

• Information about classes you’re signing up for - workout description, equipment

Requirements/Constraints

• I didn’t want to radically change the user flow on the current app, since members are already used to the basic framework. Instead, my aim is to rearrange/adjust the layouts of each step of the user flow.

• Since each location is an independently-owned franchise, I made sure to keep each location separate instead of combining locations in the experience.

• The app only lets you book classes three days in advance, in order to give users a fairer chance at getting the classes they want.

The four main subsections within the Book Appointments feature are

• Select Location - Choosing the studio where you’ll booking your classes

• Location Homepage - The main hub of the location you picked, which includes the location in the header, two buttons for booking your session by Session Type and Time, and a list of your scheduled appointments at that location.

• Book by Session Type - Choosing the date, then selecting the class you want to take and picking from the available times

• Book by Time - Choosing the date, then selecting a time and picking from the list of classes at that time

When wireframing, I tackled each section one at a time, starting with Select Location, and as I worked on more sections, made adjustments to the other screens as necessary. As I worked on the screens, I kept my list of opportunities in mind and tried to see where I could fit them into each screen.

After wireframing all the screens needed, I took the current type styles/colors and started adding it to the screens. I ended up cutting down on the number of type styles and colors in order to simplify the app styles. Once I settled on the type and color styles, I created a high-fidelity prototype for cafe testing.

Current App
Hotworx users usually have one or two locations that they frequent. The current location page makes the assumption that you only go to one location, so it defaults to a single location: the location where you signed up. At least in my case, I signed up at a different gym than the regular gym I go to, so every time I want to book a session at my regular gym, I have to tap on the search bar and search for my regular location every single time. The location dropdown lists locations with no discernible order (Jonesboro, AR; Midland, TX; Boynton Beach, FL…) 

Redesign
When I redesigned this screen, I wanted to give users the option to favorite multiple locations, to make it quicker to book sessions for the location you need.

1. When you want to find a studio outside the locations you usually frequent, the Find Studio page lets you find locations by map or search bar.

2. I replaced the studio code subheading (FL-0028) with the location address, a piece of information more useful and informative to users.

3. Each location comes with an info button that links out to the studio page. When a user taps on the icon, it will bring them to a Studio Info page that gives them the address, studio code, and phone number of a studio.

4. I also added a favorites button. When the user taps on the icon, that location will show up on the homepage for easy access. Users can also easily unfavorite it and take it off the homepage.

Changing Locations

Current App
To change the location, you have to navigate to another page, then return to the Book Appointments page to reset the flow.

If you click on the location header at the top, it includes a button back to the location homepage any time. The current location header includes a button to bring you back to the location page any time. In the current app, it’s a necessity since there are no back buttons in the experience.

Redesign
Since I’m adding back buttons, the homepage will only be one tap away. Therefore, I’d change the Home button to a Change button, so that users can change their location at any time without having to tap back at least two pages.

Once users click on the Change button, it will open a popup similar to the Choose Studio page at the beginning of the flow. From there, users can choose from their favorite locations or search for another studio. If they change their mind, they can always exit out of the popup. Once users change their location, it will bring them to that Location homepage.

Location Homepage

Once you select a location in the app, it will bring you to a page with the location title at the top, options to book a session (by class type or by time), and any scheduled appointments you’ve booked under that location. 

1. I changed the entire section name from “Book Appointments” to “Book Session.” The experience was inconsistent in wording - appointments/sessions and scheduling/booking - so I just decided to consolidate them all and use “book session” across the experience.

2. I updated the Book Session options from “By Session Type”/”By Time” to “By Time”/”By Class.” I found there was some confusion with the wording “session type,” as it implied that you’d be choosing a session based on isometric or HIIT (the two types of classes offered at Hotworx), so I changed it to “class” to make it more straightforward. I also found that more users choose their classes by time than by class, so I switched the order of the buttons to put By Time first.

3. Instead of having each piece of information as its own column (date, session name, sauna number, time slots, action), I put all the sessions under the days they fall on, then redistributed the information into headings, subheadings, and buttons. I took the dates out of the MM-DD-YY format so that users could see the weekdays and written-out dates of their sessions.

Current App

You select a day, choose the time slot from a rolodex, then tap “Show Slots” to generate the available classes for that time. If you don’t see the class you want for that time slot, you have to click on the Home button at the top and repeat the process all over again. When you make it to the list of classes and want to check the availability, you have to scroll horizontally back and forth to see the whole table, since the table doesn’t fit within the screen. 

Redesign

1. I set the Time page up with a horizontal scroll bar with time increments, so that users can easily switch times and see the list of classes.

2. I redistributed the table columns (sauna, time, session, slot 1, slot 2, slot 3) into headings and subheadings.

3. I changed the size and styles of the availability slot. When a slot is occupied, it has the orange fill with the Hotworx logo; when a slot is vacant, it has a gray fill; and when you select a slot, the square turns light orange with an animated red border, so that you can see the pending slot you want to choose and change it if necessary. Once you decide on a slot, you would tap the “Choose Slot” button anchored at the bottom and it would bring you to the Confirmation page.

Current App
You select a day, choose the session name from a rolodex, then tap “Show Slots” to generate the available times. Again, if you want to look at a different class, you have to click Home at the top of the screen and start all over again.

Redesign
At first, I thought about having the class names in a horizontal scroll bar like the times, but since there are 11 classes, I figured it would be too tedious to find the class you want. Therefore, I made a separate page where you can scroll through all the classes and read through the brief descriptions (since the current app doesn’t have any information about the classes you can sign up for).

I also categorized the classes by Isometric and HIIT and put the class names in alphabetical order, which makes it easier to decide which workout to choose.

Once you select a class, the next page would look more like the Time page, where you can select the day and view the list of classes.

Class Info

Current App
The app has zero information about any of the classes offered. The only information available is on their marketing website, and it doesn’t include details like the instructor or the equipment needed. When I first signed up, I went into the classes not knowing what to bring or what to expect, so there were a few times I started the class and realized I was supposed to bring resistance bands I didn’t have.

Redesign
For the benefit of new members, I wanted to make sure that class info was readily available throughout the experience. Also for the benefit of long-time members, I wanted to present this info in a way that wasn’t intrusive in the booking process.

After doing some explorations with icons, pictures, and dropdowns, I eventually landed on a simple solution that would work across all the different pages: the link. Whether you’re on the location homepage, Book by Time page, or the Book by Class list, users would tap the link on the class name, and an overlay would pop up with the class info.

I also added a dropdown on the Book by Class page, as opposed to showing all the class info and forcing the user to scroll. If a user wants to know more about the specific class they’re booking for, they can tap on the dropdown arrow, and the class description will appear.

Auditing the current app’s design styles, there were lots of headers, font styles, and colors that made the experience look more cluttered and dated. Simultaneously, the default-looking Roboto font, copy, and layout made me feel like the design was rushed/not well thought out. Therefore, when redesigning the app, my goal was to make the experience look clean and minimal, while providing intention and friendliness to every design choice I made.

I simplified the type to just one typeface: Hanken Grotesk, a playful grotesque font that matches the Hotworx logo. I also pared down the colors to an orange, light orange, black, white, and two shades of gray. To match the rounded font, I incorporated rounded icons and squares throughout the experience.

Since I designed this prototype, I’ve shown it to some Hotworx members, and initial reactions have been positive. Some of my design choices, like the dropdown on the Book By Class page, have been overlooked, so I’ve made some tweaks to make them a little more noticeable on first glance.

The next step for this project would be to take my prototype and conduct more formal user testing with Hotworx members. I would mainly want to see if my scheduling layout redesign is intuitive enough for users, and see if my added features (advanced location search, class info, add to calendar) would be regularly utilized by Hotworx users.

Working on this project has made me feel more connected to my Hotworx gym. By talking to fellow Hotworx members and sharing a common ground over our shared frustrations over the app, I’ve gained some camaraderie with the people I see at the gym every week.