HockeyTV
Live Video Streaming
Case Study
Product Description
The world-leading source to watch live hockey games. This product streams over 20,000 professional and amateur games annually.
My Role
Sole Product Designer, concept-to-delivery.
My Responsibilities
– Discovery & requirements gathering
– Research, conducting interviews
– User Mapping
– Interactive Prototyping
– Usability Testing & validation
– Design system creation
– Logo & branding creation
– Research, conducting interviews
– User Mapping
– Interactive Prototyping
– Usability Testing & validation
– Design system creation
– Logo & branding creation
Design Process
In order to utilize a solution-based approach to my problem, I looked to Double Diamond Design methodology. This approach, created by the British Design Council, helps dissect complex problems with unknown variables, by intrinsically understanding the users based needs.
By strategically applying each of these stages of the design model, I was able to re-frame my problem with a user-centric focus.
By strategically applying each of these stages of the design model, I was able to re-frame my problem with a user-centric focus.
Problem
Users were struggling to find the content they wanted to watch. We broadcast thousands of hockey games, sometimes hundreds on the same day. The broadcast schedule can get complex and hard to navigate. The first version of the product is only desktop compatible with no images or UX input. On top of the redesign, the business is also switching from a token based payment model to a subscription based. The current layout doesn’t support the new payment process.
Goal
How might we design a fully responsive experience that is user focused and includes a process for the new payment subscription flow?
The KPI is to increase customer satisfaction through new features and drive increased revenue through recurring subscriptions.
The KPI is to increase customer satisfaction through new features and drive increased revenue through recurring subscriptions.
1. Empathize
Understand the users and the issue rather than merely assuming it.
Preliminary Research: Focus Groups
In the empathize stage, I conducted initial focus groups to understand what my users wanted from the video streaming platform, and why. I talked with the two primary users, parents and scouts, to find their individual painpoints and needs. From these findings I could also compare the overlap of both groups. In these sessions I used open-ended questions to elicit stories about specific experiences that helped uncover unacknowledged needs and form organic group discussion.
Methodology
Focus Groups
Participants
2 Groups / 6 Users Each
Duration
1 Hour Each
Target Insight Questions
– How many games per month do you watch?
– How many leagues do you follow?
– How teams do you follow?
– What is your main reason for using HockeyTV?
– What video features do you use the most?
– If you could change anything about HockeyTV what would it be?
– What is your favorite thing about HockeyTV?
– How would you feel if HockeyTV switched to a subscription based service?
– How much would you spend per month watching games?
– Are there any features that you would like to see be added to HockeyTV?
– How many leagues do you follow?
– How teams do you follow?
– What is your main reason for using HockeyTV?
– What video features do you use the most?
– If you could change anything about HockeyTV what would it be?
– What is your favorite thing about HockeyTV?
– How would you feel if HockeyTV switched to a subscription based service?
– How much would you spend per month watching games?
– Are there any features that you would like to see be added to HockeyTV?
Key Findings
– Users typically only watch 1 team / league
– Users want video editing capabilities
– User want highlight clips
– Streaming issues are the biggest painpoint
– User noted it is hard to find games
– Subscriptions are favorable
– Users want video editing capabilities
– User want highlight clips
– Streaming issues are the biggest painpoint
– User noted it is hard to find games
– Subscriptions are favorable
2. Define
Filtering through all the information gathered from stage one and elaborating on it.
Synthesizing the data from the interviews and data analysis, I was able to form behavioral user personas and identify pain points. This allowed me to write definitive problem and hypothesis statements for my users.
User Persona (Primary)
The primary user persona I put together is based on the majority of HockeyTV users, the parents of junior hockey players who live with billet families in different states where their team is located.
User Persona (Secondary)
The secondary persona is focused on the power users of the product, hockey scouts. A wide network of scouts use HockeyTV to track players and find new talent. This group has a unique set of needs and painpoints that differ from the primary group.
3. Ideate
Starting design work, exploring solutions to the problem identified.
Wireframing - Mobile First
Once I had a solid solution sketched out I started creating digital wireframes from a mobile first perspective. This activity helped me form the structure and flow of the product while also prioritizing high-level features on each page.
Wireframing - Mobile to Desktop
Some of the constraint points discovered when mobile wireframing were:
– League logos
– Search bar
– Navigation
– Team Logos & Text
The extra space with a desktop layout allowed for extra images and features to be displayed without drastically changing the look and feel compared to mobile.
– League logos
– Search bar
– Navigation
– Team Logos & Text
The extra space with a desktop layout allowed for extra images and features to be displayed without drastically changing the look and feel compared to mobile.
4. Deliver
Finalizing the design, testing solutions, rejecting those that will not work and improving those that will.
Design System Creation
When designing this product I was tasked with creating product logos, branding elements and a basic design system to build off of in the future.
White Label Flexibility
During product development a business decision was made to license this product as white label to some clients. This required me to go back and examine which areas to apply branding colors to and make sure the product was flexible enough to swap brands in and out.
Accessibility Compliance Testing
I preformed color and font test checks to insure Web Content Accessibility Guidelines (WCAG) 2.1 were met for the above design kit.
High-Fidelity Prototype
Once the design system was in place I move on to designing a high-fidelity prototype for every page / process flow that was previously worked out in the wireframing activities. This brought me as close as possible to a finalized version of the product so I could gather stakeholder feedback and conduct usability testing before documentation and sending off to our developer.
Finalized MVP Prototype
Here is a sample of the finished product before being handed off to development. This video show the process flow of selecting a hockey game from the schedule page and opening the video player.
5. Reflect
Other Work
Brand Guidelines + Logo
Along with creating the HockeyTV product logo, I also created the first company branding guidelines.
Marketing Graphics
Various event promotion graphics that I created for marketing campaigns. These were used in email marketing effort, social media posts and on-site printed programs.
Broadcast Overlay Graphics
I designed several on-screen graphic overlays that would appear during live broadcasts. These included scoreboards, lineups, advertisements, intermission reports and more. This also required several logo sets amounting to thousands of unique logos.
