MLBAM
NHL.tv TEAM HOME
Project: NHL.TV Team Home • 2017 • Role: UX Lead
The Challenge
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.
My Role
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.
User Persona
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…
Design Axioms
Our guiding principles for the app were to bring the team experience to the forefront but always prioritize video and get users into the content as quickly as possible.
Our KPI’s:
- Subscriptions renewed
- Streams started
- Minutes watched
Content Strategy
I met with my team to kick off the ideation process and discuss what content and data feeds might be available to use, keeping in mind the best design practices for television. We also wanted to start thinking of the experience beyond the bounds of the game itself to consider how the UI could reflect Pre and Post game conditions.
Comparative Analysis
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.
Immersive
- Cinematic
- Anticipatory design
- Efficient/Focussed
Dashboard
- Overview
- Glanceable
- Surface a variety
Mid-level Fidelity
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.
App Map
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.
Design Ideation
We took the time to do a design sprint for additional exploration.
In-line player
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.
Navigation
We updated the navigation across all of our connected device platforms anticipating that not all users would want Team home as their default experience. In fact, many users didn’t have a favorite team set in their preferences. I documented all the possible use cases to ensure users had control of their viewing experience and still had the ability to move fluidly throughout the app. By exposing the top nav, users could discover seasonal product initiatives such as the playoffs bracket, NHL Originals and the NHL Centennial experience. I developed the logic for screen states based on user’s preferences, seasonal context, blackout rules, etc.
We applied a top navigation to all connected device platforms. As the season evolves from regular season to playoffs, the nav updates dynamically to anticipate users’ needs.
Design Production
Representing the many states of a game, the hockey season, the availability of data or video streams, etc. was a complicated undertaking. In order to minimize the need for redundant mockups my team and I created boards like these, leveraging
Sketch’s embedded symbols functionality. Updates to any of the tiles would be propagated globally, and allowed us to quickly generate mockups for stakeholders and assets for engineering.
There was a huge amount of production design for this feature for all 31 teams.
User Research
I conducted usability testing with NHL.tv subscribers and fans to uncover any obstacles in the experience an to identify potential feedback that would improve user satisfaction.
Overall, while the test uncovered a few high-priority QA bugs, no major usability issues were found. There were a couple of discoverability issues due to weak visual affordances and some attitudinal recommendations related to how upcoming games were displayed. Fortunately, my product partner, watched my sessions and saw the user feedback first-hand. We decided to check the affordance issues against our user data before making any changes to the design.
Impact
The new team home designs launched for the 2017 season and we received positive feedback from our stakeholders within the league as well as anecdotally from NHL.tv fans via social media. The customization that we accounted for allowed users who wanted to keep the Scores screen as their default view, the flexibility to do so, staving off a common backlash typical in a major app re-design. NHL.tv product saw a 33% YOY growth in subscribers thanks to the marketing efforts leveraging the differentiated experience from traditional broadcast television.
