Jiaren Yoga Studio

Role: UX & UI Design

Goal: Redesign the existing website to create a fully responsive and seamless user experience while identifying opportunities to enhance key features for improved usability.

Project Duration: January 2025-February 2025

Problem & Background

Jiaren Yoga Studio is a welcoming and inclusive community dedicated to empowering women and promoting well-being through yoga. Their current website reflects their values and offers essential information about classes and studio offerings, but its limited mobile responsiveness and lack of an integrated booking system negatively impact the overall user experience.

For this project, I focused on enhancing responsiveness, ensuring a seamless and user-friendly experience. Additionally, I explored ways to improve the booking process, making it easier for users to browse class schedules, reserve spots, and manage appointments.

Research Goal

To understand user expectations, preferences, challenges, and experiences with yoga and fitness platforms, focusing on how these insights can inform the redesign of Jiaren Yoga Studio’s website.

Research Methods

Competitive Analysis: I conducted a SWOT analysis and examined CorePower Yoga, Mama Flow, and ClassPass.

Interviews: I conducted a study with five participants who actively use yoga/fitness platforms and attend classes an average of three times per week. Some of the key questions included:

  • What’s your current yoga/fitness routine?

  • Which yoga/fitness platforms or services do you use, or have you used in the past?

  • What do you like most about these platforms? Have you faced any challenges using it?

  • Can you walk me through your process for finding and booking yoga/fitness classes?

  • What features do you look for in a class booking system?

  • Which device do you usually use to find a new fitness platform and book classes regularly? 

Competitive Analysis

I conducted a SWOT analysis and examined CorePower Yoga, Mama Flow, and ClassPass to explore different class booking and content approaches. CorePower Yoga offers a polished, structured system, Mama Flow emphasizes a personalized, community-driven experience, and ClassPass provides flexible, multi-studio booking. By analyzing these differences, I gained insights into diverse digital solutions implementations and content strategies to inform Jiaren Yoga Studio’s redesign.

User Interviews & Affinity Map

I conducted a study with five yoga and fitness enthusiasts who actively use digital platforms and attend classes an average of three times per week, providing valuable insights about their experiences and needs.

Based on the interviews, my affinity mapping process categorized insights into three main areas: general habits, challenges, and expectations. This approach helped identify key patterns in how users interact with digital platforms, the difficulties they face, and their desires for a more seamless and intuitive experience.

Interview Findings

Key findings from the interviews:

General Habits

  • Most users prefer one-click online booking systems for convenience.

  • They primarily use mobile devices to research and book activities.

Experiences

  • Reviews and ratings for instructors and classes provide trust and transparency.

  • Integration with calendars and reminders is highly appreciated.

  • Overcrowded facilities or lack of reservation systems lead to dissatisfaction.

  • Cluttered content overwhelms and detracts from usability.

Desired Features

  • Holistic approaches integrating health, wellness, and mindfulness.

  • Improved booking systems for highly demanded activities.

Personas

From the research synthesis, I created a persona that reflects the key needs and pain points identified during the study. This persona represents a typical user and serves as a guide to understanding their goals, challenges, and motivations. By focusing on their unique characteristics, I was able to better align the design with the user’s expectations and create a more tailored, user-centered experience.

User Flow

I created a user flow that outlines both the happy and alternative paths for booking a class on the website. This flow visualizes the step-by-step process, from browsing available classes to completing a reservation, while accounting for potential user deviations and ensuring a seamless experience regardless of the path taken.

Low-Fidelity Wireframes

I created low-fidelity sketches of the design to visualize the features I implemented and assess how they integrate with the existing website. These sketches were developed for both desktop and mobile versions to ensure a cohesive user experience across devices.

  • I redesigned the navigation bar by adding a 'Classes' section based on research insights, reorganizing the dropdown menu subcategories, and including a 'Login' page.

  • I placed a class schedule section on the homepage before the pricing section.

High-Fidelity Wireframes

For the high-fidelity wireframes, I focused on the mobile experience, as research showed that users primarily access the platform through their mobile devices. To maintain consistency, I aligned the design with the existing app’s visual style, ensuring it reflects the brand’s values effectively. I implemented an improved class booking system, along with options for purchasing single and package classes, integrating these features into the in-house system, which was previously managed by a third-party tool.

Usability Testing

I conducted usability testing with five participants for both low-fidelity sketches and high-fidelity wireframes, focusing on the mobile experience. Participants navigated the class schedule, explored class details, and completed a booking using the in-house system. The goal was to assess the efficiency and clarity of the booking process, uncover usability challenges, and gather actionable feedback to refine the design for a seamless user experience.

Key Findings:

  1. The class schedule was easy to locate and access from the homepage.

  2. The in-house booking system was perceived as more seamless and efficient than external platforms.

  3. The "Book" button was clearer and more intuitive for reserving classes, preventing confusion with the "Sign Up" button for account registration.

  4. Most participants wanted detailed descriptions of yoga class types (e.g., Vinyasa, Hatha) and preferred to see class levels before booking.

  5. Some participants expected difficulty levels to be displayed within the class schedule for easier navigation.

Iterations

Based on usability testing insights, I made key refinements to enhance the overall user experience.

  • I updated the hero photo to improve color contrast and create a more visually appealing interface.

  • I integrated detailed yoga class descriptions and class levels from the original website, ensuring users have the necessary details before booking.

  • I added a "Show All Classes" button to the class schedule section, allowing users to easily access the full list of available classes.

  • I introduced "Buy" buttons for each class, streamlining the purchasing process within the in-house system instead of relying on a third-party tool.

Final Screens

In the final design, I focused on creating a visually cohesive and fully responsive experience while integrating key features identified during research and usability testing. I enhanced the website’s visual appeal by refining the layout, improving color contrast, and selecting imagery that aligns with the brand’s identity. To optimize usability on mobile screens, I ensured that all newly added features, such as detailed class descriptions, class levels, and the improved booking and purchasing system, were seamlessly integrated and easy to navigate.

Key Takeaways

This project deepened my understanding of designing for real world usability challenges, particularly in making a website more intuitive, responsive, and user-friendly.

Challenges

A key challenge in this project was balancing simplicity with providing enough details for users. While redesigning the class schedule and booking system, I had to ensure the interface remained clean and intuitive without sacrificing essential information. Adapting the redesign to fit the studio’s existing branding while improving usability was also a challenge, requiring careful design decisions to maintain consistency.

Future Considerations

Given the project timeline, I focused on enhancing the core booking experience and optimizing responsiveness. Moving forward, I plan to refine the design through further usability testing, improve accessibility features like text contrast and mobile-friendly interactions, and explore ways to further enhance the membership experience for users.

Reflection

What I enjoyed most about this project was working on a platform that directly benefits a community-focused business. Improving accessibility and making the booking process more intuitive felt especially rewarding. This project reinforced the importance of designing with real user needs in mind and finding the right balance between clarity and functionality.