Thumbnail Scrubbing

Role:
User Experience Designer

1. Project Goals

• User Goals:
• Enable users to quickly locate specific scenes by scrubbing through the video timeline with preview thumbnails.
• Ensure a smooth, responsive experience that provides accurate content previews across mobile, and CTV platforms.
• Business Goals:
• Increase user engagement and satisfaction by enhancing video control and usability.
• Reduce drop-off rates by allowing users to intuitively locate and preview content, helping keep them engaged with the video.

2. Research and Define

• User Research: Interviewed users to understand their challenges with video navigation, especially in finding specific moments in long content.
• Competitive Analysis: Analysed thumbnail scrubbing implementations on leading platforms, noting best practices in thumbnail clarity, responsiveness, and accuracy.
• Insights: Users wanted precise control with responsive, clear thumbnails that maintained image quality and loaded quickly.

3. Ideate and Prioritise Solutions

• Concept Development: Explored design concepts around thumbnail sizing, timeline positioning, and loading efficiency.
• Prioritisation: Focused on responsive, lag-free thumbnail previews, balancing thumbnail resolution with load speed to deliver a seamless experience across platforms.

4. Prototyping

• Prototype Creation: Collaborated with a mobile developer to build a rapid prototype, as a Figma prototype couldn’t fully replicate the real-time scrubbing experience. This enabled realistic testing and feedback collection.

5. User Testing and Feedback

• Testing Sessions: Conducted usability testing to evaluate thumbnail clarity, loading speed, and scrubbing accuracy, including resume playback accuracy.
• Key Findings: Users appreciated the responsiveness and accuracy but requested an indicator to return to their original position before scrubbing.

6. Refinement and Iteration

• Refinements: Adjusted thumbnail size, optimised loading speeds by pre-loading key frames, and refined timeline precision.
• Usability Enhancements: Added haptic feedback on mobile devices to help users navigate accurately and locate their previous position.

7. Implementation

• Development Collaboration: Collaborated with developers to ensure responsive, accurate thumbnail previews across devices, using a low-latency loading mechanism for smooth transitions between frames.