Live Filtering for Sessions

Context

As our tutorial library grew to accommodate a wider range of skincare devices, users began experiencing difficulty in locating relevant sessions. The existing filter system—designed early in the product’s lifecycle—was limited in flexibility and required multiple taps and page reloads. Improving the discoverability and navigation of tutorial sessions became critical to maintaining engagement, especially for users with specific product configurations.

Problem

The filtering process was slow, fragmented, and unintuitive. Users had to apply filters through a modal and wait for results to reload, leading to friction and drop-offs. This discouraged session exploration, particularly for users trying to find tutorials for newly purchased or bundled products.

Objectives

1. Enable real-time discovery: Provide intuitive, instantaneous filtering of tutorial sessions.

2. Minimize interaction cost: Reduce the number of steps and taps required to reach relevant content.

3. Enhance visual integration: Create a seamless UI that keeps users within the browsing flow.

4. Drive feature engagement: Support deeper content exploration through improved discoverability.

Approach

• Real-Time Client-Side Filtering I designed a system where sessions dynamically update as users select or deselect devices. This eliminated the need for page reloads, keeping the user focused on the content.

• Device Carousel UI Implemented a horizontal carousel at the top of the section for fast, visually guided product selection. This allowed users to filter by "their device" with a single tap.

• Embedded Contextual UI Instead of a hidden modal, I integrated the filtering interface directly into the tutorial screen. This "just-in-time" access keeps the interaction flow uninterrupted.

• Performance-First Design Collaborated with engineering to optimize for client-side responsiveness, ensuring that the filtering feels fluid even as the library continues to expand.

Outcomes

• Improved Usability: Early qualitative feedback indicated significantly quicker access to relevant tutorials and improved ease of use.

• Enhanced Exploration: The reduction in friction encouraged users to browse a wider variety of sessions beyond their primary device.

• Engagement Tracking: While analytics are currently being gathered to evaluate long-term feature adoption, initial user sentiment has been highly positive regarding the speed of the interface.

Platform Learnings

• Modular Component Design: Built the filtering UI as a modular component, enabling potential reuse across other areas of the app where personalized content is surfaced.

• Direct Interaction Value: Confirmed that moving from modal-based filtering to inline, real-time interactions significantly lowers the "distance to value" for the user.

• Visual Consistency: Maintained behavioral consistency by aligning the new filter patterns with the existing design system, ensuring a native feel.