DAZN: Navigation v2

Context

Navigation and browse in DAZN’s first release came from a creative agency’s deliverables. In the release spec, the schedule, every sport, the account and help sat in one overlay menu opened from the header. In usability testing in Japan in March 2016, most participants did not notice the menu, and they found the list of sports only by scrolling to the last rail of the home page. Users in testing also expected the navigation on phones and tablets to follow the device’s own interface.

Following and downloads were due to be added after launch, along with a new schedule, and the navigation already differed from one platform to the next. The goal was a consistent navigation across every device DAZN ran on, with room for the new features.

01Discovery

Sorting the information architecture

I gathered what was wrong with the live navigation from alpha testers’ feedback and user test sessions, then ran an open card sort and tree tests with users. The card sort fell into four clear areas, Watch, Preferences, Account and Support, which I organised as a labelled tree with Watch as the main focus. Users need legal pages, language settings and help only at specific moments, so I kept them out of the Watch experience, with help still offered in context when a problem came up.

From the card sort and the data we had, we ranked three user priorities, with engaging content first, managing the account and getting help second, and the legal pages and SEO last.

Benchmarking navigation in top-rated apps

To see what navigation people were used to on their phones, I benchmarked 20 of the top free apps in the App Store, all rated 4 stars or more on both stores, along with their Android versions and mobile websites. Most of the iOS apps, 12 of the 20, used a tab bar, usually at the bottom of the screen, while most Android apps used a burger menu and put any tabs at the top. Seven of the 20 had no mobile website. DAZN’s apps, like Netflix’s at the time, used burger menus on both platforms.

I drew three concepts that applied these findings to iOS, Android and the web at phone size, and we ran quick concept tests on them as prototypes.

Making the case for native apps

The leadership team accepted the case and hired in-house native developers, who built the new apps on a separate branch.

02Design

Navigation by platform

By September 2016 the concepts had become one structure with a pattern for each platform. The iPhone design had a bottom tab bar with Home, Schedule, Sports, Downloads and More, and the Android design kept a burger menu, with Home, Schedule, Sports and Downloads as tabs at the top. On the web at phone size a drawer held the account, settings, help and legal pages, and on larger screens they moved into a My DAZN menu at the right of the top bar. Sports had taken the place of Following as a tab, and led from the list of sports to each sport’s leagues.

In the final iPhone and iPad designs of December 2016, Sports leads to a sport, then a tournament, then a team. Each of those pages shows its live and catch-up events, DAZN’s picks and a rail for the level below. Search groups its results by sport, tournament, competitor and event. More holds settings, the account, help and the legal pages, the second and third priorities, away from Watch. I tested the navigation in guerrilla sessions and with alpha testers before its release on iOS.

Tiles for every event state

Downloads needed the same tiles as the home page, so while designing it I took on the problems users kept raising with them. The first release’s tile stacked several boxes, repeated dozens of times on every page. Coming-up and catch-up events differed only by a subtle colour code. A date was two pairs of digits, so 02 03 meant 2 March, and long titles were cut off by a label of fixed height. In testing, users also could not tell whether the time on a tile meant the start in Japan, the local start or the length of the match, and labels such as Catch up confused them.

The new tile component puts fewer, more flexible data points over a 16:9 image: the competition and a time relative to today, then the event, then its state in words, such as Live in 20 mins, Highlights available, Catch up available on Sunday 21 or Postponed. The same component has a state for each stage of an event, from coming up to live, catch up and highlights, and variants for mobile, desktop and downloaded videos. It did well enough in testing and internal workshops to replace the original tiles across the service, on every platform.

03Release

Handing over navigation and tiles

The native apps were built in Poland, and the web and TV in the UK. There were no design sprints, so I worked with the teams through reviews, test sessions and time on site.

For the developer handoff in January 2017, I prepared the responsive web at five breakpoints, from the home page through Sports to a team page, a first pass at the TV home and player, and the tile specs for iPad. The specs set tile sizes by screen width, with one full tile in view on a phone and two or more from 600 points.

In June 2017, after the Android v2.0 build, I specified UI fixes to fonts, margins and tile sizes for every Android phone and tablet. For Android v2.1 I moved the tabs to the bottom of the screen, as on iOS, in line with Material Design’s bottom navigation.

By the handover in September 2017, I had split navigation and tiles into separate Sketch files, with every tile component in one place. With tiles inside the navigation files, every tile change would have meant updating the navigation for web at three breakpoint groups, iOS, Android and TV. Tiles in the navigation files were left blank, since Android developers updating the schedule had built an old tile design that the schedule file still showed.

Each project had its Sketch file, an InVision prototype and its screens in Zeplin, indexed by device. By then both native apps had the second version of the tiles, and v2.1, without the black background under the labels, was implemented on Android and in progress on iOS.

Testing the live app in Japan

After release we kept testing with users, either existing customers or, in a new market, people from its likely audience. In July 2017 we ran research in Japan, testing the live iPhone app, version 2.0.4, against two newer iterations built as InVision prototypes.

Once the first native app was out, users asked for a way to browse the schedule of events and filter it by sport. After designing and testing the schedule on the apps, I tested its sports filter on site in Japan, with four or five Japanese users per session and a Japanese-speaking product owner, and changed it between sessions through the week. The flow had to let users find the filter from the schedule, apply one or more sports, cancel a change, clear every filter, and go back to the schedule as they last saw it. Testing in Japan also let us check the use of Japanese fonts.

Outcome

Navigation v2 went live on iOS first, with the new tiles, and got excellent reviews on the App Store. That feedback led DAZN to roll it out to Android and then to the responsive web. As I recall, ratings on both app stores rose from roughly 3 stars to 4 or more after its first release.