Responsive site design for a private client’s class booking and performance portfolio.
Pilates with Alissa
Project: Create a responsive website for a small business
Role: UX/UI Designer, UX researcher
Duration: 80 hours, 5/19 - 6/14
Tools: Figma, Miro, Zoom, Google Forms
Background:
Alissa is an up and coming Pilates teacher who is just getting started in the industry and is establishing a name/brand for herself, as well as a seasoned local performer. She needs a responsive portfolio website that allows potential students and artistic directors a way to connect with her and view her offerings.
Challenge:
Alissa needs to develop her brand and create a responsive personal site that grows her client base and allows clients to directly connect with her to book classes and producers the ability to reach out about performance opportunities.
Her clients need to see her class offerings with valid links to allow them to book with her. Producers need to view her work and and resume to see if she is a good fit for their productions.
Solution:
Create a clean and minimal responsive site that mirrors her aesthetic, helps define her brand, and appeals to a younger audience. Organize her class listings and performance credentials into respective pages that allow users to view her work and connect with her.
1. Research
The holistic fitness industry at a glance
The yoga and Pilates markets, at size of 12.8 billion dollars, has been a steadily growing industry among certain parts of the population, and responded to the Covid crisis in creative ways when it’s practitioners needed to stay connected to a community. A potential student has many choices, especially in urban areas, and I wanted to make sure that we created a page that allowed Alissa to communicate her style and offerings.
To help align Alissa’s website with industry trends and user needs, I conducted secondary research on the holistic wellness and fitness market, interviewed two of her students, and collected survey responses from 6 of her students and other individuals who have interest in private fitness instruction. I used these insights when deciding which features and content to include on her personal site.
Methods: Secondary research, one on one user interviews, online surveys
Checking out the local market
I wanted to see what others in the area were offering in order to assess their strengths and weaknesses so that I could find opportunities for Alissa’s site.
I looked at a direct competitor (independent Pilates professional), Secondary competitors (movement studios) and indirect competition (gyms with Pilates instruction).
What I found through competitive analysis was that the larger gyms offered the experience of easily browsing offerings and booking directly, but less of a personal connection, no home instruction, and varying levels of quality. The smaller practitioners offered the one on one benefits but with the lack of professional resources the larger companies could afford.
Before coming to any solutions, I wanted to get to know directly what users valued. I turned to Alissa’s students and potential students interested in private fitness instruction to share their responses in one on one interviews and online surveys.
Gathering user feedback
Talking with the students, I gathered quantitative and qualitative information about their ideal fitness booking experience to uncover opportunities for the site.
1 on 1 interviews conducted with 2 of Alissa’s current students
6 surveys conducted with Alissa’s students and potential students
All respondents currently book private fitness instruction
20 questions, about 30 minutes to complete
Demographics: greater Seattle area, ages 20-60
Tools: Zoom, Google Forms
Objective:
Identify why students would choose one instructor over another, why they choose private vs. group instruction, and what method they use to book it. We want to know their monthly budget for fitness, and what features/information they need on a website that would encourage them to book a class.
Assumption:
We assume that users will prefer an online booking process, and create a site that allows them to do that easily. We assume that creating a strong personalized website and creating her brand will grow her private practice as well as studio bookings.
Selected interview/survey questions
2. Define
Choosing an instructor
From our research we found that most of Alissa’s current and potential students have a previous dance or movement background and range in age from 20-50. Alissa’s students find value in her detailed instruction, experience, and mindfulness. They enjoy how her class flows and the meditative nature of it. They comment on her confidence, sense of humor and comprehensiveness when explaining movements. In order to set her apart from the sizable competition in a city that prioritizes healthy lifestyles, I wanted to find a way to highlight her qualifications while providing users an easy way to view her offerings a book a class.
I surveyed 6 current and potential users, and interviewed two of her students via Zoom. There was quite a bit in common in terms of what user’s needs/frustrations were to book a class with a new instructor, and they also varied by age. The top challenge was to find a class and location that fit with one’s schedule, taught by someone who could meet their personal fitness goals, and easily book/cancel it . I set out to define our problem through the lens of our persona, Adi.
Methods: User Persona, Task Flow, Site Map
User Persona:
In order to understand our audience, I created a realistic representation of our ideal user based on information from our research that outlines their frustrations, Goals, and needs around finding an instructor/class.
Adi is an ex-dancer now staff writer who seeks out Pilates to help strengthen and balance her body from old injuries while providing calm in her busy day. She needs a class schedule that is compatible with her work schedule with a way to easily book/cancel online. She is mostly on her phone, so the site needs to be able to function seamlessly via mobile.
Task Flow:
Our user’s happy path through a specific task: “Book an in-studio class” using proposed navigational features and page layout. It was important to show all class options (In studio, Virtual, and private in home training) on the same page so that users can decide which works best for them with minimal clicks.
Site Map:
Developed the information architecture for the main goals of the site based on user research and owner feedback - Classes, About, and Contact. Alissa’s wanted a product page as well to show her favorite items (used for sponsorship/affiliation/marketing) like many of the movement influencer’s sites she wanted to emulate.
3. Design
Aligning our user feedback with the client’s vision
From our research, our main goals for the site are to easily view class offerings, book/cancel online, and view instructor’s bio/social media presence. Alissa requested a clean/minimal style as is trending with the influencers she follows, as her goal is to not only book classes, but to grow her online presence in a similar way. My job as a designer was to balance the two needs, providing the users with enough guidance without cluttering the site. I worked closely with Alissa eventually settling on the third iteration. Materials here from first version.
Methods: Sketches, Wireframes, Responsive Frames, Mood Board, UI Design
Sketches:
I developed some preliminary sketches laying out the basic features we would need, based on some templates of websites Alissa admired + Squarespace templates we would eventually be using. She wanted an airy, open layout (wide margins) and content not completely centered. I included social media links within the top nav for easy accesssibilty, an Instagram splash section within the main site similar to the websites she liked, as well as her teaching philosophy/bio and easily accessed class options.
Low Fidelity Wireframes
Responsive design, V.1 :
Alissa’s users are mainly going to be booking on their phones, so a clean mobile design was necessary. I used screen sizes 1440 x 1024, 750 x 1000, and 375 x 816 pixels for the frames. The final and full responsive design can be see in the Revisions section.
Mood:
The Pilates community that Alissa serves are mainly in the 20-40 age range, live in a diverse, upwardly mobile and health conscious neighborhood, and are social media savvy. Alissa’s aesthetic is in line with what is trending today in that demographic, so we went with a clean, minimal, modern look. She wanted mainly neutrals on the site, the color coming from images that she had taken in a studio setting. We chose a serif font, Cormorant, for the headers, and Montserrat for it’s’ easy legibility in the body. Her logo is straightforward and free of ornamentation, and margins are wide with plenty of white space throughout the site.
UI Design:
Once I was clear on the aesthetic and layout, I found some photos that matched her style, wrote some placeholder descriptive text to add to our wireframes for testing. I used the spacing and placement of features on our inspiration sites as guidance, paying careful attention to using only neutrals in the UI so that the photos could draw attention. This version would be iterated once we got her actual photos completed and plugged in.
4. Prototype and test
Figma hi fi prototype
In the design verification phase I created a prototype in Figma, taking the separate UI elements and joining them in a way that would allow a user to adequately test my ideas and see what needed iteration or clarification.
User Testing
I observed 2 current and prospective students seeking private instruction navigate Alissa’s site based on specific tasks while encouraging them to think out loud. Each test took about 15 minutes and I recorded their results as well as points of confusion or frustration. I formulated specific tasks based on current flows and scenarios to guide them through those tasks.
Objectives:
Test the ease of navigation from home screen to completion of each task
Observe user frustrations, observations, and pain points during navigation
Evaluate where improvements are needed
Gather user feedback
Method: In-person user testing of a hi fidelity mockup in Figma
Tools: Figma, Figma Mirror
Test Subjects: 2 users:
Age range 30-55 years old
People with previous injuries looking for a new way to strengthen and tone
People who have previously booked private training in other disciplines.
Selected user feedback:
“There are too many booking options and places to click.”
“I would like to see class descriptions or a dropdown to an expanded class description, with more class information like duration of group class, day of the week next to date, a dropdown to a calendar, costs more prominent up near the top, and what types of equipment will be used.”
“I would like to see COVID policies visible on the site.”
“Can I add my class booking to my Google Calendar easily?”
“Please add option to go back a page.”
“Create separate jump links for each type of class so that I don’t have to scroll through the whole class page.”
Synopsis:
The participants were able to easily complete the tasks assigned (purchase an in - home private lesson). Some modifications need to be made to wording, some separate class pages and additional information added.
Observations:
Participants were able to easily use the top nav bar so used that for most navigation. Neither test subject wanted to scroll down each page so most important info should be placed near top.
5. Priority Revisions
Implementing user + client feedback
After the user testing phase, I met with the client as she had some ideas for improvement as well. For the final version, I integrated selected user feedback with her more defined vision. We picked final fonts, neutral tones, and inserted her studio photos and text into my hi fi template to make it personalized while making necessary changes revealed in testing.
Priority Revisions:
Class page
Home page
Confirmation page
6. Next Steps
Next Steps:
Re-test with users to see if the aesthetic changes made work as planned
Insert this design to a Squarespace template to take it live.
Promote site on social media to draw attention to Alissa’s classes/brand
Reflection:
I ended up spending a lot more time on this design than expected due to not setting clear intentions with the client at the beginning on the scope of the project. The client changed their mind many times on features as well as look and content, so I had to do the job of balancing her wishes with the results of our user research. Next time I will make sure the client is clear on what she wants before beginning work.
In this project, I learned to set the project scope early on, and have a solid contract for work to be completed agreed on by client. I also learned that I need to set hard dates for deliverables by client so that I can complete my part in the process on time.
As far as design goes, it was fun and enlightening to explore more avante-garde minimal aesthetic of the young influencer crowd as well as the holistic fitness industry.