Class Recommendation Experience
Class Recommendation Experience
Covid causing shift in user behavior
The number of users soared 3 times after COVID. This caused a shift in business strategy. More users come because of organic search and ads instead of studio referral.
Covid causing shift in user behavior
The number of users soared 3 times after COVID. This caused a shift in business strategy. More users come because of organic search and ads instead of studio referral.
This means these users do not know about the platform before they land on the page. An easy exploration experience is crucial to capture their attention and make a purchase decision. Data agrees. It’s urgent to redesign the browser structure to help new customers discover and browse content.
This means these users do not know about the platform before they land on the page. An easy exploration experience is crucial to capture their attention and make a purchase decision. Data agrees. It’s urgent to redesign the browser structure to help new customers discover and browse content.
New Users
We did not want to offer an exhaustive list of classes, rather we wanted to focus on helping users discover dance classes they’ll love, from the 2000 on-demand classes. Our UX researcher Yiyan initiated to collect quantitive data about current user behaviors. We started with a good grasp of our users and their goals. We did also conduct qualitative interviews with current users to assess their current behavior and expectations about the function.
New Users
We did not want to offer an exhaustive list of classes, rather we wanted to focus on helping users discover dance classes they’ll love, from the 2000 on-demand classes. Our UX researcher Yiyan initiated to collect quantitive data about current user behaviors. We started with a good grasp of our users and their goals. We did also conduct qualitative interviews with current users to assess their current behavior and expectations about the function.
Current interface before redesign
Current interface before redesign
Among the participants who are our current users, they jumped right into either the search bar or filter to find classes from certain studios or instructors. New users are generally confused with the representation of classes.
Among the participants who are our current users, they jumped right into either the search bar or filter to find classes from certain studios or instructors. New users are generally confused with the representation of classes.
"I usually look through video previews to pick a class." "It is annoying that detailed class info disappears when hovering." "I am not focusing on reading text when scrolling." "My eyes immediately fall into images instead of text on the cards." "I would use Style + Level filter to help narrow down selection." "I don't understand some of the styles, such as Powerful." "All the classes look similar, I don't know which one to pick."
"I usually look through video previews to pick a class." "It is annoying that detailed class info disappears when hovering." "I am not focusing on reading text when scrolling." "My eyes immediately fall into images instead of text on the cards." "I would use Style + Level filter to help narrow down selection." "I don't understand some of the styles, such as Powerful." "All the classes look similar, I don't know which one to pick."
Balance the needs of two user groups
The biggest challenge I faced throughout this project was balancing two different user mental models - new visitors and repeat users. Since this redesign touched every part of the website, I needed to coordinate and get buy-in from both the dev and content teams. This was hard. Making decisions in the mix of viewpoints is even more challenging. The content team has spent a significant amount of time re-defining style for all the classes based on professional dance terms - when there was no evidence to validate if dance styles align with users' mental models.
Balance the needs of two user groups
The biggest challenge I faced throughout this project was balancing two different user mental models - new visitors and repeat users. Since this redesign touched every part of the website, I needed to coordinate and get buy-in from both the dev and content teams. This was hard. Making decisions in the mix of viewpoints is even more challenging. The content team has spent a significant amount of time re-defining style for all the classes based on professional dance terms - when there was no evidence to validate if dance styles align with users' mental models.
iFruit has hundreds of potential paths, requiring intentional design to achieve simplicity.
iFruit has hundreds of potential paths, requiring intentional design to achieve simplicity.
Prioritizing class content
My first design challenge was to propose how we would display content in our platform for both current and new users. I hypothesized that making dance content a priority would be key to encourage new customers to subscribe. With 20+ styles on the platform, how do you re-structure to reduce upfront decision-making, cognitive load, and carry a stronger information scent to invite customers to explore? My first attempt was to regroup styles based on dance goals to simplify the discovery path. My assumption was that users usually have a clear goal in mind to pick a dance class - burn calories, learn choreography, or build strength. I did not have qualitative data to support this and subsequently performed a hierarchical card sort with 6 participants.
Prioritizing class content
My first design challenge was to propose how we would display content in our platform for both current and new users. I hypothesized that making dance content a priority would be key to encourage new customers to subscribe. With 20+ styles on the platform, how do you re-structure to reduce upfront decision-making, cognitive load, and carry a stronger information scent to invite customers to explore? My first attempt was to regroup styles based on dance goals to simplify the discovery path. My assumption was that users usually have a clear goal in mind to pick a dance class - burn calories, learn choreography, or build strength. I did not have qualitative data to support this and subsequently performed a hierarchical card sort with 6 participants.
iFruit has hundreds of potential paths, requiring intentional design to achieve simplicity.
iFruit has hundreds of potential paths, requiring intentional design to achieve simplicity.
5 prototypes, 3 rounds of usability testing
After the user flow is defined, we created high-fidelity prototypes and conducted 3 rounds of usability testing. We categorized feedback into four themes: info architecture, icon clarity, copy, and visual style.
5 prototypes, 3 rounds of usability testing
After the user flow is defined, we created high-fidelity prototypes and conducted 3 rounds of usability testing. We categorized feedback into four themes: info architecture, icon clarity, copy, and visual style.
User testing session
User testing session
I organized the key findings from testing and shared with the broader team.
I organized the key findings from testing and shared with the broader team.
Key findings and feedback
Key findings and feedback
Reducing visual redundancy
The 1st version did help new users to explore but had two major flaws. First, people got confused by showing styles in 2 buckets on the same page. Second, after filtering, the thumbnails of each class created friction for users to pick a class because they all looked similar to each other. Embedding the current filtering behavior within the new design presented a novel design challenge. I asked the following questions to help me stay focus on solving the core problems. 1. How to effectively present a comprehensive gallery of classes, when new and current users have very different motivations and goals? 2. How do we ensure the new design doesn't negatively influence current users, better, encourages them to explore a broader selection of classes?
Reducing visual redundancy
The 1st version did help new users to explore but had two major flaws. First, people got confused by showing styles in 2 buckets on the same page. Second, after filtering, the thumbnails of each class created friction for users to pick a class because they all looked similar to each other. Embedding the current filtering behavior within the new design presented a novel design challenge. I asked the following questions to help me stay focus on solving the core problems. 1. How to effectively present a comprehensive gallery of classes, when new and current users have very different motivations and goals? 2. How do we ensure the new design doesn't negatively influence current users, better, encourages them to explore a broader selection of classes?
Introducing class series
Introducing class series
The highly debated drop-down filter
The final version of the filter was one of the challenging decisions for our team. We were debating on whether we should keep the information structure consistent under both tabs - "All Classes" and "Explore Styles", or different to serve each page's goal. We created a few versions of the filter with goals at different hieratical levels. To close on this decision, I put together a plan for user testing.
The highly debated drop-down filter
The final version of the filter was one of the challenging decisions for our team. We were debating on whether we should keep the information structure consistent under both tabs - "All Classes" and "Explore Styles", or different to serve each page's goal. We created a few versions of the filter with goals at different hieratical levels. To close on this decision, I put together a plan for user testing.
" The goal is a bit loose to me. Routine = choreography. Don’t know what belongs to what."
" The goal is a bit loose to me. Routine = choreography. Don’t know what belongs to what."
Introducing class series
Introducing class series
Testing the filter options with 8 participants revealed that: 1. It’s confusing if they can select multiple goals 2. Users aren't sure what styles belong to each goal 3. Not all users agree on the terminology of goals 4. Users rely more on calorie number when deciding on a workout class I was very surprised that grouping styles created unnecessary complexity in users' decision making instead of reducing frictions. I didn't realize achieving certain goals is not a major incentive for many customers who come to the platform. Based on this feedback, I felt good to set on the filter design with the full style list. This would make two pages more distinguished from each other. After launch, it'd be easy to measure results and iterate the filter design, if necessary.
Testing the filter options with 8 participants revealed that: 1. It’s confusing if they can select multiple goals 2. Users aren't sure what styles belong to each goal 3. Not all users agree on the terminology of goals 4. Users rely more on calorie number when deciding on a workout class I was very surprised that grouping styles created unnecessary complexity in users' decision making instead of reducing frictions. I didn't realize achieving certain goals is not a major incentive for many customers who come to the platform. Based on this feedback, I felt good to set on the filter design with the full style list. This would make two pages more distinguished from each other. After launch, it'd be easy to measure results and iterate the filter design, if necessary.
Transformed design based on testing
My process includes sketching and wire-framing concepts and flows with my design peers and then translating these directly into hi-fidelity design comps. I've learned prototyping was the most effective way to gain insightful feedback from the team, alignment from engineers and approval from stakeholders and senior leadership. I managed to organize and distribute these as videos and make them reusable for each round of Usability Testing.
Transformed design based on testing
My process includes sketching and wire-framing concepts and flows with my design peers and then translating these directly into hi-fidelity design comps. I've learned prototyping was the most effective way to gain insightful feedback from the team, alignment from engineers and approval from stakeholders and senior leadership. I managed to organize and distribute these as videos and make them reusable for each round of Usability Testing.
Design iterations
Design iterations
Acknowledgments Yiyan our user researcher helped me facilitate and consolated results for all the user testings. Thanks Diancheng for smoothing out collaboration with stakeholders and developers.
Acknowledgments Yiyan our user researcher helped me facilitate and consolated results for all the user testings. Thanks Diancheng for smoothing out collaboration with stakeholders and developers.