Improved Browsing

Slide Presentation

‍

Overview & Problem

"It seems like almost all of the new classes are listed as appropriate for all levels. This makes it extremely hard to actually find an advanced level class using the filters." - User Review

‍

Our users are exposed to a catalogue of 4,000+ classes in 13 different categories, each class with different ratings, trainers, intensity levels, music type, sub-category, and format type. These different parameters can make it difficult for a user to quickly find what they’re looking for when browsing (when not using filtering). Additionally, it can be time consuming for users to scan through lists of workouts in a program or challenge just to not be clear about what levels the class is when all classes are listed as “All Levels”. We need to make it easier for users to quickly find the class they need to minimize options paralysis.

Hypothesis 

improving organization within the categories screen and updating how we display information will lead to decreased browsing time and increased class starts/finishes.

Goal: Increase class starts & finishes

• better organization of information
• eliminate unnecessary information (asses what the least amount of information we should show based on event recordings)
• find a way to make the workout cards easier to distinguish and varied, but cohesive
• increase class starts and finishes
• include intensity levels on workout cards to replace

‍

Users

We’ve received a constant flow of qualitative feedback from users and class reviews that clearly displays frustration among a large majority of our user base with our categorization of levels. Our content has increasingly moved toward an “All Levels” format so that the workout appeals to a wider audience of fitness levels and experience. While many of our workouts touch on all levels of fitness, it makes it difficult for users to benchmark and track their progress over time. We’ve gathered data on our users, their fitness level, and how they like to track their progress.

‍

Scope & Constraints

• Update cards across categories, collections, saved lists, programs, challenges and coach
• differentiate video from audio workouts
• Visually differentiate intensity levels
• Create visual interest and differentiation between cards in a list
• Display intensity level across app where “All Levels” currently is displayed (ie search, workout details, coach)

After asking questions and understanding what problems users have with finding the right workouts, gathering qualitative user feedback about current workout card layouts, and assessing technical constraints. We gathered data on how users selected a class, what information was most important to users (ie. workout category, subcategory, workout type, duration, level, trainer, etc.), what functionality needed to be performed from the card without tapping on it to open the workout details modal, and what classes were performing best. Gathering this data and research allowed me to prioritize information and explore variations that would allow me to simplify the layout for readability. The constraints I designed within were:

• Workout name must be displayed
• Workout category and subcategory must be displayed
• Trainer photo must be displayed
• Intensity level must be displayed clearly (replacing All Levels field)
• We should test variants with overflow icon vs surfacing schedule and save icons or hide them all together because they’re available on the workout details screen
• Consider class taken state, saved state, scheduled state, new workout state

‍

Process: User flows, Iterations, Prototypes

For this project, I worked on rapid layouts - testing the arrangement of information. Each successful direction that was able to potentially achieve product goals was mocked up in a prototype and tested on a device to see how quickly a user could scan cards and make a decision.

Outcomes & Lessons

6% lift in new user class starts. 9% lift in new user class finishes. 4% lift in existing user class starts. 5% lift in existing user class finishes.

After multiple iterations, testing, and exploring usability internally and with users as experiments in production, we landed on the solution below which showed positive increases in class starts and finishes for both new and existing users. Cards are subtly differentiated from each other through the use of randomized abstract waves that provide a scalable solution to visual interest with limited team resources. The neutral subtle variation in the background doesn’t detract from the important information displayed on the card. Intensity is distinguished with color and provides a more structured range in level of energy exertion throughout the class. Upon launching, we received large amounts of positive qualitative feedback through class reviews and social channels. Additionally, we were able to gather feedback about what wasn’t working and make quick updates to accessibility issues that were called out.