ESPN Plus: Behind the Experiment

As a continuation of our Future of Sports series, I’m going to deep dive into the design-thinking behind our ESPN Plus experiment, and explore the UI and UX methodologies that were applied to create what we truly believe to be the future of viewing live sports.

Let’s get started.

A Quick Recap

• In general, the UI for live viewing as been grossly under-designed; always playing prisoner to the VOD structure
• Disney CEO, Bob Iger announced ESPN Plus in 2017, for launch in early 2018.
• ESPN Plus will be an all-in-one sports app that has everything a sports fan could want, rolled into one app (scores, highlights, live games, VOD, subscription packages to NHL, MLB, NBA, etc.).
• We at You.i TV saw this monumental app to be rife with opportunity — and challenges.
• Rather than wait and see what Disney proposed as the future of sports, we decided to run interference (sports metaphor, get it?) and develop our own concept app.

The end result…

For a full overview of our ESPN Plus design experiment, check out our previous post by our Head of Strategy, Matt Nelson.

Research

As any UX specialist knows, research is core to any app experience. Before we even put pen to paper, we had to determine the profile for a fan, how would they use it, and what would they use it for.

We surveyed over 500 sports fans (of various fandoms) using a combination of Amazon Mechanical Turk and in-house focus groups. We set parameters around viewing behaviour, preferred sports to watch, preferred device, and viewing method (cable subscription, streaming, etc.)

And with the research came a compelling truth: people love to watch sports on their TV screens, opposed to mobile devices and laptops.

And it makes perfect sense;

• Sports is often viewed by multiple people at a time, which makes a TV screen the best option
• Details are of utmost importance in sports (did the player make the base or get tagged) which bodes well for larger screens
• Home viewers love to be a part of the action, and modern TVs with crisp, HD performance do just that

We knew our design experiment needed to be designed for TV, which meant it was time to brainstorm.

Related: Re-Thinking User-Interface Design for the TV Platform

Ideation

Throughout our brainstorming sessions, we didn’t want to focus on what’s “next”, to give the impression that the sport app has evolved, we wanted to fix what’s broken with the actual sport app model. As we worked, design principles emerged:

• Always-on: A game should always be visible and playing as you navigate through the app.
• Personalized and Proactive: The app should know me and which team(s) I want to follow.
• Chromeless: Edge-to-edge. No need for unnecessary buttons and controls.
• One Click to Stats and Social: Just one click away from everything.

Based on our research, our four design principles, and personal expertise in UX design and app development, we knew that the only way to achieve a constantly live experience, with a one-click navigation system, and a minimal UI was to drop the user in the centre and build the content around them, which led to the concept of a compass.

The Compass Metaphor

For sports fan, the live game action is at the front and centre of their experience. The compass metaphor was developed with this thinking in mind — keeping the live game action always present.

The Compass is a perfect analogy to the television remote. TV UIs are controlled by a D-pad and used at a distance from the screen. Our experience is set around that navigation; the D-pad extends the experience Up, Down, Left, and Right to expose content that complements the live game — one click away. A digital D-pad, if you will.

Let’s break it down:

Home

On app start up, the user is presented with a minimalist experience of his or hers favorite team. When ESPN Plus is launched, it should automatically be playing the game I want to watch. #GoHabsGo

The game plays behind a dark overlay and a very simple selection menu of options. We based ourselves on the habits of sports fans to serve up these 3 options.

1. Watch live: jump in and catch the game, live.
2. Play from start: Start your feed from the beginning.
3. Catch Up (highlights): Watch a highlight reel before merging into the livestream.

Once you click “Watch Live” or “Play from Start”, you’re dropped right into the feed. From there, you either click up, down, left, or right on your D-pad to access different menu options.

⬆ Live Today

Pressing up on the remote control’s D-pad minimizes the live game to reveal the Live Today row.

In an effort to keep “fans” in the action, the live game is continually playing so not a single moment is missed. In this view, users have the ability to quickly glance at other teams they might follow or an upcoming game they might be interested in. The cards seen in this lane will be presented based on your viewing behaviour and what games you register as of interest during your onboarding process.

Key elements were surfaced to keep distraction at minimum. Having a darker coloured background allows key information to pop which helps the user glance at the proper information. We made the Live Games on Now cards a lighter grey which allows to enhance the hierarchy and make the team logos and scores stand out.

From here, you can also choose to follow games or watch picture-in-picture through our Press & Hold feature.

This option allows users to “follow a game” that might be starting in 30 minutes, or anytime in the future, with the comfort in knowing you won’t miss a moment. They will get a notification prior indicating that their game is about to start. The timing of the notification can be altered in settings (10 mins before game, 5, 2, etc.). The user simply follows the same logic and hits the D-pad up to reveal a red game card. Users will press this card to jump right into the action.

⬇ Game Stats

Sport fans are big on stats and it’s not rare to see them using secondary devices to check game or player stats. We’ve incorporated this feature inside the app allowing the user to always being connected to the game all while checking their stats.

Pressing down on the D-pad reveals the top-level stats and highlights of current game. Highlights are updated in real time and lets you relive that game-winning touchdown or that emphatic dunk. Staying on a card for 3 seconds will autoplay the feed without sound. These key moments allow users to be in total control of their experience.

True die hard stats fans are covered as well. A second press down on your D-pad provides users with advanced game statistics. Keeping it at the second tier level allows users that are interested to view them and keeps it hidden for those who don’t. This feature also bodes well for the TV platform because of the sheer screen size. More real estate means more areas to include stats. This keeps page scrolling to a minimum which is key to a chromeless experience.

➡ Belonging

If you’ve ever tried to enter your login credentials in a TV app using a remote, you can attest to how tedious and painfully cumbersome the entire process is. Which is why we knew that adding a social media element could prove to be difficult. How do you make users feel like they are a part of the game without subjecting them to a manual, letter-by-letter entry method? This would pretty much cancel out any option to tweet or post a status update. Unlike with mobile or tablet devices, television is not a form factor you want to keep interacting with and should be more of a passive experience.

We feel our belonging approach remedies the need to manually input text while still providing users with that social atmosphere that is synonymous with sports. Belonging is all about the game-specific feed and not your own personal social graph which removes the need of interaction. By pressing right on your D-pad, you’re now immersed into the game experience with user-generated videos and Tweets from top ESPN analysts, without losing a moment of the live game.

With Instagram’s geo-tagging feature your are able to see fans perspective of that big play as if you were sitting right there with them. Watching sports in your living room is never the same as watching it live in a stadium but this might be the next best thing.

Fantasy

According to the Fantasy Sports Trade Association’s website, 59.3 million people played Fantasy sports in the USA and Canada, alone. This means it’s a BIG DEAL and we had to find a way of incorporating into our dream app. We wanted to make this feature really seamless and as unobtrusive as possible, all while enhancing the experience for the users. The majority of fans we interviewed were part of at least one Fantasy sports league and end up using a secondary device to check up on their stats or to see who they are matchup against.

We’ve came up with the perfect combination of watching live sports and keeping tabs on your Fantasy scores without ever having to leave the live event. During a live game, notifications emanating from the right-hand side of the screen keep fans updated whenever their ESPN fantasy team scores.

We’ve applied the same thought process to Fantasy as we did with social and kept it display-only. However since this is directly connected to a user’s specific profile, authentication is needed for this to work. Once a fan has authenticated their Fantasy team, notifications will be turned on by default. We felt this was a good comprise even though not optimal.

Making this app chromeless and easy to use was no small task. We find that great design requires no instruction and leaves everything intuitive. We wanted to eliminate as many steps as possible and we found that the compass metaphor was the most optimal format to make discovery and navigation as organic as possible, without taking your eyes off the feed.

Wrapping Up

If we are to look back at our research and the four principles that stemmed from it, you can see that the compass metaphor behind our ESPN Plus design experiment is the optimal format for live viewing on a TV platform:

• Always-on: The video feed in our app never stops. It doesn’t matter if you move up, down, left, or right, your game is always visible.
• Personalized and Proactive: There’s no need to hunt for the content you want. Our ESPN Plus app is constantly learning your viewing behaviour so that it can grant you access to your team, faster.
• Chromeless: It was important to not distract the users attention with non-essential materials or unnecessary steps. Instead, we wanted to keep their attention firmly on the job at hand; watching live sports.
• One Click to Stats and Social: If Tinder has taught us anything, it’s that simple swipes, work. Access games, stats, and social with the tap of a button.

Dreaming up what we believe to be the future of live sports was a blast. And although we pride ourselves on introducing something never seen before for a sports app, we’re well aware that we just listened to what actual sports fans want.

I hope you enjoyed reading our thinking behind our ESPN Plus Design Experiment. This app is ever-evolving and we’re already working on the next iteration, with more features and functionality to come. I’d love to get your thoughts on our experiment. What did you like? Dislike? What would you have done differently? Comment your thoughts, below. 👇

Thanks for reading! If you’d like to read more of my musings around UX/UI developments in the video streaming world, make sure to follow You.i TV. We’re building the future of TV and learning a lot along the way.

Visit our website at www.youi.tv