Spaghetti Memoirs

Life Is All About Balance

Spaghetti Memoirs is a blog about my efforts to balance good/healthy foods, great drinks, work and exercise. All the recipes are gluten free and all the cocktails are amazing. 

YogaGlo App Re-Design

A few years ago a friend of mine introduced me to a website called Yogaglo.com. I really dug the ability to choose from 2500+ classes, varying in difficulty and length, to do right in my home. I have since become obsessed with arm balances do to my increased ability to practice. ☺

Regardless of this, I became quite surprised when I investigated the mobile app for YogaGlo and found a completely different UX. Because I like the site so much I wanted to help. So here is my unsolicited redesign of the YogaGlo mobile application. I am in no way affiliated with or represent YogaGlo. Just a UX designer that likes playing around. ☺

------

Research

Very recently YogaGlo implemented a new categorization strategy for their videos and made this visually salient with a new dashboard and icons to match.

Based on some of the companies literature, they did this to give suggestion and help their users have a more balanced practice.

I need to make sure I make this new categorization evident and salient in my re-design.

In order to understand some user needs, I chatted with some (hanging at a coffee shop) and reviewed the web app reviews, FAQ docs, and video comments. The overwhelming synopsis was that they really like the website experience but that was not what they got with the app.

“I love the ability to filter based on…”
“Where is the search?”
“Oh, I can only see videos that I put on my account from the computer. What if I’m not at my computer?”
“I can’t stream videos?”
“It takes a while to load the video.”

Task Flow

What is it that users should be able to do on the app? For this I made a task flow chart that covered:

(1) Using videos from your dashboard queue

(2) Exploring all the videos (watch and/or add to your queue)

(3) Search and filter for a specific video

For this part of the redesign I will focus on the first and second possibilities.

Wireframes

I started with the dashboard. I wanted to make sure it had the categorization from the website but also had the clean and simple look.

Each square represents the different queues on their dashboard as well as the search function. In addition, you can see how many videos are in each queue (ignore the search one).

At the bottom of the screen users can access their account features. While this is the only place they can access this (the dashboard) they will always be a click away from this screen at all times.

For the class list I talked to users and fond out that the main things they looked at as deciding factors were:

  • Level
  • Duration
  • Instructor
  • Class name
  • Type of yoga (e.g., Hatha)

Users make the up gesture to scroll through the list of videos.

------

 

For the mockups I took direction from the site and spelled out yogaglo in full on the dashboard but scrunched it to just ‘glo’ (see class list below) when you navigated away from the dashboard.

For the class list, I wanted to make sure the user knew where they were and where they could go at all times. The icons at the top represent the places they can go (with glo being the dashboard) and the large black icon in the background indicates where they are (this is mind).

For each class, the icon indicates what type it is. While this is redundant for the mind section- since all are mind- this will be paticularly helpful when the user is searching through all the classes.

The color scheme indicated the different types (hatha, vinyasa flow, meditation) and the colors are the same as those from the site. I made them more transparent to give a little more dimension and allow the mind logo to be seen better.

After some testing I took out the ‘details’ option from above and made the side arrow the ‘play’ button. Having the details and play button was far too cluttered and few users said they would use the details for an online app.

Not seen on here: Since all of these videos are in the users queue there is no add symbol. This would be placed in the bottom right corner for all videos not already in a queue.

When a user clicks on the side arrow, the app goes into landscape and displays the video in full screen.

There you have it.

I think that i’ll start to tackle the search options next. Thinking through it already has me asking a lot of questions. Typically search functions are no fun on a mobile device…..how to battle that…hmm.

Constructive criticism is always welcome.