TVNZ • MOBILE • CTV
Thumbnail Scrubbing

Feature
The thumbnail scrubbing feature enables users to preview images via responsive thumbnails, making it easy to locate specific scene in videos across mobile and CTV platforms.
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.