Case Study : Designing a website for Yoga classes

The client is a freshly graduated Yoga teacher who needs a website to promote Yoga classes

TL ; DR

• Project duration: From 1st january 2021 to 8 March 2021
• Goal: Creating a website for Yoga classes
• Methodology: Quantitative and qualitative

Outcome Highlights :

• 5 research hypotheses, an ideation workshop, several MVP and 1 interactive final prototype were generated;
• I gathered feedback from 8 interviews, 91 survey respondents and 5 user tests;
• The final design answers the 3 main difficulties encountered by users :

Knowing what type of Yoga is practised,

Being able to know more about the teacher,

Finding easily classe dates, price and booking

A. Starting Hypotheses

1.The majority of users are women

2.Yogis are mainly looking for welfare and relaxation

3.The teacher is one of the most important thing while choosing a yoga course

4.The philosophy have a very big part in doing yoga

5.Yoga is a global lifestyle that they need to see on the website at firstlook

B. Empathize

First, I have discussed with the client to understand better the Yoga world, how she is practicing and what is her vision as a teacher. We also discussed her willing and how to have a website which stands out from the ones growing on social media.

Research Methodology:

Unfortunately, I couldn’t observe a class because of the sanitary crisis but it would have been very useful to see how users behave before, after and during the class and how they build or not a specific relationship with the teacher.

I decided to use a mixed methodology (quantitative and qualitative) because it allows me to get deeper into user behaviour and needs. The quantitative tool helps get a more accurate picture of what the user wants, likes and understanding the global features needed.

The survey was thrown among different Yoga groups on social media and got 91 answers. These data helped me gain a big picture of what users were expected from a good teacher and yoga class. It showed that :

• the main words coming to users mind about yoga are: serenity, welfare, balance and breathing
• the main qualities for a yoga teacher are: being a good listener, being pedagogue, adaptation to students needs and sharing philosophy with them
• What is prohibitive in a yoga class is: the price, too much fitness and not enough philosophy, too many people and a mean or not caring teacher

Regarding the type of users it appears to be 87.9% of women, mainly between 30 and 40 years old (40,7%).

About their practice:

they do at 28.6% any type of Yoga as long as they are doing some, 27,5% are doing Vinyasa and 16% hatha yoga. 74,7% are doing yoga several times a week

47,3% were practicing face to face before the crisis, 75,8% are practicing online during the crisis and 64,6% are willing to continue to do so at the end of the crisis.

37,4% find their Yoga classes through internet and social media as well as 33% by word of mouth

About their needs:

61,5% of respondents find welfare the most important thing gained from yoga

For 45,1%, the most important while choosing a yoga class, is the teacher

From the survey results I had a better idea of the user’s profile and was able to select interviewees regarding these criteria such as age and gender. I selected users living in Paris as it will be the city of the client practice. They had all between 25 and 40 and were 7 women and 1 men to meet the survey result panel.

It appears from the interviews that users are practising several times a week and are focused on philosophy, sport or both at the same time.

In each interview as well as in the survey, we observe that the teacher is central in the yoga practice and the bad experiences shared by the interviewees are most of the time related to it. We can feel that practising Yoga is seen by users in very different ways as some of them are looking for authenticity and others for physical activity.

Finally, all the interviewees agreed to say that short videos of the teacher practising would be very useful on the website

Personna:

From the research outcomes, I created 3 persona representing the three main types of users :

• Aya Laris, looking for Yoga classes focusing on philosophy,
• Mathilde Bota who is looking for an experience gathering philosophy and physical activity
• Julien Garrant who is more into sport.

These persona helped me understand which type of user will better correspond to the type of Yoga delivered by the client as well as their needs, goals and pain points.

Experience map:

I made an experience map for each one of the persona in order to better understand their experience by segment of use as well as where it is satisfying or annoying and identify opportunities for improvement.

The opportunities emerging for these experience maps are:

• Having an advice section
• Making available short video to better know the teacher style such as the type of Yoga or the music played during classes
• Having a quick access to practical information on the courses
• Need to make the price visible
• Need a section dedicated to the Yoga teacher and the type of Yoga classes
• Showing the different steps of a classic Yoga class
• felling the teacher vision and universe straight away

C. Define

Most of the starting hypotheses were verified by the research phase such as the fact mainly women are practising Yoga and that they are mostly looking for welfare.

However about the global lifestyle, it appears not being that important for many users who prefer knowing the teacher style and approach.

Also, the hypothesis that philosophy has a very important part in doing Yoga is right but nuanced as the teacher has to be legitimate to propose this type of approach.

D. Ideation

In order to analyse the research data and find solutions to theirs needs and difficulties, I have facilitated a workshop with the client and three of her colleagues and students.

We started with a card sorting exercise which allowed us to hierchase information and generate categories. The post it contained data from the survey and the interviews. After very interesting discussions and reflexions, the group ended with 6 categories :

• Global feeling about yoga
• The benefits of yoga
• Red lines
• Logistical informations
• Digital & marketing aspects
• About the teacher (technical skills, pedagogy and human qualities)
• little special thing (how to stand out from other website)

These categories will be very helpful to choose what information to showcase on the website and which needs to appears in priority

Then the group did a Design Studio workshop in order to visualise more precisely the website features. Each one of the participants sketched a landing page whith the information they thought were most important. Then, they explained their choices to the others, selected the best ones and produced a final sketch in which we find:

Menu catégories:

• Teacher presentation,
• Type of yoga
• Courses and price
• multimédia & advices
• contact

Sections on the landing page :

• welcoming word from the teacher
• An example of a yoga class sequences
• Upcoming & passed events (retreat, outside Yoga…)
• Multimédia corner (Shorts videos and pictures to catch the atmosphere and discover the teacher)
• Advices to the yogis community (essential oil, materials, music…)
• contact

D. Prototyping

With all the information gathered in the previous phase, I needed to prioritize the different features.

I decided to keep sections about the type of Yoga and the teacher, having the online payment option and due to budget constraints I will first design the website on Wix and keep the global web development for later. As well as courses in English or annual subscriptions which need more time to be implemented. I also decided not to do the blog section as it appears from the research that it is not as useful as expected for users but only add some advice.

Then, I started to make user flow for each one of the persona as well as a sitemap to better understand how users navigate through the website and hierarchise information.

Finally I was ready to sketch a MVP on Marvel to include the several features and sections decided from the research and the ideation workshop.

Then I conducted 5 user tests on Marvel with some survey respondents and interviewees, again, focusing on people corresponding to the main target audience which are women, living in Paris from 30 to 40 and doing Vinyasa Yoga.

I set up a test protocol in asking them first to navigate freely on the landing page and click wherever they wanted to. At the same time they were sharing their feelings, thoughts or misunderstandings.

Then, I gave them some specific tasks such as :

• Finding a Yoga and surf retreat
• Booking a Yoga group class
• Checking the teacher and type of Yoga section
• Going on the gallery section and check videos, pictures and advices

The tests showed me that some information was missing such as :

• giving more information on the teacher life and her Yoga practise
• specifying for outside courses that they can be cancelled because of the weather
• adding on the planing the number of places still available for each class
• proposing short classes of 10 or 20 minutes and proposing two of them on free replay

But also clarifying some aspects such as:

• changing the name of the section related to Yoga courses
• adding description of the video next to them
• Better to add a specific section for the advices
• precising that the “group class” is an in-person class

It was also simpler to add directly a link to Instagram instead of having a specific pictures page. Following the user test, I also added an advice section at the end of every website page.

I iterated the MVP with all this information.

Then I was ready to design a High Quality prototype on Figma. First I designed a logo inspired by my moodboard in using the lotus flower and a Yoga posture quite acrobatic to stick with the teacher style. The client chose the ocre colour version as she wants a natural colour palette close to earth.

Then, I created a UI Kit ready for the web developpement when the budget will be unlocked.

And finally here is the final interactive prototype :

Next Steps:

In order to have an actual website, some steps still need to be undergone such as :

• Waiting for the client professional retraining to be effective
• As the budget doesn’t allow to have a web developper yet, the website will be first implemented on Wix