Build your playlist for teaching a yoga class
YogaMusiq offers a unique tool for yoga teachers to organize and sequence music playlist for their upcoming classes. My task was to redesign UX/UI for existing dashboard, as well as creating a new "Founders page" where beta testing yoga teachers are featured in.
After conducting several rounds of user testing with the old dashboard (below), I found out that the visual hierarchy was not in the right order. The first thing users wanted to know was which playlist they are working with. Playlist title and stats were on the far right column, written with small font size so it wasn't noticable. Big, colorful "sort by" buttons were what users noticed at first, but the functionality wasn't clear.
Besides the issue with the visual hierarchy, YogaMusiq was planning on rolling out a new feature in an upcoming beta version- Workstation. In this workstation, users will be able to manipulate the order of playlist, add/remove songs, and be able to set a total duration of the class so that they can organize the playlist accordingly. These new functionalities had to be part of a new dashboard design, but there wasn't enough space to incorporate the new feature in the current design.
In the new dashboard design (above), I brought playlist title and stats to the main box on the left column to make it clear which playlist the user is working on. I reduced visual weights, and gave turned on/off states for "sort by" buttons so that now users know what buttons are for. I dedicated the whole right column for the new workstation feature. Also I gave an overlay on the graph so that users can visually manipulate the total duration according to the class length.
Next task was to design a "Founders" page that serves as a directory of all yoga teachers who participated in the beta testing.
Founders page had to categorize each yoga teachers by nationality and styles of yoga. I came up with a badge with flag to display the nationality, and colorized tags to show different styles of yoga that each teachers specialized in. I've added keyword search box on the top as well as filter functionality to help users search through the list of yoga teachers.