.png)
Pilates with Go Chlo
Brand and website development for an online pilates community.
Project Date: Sep - Oct 2020
Client: Chloe de Winter
Company: Pilates with Go Chlo
My Role: Research, personas, task flows, sketching, wireframing, visual design/branding, prototyping, user testing
Team: Client, Product Manager, Group Crit Peers, Go Chlo Clients
Overview
About Pilates with Go Chlo
Pilates with Go Chlo was born out of the 2020 pandemic when all gyms and boutique fitness studios were forced to close and Chloe, a pilates instructor, saw the opportunity to move her practice completely online in her home in Melbourne, hosting pilates classes via Zoom every week across different time zones. Her challenging workouts, backed by her physiotherapy background, are free to sign up via the LinkTree link in her Instagram bio and are always "choose what you pay"–a relief for many during these difficult and uncertain times.
The Challenge
As Chloe's clientele increases, signing up via LinkTree will no longer be sustainable because of the many steps involved in booking a class, as well as inaccessible to those who don't use Instagram on a regular basis.
Objectives
Refresh the Pilates with Go Chlo brand and design a responsive website for Pilates with Go Chlo that consolidates all of Chloe's offerings in one place and streamlines the booking and payment process.
Empathize
Why
To conduct a variety of research methods to understand the class booking experience for Chloe's clients, identify current home workout habits, goals, and frustrations in order to design a successful product for Pilates with Go Chlo.
How
-
Research Ramp-Up: Secondary Research & Competitive Analyses, Provisional Personas
-
3 Interviews
Competitive Analysis & Provisional Personas
To begin research for PGC (Pilates with Go Chlo), it was important to understand PGC's direct competitors in order to get a good understanding of how other pilates instructors have set up their sites for class booking and how they manage payments and subscriptions.
Beyond looking at other pilates studios, it was essential to identify indirect competitors such as popular fitness apps that have exploded during quarantine, such as Aaptiv and Nike Training Club, in order to learn from their user experience and UI designs.
I then created provisional personas for the types of clients that would be relevant for PGC.
.png)
Research Ramp-Up Findings
After identifying the strengths and weaknesses of PGC's direct and indirect competitors, the below points are what I learned:
What I learned:
-
There needs to be ample transparency throughout the site - such as when it comes to membership/subscription pricing. PGC's videos should be visible to the public and not behind a paywall.
-
Clean UI - CTAs should be prominent, visual hierarchy should be strong and organized.
-
Informative Homepage - Homepage should have everything a first time user could need and have easy access to book classes, sign up for membership, and learn more. Minimalistic is the way to go.
-
Filters & Categories are a great way for people to personalize their search and workout, so PGC's website should definitely have useful ways of categorizing and allow for filtering.
Interviews
After understanding competitors in the industry, it was time to dig into the habits of users and empathize with them through 1-on-1 interviews via video chat, each one lasting up to 1 hour.
# of participants: 3
Workout frequency: 1-2x per month, 1-2x a week, 5x a week
Age: 29-30 years old
My interview script was broken down into two sections
-
Their experience with Pilates with Go Chlo
-
Their Workout Routine
Findings:
- 2 of the 3 participants had Chloe as an instructor at her old pilates studio before it shut down due to the pandemic
- 2 participants reported working out more and prioritizing staying active during quarantine, 1 reported working out less during quarantine
- The 2 participants who work out with Chloe frequently find the booking process easy enough using LinkTree but noted that they would all prefer a more streamlined process, 1 reported never knowing where to go to sign up other than going on Chloe's Instagram
- All participants appreciate the "Choose What You Pay" system, 2 would definitely be interested in a membership offering and suggested having "suggested payments"
- All participants enjoy using Zoom to work out because it is motivating to see other people working out live and also receive personal feedback from Chloe
Define
Why
To leverage all previous research to define high level goals and identify priorities for PGC.
How
-
2 User Personas
-
Feature Roadmap
User Personas
Even though I was only able to interview 3 participants, two distinct personas formed that I would keep in mind for all my design decisions for Pilates with Go Chlo moving forward.
The first persona is Katie, the pilates pro who is a long-time fan of Pilates with Go Chlo. She prioritizes staying active, especially during quarantine, and always schedules classes ahead of time for the upcoming week. Pilates is her go-to form of exercise. She's extremely excited for the launch of Chloe's new website and would for sure sign up for any kind of membership to keep moving with Chloe.
"When I'm 80, I'm going to thank my 30 year old self for taking care of my body"
– Katie
The second persona is Ashley, who is a ClassPass user and likes to do all kinds of workouts in order to try new things. Since quarantine, her work schedule has been taking priority over working out and so she will occasionally drop in on a class with Chloe. Her priority for choosing a workout is that it needs to be user-friendly, flexible, fast, and convenient without having to commit to anything.
"I love to try different things and move my body in different ways"
– Ashley
Feature Roadmap
Taking the goals, pains and needs of my personas that I based off of my interviews, I created a feature roadmap for PGC in order to help prioritize features that I would design for in the next phase of this project - the ideation phase.
Ideate
Why
With my personas and must have features defined, it was time to ideate and dream up my product for PGC.
How
-
Sitemap
-
Task Flow
-
Wireframes (Lo-fi sketches, mid-fi)
Sitemap
Using Whimsical, I created a site flow for PGC, imagining what would go into the navigation bar, how I would categorize classes according to what Chloe currently offers, and the pages to log in/create an account.
.png)
Task Flow
Using the same tool, I created two task flows, one for Ashley and one for Katie. Knowing I was designing for two different personas with very different goals, I knew creating task flows for each would guide which screens to wireframe in the next step.
Task Flow #1 outlines what Ashley would most likely want to do on the site: book a live class with as little steps as possible, without committing to any subscriptions/memberships.
Task Flow #2 outlines what Katie would use the site for: Schedule a live class recording and sign up for membership.
.png)
Sketching Wireframes
Using the Procreate app on my iPad, I began sketching out my wireframes. The homepage was the most important screen since it is the first thing clients and potential clients would see, I came up with three options and discussed them with my mentor who gave me feedback. We decided that a combination of the first and second screens would make the strongest homepage. I referred to my Site Map and Feature Roadmap to create these wireframes.
For the other screens, I referred to my User Tasks to determine the right screens to sketch:
- Browse Live Classes (video library)
- Individual Class Details (where video would live)
- Book a class pop-up
- Log In flow
- Sign up for membership flow
Digitizing
Wireframes
Then, I digitized my screens on Figma. At this stage, I wanted to set up a wireframe that would be ready to be prototyped, so I worked on as many UI elements as I could: working with a grid, determining typography choices, building components and choosing icon sets. Doing the work now would speed up the process for creating the Style Guide later. I pulled up screenshots of some competitors to refer to and applied industry-standard design patterns where I could.
Prototype
Why
I decided to prototype my wireframe at this stage because I could make any major revisions after testing with users without too big of a lift (as opposed to having a high-fidelity prototype with the UI fleshed out). My goal was to test my assumptions for the task flows and its functionality instead of the visual design. I worked directly in the Figma file to create a click-through prototype.
How
-
Mid-fidelity click-through prototype
Test
Why
With my prototype up and running, it was time to validate and test my product and make any necessary revisions.
How
-
Usability Testing
-
Affinity Map
-
Priority Revisions Matrix
Usability Testing
I reached out to four users of at-home workouts to schedule 1hr-30min user testing sessions over video chat. Participants ranged from ages 25-40 and varied from never to always doing pilates with Chloe. The goal was to test my assumptions of how users would navigate the site and if users would find certain features delightful.
I created a User Testing Plan and divided the testing to two phases. I gave them two tasks and observed how they would navigate each task in phase 1. In phase 2, I asked them specific questions regarding each page - overall impression? Are there features you wish existed? Curious about any features? Does this page have everything you need to navigate your tasks? Phase 2 was a chance for me to dig deep into their experience using the product.
I created transcripts for every user testing session.
Affinity Mapping
In order to better organize my notes and identify any patterns in successes and concerns, I created an affinity map.
Affinity Mapping Findings
Overall, every user testing participant was able to successfully navigate the prototype in order to complete the tasks of booking a live class with no commitments, and watching a recorded live class while signing up for membership.
Every user noted how easy and user friendly the product was and found certain features delightful, such as the Spotify playlist, being able to see all the live classes up front, ability to "Add to Favorites" and the filter/categorization features.
Some pain points were:
- Pricing is confusing between "Choose what you pay" verbage and paying for membership so creating a "How It Works" or changing copy could be a solution
- Reducing the size of the video player in Class Details because users don't necessarily know to continue to scroll
- Some small tweaks like cancellation policy copy, email receipt, "back to top" button, and re-organizing some information.
Priority Revisions Matrix
The next step was selecting which concerns and suggestions to act on. By organizing the stickies that fell under the "Concerns" and "Suggestions" sections in my Affinity Map in a priority revisions matrix that measured user value against (my) effort to implement, I was able to quickly prioritize which problems to immediately address (high value, low effort), which problems I can tackle next (high value, high effort), and which ones not to focus on at all if they were one-off problems/suggestions with low user value.
Iterate
Why
Based on user testing feedback, improve the usability of my product.
Revisions
See below for major changes I made to my wireframes.
2
3
1
4
5
6
7
.png)
1
2
3
4
5
6
7
1
"Join the Community" button leading users to pay for membership was confusing to users after they just read "Choose what you pay" so I changed the CTA to "Book a Live Class" (which is choose what you pay) instead.
2
Added time of class under the dates because users did not know what time classes were at first glance.
3
Making the classes under live class schedule reserved for live class booking, instead of converting each completed class into "View Recording" buttons
4
Added copy that users can access these videos with a membership to clear any confusion. Added a CTA to "Join the Community."
5
Instead of having four boxes where users click in to discover what each category contains, I've created a YouTube-like video strip to minimize steps the user has to take and also show users up front what kinds of videos are in these categories at a glance.
6
Changed "Your membership includes" to "A membership includes" in order to minimize any confusion.
Added copy about free cancellation.
7
8
.png)
8
8
Changed the video size to encourage users to continue scrolling.
Design
Why
With the usability of my prototype revised, it's now finally time to apply UI design.
How
-
Logo Design
-
Typography Exploration
-
Style Guide
-
Applying final UI designs on prototype
Logo Design
When discussing what she would like her brand to embody, the phrases and keywords she gave me were:
-
Celebrate the movement of all types of bodies
-
Inclusive
-
Personalized
-
Passionate
I took the logo in many different directions in order to gage her interest.
The original logo
Though she loved seeing all the different iterations of her logo, she wanted something more timeless and simple, showing me a collage of brands like Outdoor Voices, The Pilates Class, The Ordinary... etc. She especially liked #6 and #7 in my logo exploration above and so I suggested refreshing her original logo with a newer font instead of reinventing the wheel. I created a document of all the fonts that aligned with her vision.
.png)
We decided to go with Circular Std and I got to work on the logos, and at the same time, created a Style Guide for her, which would also translate into the UI of the website.
Final Prototype
The last and final step was applying UI design to my revised prototype. One major change I want to call out is that although previously, I had created different tiers of price points for membership, it was for the purposes of this project and what Chloe could offer in the future and based on competitor analysis. However, because Chloe currently only offers a choose what you pay system, I felt that it was more realistic and unique to create a website that still upholds that system.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Next Steps
Conclusion
Overall, the prototype was a success because I designed with the user in mind from start to finish. I interviewed and tested with Chloe's clients who were all able to successfully navigate the two tasks I assigned them during the user testing phase and they found a lot of the features I added delightful. I was able to share with them the final prototype with the UI design applied (they had only seen the mid-fidelity wireframe during the testing phase) and all of their reactions were very positive. I worked closely with Chloe throughout the process and was able to keep business goals, user goals and technical considerations in mind throughout the process.
In the future, I hope to work hand in hand with a developer to bring this project to life.
Future Considerations
Because this project was created in a 2-week sprint, there are a few things I would do differently if I had the time and resources:
-
Interviewing a larger, more diverse group of Chloe's clients as well as individuals who work out at home who do not use Pilates with Go Chlo
-
Sending surveys to gather quantitative data on at-home workout habits and apps/sites/platforms people use and why
-
Conduct user testing with more people
-
Conduct user testing after making revisions to continue iterating and improving the product