Sportsnet: Next-generation app concept

Outcome

I handed over a concept that led to Sportsnet’s new app, with a personalised home built from modules, where a new feature can go in and be tested on its own. Rogers’ head of design also asked for journeys and prototypes beyond the scope. The new app then went into delivery in steps.

Context

Rogers Sportsnet’s app, on iOS and Android, carried news, scores and highlights, live radio and SN NOW streaming for subscribers. It was busiest when games were on and when news broke. Its core users were older than the audience the Sportsnet brand was aiming at, and the app had no social layer.

At kickoff, Rogers set goals to grow monthly active users, overtake its main Canadian competitor, drive subscriptions to SN NOW and SN NOW+ and earn more from advertising, with betting to follow later. The concept was to show what a future version of the app could look like on existing technology, to engage a younger audience and add value for existing customers.

Looking for features beyond the sports app standard

The brief was to engage a younger audience, so we looked for features beyond what sports apps already offered. Before kickoff we started our desk research with the current app, captured flow by flow, and its store reviews, where users complained about sign-in, regional blocks and casting to the TV. I tore down eleven sports apps, first those I could install in the UK, from DAZN and Sky Sports to BBC Sport, then TSN, ESPN, theScore and CBS Sports, the Canadian competitors Rogers’ team named. Nine more, from The Athletic to Shazam and Duolingo, were for onboarding patterns.

Most of the sports apps shared one feature set and rarely went beyond it. To show Rogers ideas beyond the competition, I set them beside that feature set in the preliminary insights from this research, shared at kickoff on a Miro board. The ideas ran from onboarding that profiles the fan through a conversation to gamification, community, watch together and data overlays on the stream. On a strategy canvas we compared Sportsnet’s offering levels with direct rivals, video services and the apps competing for a fan’s attention, to identify potential gaps in the market.

01Discovery

Focusing the concept on three priority fan segments

The first proto-personas came from assumptions. To base every persona on a real group of fans, I rebuilt the set on Rogers’ fan segmentation research, one proto-persona for each of its six segments. We prioritised the sports buff and the next gen, the two high-consumption segments, and the social snacker, at 22 the youngest.

Mapping the backlog to the fan lifecycle and gameday

Rogers had set out requirements for the new app, and we had to decide which of them and which new ideas the concept would cover. I collected the requirements into feature buckets and added new ideas to each, then cut the same backlog by lifecycle stage: onboarding, four realms of engagement (watch, listen, read and play) and self-serve, with each feature marked in or out. The play realm did not exist in the current app at all, with no fantasy, games, betting or social features.

To see when in a fan’s day each feature would be used, I placed the backlog along day-in-the-life journeys for a gameday and a day without a game, from the morning notification to a second screen and stadium mode during the game, and dark mode before bed.

02Co-creation workshops

Co-creating priority journeys and the backlog with Rogers

So that the concept followed Rogers’ own priorities, we co-created the key journeys with their team. We ran a set of workshops with Rogers. In one, after reviewing the competitive arena and the customer lifecycle, we gave 25 minutes to the proto-personas and the research behind them, and 50 to co-creating the key journeys for the three priority personas.

For each persona we mapped jobs, pains and gains against pain relievers, gain creators and features. In the account journey we set out the entry points into the app: signing in, creating an account, or going straight in and personalising later. In the persona journeys we followed each fan around a game, from odds and live trackers for the sports buff to highlights and sharing for the social snacker.

We left the workshop with the backlog in three priority tiers, from the news feed, scores and SN NOW at the top, through a personalised feed, vertical video, and DTC and TVE entitlements, to betting partners, fantasy integration and merchandising.

After the workshops we iterated on wireframed journeys, most of them mine, which became the basis for the final UI.

Letting new features go in and be tested as modules

The backlog ran from polls and live odds to watch parties and merchandise, and on the gameday journey a fan’s needs changed from the build-up to the end of the game.

03Final layouts

Personalising the home around each fan’s teams and athletes

The current app’s home tab led with news and scores. I designed all of the final layouts and built the prototypes. In the concept the home opens on the teams and players each fan follows, with their live games, story-style highlight clips and top picks. Fans add favourites by search, and athletes have their own pages.

Building social viewing into the game page

The current app had no social layer, and Rogers wanted social features built deep into the app. Users in the store reviews also complained that casting to Chromecast or Apple TV did not work. The game page runs from the build-up to the live game, and lets the fan cast to a living room Apple TV or share a clip to an Instagram story. Watch together starts from the game page’s friends tab, and an invite can also appear on the TV. The call ends with a summary of how many watched and for how long.

Bringing betting and fantasy into the game

Rogers wanted to explore betting integration, which was to follow later, and to improve its existing fantasy offering. For betting and fantasy I designed modules for the game page, where a fan could follow bets and a fantasy team during the game. I also designed dedicated zones for the full betting or fantasy experience. The Betting Zone and a fantasy team appear in the themed screens below.

Giving fans more ways to watch the live game

On the sports buff’s value map, one of the pains was not getting real-time game updates, and data overlays on the stream were among the ideas beyond the competition at kickoff. For the watch experience I explored stats on tap over the video, multiple cameras and locker room cameras.

Profiling fans progressively from onboarding

The current onboarding collected favourites and a location but asked no questions about how a fan follows sport, and Rogers required progressive profile building. I rebuilt the onboarding on that requirement and on patterns from the teardown, select-to-follow with search, local teams by location and progressive questions. The first screen, the location prompt and the account step stayed as they were.

I replaced a tab for each league and a separate leagues grid with one favourites screen, where nearby teams, leagues and each league’s teams sit in rows under one search. Three questions then profile the fan before the account step: how closely they follow sports, how they watch games, and what they want to do in the app. The answers are saved as preferences at the finish setup step.

Showing Rogers’ design team how the concept could work with existing requirements

Rogers’ product design team needed to see how the new design could work with requirements the app already had, such as full light and dark mode support, and their head of design asked us for a few journeys and prototypes beyond the scope. I had worked on the assumption that theming would be needed, mostly with dynamic components, and delivered a set of themed screens as a starting example. Where a prototype could not show a pattern on its own, such as the scroll on the game page, I documented the micro-animation for their team to take into the final product with the themed screens.

Building the final layouts from one component library

Every module had several states. I assembled the final layouts from one component library in the design file, and for the home I reused components I had built for the other sections. The library holds the game banner in five states and each module in its states, such as a poll from its start to its result. Game page tabs, fixtures, news items, team badges and favourites sets sit beside them, many in light and dark. Working from one library, I kept the modules consistent across pages and themes. At handover, the final layouts and prototypes went to Rogers.

What was handed over, and what stayed in discovery

Many options stayed in discovery, on the boards Rogers could open throughout the engagement.

Sources

• Discovery Boards and Design WorkshopMiro, 2021
• Concept presentation ↗Figma, narrated as a prototype
• Design file ↗Figma, 13 sections from onboarding to day modes
• PrototypesOnboarding ↗Home feed ↗Game page ↗Friends ↗Feed modules ↗Betting zone ↗Fantasy ↗Day modes ↗
• The current appTestFlight captures, March 2021
• Competitor teardownApp screenshots, 2021