Client
MixPose
Role
UX Designer
Visual Design Lead
Point of Contact with Client
Deliverables
UX Research
Usability Testing
Design Iteration
User Flow
User Interface
Wireframes
High-fidelity prototype
Design Presentation
Overview
Who is MixPose: MixPose is a live streaming platform that leverages artificial intelligence to empower yoga instructors, personal trainers, and dance teachers.
Focal Point of this Case Study: Ideation and Iteration of the user experience flow for the Yoga with Friends feature to provide an enjoyable experience and ultimately increase the number of MixPose users.
What is Yoga with Friends: a new feature that MixPose has implemented inside the user’s dashboard that allows them to invite and attend yoga sessions with friends. The company's focus is on attracting more users to subscribe to their services.
-Click to view section.
Timeline - Design Process Overview
Final Solution - Design for Finding & Understanding
The Yoga with Friends feature is incorporated in the booking, joining and checking class flows, this integration was intended to minimize extraneous frictions and better suit the users priorities.
Kick-off Meeting
-What does MixPose need?
-What factors does the designer need to consider?
Scope of work:
The UX design team will complete a high-fidelity prototype of the user's dashboard specifically focused on an intuitive user flow for Yoga with Friends
Platforms:
Desktop web and native application (Android/iOS)
Key constraints:
Mobile application design must meet Human Interface Guidelines and Material Design Guidelines.
Currently in MVP phase - Limited time and budget.
Research
-What are our users' pain points?
-How does the current yoga with friends feature work?
Do you remember...
how did we do yoga with friends before the pandemic?
👀 📱💻 🗣💬 🗣💬 🗣💬 📱💻 📆 📍🧘🏻♀️🧘🏿🧘♂️
See an available class
Ask friends
Schedule a class
Yoga with Friends
How...
does virtual yoga work in MixPose via the Yoga with Friends feature?
👀 📱💻 🗣📱💻📧⏰ 📆 💬 🗣📱💻📧⏰ 📆 💬 🗣📱💻📧⏰ 📆 📱💻🏘🧘♂️ 📱💻🏘🧘🏻♀️ 📱💻🏘🧘🏿
See an available class
Ask friends - schedule class online - get notifications, texts and emails
Yoga with Friends at home through devices
Usability testing
“I didn’t see the link to install MixPose or to create an account in my email friend's invitation”
“I feel like I just got ghosted by a website.”
“The adding friend's icon is not clear to me as I couldn’t figure out what task will be executed when I click on it.”
We got a lot of feedback from active users.
We noticed the more digital experience involved, the more information users need to digest. This often led to information overload and a frustrating user experience.
Our users were upset...but why?
Disconnections in current user flow
-Next, we analyzed MixPose's current site & app and used Low-Fi wireframes to identify the missing pieces in each flow.
Class Schedule Page
Class & Instructor Page
Join class with friend groups
RSVP
JOIN CLASS
-
Can’t RSVP with friends
-
Can’t see friends’ status
-
Can’t save friends group for future
-
No dedicated feature to create friend groups
Three main issues from heuristic analysis
-We conducted our heuristic analysis in an attempt to grasp the fundamental issues. Coupled with user feedback, we were in a good position to identify key problems and generate design solutions.
X Visibility of Status
X Recognition vs. Recall
X Consistency and Standards
The Problem
-
The current design is an MVP that lacks visible information about the feature, social interactivity, complete functionality, and consistency between devices.
-
This causes friction for potential users that were invited to join MixPose and results in abandoning the Yoga with Friends feature.
-
Information overload causes confusion and frustration.
How to create an enjoyable experience and reduces friction for our users?
Wireframe & User Flow
We proposed a few design solutions for Yoga with Friends. Our design ambition is to create a more intuitive and consistent design.
Ideations
-Task one: how to invite friends to do yoga on MixPose's site?
Solution 1.Code Invitation
Code Sender
Code Receiver
Solution 2.Profile Page Link Invitation
Link Sender
Link Receiver
-Task two: how to join a yoga class with your friends?
Solution 1&2 share the same flow on this task
References Links
-
Based on successful feedback from our client check-in meeting, we moved forward with testing our second design solution.
-
The second round of usability testing allowed us to check if our iterations had helped alleviate some of the mentioned problems.
Prototype - Solution 2
-Sending & receiving profile link
Link Sender
Link Receiver
Link Sender
Issues found from second round usability testing
-
Even though we got some positive feedback after the second testing, we noticed that gaps during the flow of inviting friends still persisted.
-
Join class process is too complicated to understand.
-
Some participants were having a hard time capturing the Yoga with Friends feature as scheduling classes was their first priority.
“What is the main purporse that users use the service of MixPose?”
“Is it necessary to create a specific section for Yoga with Friends feature?”
“How do you define enjoyable experience?”
“Does everyone want to attend class with friends?”
Brainstorming & Critical Thinking
“What is the users main goal when using MixPose?”
“Is it necessary to create a specific section for the Yoga with Friends feature?”
“How do you define an enjoyable experience?”
“Does everyone want to attend class with friends?”
After asking many rounds of “why”, I realized that although the team had identified the issues associated with information management, solutions had not been integrated into our design solutions.
I needed to think outside the box and brainstorm new ideas that attacked the root causes of our users' inconsistent and fractional experience.
"Information architecture is focused on making information environment findable and understandable."
Ideations
-After redeveloping the information architecture and wireframing my designs, I proposed the third solution.
Solution 3.Design for Finding & Understanding
Yoga with Friends feature is incorporated in the flows to minimize extraneous frictions
Booking class flow
-
Prioritize the users' main task: booking classes
-
Promote feature and meet business goal: users will benefit from incentives using invitation link (2-week free trial)
-
Users are able to manage the notification settings of Yoga with Friends
Joining class flow
-
Prioritize users' main task: joining classes
-
Yoga with Friends functions conditionally so that users can keep joining class by not acting on it
Checking class flow
-
Prioritize users' main task: checking class
-
Yoga with Friends is always available but optional. User can opt in or out.
Setting (Privacy & Notification)
-
Find the correct balance between enabling users and avoiding unwanted outcomes by confirming destructive actions and making it easy to cancel operations.
-
Dedicated pages that allow users to build custom settings specific to their preferences. Users can always update and make changes if they find themselves in different situations or simply change their mind.
Settings
Notification
Yoga with Friends
Prototype
Book class page
Book class page
My class Page
Join class Page
Design System
Native App (iOS & Android) / Desktop website
The result
Design presentation
The culmination of our design sprint was giving a presentation that showcased the teams research, iteration & ideation process, and final deliverables to stakeholders across the company.
Measure success rate
Implementation and final build rollout is expected 2-3 months after our end date
I I followed up with the client to ask for metrics on the following in order to evaluate the design impact:
-
Feedback from users
-
Sign-up rate or change in the number of newly created accounts (students & instructors)
-
Yoga session completion/ incompletion rate
-
The DAU increased percentage
Takeaways
What’s next
-
Implementation of designs in the form of Web and native application (Android/iOS)
-
Provide Annotations and developer handoffs
-
Ongoing evaluations
Lessons Learned
-
Besides understanding user needs and values of MixPose, many rounds of usability testing taught me the inversion perspective mental model:
-
-
Consider the outcome that I'd like to avoid instead of thinking about my desired outcome.
-
It reveals what can cause the opposite to be true and prevent me from achieving my goal.
-
It helps me think outside my normal thought patterns and approach problems from a different angle that opens a world of new possibilities that I didn’t know existed.
-
-
Great design is the iteration of good design
-
The combination of data-supported metrics and thoughtful qualitative information is the key to make meaningful correlations and suggestions
