QINGYI LI               ︎ make & art         ︎work          about           ︎

Yogatrail Case Study


YOGATRAIL keeps mind-body practitioners in the loop with all their classes and upcoming events from their favorite teachers and studios. Quick and easy overview of your own personal yoga world makes planning your yoga schedule a breeze. Be in the know about schedule changes, workshops, upcoming local and international yoga events... ask your teacher questions or chat with your studio... YOGATRAIL puts the worlds largest yoga network in the palm of your hand.

Visit the original site: https://www.yogatrail.com/welcome


  • Harmonise, Desktop and Mobile should look like one
  • Keep it simple, remove anytime possible
  • Make it feel personal

 User Reserch / User Interface /2018

Tianyi Shi
Qingyi Li  ︎ me


We want to first have an overall understanding of the website and the users. Before we decide the content of this project, we want to first answer these questions:
1. Who are the users?
2. What are some key activities? 
3. What is the current structure of the website?
4. What are some usability issues while they using the website and app?

Research part 1+2
Who are the users and their key activities

I crafted two provisional personas based off of my interviews with ten users.


Yogatrail has a very diverse user group. I wanted to find how different users focused on different part of the network in order to simplify the process but at the same time capture the needs of most of them. 

︎ Yoga Lovers often look at the classes they have taken before and find yoga classes while traveling. They have a less flexible schedule so they would book in advance.

︎ Yoga Beginners like to find new classes and events to do with their friends. They are less likely to purchase a membership but keep trying new class/event /studio. 

Research part 3

What is the current structure of the website: Sitemap

Research part 4
What are some usability issues while they using the website and app?

︎ Hard to navigate

“It took me so long to finally sort out my personal yoga schedule. There are many different paths that go to the same page.”
- Landing page does not contain any essential information about the function of the website, nor does it identifies 
- Navigation is unclear, so it is hard for people to understand the structure of the website. 

︎ Unclear updates

“My teacher did not respond to my message so I got confused of the class change.”
“I wish the updates could be prominent on homepage. All the updates are only accessible via message center. ”
- No real time schedule change notification. 

︎ Insufficient connection

“There’s little or no reviews for the class or teacher. I’m not sure if it’s worthy to book any event.”
“I want to see what other yoga students and my friends are doing on this platform. I want to do yoga with my friends. ”
- no enough reviews or emphazies on review system
- hard to connect with other students or teachers


After the research, we had a better understanding of the network and we were able to decide the content and approach of this project. 

Content :
Redesign the main pages of the website and app. 
User Dashboard 
Search (local / world)
Profile (teacher / event / places)

Approach : 
Solve current problems:

Hard to navigate

Redesign the navigation
Keep the UI simple and consistent to avoid confusion


Unclear updates about schedule change

Redesign the notification system
Design the flow to reschedule a class

︎ Insufficient connection:

Encourage people to review and write comments
Encourage social share

︎ Sketching & Wireframing

︎ User test

We build the wireframe prototype with Adobe XD. Then we asked users to click around and give some feedback. 



︎ Home Page

︎ Message center

︎ Explore World 

︎ Explore Local

︎ Studio

︎ Teacher

︎ Event

︎ App Design

We also Redesigned the app so it is consistant with the Website.

︎ Home

︎ Message 

︎ Local

︎ World