UX Designer & Leader
record.png

Case Study – Zattoo Series Recording

Case Study – Zattoo Series Recording

 

Zattoo has offered a simple cloud-based PVR feature for several years, allowing customers to save programs from nearly 180 live TV channels. This lets users conveniently record and time-shift their favorite films and TV series, but in the case of recurring television series, the user must repeatedly search for upcoming episodes of a particular series, and save each one individually.

 
 
 Series Recording options for TV program "Tatort"

Series Recording options for TV program "Tatort"

My Role

I led the design of the Series Recording feature for Zattoo, across our web and mobile platform apps. The feature was designed and developed by collaborating with a product manager and interaction designer, plus select experts and stakeholders, including leads for content acquisition, CMS development, platform development, and customer support.

Goals

  1. High level goals: Develop a series recording feature that will meet the "mainstream" needs of a majority of users with a minimum of interactions. 
  2. KPI goals: Increase non-linear viewing time of recordings, increase conversion from free to paid subscriptions, improve NPS score for Swiss customers.

Understanding

Together with the product manager, I collaborated to define the opportunities and constraints for this project: confirm licensing requirements (…are there any content licensing guidelines to be considered?), content audit and metadata analysis (…which TV series do we have usable metadata for and how is that data structured?), analyze existing series recording solutions (…how is series recording incorporated into other TV services?), and review learnings from analytics and user research for our legacy recordings features.

Exploration

Once we had a solid foundation for understanding the problems to be addressed, we moved into framing and exploring possible solutions. This runs through a broad set of exploratory exercises and artefacts, including whiteboard sketching, wireframing, mockups, and prototyping.

 Whiteboard sketching to capture concepts and constraints.

Whiteboard sketching to capture concepts and constraints.

Whiteboards and Sketching

In initial meetings to discuss approach, we outlined the primary goals, opportunities, and constraints, which served as a framework to capture ideas visually in whiteboard sketch sessions.

 Wireframing to communicate feature proposal.

Wireframing to communicate feature proposal.

Wireframes and Iteration

Once we had agreed on an initial approach, we began designing wireframes to communicate intended behavior and experience, including integration into our existing UI framework, which is based on our internally designed and developed modular component library.

 Series Recording mockup for Zattoo Web Player.

Series Recording mockup for Zattoo Web Player.

Mockups and Visual Design

As we revised and iterated on our approach, we began to increase fidelity with pixel-accurate mockups in collaboration with our visual/UI designer. This allowed us to explore both functional integration and visual presentation.

 Series Recording Prototype screens for Zattoo Mobile App.

Series Recording Prototype screens for Zattoo Mobile App.

Prototypes and Screen Design

Proceeding with the cross-platform design for web and mobile, clickable prototypes were created to help communicate user flow and screen states.

Build

Design progress and direction was discussed with development teams throughout the project, allowing technical constraints and suggestions to be incorporated prior to development. Once we had achieved a viable level of design guidance and specification, we moved into development, initially for the web platform to provide an environment to further validate the approach we have taken, including beta testing and internal user testing. After testing and revisions to final messaging and middleware/client logic, Zattoo released the feature simultaneously for Android, Windows, XBOX One, and web apps in January 2017, with iOS and bigscreen platform apps (Apple TV, XBOX, Amazon Fire TV) following soon after.

 Series Recording scheduled for TV program "CSI: NY".

Series Recording scheduled for TV program "CSI: NY".

 Series Recording list manager.

Series Recording list manager.