ESPN Plus: The Future of Live Sports
A design experiment by You.i TV
In August 2017, Disney CEO Bob Iger unveiled the company’s plans to launch ESPN Plus — the ultimate sports app. A single destination for scores and highlights, authenticated live viewing, subscription packages for additional live and on-demand ESPN content, along with in-app subscriptions to MLB.TV, NHL.TV, and MLS Live.
When The World Wide Leader in Sports turns the page on its legacy distribution model and goes all in on a D2C future, it’s not only a watershed moment for the industry – it’s a sports fan’s dream.
As user-experience experts at You.i TV, we couldn’t help but be mesmerized by the design possibilities behind an app of this magnitude. And as sports fans, we couldn’t stop thinking about how, if done right, this could establish what the benchmark of sports apps could be.
So, we kept thinking.
The Heart of Live Sports
First of all, ESPN+ will be a big app, and through our research into sports viewing behaviours, we found that people love watching sports on their TV screens, as opposed to mobile or tablet devices. So, we constrained our experiment to the heart of the TV viewing experience — the game itself. The live video player.
As we worked, four design principles emerged:
- Instant and Always On: Sports is all about the live experience, and so from startup to shutdown, live video plays in ESPN Plus.
- Personalized and Proactive: The tribal nature of sports fandom amplifies the efficacy of personalization technology. So we assumed that after a light on-boarding process, ESPN Plus continually learns preferences to proactively surface the games that matter most to each fan.
- Chromeless: With sports apps, the video is the experience. We stripped the user-interface down to the bone with a minimalist approach.
- One Click to Stats and Social: It’s unbelievable how often sports fans check stats and social conversations on secondary devices. We made sure that critical data is always one click away — without stopping game action.
The Compass Metaphor
The team galvanized around a compass metaphor as a way to keep the live game action front and centre, while delivering against our four design principles. The Compass —a digital D-pad for users — extends the experience⬆(North), ⬇(South), ➡(East) and ⬅(West), to expose content that complements the live game — one click away.
⬆ Live Today (North): Access all of today’s live sports.
⬇ Game Stats (South): Drill down into the statistics behind the actual game.
➡ Belonging (East): Feel a part of the action with game-specific social feeds and access to Fantasy scores.
⬅ On-demand & Settings (West): Drill deep into ESPN’s VOD catalogue of classic games, 30 for 30 docs, along with episodes of SportsCenter, First Take, PTI, and more.
The Instant-on Player
Sports fans have highly patterned viewing habits. ESPN Plus learns those patterns and uses them to anticipate the game you’ve tuned in to watch. It’s Eddie Cue’s dream come true.
“I get home and I want to watch a Duke basketball game; why do I have to go hunting to find out what channel it’s on? Why can’t I just say, ‘I want to watch Duke basketball.’ Or, even better, why doesn’t the system know that? ‘Here’s the Duke basketball game.’ Those technical capabilities exist today.”
— Eddie Cue, Apple
I watch most Toronto Raptors games. #WeTheNorth
ESPN Plus has learned this, and on startup, the Raptors game plays instantly behind a simple selection menu of options:
- Watch Live: A regular season game in January? I’ll jump in live and watch the second half in real-time.
- Play From Start: Missed the first half of a playoff game? Start from the beginning.
- Catch Up: The game’s in the second quarter with Lebron visiting? Catch me up with a highlight pack before merging into the livestream.
We live in a world where an instantly on, contextually aware and flexible player is well within the means of technology. Our ESPN Plus live player embraces this future with open arms.
⬆ Live Today
Pressing up (north) on the remote control’s D-pad minimizes the live game to reveal the⬆ Live Today surface featuring a row of today’s games sorted by preferences and start time. After resting the focus state on a particular game for three seconds, ESPN Plus autoplays the game (no audio) inside the thumbnail, with your current game still in play.
Access a second layer of the ⬆ Live Today surface with another click north on the D-pad. The game is further minimized to make way for a row of non-personalized live games happening tonight. We’ve introduced a dropdown to support browsing by sport.
Follow the Big Game
ESPN Plus presents a contextually aware menu after fans select a game card.
- Pre-game: The ESPN Plus presents only one option — follow the game.
- Game in progress: Once the game has started, ESPN Plus provides two options: Follow the game, and play picture-in-picture.
After a game is followed, ESPN Plus displays actionable notification overlays in the player to keep fans up-to-date on followed games and provide a path to quickly jump over into the action. (In addition, we envision a settings menu where fans can follow teams perpetually).
After seeing a notification, a single click north reveals the ⬆ Live Today surface featuring a red game card. After clicking the card you’re instantly dropped into the game.
⬇ Game Stats
Like I said earlier, it’s unbelievable how often sports fans use secondary devices to check game stats. Pressing south on the D-pad brings up the ⬇Game Stats surface inside ESPN Plus. ⬇Game Stats provides fans with one-click access to top-level games stats and highlights — without stopping the action.
A second press down minimizes the game action further and presents a multi-card carousel of advanced statistics for fans who love that sort of stuff, while keeping it hidden for those who don’t.
Note: We’re aware NBC currently has Super Bowl broadcast rights, but we’re imagining the ultimate sports app here!
One of the byproducts of device fragmentation and content breadth in the media landscape is that video viewing has become an increasingly isolating experience. We thought deeply about companion chat windows, similar to what you see in e-sports, and how they are often so heavily populated that it’s impossible to keep up with. What draws people towards these experiences? We wonder if it’s a counterpoint to increasing trends towards watching sports alone, a yearning to belong to a community of others like yourself. Thus the ESPN Plus ➡ Belonging surface was born.
The team felt that two common user-experience mistakes when it comes to TV social integrations are requiring authentication, and allowing user input — both of which are awkward on the TV form factor. The ESPN Plus ➡ Belonging surface is all about the game-specific feed, not the fan’s personal social graph. One click east immerses fans into the stadium with user-generated video via geo-tagging on Instagram from inside the stadium, mixed with a feed of Tweets about the game from ESPN analysts.
Over 60 million people in North America play fantasy sports, so we integrated ESPN Fantasy into ESPN Plus for those who play, while keeping it out of the way for those who don’t. Fantasy players can authenticate their league to keep tabs on their matchup. However, like the social feed, Fantasy is display-only.
If a fan is willing to authenticate their fantasy team in ESPN Plus, notifications are turned on by default. We’ve introduced notifications emanating from the right-hand side of the screen whenever their ESPN fantasy team scores points.
This experiment was a lot of fun.
We’re genuinely excited for ESPN Plus to launch, both to use the app, and to see how the product team at ESPN tackles some of these challenges in the shipped product.
We’d love to hear your thoughts about our ESPN Plus design experiment. Please leave a comment below with your opinions, comments, and concerns!
Worth reading? Please click the ♡ button to help others find it.
About the Author
You.i TV’s app development framework, You.i Engine One powers the apps of some of the biggest sports brands on the planet.