Casting with Ease

Early 2018
Zattoo

TL;DR Screencast Technology; Being One Step Ahead of the User; Lean User Flows; Design of Gestural Interfaces; Animated Prototypes;

Live at: Zattoo for iOS ⇲

Discover

It Works, Somehow

We wanted to offer our users a less cumbersome and more seamless way of casting content to their devices.

To do that, we studied the available screencast technologies and, although they have been around for a while, they are still not very intuitive and the interfaces to accomplish tasks can be intimidating.

The general flows are something like:

User Flow for Regular Casting
Understand

Screencast is not a one-way street

Although Google’s Chromecast, Apple’s Airplay and Miracast are the major providers of casting technologies, Spotify was the one who really understood how to best combine tech + experience.

The Beauty of Being Seamless by Spotify

They designed a journey grounded on the understanding that people may want not just to start/end a cast session, but also, to switch from one device to another.

Define

TV Experience on Steroids

The knowledge gathered from the previous steps inspired us to design an experience that should keep the traditional and laid-back aspects of watching TV, while enhancing this experience by addressing the following aspects:


Predictively account for the user needs

Simplify interactions of casting content

Enable users to get the best out of the multi-device usage

Design

Easycasting: Get Schwifty

The general aspects of the Easycasting experience is pavemented with the usage of gestural patterns that would enable the users to quickly perform tasks without the need of focusing on the visual interface.

On the top of the comprehensive flows, we also crafted a handful of prototypes of all sorts of fidelity so we could gauge the accuracy of the gestures we were introducing.

Up We Go

The device selection dialog is evoked once the user swipe-up on the player. We also kept the access to it by tapping on the cast icon for accessibility reasons

A Swipe to Remember

Instead of asking every time which device the user wants to use, the swipe-up the gesture cast right away the stream to the last used (and available) device

The Stream Follows

If the users need to check something out in the kitchen and don’t want to miss any moment from their favourite live show, all they need to do is to swipe-down on and bring the stream with them

Tiny Player

To enhance the browsing experience the player is reduced to its minimal state so the user can focus on the grid of content

Drag & Drag

We tried to convey with the kinectic animations the feeling of actually "dragging" the stream from one place to another

Full Control

Stacked controls were introduced to allow the user to have full control over both: local and remote streamings

PIP 2.0

Sometimes the user just want to sneak-peak into what’s being aired on a specific channel before sending it to the TV

Learnings

Delightfulness has a Price

  • We managed to simplify the amount of actions needed to accomplish some tasks
  • Due to the very complex nature of the components involved, dozen of iterations were needed until we settled for a winner
  • It’s always a humbling experience to design animations that look & feel good
  • Some edge cases turned out to be not so edgy and came back to haunt me
  • Screencast technologies on their essence are still very unstable and rely on plenty of moving pieces (hardware, wireless adapter, amount of devices, etc)