Find a Class 2.0

find a class banner.png

When

December 2015 - January 2017

my role

Principal Designer & UX Researcher. I was the sole designer for this project soliciting feedback from our design team at our weekly critiques. In addition I organized and ran all the UX research conducted during the project.


Existing Designs & Directive

The week that I joined, after months of sales work, Netpulse signed 24 Hour Fitness (24HF) as a client. The cornerstone of a 24 Hour Fitness membership is the availability of multiple locations near you, wherever you are in a city there’s a full fledged 24 Hour Facility within reach. Our Find a Class feature which allows you to view Group Fitness class schedules, and, is the second most used feature across the platform, was not built to support showing classes of multiple locations.

Directive:

  • Design Find a Class to show group fitness classes from multiple locations.
  • Design + Brand for 24 Hour Fitness with the intention of bringing it back to the core platform at a later date.
  • Support the variety of personas that rely on Find a Class.
1.png

Top Row

Existing 24 HF design on the left alongside our current Class Finder design. The 24 HF design allows you to see a full week of classes organized per club resulting in an extremely long scroll. Our Class Finder is limited to one location at a time with some search & filtering options.

Bottom Row

These were the initial wireframes for v2.0 produced by the designer before me.


First Iterations & Personas

Netpulse had never previously done research on who and how uses Find a Class. So being a 24 Hour Fitness member myself I was able to set up a survey booth at my local gym and spoke with over 20 people as they finished their group fitness workout. This surfaced the personas of "Planners" and "Opportunists".

Planners

  • Rely on Group Fitness classes entirely for their workouts.
  • They attend a class for the Instructor not necessarily for the content, or location.
  • They follow a weekly cadence usually attending the same classes at the same time weekly.
  • By Monday morning most planners know exactly what classes they'll be going to that week.

Opportunists

  • Usually new to a gym or use Group Fitness classes as a secondary form of working out.
  • They look for gaps in their days (lunch, a cancelled meeting, etc) to fit classes in.
  • Usually doesn't know/have instructor loyalty. Location and class type determine what they attend.
  • Once familiar with a gym they sometimes move into the "Planner" behaviors

Armed with these insights the objective of the first iterations was to create a unified timeline that would show all of the classes going on near me, with a timeline compelling enough to suit the discovery needs of an Opportunists and easy to maneuver for Planners to find exactly what they're looking for. Powerful filtering options accessible via an overlay would help power-users further customize their timeline. Giving us an initial hierachy of importance that looked like this:

  • Location (sorted by nearest to me)
  • Time
  • Class Type
  • Instructor
Initial explorations on the organization of the timeline and how filtering could comes into play.

Initial explorations on the organization of the timeline and how filtering could comes into play.


Hypothesis & Final Iterations

In the designs above the interaction of filtering the list felt right. A bottom sheet would open up giving the user the ability to customize their list however they saw fit, it was important to keep part of the timeline below exposed to keep in context what is being filtered, it was quick to summon and dismiss not creating too much cognitive load for the user.

The unified class list still felt off. It didn't make sense to give precedence to the location over the classes themselves. As a class goer I don't think of where before I think of what. The system should be intelligent enough to know where I am, what instructors and classes I like and surface those for me. In addition, it should be easy for me to navigate through a week of classes and "save" the ones that I plan to attend.

This brought us to the following hypotheses:

  • As a user I care less about the location I attend than about the class I go to.
  • Filtering & an intelligent system relying on my location and past behavior should surface the classes I care about the most.

The solution we came up with focused around:

  • A unified class list that's location agnostic
  • Quick to access filters and toggles to let me manipulate my class list to my preferences
  • Intelligent location based surfacing of the classes happening around me

Classes > Location

Locations took a backseat to classes. Based on your location and most frequented club we surface upcoming classes based on time first and then location.

Day Picker

We added a carousel at the top of the screen to make hopping between days a breeze. If I'm a planner instead of scrolling through a week I can now easily hop to the day I want to schedule a workout for.

My Schedule

24 Hour Fitness operates on a first come first serve basis for classes, they don't allow pre-booking. However as a user I need a way to see the classes I want to attend. In addition to helping a user organize their classes for a week from a behavior change standpoint we're more likely to follow-through on a task if we've committed to it in some way. Finally, other gyms that we serve do allow class booking so we needed to make sure the system accounted for that.


Beta Test & Launch

Beta testing had never been done at Netpulse before. With such a dramatic change to one of our most important features we were hesitant to launch without conducting some kind of user validation. We were given a web developper who created a stripped down version of Class Finder that we were able to test at three locations with Goodlife Australia.

While we were only able to conduct the test for two weeks users overwhelmingly preferred the new navigation and unified class list design. We went ahead with the version below for the 24 Hour Fitness Launch.

 
Launch candidate for 24 Hour Fitness

Launch candidate for 24 Hour Fitness

 

Launch & Reception

 
 

In August of 2016 we launched Class Finder 2.0 to 24 Hour Fitness to a less than stellar reception. Here's what we found when we dug into what was causing the negative reviews:

Top - What was shipped, Bottom - What was intended

Top - What was shipped, Bottom - What was intended

Lack of MMS Integration

Our engineering team ran into some complications with integrating 24 HF's Member Management System, which meant that we couldn't load instructor names (a crucial data point for recurring class goers).

Scrolling Issues

Our initial design showed you all classes from the 3 nearest gyms to you. 24 HF wanted to show classes from the 10 nearest gyms. Which resulted in some days having over 100 classes to scroll through. While 10 gyms is overwhelming this is still invariably a design issue. Other gyms in our client base are entirely class based so our class finder needs to support navigation through a large amount of classes.

80% of Design Implemented

Due to limited engineering bandwidth only about 80% of the intended design was implemented. Which meant that edge cases, onboarding and null states weren't properly included. For example we had no way to prevent someone from overfiltering their class list, resulting in a null state which says "No classes to show" without giving the user a way out or to correct their filters.

 


v2.1 Action Plan & First Iterations

Due to the launch of several other enterprise clients that Fall we weren't able to get engineering bandwidth to address the issues presented with Find a Class 2.0 until December 2016, six months after launch. Taking what we had learned above we came up with the following key issues to address:

  1. Address scrolling and navigational issues. Using class data from 24 HF fitness we needed to make sure that scrolling through a day of classes, navigating between days and multiple weeks was as intuitive as possible.
  2. Design for all the "edge" cases. With a feature like this that's so ingrained in a class-goers routine all edge cases, messaging and onboarding take a larger degree of importance. We mapped out the full user journey from first time experience to repeated use for both persona types and designed against that.
Explorations on the different components of find a class 2.0

Explorations on the different components of find a class 2.0

I iterated on list design to maximize vertical space used and showcase as much data as was necessary. The day picker was given a visual refresh to enable a user to see a full week at a time and then swipe to the following weeks. Finally if today was Monday and I was planning my classes for the week I wanted to get a workout in on Friday at 5pm I should be able to easily navigate from Monday to Friday afternoon, explorations were conducted around enabling someone to quickly scroll to their desired time.

 
 

Day Picker

The day picker was updated to support showing a full 7 days to make it easier for users to swipe through. States were added to indicate Today, past days, and days without classes.

List Items

List items were redesigned to better utilize whitespace, we can now fit 5 classes above the fold compared to our previous 3-4. In addition, type and color usage were updated to allow for quick scanning of the most important information as you scroll.

Scroll State

We improved scrolling behavior to make it easier to rapidly scroll through a class list to find the timeslots you're looking for.

Filter Cards

For our power users we wanted to make filtering more powerful so we turned filters into "cards" that you could edit and save. The thought being if you live and work in different locations or travel to different cities often you could set up the appropriate filters and then toggle through them.


Usability Round 1 - Learnings

Once we had arrived at the first draft above, with 24HF's help I set up two rounds of usability study with a mix of recurring class goers, instructors and members who were brand new to 24HF. Here's what we learned:

  • Navigation and scrolling performed significantly better. I preloaded the invision prototype with actual class data for 10 locations over a week, and even with the 300+ classes all participants were able to quickly navigate & scroll through the week and book 4 classes.
  • Filtering on the other hand didn't make any sense. None of the participants could see a use case where they would actually use it. We had complicated filtering and made it a heavy interaction, almost like tweaking an excel doc, saving it, and then dealing with multiple files to switch between. Filters, fundamentally are toggles that need to be quickly accessible.
  • Location is not at the same hierarchical level as filters. Coming back full circle to disprove our initial hypothesis we learned that most class goers do think of location before considering class type and instructor. The location and the time must fit into their existing lives for them to then consider class type and instructor. Choosing a location and choosing a class are fundamentally different decisions taken in sequence. The average 24 Hour Fitness user has only ever visited 3 gyms, as much as we want to encourage exploration between locations, we add unnecessary clutter if we're showing them classes from 10 locations, especially when you consider that each location on average has 54 classes a week.

At this point we asked ourselves can we make all filtering feel like a quick toggle? Including location itself. Can we have the user select one location and have the system intelligently help them make that decision? This informed the next round of exploration. 

Iterations on choosing a location up front and a new UX for filtering.

Iterations on choosing a location up front and a new UX for filtering.


Usability Round 2

Moving into our second round of Usability I changed the design to do the heavy lifting of picking a location up front, we help you make that decision by showing you previously visited gyms, your distance from them and a breakdown of what classes they're teaching that week.

 
Usability study 2 prototype (built in Invision)

Usability study 2 prototype (built in Invision)

 

Round 2 - Learnings

Conducted with the same sample size and diversity as the first test (with entirely new participants) here's what we learned:

  • Not a single person brought up the fact that they could only choose one location at a time. When tasked with switching locations the UX was easily understood by all participants.
  • Filtering performed much better, toggling and tweaking parameters made sense to the participants and they all really liked the "filter suggestions" feature.

With the confirmation of this test we were ready to iterate on the final UI tweaks and design for all edge cases + first time behavior.


Final Deliverables

 

Day Picker & Scroll State

Our day picker now allows you to navigate through a full week. Days that are greyed out give the user an indication that either there are no classes on that day or the date is in the past. Once you've scrolled to the bottom of the list we give you an easy way to jump to the next day.

 
 
 

Location Picker

The location picker was designed with both of our personas in mind. We present your home gym & most frequently visited gyms first to make it easy to toggle between those.

When it comes to picking a gym we'll tell you how many classes of a certain type there are at that location for the week. If we know you mostly attend Zumba and Yoga we'll surface those first.

For the Opportunist looking to get a workout in ASAP we also show you the next available class at the gym.

 
 

Booking & First Experience

While 24HF doesn't support booking classes we wanted to give users a way to save the classes they're attending. So tapping on the plus button will add a class to the "My Schedule" section. We also give the user the ability to directly add the classes they've booked to their phone calendar, using the double permission modal approach to reduce the likelyhood of not gaining permission to the calendar.

As you go through the app and perform your first actions (choosing a location, filtering, booking) helpful explainers appear to aid the flow of the experience.

 
 
 
 

Filtering & Smart Suggestions

Filters are quickly accessible via the top bar, when you go in to select a filter we take you to a full screen that auto-calculates how many available classes your selections will result in, this prevents the user from returning to an empty class list.

Once you've set a filter we can show you suggestions of additional tags to add. If you like a class from a particular instructor that signals to us that you like his/her's teaching style, so we can suggest other class types that they may teach.

 
Class List

Class List

Null State with escape options

Null State with escape options

My Schedule

My Schedule

 
 
 

Read this next: