DAZN: Downloads

Outcome

The native tiles I redesigned for downloads replaced the old ones across the service and became the standard on every platform, as told in Navigation v2. The downloads feature was very successful with users. It went live and is still in the app today, and it lets users download full games as well as highlights.

Context

DAZN was built to stream live and catch-up sport, so without downloads users could watch only while they were connected. In mid 2016 its product design team split its work between the launch in the DACH markets and the features planned to follow it, among them the sports schedule, a new navigation, event tiles, alerts and downloads.

In the July 2016 leadership review, the brief for downloads was a one-tap download of any available video from the player, and later from browse, with automatic downloads of the teams and sports a user follows. The navigation brief in the same review, a native pattern with room for downloads, following and a schedule, is the subject of Navigation v2.

Giving users one place to manage and watch their downloads

Users needed a place to come back to for what they had downloaded, and an explanation of the feature the first time they used it. I worked through a series of quick prototypes, testing versions in internal team workshops and guerrilla sessions, until I settled on a simple section where users manage and watch their downloads, and which explains the feature on their first visit.

Downloads had a tab of its own in the native apps, where users could start downloading on their first visit. An empty tab shows a line on downloading catch-up events to watch later, suggestions with a download action on each, and the download settings.

Once there are downloads, they are grouped by state, with what users can watch now first, in the order Ready to watch, Continue watching, Downloading and Watched. The suggestions and settings come after them. The version for the leadership review used the tiles then in the app, in a two-column grid, with only Downloaded and Downloading.

01Round one

Showing users what they can do with each download

At each stage of a download, users needed to see what they could do with it, on whichever phone or tablet they used. I drew seven states of the tab on both platforms across eight breakpoints, four on iOS and four on Android, 46 renders in all. The states are the empty tab, more suggestions loading and loaded, a download in progress, one ready while another downloads, the full list, and the actions on a download. The set shows how the tab adapts from the smallest iPhone, at 320 points, to a tablet.

Each downloaded tile names what the user can do with it: Ready to watch, Resume watching or Watch again. A download in progress shows a blurred image, the time left and a progress bar, and its menu opens Pause download and Cancel download over the tile. The bin on a tile and the Clear button on a section remove downloads.

On phones each section is a carousel, and pulling past the last suggestion loads more. The iPad and the 600 dp Android tablet show the suggestions as a two-column grid with Load more. Android has its tabs at the top, under a Watch app bar.

02Round two

Redesigning the tiles for downloads and the whole service

Downloads used the same tiles as the home page, and users kept raising problems with the first release’s tiles, so from July 2016 I redesigned them while working on the feature. The new tiles replaced the old ones across the service.

In the January 2017 Navigation v2 design, Downloads kept its tab, last in the tab bar after Search. The tile of a download in progress now has a cancel button and a pause button inside a ring that shows its progress. A finished download moves up into Ready to play, above the ones still running. A removed download can be brought back with Undo.

Letting users set up downloads in advance

Users could not download an event while it was still live, so we let users set downloads up ahead of time. On an event still live, the tile’s options offer add, play and a scheduled download, a download icon with a clock. In Settings, each team, player or competition a user follows lists Alerts and Downloads, the automatic downloads in the brief.

Letting users choose highlights or the full game

The player came first in the brief. A full game takes far more space than its highlights, so users needed to know the size of each before choosing what to download. A colleague mapped the player flow in July 2016 by what the user is watching and what can be downloaded now or later. In the 2017 player states for iOS and Android, a sheet offers highlights or the full game with the size of each, 23 MB against 500 MB in the mock-up. While highlights are not ready, it offers only the full game. An event not yet available can be queued with its expected time, and a download on a full device ends in a message to free up space.

03Round three

Helping users manage space on their device

Users needed to see how much space their downloads used on the device and to free it in a few steps. In Navigation v2.1 I redrew the tab for iPhone on a Sketch page set up for an InVision prototype. Search sits in the tab bar, and cast and edit in the header.

To give the native teams the new controls as assets on each platform, I included in my handover the v2 icon font, exported for iOS and each Android density, with glyphs for download, scheduled download, pause, bin, edit and undo.

Sources

• Leadership review deckJuly 2016
• Download states at eight breakpointsSketch, 2016
• Navigation v2 and v2.1 filesSketch, 2017
• iOS presentation to AppleJanuary 2017
• Portfolio slides2019