HEAT
Responsive Web Design
HEAT is an updated responsive web design for a local fitness studio that offers refreshed branding and a fully redesigned booking experience.
View Case study

Case Study Overview

Role UX/UI Design & Branding  | Tools InVision & Sketch  | Time 4 weeks

Client

HEATBootcamp is a 12 year-old boutique fitness studio in Austin, Texas that specializes in bootcamp-style classes as well as personal training.

Challenge

Create a responsive website that addresses the following

  • How might HEAT’s website offer a more clear representation of their brand and offerings?
  • How might the booking process be streamlined?
  • How might the referral and new member sign up process be simplified and more successful?

Solution

A fully redesigned responsive website with updated branding, redesigned IA and new and efficient booking and sign up experiences.

Case Study Details

Explore this section to dive deep into my design process and see how this project came together or skip below to the takeaway to see what I learned.

Empathize & Define

Research

Secondary research

Competitor analysis of 17 different fitness studio websites including a review of HEAT’s existing site. 

Primary research

1:1 interviews that included ethnographic studies of participants booking classes so that I could better understand the user’s process,  pain points, un-met needs and desires. I met with 10 Participants ranging from occasional class taker to 10-year member with regular attendance.

Personas

After analyzing the findings from my research I was then able to identify patterns that allowed me to form two personas. John, an existing HEAT member and Lily, a perspective HEAT member.

User journey maps

Next, I create user journey maps for John and Lilly to help me understand their pains, gains and motivations.

Road Map

It became clear after synthesizing all the research,  creating personas and user journeys that the booking and new member / referral  experiences were both in need of an overhaul. In addition, I decided it was also important to update the messaging on the home page so that it was more true to the HEAT brand.

PRIORITY

  • Audit and revise the existing IA of the site
  • Redesign the booking process
  • Redesign the booking process
  • Redesigning the first class free/new member process
  • Updating the homepage to reflect the HEAT brand

SECONDARY

  • Redesign the physical check in process
  • See who is attending feature
  • Favorite class feature

Information Architecture

One of the issues with the current site is that several of the participants I interviewed were having a hard time finding key information. Page titles like “Studios” or “My Series” were not entirely clear even to users who had been using the site for a long time. None the interview participants could find “ Referrals” and about ⅓ of them when booking a class wavered between the “Studios” page and “Schedule” page. And while you could get to the schedule via the “Studios” page, it added extra, unnecessary steps. Considering this information along with my research from my competitor analysis I chose to redesign the IA to be more user friendly.

Ideate & Validate

Interaction Design

70% of the users accessed HEAT via mobile so I made the decision to tackle the wireframes for the homepage on desktop and mobile simultaneously and then fleshed out the rest of the site using a mobile-first approach. 

Branding & UI Design

HEAT offers intense workouts but they are also fun and inclusive. Members of HEAT mentioned in interviews that the fun and welcoming atmosphere are part of the reason they come back. This is what makes HEAT special so I really wanted to play this up in the design and branding.

Testing

With these final designs I created a prototype in InVision and tested the app with 5 participants.

Objective

  • To see how easily the participants could book a class and then cancel it
  • To see how easily the participant could send a referral to a friend
  • To see how easily the participant could accept a referral and sign up
  • To identify any paint points in the process

Methodology

In-person testing via provided mobile device with screen recording.

Tasks

  • 1: As an existing member of HEAT sign up for the Monday morning Butt, Legs and Core class, then needs to cancel it.
  • 2: Send a referral to a friend
  • 3: Accept a referral and sign up for HEAT

Results

Task 1: Sign and then cancel class

Completion rate 100% without hesitation

Task 2: Send referral

Completion rate 100% though with hesitation. All users when searching for the link to send a referral first went to the menu instead of to the avatar where the account info page was.

Task 3: Accept referral and then sign up

Completion rate 100% without hesitation

Iterations

Since every single participant searched for the referral page in the menu rather than the avatar,  it was clear this would have to be addressed. At this point I would need to decide if the avatar needed a different treatment to let users know it expanded or was it even needed at all? Could the “My Account” and “Referral” pages just go into the main nav?

Here is what I changed

  • Removed avatar in navigation
  • Added the “My Accounts” page into the main nav

Takeaway

What I learned‍‍

  • I’m still  into designing in dark mode but it’s really challenging and I know I have much more to learn. Getting your UI right, especially colors and buttons is hard when your background is black.
  • Almost all existing fitness websites and booking experiences are some shade of bad. It seems there is a lot of room for improvement in this sector.
  • Designing for a client who is already very invested in their brand is nerve racking. You want to improve it but not throw away all they have invested. It’s the balance between marrying the old with the right amount of new.

What I would do differently

  • Conduct further research with participants not familiar with the HEAT brand. I think this would have given me even more insight to what people are looking for when looking for a new fitness studio and their thoughts on the current HEAT site.
  • Have the user testing conducted by a third party with non-HEAT and HEAT  members. This might have yielded more honest feedback regarding the branding and messaging.

My projects

Let's connect

Want to have coffee, work together, or just say hi? Email me, I'd love to hear from you.