Project: NHL.TV Team Home • 2017 • Role: UX Lead
Following the launch of our redesign in October 2016 we started work on a new feature — a team-centric- experience.
Talking with users, we understood that many across NHL and MLB considered our apps as single purpose tools to stream the live game. But we also have content that they view elsewhere, namely highlights.
Our challenge was to provide a new landing experience that aligns with way many users interact with NHL.tv pivoting from a league-centric experience to a team-centric experience.
I served as a UX Lead on this project, responsible for the overall user experience, partnering with product to explore ideas and tightly integrated with engineering for asset delivery. My role included UX, UI, Creative Direction and user research. I worked in collaboration with a visual Design Lead to deliver the final designs to our Front-End developers.
NY Rangers Home on NHL.tv.
Our feedback from customers and our behavioral data validated the need for the team home approach as a majority of our views are fans of individual teams more than fans of NHL or even fans of individual players.
Our primary persona who we called “Loyal Larry” is a life-long, out-of-market home-town fan. For example they might be a Boston Bruins fan living in California. They may watch other games, but their purpose for subscribing to NHL.tv is watching the Bruins.
“ I’m pretty sure my family would disown me if I rooted for someone else.”
- Lifelong sports fan of hometown teams. Attends games.
- Sports are primary entertainment all year round.
- Follows all aspects of sports including players, team narratives, trades, personal lives.
- Needs: Reason to watch when their favorite is out.
- Needs: Easy way to find big moments/catch up.
Going a little bit deeper and looking into the psychology of the sports fans, there is a sense of well-being when when people feel connected to others. One way we establish relatedness it is through symbolic affiliations with others. That’s what being a fan is…
When designing the page, there were no specific requirements from Product Management around how the experience would be organized. Other than an emphasis on a single team and serving up more video, we had an opportunity to explore. To help navigate the ambiguity, I suggested two divergent conceptual approaches.
- Anticipatory design
- Surface a variety
Then we took some time to iterate get the grid in shape, play around with with priority of content and weight of each element, figure out how the team page fit into the overall IA structure. We had design crits with our sports design colleagues and ultimately converged on the dashboard approach.
Adding the team home experience changed the IA and the first-launch flow. Users had a choice of the Scores screen or the Team screen to be the app landing page. In order to see the Team home by default, users needed to set a “Favorite” team which could be inherited from their NHL account. The was complicated because of earlier product decisions that allowed users to choose multiple “Favorites” as well as teams to “Follow” I debated with the PM over this logic, but ultimately the user data showed that fans understood these categories and wanted the flexibility to have multiple favorite teams.
Visual Design Exploration
In our visual design explorations we wanted to evoke the energy of the game and the arena while giving a nod to the broadcast design graphics. We wanted to create some alignment with the NHL design aesthetic without the heaviness of traditional on-screen graphics.
Our visual designer met with the Broadcast team to get some design inspiration and we did incorporate some visual references in our UI.
We took the time to do a design sprint for additional exploration.
One of the features that emerged from our exploration was the in-line player in the team home dashboard. We wanted to give the app a broadcast sensibility and anticipate what the customer would want to see when the app launches. The live look in enables the user to see exactly what’s happening in the game while also checking the context of how their team is doing in their conference.
Users can immediately launch into full screen. This innovation would later be utilized in other sports apps the team was working on.
If a favorite team is currently playing we load it into the featured tile automatically
The audio mutes if the user rolls off the module while the video continues.