You're Custom Landing SPot

The Network:
Dashboard

PlayOn! Sports

NFHS Network: The Streaming Site for High School Sports

Role

Product Designer

Skills & Tools

Wireframing
Prototyping (Figma, Storybook)

Project Background

Overview

When we first acquired The Network, it was pretty clear the dashboard hadn’t been given much thought—which was surprising since it’s the first thing users see when they log into the app. Instead of anything helpful or tailored, you’d land on a random mix of games, simply sorted by time, which didn’t do much for anyone. With over 4,500 reviews on iOS and Android and an average rating sitting in the low 3s, it was obvious we had some work to do. The dashboard was the perfect place to start rolling out the new design system.

Problems

reviews and low ratings indicated that users were experiencing difficulties navigating to their desired events.

Dashboard

The dashboard experience provides little to no help finding the event you came to watch.

The search experience is dismal and unfiltered, resulting in poor user navigation.

Our Goal

Get Them There

Using the classic "KISS" philosophy, our goal is to get them watching.

Personalize

Let's get nosy. Use our users preferences to predict where they want to be.

Guide

In a perfect world our users won't even have to think to get to their destination.

Deliver

When they search, we deliver. Our search must be trusted and omni-everything.

Making your dashboard yours

We wanted to use everything we could to make your dashboard your very own each time you logged in.

Laying it all out

While working on wireframes for the dashboard we had to cover a lot of states. We had entirely different seasons to handle, playoffs coming and going, notifications to be given, the works. We used the wireframing stage to explore as many states as we possibly could. We did this so we could go back through and get rid of as many as possible!

How do we make your visit feel like it's for you? How do we "highlight the highlights?"

Carousels For The Win

We experimented with several options for displaying categories on the dashboard. Each one had pros and cons, but we quickly came to the conclusion that everyone else wasn't wrong and we weren't going to fight it.

Unless you've been living under a rock under a whole 'nother planet, you've seen carousels used for streaming services. Every service from Netflix to Watch ESPN (a partner) uses carousels in their platform in some capacity. On mobile it is one of the more familiar ways to navigate content and on desktop it provides a clear and easy way to get from one category to another. It also allows us to keep the exploration experience almost 100% consistent from platform to platform no matter the device.

Desktop, too

I know mobile is cool, but desktop gets love too. I mean it's literally ~30% of the traffic so it's never an afterthought.

Personalization

There was a ton of stuff we wanted to tackle with the dashboard - and personalization was actually a top priority. For a lot of products, this might seem like a "down the road" or "nice to have" type of feature-set, but not for us. With the vision we had for the dashboard, getting to know our users was crucial.

Utilizing Basic User Info

Using some really basic user information available from the (current) onboarding process we are actually able to provide a lot of personalization right out of the box.

GPS (if you click allow and all that)
Location (user selected during signup)
Previously watched

Show Me Your Favorites

A new feature that was really going to help this whole personalization thing. While "previously watched" data helps us get a general idea of what geographic area and sports you might want to watch, it's still really just a hopeful guess. You could have absolutely clicked a random video to test quality and you do not, in fact, care at all about swimming. By simply favoriting the St. Bonaventure Boys Basketball Team, we get a ton of data that we can use to help customize your experience on the Network.

That Super Buzzword of the Moment: AI

Information is king, but you are a king of no castle if you don't know how to use your data. Out of the gate we knew we wanted to utilize AI for our dashboard deliveries and search functionalities. In order to make using AI worthwhile we needed to gather as much user info as possible. Between the onboarding process, location services and favoriting we are able to deliver a personalized dashboard of your favorites as well as suggested media.

Navigation

Let's remove, I dunno... almost all of it?

One of the major clean-up tasks from the old app was the horrendous navigation. It functioned just fine and everything worked, but it was beyond huge. It took me a solid workday to be able to navigate to an example of each template just for documentation.,

While there were obviously discussions that got us to this point, our solution ended up (once again) being the stupid simple one: nuke a bunch of menu items from the main nav. There where redundant links, entire categories with no traffic - there were legacy pages that were clearly from the old guard and heavily driven by... SEO! Gasp.

We were also in the midst of reworking our search which we'll touch on shortly. Utilizing this as a core part of navigating the app made sizing down the navigation even easier to make it at easy as possible for our users.

Search

Search and dashboard where what I wanted to tackle when I got to start this project. We had a lot of difficult things to tackle - which means we had a lot of opportunity to simplify a lot of complicated things.

What can we search?

First things first, what are we searching? How are people getting to where they want to go? Between search query analysis and user interviews we came to a very safe conclusion that school name was going to be the driving factor for almost all searches. This gave us our driving factor for what is being searched and for what results to show.

We also experimented with adding teams to the results, but it was just too much - some top level high schools might have 60+ Freshman, JV and Varsity teams. However, if you are logged in then favorite teams are available in your search.

Schools
Events
Favorite Teams

Different Results...

Deserve different treatment! With some of the complicated naming conventions and the inevitable repetition of some common names we needed to add identifiers to our results. We decided to lean on a familiar friend in the badge, carrying over it's functionality from the event cards.

Using Location

Location services are handy! They allow us to give us results with those in your area which can be super helpful - however, we default to your favorites first. Location and favorites are used to determine order of results (our examples show a common school name and what that might look like).

Large search results

Mobile search results in dark mode

Mobile search results in light mode

Our Cards

Like it or not you're gonna click 'em...

...because outside of directly searching for an event that's how you get to where you watch!

I won't go into super-detail mode on the cards because there's a whole portfolio item on them, but they contain a ton of information and are the main portal into viewing anything on the Network.

They're important.

View Case Study