DAZN: NFL Game Pass International

Outcome

I designed a full design system for the project, at a time when DAZN had no documented design system beyond the tiles from Navigation v2, and handed it over to the dev team. The project demonstrated that DAZN’s product could be componentised and used as a white-label streaming platform for sports leagues, a possible new line of revenue. The commercial agreement between Perform and the NFL fell through before the service launched.

Context

The NFL ran Game Pass as two OTT services, each delivered by a different contractor: Game Pass Europe, and Game Pass International for the rest of the world outside the US and Canada. The contract behind the International service was ending, and Perform Group, which ran DAZN, was approached to deliver a new iteration of it. For DAZN it was new business, built on its own product as rebuilt in Navigation v2.

I covered the UX architecture and the product design with a small product and marketing team, from the third quarter of 2017 into the first quarter of 2018, and designed the full set of UI assets needed for production. The new Game Pass was to run on DAZN’s infrastructure, so I worked closely with the development team to make sure every change the design needed could be built.

Benchmarking what NFL fans already used in Game Pass

Game Pass carried a large archive and a linear channel, NFL Network, which DAZN’s product did not have, and both had to be usable and familiar to NFL fans. To learn what fans were used to, I started from a benchmark of the two services the NFL already ran, mapped signed in and signed out: Game Pass Europe on web, iPhone, Android and Apple TV, and the incumbent International service on the web. Both carried NFL Network and RedZone with a scores toggle, and International also let users search individual plays and follow their teams. I carried each of these over into the new design.

01Architecture

Structuring one catalogue for four surfaces

Game Pass had to serve users on four surfaces, signed in and signed out, from one catalogue. From the benchmark, in September 2017 I drew the information architecture for each surface: desktop web, mobile web, the native apps and the living room. On desktop, Home autoplayed video above season tabs, with dynamic rails for the current season and archive rails for past ones. Teams opened on a grid of favourites above the AFC and NFC, and NFL Network had live video, a schedule rail and shows A to Z.

Mobile web had the same catalogue without the player, and every video led to a prompt to download the iOS or Android app. The native apps had downloads and a settings area as well. Signed out, the whole catalogue stayed open on the web, with join prompts on each page, and the apps opened on a landing with sign-in, plans and pricing and a join flow.

From the IA I moved to wireframes, drawn as blueprints from which the product owners wrote their tickets, and as prototypes to test with NFL fans before the visual design.

Following the NFL week on the home page

DAZN used one format for every sport. The NFL season runs for six months in a fixed format, from preseason through the regular season to the playoffs, and the IA and the home had to follow it. In October 2017 I specified the catalogue logic for how the home and every game tile changed with the NFL week.

Previous seasons became VOD archives, from the Super Bowl back to the first preseason week, and the page autoplayed the Super Bowl if nothing else was playing. A Scores switch in the header set every game tile to show or hide its result.

02Design system

Creating a design system for every surface

Every surface needed the same components, sized for its screens, and beyond the tiles from Navigation v2, DAZN had no documented design system to draw them from. I specified the responsive web at five breakpoints in October 2017, with the breaks at 600, 900, 1,200 and 1,800 pixels set from a breakdown of device widths, and drew the header, footer, season filter and tiles for each. On a phone the header held tabs for Home, Teams and Shows, the account joined from 600 pixels, and Search plays and the Scores switch from 900.

The components sat in Sketch symbol libraries, organised as atomic design, with shared libraries of atoms, logos, teams and tiles, and libraries of headers, tabs, playback and footers for each platform. A team sheet held each club’s host and guest logos and its primary and secondary colours, and every team tile carried its colour in one corner. The palette was set by area, with Game Pass blue in the header only, Live Red for anything live, and Active Blue for selection and calls to action.

The NFL had no design guidelines or system to give us at the start, though we asked for them. Its component-based design system arrived as a Sketch file well into the job, and had to be ported into every design delivered by then. It was a painful process, but with symbol libraries already in place on every platform the changes were easier than they would have been a few months earlier.

Splitting delivery by surface and by domain

With four surfaces to design and build, I drew up a UX plan in November 2017 and put the responsive web first, from October to mid-January. The iOS and Android apps followed side by side for six weeks, with Chromecast and AirPlay, then the living room from March: Android TV, Amazon Fire TV, Xbox One and Apple TV.

In December 2017 I put the strategy and the design of each surface into a product vision deck, and proposed splitting the build by domain: one layer of assets shared across the product, then catalogue, playback, sign-up and account, each going to its own front-end team.

03Surfaces

Playing every kind of NFL video on web and mobile

Game Pass had to play live games, games on demand and NFL Network on the web and in the apps. I took the responsive web to version 1.03, with the catalogue, dialogues, a sticky player, the account area and HTML page templates. I prototyped rail behaviour, scrolling at each breakpoint and the video player in Framer. The stakeholder demos for tablet and mobile date from late October.

On the web the player had a state for each kind of video: a live game, the same game behind the live point, a game on demand in broadcast, condensed or coaches film, and NFL Network live or on demand.

I took the iOS and Android apps to version 1.01, each with its own libraries for headers, tabs and playback. On iOS the tab bar held Home, Teams, Shows, Search and More. Each game could be played as the broadcast, the coaches film, a condensed version or audio, then downloaded or sent to AirPlay. Play search let users find a single play by player, play type, down, team, week and season, and listed each play with its game clock, down and distance, and the play-by-play text.

Navigating games and rails with a D-pad on the TV

On the TV, users would browse a 10-foot UI from across the room with a D-pad. The TV apps opened on the first game in Games playing full screen, and navigation ran on the D-pad: up for the top menu, left and right for the previous and next video in the rail, OK for the controls and the current rail, and down for the rails. The menu, the controls and the rails were each one press from the game. Signed out, the same screen showed a promo and a sign-in, by quick code or username and password, with a QR code from the app as an open question. New customers were pointed to the web or the app to join.

The Framer prototype I built in December 2017 ran from a keyboard or a game controller, with rails over the live game, a menu rail, and an overlay on the full-screen game that faded after three seconds without input. The living-room catalogue followed in February 2018, drawn as Apple TV screens.

What was handed over, and what was still planned

The three platforms on the left shared the plan’s last block with Apple TV, from March 2018, and have no designs in the handover.

Sources

• Benchmark, IA and catalogue logicSketch, September and October 2017
• UX plan and product vision deckNovember and December 2017
• Web, native and living room designs and librariesSketch, 2017 to 2018
• TV prototypeFramer, December 2017
• Portfolio slides2019