UX/UI, Research, Web Redesign

Forward Motion Yoga

Redesign a yoga studio website

Overview

Forward Motion Yoga is a yoga studio founded 16 years ago. Forward Motion Yoga aims to encourage people to move forward in their lives. It emphasizes bettering oneself physically, mentally, and spiritually. Its website introduces the visions and classes, including the booking systems.

This project was for my graduate program in Interactive Media Management at Centennial College with an actual client. The goal was to redesign Forward Motion Yoga’s website to improve its usability. I worked with five teammates on research, current state analysis, content strategy and wireframes iterations.

My Role

UX designer

Timeline

4 months (Jan 2022 – Apr 2022)

Collaborators

Desmond Yuk Ming Lai, Veronica Oyarzun, Simrandeep Sandhu, Sze Long Charlotte Ching, Saranya Hari Kumar

Tools

Adobe XD, InVision, Adobe Illustrator

Background

Why did this need to happen?

To start, we met with our clients to learn their goals and understand their situation. Our client is trying to expand its horizons to reach more people by enhancing online yoga and meditation (mindfulness) classes. They also hope to kickstart the business-to-business corporate online wellness programme.

Client Goals:

  • Transition to a hybrid yoga studio

    Attract customers to participate in online yoga and mindfulness classes and enroll in subscriptions

  • Redesigning the website

    Improve the UI layout and user experience of the website, maintain organized content for more straightforward navigation

Target User

  1. Age: 40 to 55 (Similar age to the instructor)
  2. Gender: Mostly Women
  3. Corporate programs targeting HR managers/business owners
Discover

Understanding the problem

Initially, we conducted the current state analysis. It helps us evaluate the website's usability.

The findings are:

  • Hard to navigate a sea of information

    Full of informative content but needs better organization for easier navigation

  • Redesigning the website

    FMY offers a wide range of yoga classes, but it is hard for users to differentiate and understand the type of yoga

  • Inconsistency issues on the layout

    The layout, font styles, and headings are inconsistent, affecting the readability. It should be consistent with keeping the page smooth and concise

Competitive analyses

Next, we conducted a competitive analysis to viable our project and find opportunities from the existing product. The competitive analysis was created based on 6 yoga studios, divided into small, medium, and large company sizes. These are our main findings and insights.

Key Findings:

  • Class's prices are competitive, and most studios have a similar range of rates
  • Only two competitors provide corporate class, most of them don't provide meditation classes
  • Most competitors have 2+ social media accounts active
  • Only 50% of competitors provide a free trial

Insights:

  • Providing corporate classes can be our strong point
  • Get the advantage of meditation classes and educating users about mindfulness
  • Promote free trials to engage users to register
  • Emphasize instructor certifications to excel among competitors

User research

We designed two sets of interview questions for existing customers and potential customers, including those who may need corporate programs. We interviewed 15 people to define and understand their needs and their views on yoga and meditation class. From the survey, we discovered the following:

  • Users have difficulties finding a suitable class
  • Users want to understand which style and level of difficulty they can choose
  • Users don't like doing yoga in their own rooms
  • Users want to have a  trial session before they join the plan
Define

Defining the problem statement

After gathering the findings from the initial research, we define the problem statement:

Users don’t know how to choose the best class; users find it difficult to differentiate the plan and package.

User personas

Based on the user research, two key user types were recognized for explaining the major goals and frustrations of the user group.

Persona 1: Clara William, an intuitive artist

Persona 2: Diana Boyland, human resource manager

Journey maps

We created user journeys to identify the user's experience in reaching their goal.

Synthesize

Ideation

We brainstormed what-if scenarios with the user personas defined to discover the possibilities.

User experience theme

We created the user theme to capture the client’s values and visions and bring it to users. Our client is very happy to see the theme because she knew we understand their goals and started trusting us to complete the deliverables.

Site Map

Based on the analysis and findings, we proposed a new sitemap that helps users discover website content and navigate information more easily.

Design

Wireframes

We created the low-fidelity wireframes for the homepage, class and price. We made the changes:

  1. Call-to-action button on the global navigation bar
  2. Call-to-action button with different colour
  3. Minimal Layout to reflect the studio’s essence
  4. Buttons and Images are designed to be consistent

High-fidelity Prototype

After the process, we switched to creating high-fidelity screens.

Homepage
Class
Price
Register
Schedule
Bring Peace

An immersive experience for yoga starters getting deep into a 15-minute yoga/meditation session

Find Your Way

A simple test to personalize the user journey

Potential Customer Flow
Corporate Client Flow
Reflection

Results and takeaways

It is my first actual client project in the UX field. I am so grateful to meet the great team. The experience helped me learn how to communicate with the client directly, identify the client’s needs and how contribute my skills to a team.
I am so proud of the work we accomplished as a team, and our client, Cheryl, was impressed with our proposed website redesign. She expressed interest in proceeding to turn our design into a functioning website.