top of page
LOGO + NAME-01.png

Online yoga class website UX/UI Design

Param Yoga is a yoga studio that offers both online and offline classes. The business has classes for their customers to select from and make bookings appropriately. The challenge is to design the UX of the entire service booking flow to tackle the problems listed by the users.

1-01.png
4-01.png

Pain points

Difficulty in picking the right yoga class based on level of expertise

The users are facing problems picking the most suitable class based on their level of expertise since they find the current filtering UI too confusing - and none of the listing cards mention these levels.

Complicated user journey

Customers have also complained about the user journey being too confusing for them when they need to Sign up/ sign in to the business’ web store, select an appropriate service, book a time slot based on availability and make a payment after reviewing their booking at the checkout page.

Lack of information regarding the yoga instructors

Customers have also mentioned that there was a lack of information regarding the Instructors who were going to handle the class or take appointments - for them to be able to book the right class based on the instructor’s knowledge and expertise

Process timeline- 4 days

Day 1

- Pain points
- Competitive analysis

- Conceptualizing

Day 2

- Low fidelity wireframes
- High fidelity wireframes

 

Day 3

- High fidelity wireframes
- UI

 

Day 4

- Prototyping

Competitive analysis

Similar brands were identified and their websites studied and analyzed. The experience of using the service and the entire booking flow (Log In/Sign Up >  Select a Service > Book an available time Slot > Review booking > Payment > Confirmation) was studied, compared and positive points and drawbacks were listed.

GLO.png
NAMA.png

Conceptualization

In the conceptualization phase Low fidelity wireframes of the website screens  were hand sketched and solutions identified. Information Architecture was mapped to finalize the hierarchy of information. 

High fidelity wireframes

Wireframes.png
High Fidelity wireframes-01.png

View High Fidelity wireframes on figma​​

Website UI screens

Home page

MacBook Air - 12 (1).png

Upcoming sessions page

MacBook Air - 16.png

Instructor page

MacBook Air - 14.png

Prototype

To be updated..

© 2023 by Name of Site. Proudly created with Wix.com

  • Facebook App Icon
  • Twitter App Icon
  • Google+ App Icon
bottom of page