TM Pilates

Working as a Product Designer, I led the responsive web redesign and implementation of the TM Pilates website. The project engagement included research, wireframing and prototyping, designing a style guide, and improving the overall user experience, with a specific focus on the class schedule. 

Problem

The website fails to provide users with easy access to pertinent information such as the benefits of pilates, class schedules, retreat details or instructor information.

Solution

We made content, including the class schedule more accessible for students by restructuring the site architecture as well as improving the navigation. Further, we refreshed the existing website to capture a fresh, modern, and welcoming feeling.

Role

Product Designer

Keywords

Responsive Web, Styleguide

Category

Fitness, Health

Design Tools

Figma, InVision, Webflow

Year

2020

feeding your desire to move

For over eight years, instructor Alwynn Taylor has created a calm and centered space where her students can embrace everything Pilates. Whether you are in-studio, on the apparatus, or in a virtual class, mindful, regular practice of the Pilates method leads to physical improvement, character development, and a broadening of one’s options in both work and play.

research

why a redesign?

It was evident through our competitor and heuristic analysis that the existing TM Pilates website was not at the level of its competitors and other websites in this space. Poor contrast and suspect font styles proved difficult to read, the imagery and other style elements were not complementary to the company’s branding, and the overall user experience, which consisted of an infinite scroll, was causing more confusion amongst users than satisfaction. See below for more original TM Pilates website pictures.

Screenshots of the original TM Pilates Website

Conversations with students and stakeholders

Stakeholder Discovery Session

During a discovery session with our stakeholder, we uncovered that one of her biggest pain points was making weekly updates to the class schedule. She was spending multiple hours each week updating simple action items such as class dates and times, and made it clear that the re-design solution should allow her to make updates more efficiently.

Student Interviews

Our goal when talking with students who have or who currently use the TM website was to uncover their thought process when visiting the site; specifically, what kind of information were they looking for, and what aspect of the website did they feel could use the biggest improvement?

Highlights from the student interviews:

"Most of the time, I’m looking for the class schedule and cost of classes. It’s the first thing I go to. I also like to look for retreat information."

Kara Hamilton
Student

"I’m looking for background information and experience on whoever is leading the class. I want to read testimonials about people’s experiences and how the class has helped them."

Ryan Joseph
Student

"When I go to the website, I like to be able to easily find the link for classes. I like to see the weekly calendar and be able to click on a specific day in order to see the class times for that day."

Christina Karam
Student

Upon compiling this data, we felt like it was best to come up with a single statement that reflected the challenges faced both by the stakeholder as well as students.

how might we
reduce the barriers of communication based on an increase in class participants?

challenges

Perfecting the class schedule

Though we redesigned all of the pages of the website, we focused most on the user journey, from the homepage to the weekly class schedule, identified through our research as the main features of the website. It was challenging to find a way to present the schedule that satisfied both user wants (i.e. easy viewing of the daily schedule), as well as stakeholder wants (i.e. only wanting to show one week at a time).

V4
V3
A simple color palette was used for this page with an easily noticeable CTA.
Our goal with this iteration was to maximize screen real estateby allowing the user to see as many classes without having to scroll.
User felt it was an awkward experience having to reach in the middle of the screen in order to click "Book."
V2
Users advised that they didn't realize had to scroll down to see a list of classes after selecting a date.
V1

Optimization for any device

Since our qualitative research yielded that it was an even split between users accessing the website on their desktop or mobile devices, we had to ensure that the mobile schedule still provided the minimum amount of information required in order for a user to book a class. 

Storytelling

emphasizing the impact

There are countless Pilates instructors out there who are doing amazing things with students, but there are very few who have the kind of impact and community roots as Alwynn Taylor. For the homepage, we intentionally focused on going beyond simply outlining the services offered and wanted to ensure that we were communicating a story about the benefits of pursuing Pilates. We chose this route as a result of our research, where we were surprised to hear how many people choose Pilates as a method of both mental and physical rehabilitation.

i want my site to be a breath of fresh air, a true reflection of my personality.
Alwynn Taylor
Founder and Instructor

Iterations

Sweat the Small Stuff

Keeping our time constraint in mind, we still wanted to conduct A/B testing in order to ensure that we were doing everything in our power to devise a solution that would result in higher user engagement.

Version A

This version contained solely uppercase headings.

Version B

Only ghost buttons were used in this version. Once again, Version A prevailed.

Version A

A mix of solid as well as ghost buttons were used.

Version B

Camel Casing was used in this version. Version A proved more successful.

final product

Building and Educating

Final designs were implemented through the use of Webflow as it allowed us to maintain full creative control with minimal limitations, and to make designs responsive in a timely manner. Additionally, Webflow an easy platform for the stakeholder to make weekly schedule updates, one of the requirements of the project.

We conducted a training session with the stakeholder where we walked through the ins and outs of Webflow in addition to teaching them how to make edits, including changing text, imagery, and links.

Reflections

Looking back, we realized we made the mistake of not involving the stakeholder as frequently as we should have, especially with respect to areas such as fonts and colors. We spent too much time implementing and then changing these elements because they did not appeal to our stakeholder. To overcome this challenge in the future, I will encourage more frequent communication with the stakeholder in order to reduce any barriers to implementation. Since pushing the changes live, the stakeholder has reported a 37% increase in student bookings for virtual and in-person classes.

Credits

Next Project