Mandala Yoga Sequencing App

UX/UI Design & Art Direction

Challenge

Create a more efficient system for yoga instructors to record, edit, and rehearse their sequences as a mobile experience. The goal is to digitize the process where most instructors are still jotting down their sequences by hand, causing disorganization and frustration around multiple tools and methods to achieve one job.

Solution

Design an application that streamlines the top three needs into one location: drag and drop poses, duration of each pose/series, and syncing up music to the sequence. The app must also serve as an educational tool by providing libraries for pose instructions and visual aid.

persona

The persona, Ashley, was created based on the collective user interviews that explore the needs and traits of a number of yoga instructors. She usually writes her sequences by hand with messy sketches, random labeling, and currently has multiple notebooks that are hard to reference quickly. As she is trying to also start her own studio, time is limited and she must have more time to focus on running the business rather than teaching her routine.

user flow

The start of the flow begins with a main menu screen that allows the users to horizontally scroll through sequences, poses, and series as well as a stationary menu that points to music, assists and notes (these are secondary tools). Being able to add a sequence is the focal point of the app, therefore an ever present “+” button is placed in the top right corner. Each sequence is divided and grouped into series of poses where each series is given a duration. The pose library acts similar to the selection function in an iPhone picture library where ones that are selected are then applied. Once all series are added, the total duration of the sequence is revealed. The final screen is the actual player where the series, timing, and audio waves are stacked on top of each other as a scrubber travels from left to right, making contact and syncing with the time/pose/music at a given moment during the progression.

wireframes

During wireframes, the main screen was refined and reduced to the scrolling menus of Sequences, Poses, Series, and Music, removing the secondary menu. The Assits and Notes section will now be within the pose screen itself to give further detail about the selected pose. Cover art is also an option for the Sequence to help differentiate them within the menu scroller. There is also a social element to the app where you can connect with other instructors or “yogis” to share a routine or suggest music. The player will begin on its own once the play button is hit but there is also an option to manually scrub back and forth to replay and skip sections.

UI

The final color palette features a blue to pink gradient which reflects the cool and warm tones of the chakra system. The colors also appeal to the yoga community demographic which is predominantly female ages 25-40. The UI of the player is incredibly simplified with the use of flat graphics and illustrated figures to help the user digest the information while in motion. The player must be readable at a glance while the instructor can position the phone on the floor or propped up while simultaneously rehearsing the routine.