I worked on both UX and UI sides for this project. I led design and strategy for the design team. I also worked with the engineering team to ship the the feature.
33%+ increase in avg. time on page
9%+ increase in new user sign-up
3% decrease in bounce rate
200+ monthly returning visitors
The released feature aims to encourage new users who are just becoming aware of WollenDance to increase their engagement with it.
challenge
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.
Understand
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. These are the key insights of the current users. 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.
Understand
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.
Define
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.
During the think-out-loud, I was surprised to hear that participants ranked content on styles and difficulty levels. It was clear there's no natural correlation between goals and styles in users' minds. This early observation had a major impact on the architectural decision we later made.
Design & Iterate
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.
Key findings
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?
dive deep
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."
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.
refine
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.
reflection
This is a redesign with an enormous scope that touched every part of the website - frontend and backend. I wasn't fully aware of the level of complexity raised from the challenge of restructuring the database inside the current database. In the early stage, I proposed to have 5 metadata for each class. It was overkill. Later, by collaborating with engineers, we together figured a much simpler solution with not much trade-off. In the future, when redefining IA, I would focus more on scalability. There were obvious scalability issues with my initial approach when I was strict about the data structure to best align with current class content.
I have learned it's important to frequently share the reasoning behind design decisions with the team. This approach eased me from having to defend my design, rather inspires the stakeholders to do some thinking. Surprisingly, as a side effect, I found cross-functional team members begin to adopt a mindset to learn and genuinely share the same aspirations. That collaborative wisdom makes great design possible.