Yoglö:
Design Class Project
10 week design process to create a combined mat + app product for yoga practitioners
Background
-
1/3 of the American population has practiced yoga at some point int their lives
-
Yoga interest in Seattle has grown 700% in the past four years
-
Too few new instructors can cause large class sizes and loss of individual attention
Goals
-
Create a solution for new yoga practitioners to individually increase their yoga knowledge
-
Ensure that this solution will still encourage personal engagement with instructors
-
Ensure the tool is both functional and non-mentally invasive
Dynamic
Role: UX/UI Designer & Researcher Team: Three Undergraduate HCDE Students Duration: September - December 2018 (10 weeks)
Timeline
As this project occurred over a 10-week class period, the design process was very fast. Below is an overview of the process with links to deliverables completed at each point in the process.
Design Requirements
Competitive Analysis
Storyboard
Information Architecture
Design Sketches
Hi-Fidelity Mockups
Design Sketches
Low Fidelity Mockups
Solution
-
A combination of a mat and app that connect via bluetooth
-
The mat shows the user where to correctly place hands and feet in pose positions
-
The app allows users to create flows or follow pre-made studio flows with instructors
Complete Design Process
User Research
Our team completed four individual user interviews: 3 yoga practitioners and 1 yoga instructor. Below are the insights that these interviews provided our team.
-
Yoga instructors build yoga flows to focus on certain aspects of their students’ body alignment, posture, or mental strength
-
Instructors can greatly help new yoga students by both verbally and physically correcting their poses
3. It is difficult for instructors to always see a problem with a
student’s pose and can take a long time to correct if they do
not notice it in class
4. Different types of yoga benefit different people, due to their
body shapes, goals, and fundamental body awareness and
flexibility
In-Person User Research
To complete our user research, our team decided to attend a yoga class to get a better understanding of our user group. Our insights are shown below:
-
Lack of yoga pose knowledge disrupted mindfulness
-
Stress is induced by lack of understanding and unknown
expectations
-
Studio providing equipment was very important to feel
accepted
-
Having a diverse group of people helpful users to feel
accepted and comforted
Personas
Based on the above user interviews, our group was able to envision two personas that were representative of our users. We initially created provisional personas to represent our users and ensure that we had all the necessary information to create a realistic user. As seen below, we chose to have one female and one male persona, each of different ethnicities and of different backgrounds.
Provisional Persona #1
Provisional Persona #2
I created our team's final persona deliverables. I focused on creating a striking visual language while keeping the text clear and easy to read. I chose to focus on calming colors within the two personas, and I wanted them to be matching as the yoga student-instructor relationship is so important.
Persona 1: Yoga Practitioner
Persona 2: Yoga Instructor
User Journey Map
To better understand our users, my team and I created a scenario for our yoga student persona, Sara. Our map is seen below and takes our user through a class at a new yoga studio.
Based on our journey map, our team concluded that we needed to find a solution to the knowledge gap between new students and instructors without disrupting the calm mental energy that yoga encourages.
My team member took the lead for this deliverable, but I was able to help write the storyline for this map, as well as create the visual elements within it. I also suggested adding visible touchpoints to the map which increased the readability of the journey.
User Experience Map for a yoga class
Competitive Analysis
Each member of our team found a product that was focused on solving a problem that was similar to ours. My two partners both focused on technology that was screen-based.
I chose to research a company call Athos, a wearable technology company that uses muscle sensing devices to improve athlete performance. Particularly interesting findings have been taken from my report and can be seen below, and the full report can be read at this link
Design Requirements
Based on the above research, our team was able to produce 10 design requirements for our future product. *Highlighted are the top 3 that we are focusing most heavily upon in our projects.*
-
Create a space where yoga instructors can interact with students without distracting the class.
-
Enable practitioners to become more knowledgeable in yoga poses while practicing in a yoga session.
-
Helps users build a community with fellow yoga practitioners, allowing them to forge new friendships.
-
Allow practitioners to focus on their breathing, mindfulness, and body awareness during a yoga session through proper class environment.
-
Allow practitioners to transport equipment with ease to and from class.
-
System does not rely too heavily on technology so that it doesn’t take away from the organic experience.
-
Adapt to varying class sizes so that everyone is able to learn the correct poses while in a limited room space.
-
Adapt to varying skill levels within a class so that everyone feels challenged in the poses and instructors know individual skill levels and how to handle each one.
-
Functional in different environments so that practitioners can continue using our system outside of the studio (home, gym, etc.).
-
Balance a class time that focuses on individual students and overall class learning without subtracting the quality of learning.
Storyboard
After creating our design requirements, our team created storyboards to show how our design could potentially be used with regards to our new goals. Below is my story board showing how a mat could be used for individual learning in a group setting.
Storyboard
Information Architecture
After our team created story boards, I realized that we needed an additional piece technology, such as an app, that could increase the control the user had over their product. I quickly created a basic information architecture that the app could follow, and after a discussion with my team, created the finalized diagram shown below.
Interface Designs & Wireframes
After I created the Information Architecture for our app, I began to create rough sketches of wireframes and possible screen flows.
I had three main goals for these sketches:
-
Create a starting point for interface designs for user testing
-
Compare and contrast many possible designs
-
Begin to suggest possible tracked types information that would be available to the user
Many of these screens were slightly modified and used in the wireframes that our team created for initial user testing.
Low-Fi Mockups & User Flow
I created all of the wireframes below, as well as the flow. Our team wanted to focus on clean formatting and very clear paths, two design decisions shown below.
These are the secondary functions of the app, the user's profile and their stats from previous workouts.
This is the main flow of the app. The user can pick one of two directions "Home Flow" or "Studio Flow" and then they complete the necessary steps to begin their yoga session.
High Fidelity Mockups
Our team was tasked with a very interesting task of trying to create a high fidelity mockup of a 3D product to prove that you design would function in the real world. We began by creating more mock-up scenarios and then transitioned into a realistic mockup once our design was finalized.
We decided to create a high fidelity prototype that both showed the features on the mat specifically (left) and in use (right). I suggested, and implemented, the creation of the in-use mock up to demonstrate the mat in a form where it was physically being used.
Our team also created high fidelity mock-ups of the yoga app.
I personally helped create a design guide, as well as a defined silt guide with font selection. I felt that our design was lacking direction in connecting between the calming feeling we were trying to invoke and the colors and harsh lines that we were using, so I suggested clean fonts with strong usage of white and gray and granting blurs.
Reflection
I personally really enjoyed the challenge of tying to create a technology that would be used in a setting where technology is specifically supposed to be devoid, but there were a few things myself and the rest of our team would have done differently if we had had more time.