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
Role UX/UI Design & Branding | Tools InVision & Sketch | Time 4 weeks
HEATBootcamp is a 12 year-old boutique fitness studio in Austin, Texas that specializes in bootcamp-style classes as well as personal training.
Create a responsive website that addresses the following
A fully redesigned responsive website with updated branding, redesigned IA and new and efficient booking and sign up experiences.
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.
Competitor analysis of 17 different fitness studio websites including a review of HEAT’s existing site.
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.
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.
Next, I create user journey maps for John and Lilly to help me understand their pains, gains and motivations.
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.
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.
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.
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.
With these final designs I created a prototype in InVision and tested the app with 5 participants.
In-person testing via provided mobile device with screen recording.
Tasks
Completion rate 100% without hesitation
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.
Completion rate 100% without hesitation
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?
Want to have coffee, work together, or just say hi? Email me, I'd love to hear from you.
