NHL Concept
Prompt
The NHL seeks to enhance the fan experience by creating an innovative viewing application. Your task is to develop a concept that allows NHL fans watching games on TV to feel as if they are truly part of the action.
The Problem
Due to the cost of NHL games most fans can only attend a few games a year. Dedicated fans don't want to miss out on the sights, sounds, and feelings that only a live game can provide.
Research
My team dove into domain research to learn more about the NHL and gain a better understanding of our target audience. We relied heavily on a study conducted in 2015 that showed consumer consumption data of sports here in the United States. The study gave us validation concerning the timing of the project and the need to build a more immersive experience for the sports enthusiast. From the study we found:
In addition to these segments we read that 73% of all sports fans had suggested POV footage as a solution to getting closer to live games. Our team started to look for companies currently pioneering POV technology in the US and discovered Fox Sports Go, at the moment, was the only one. POV footage in the US is primarily used for team training purposes. Large broadcast companies were interested in VR technology and saw that as the solution to get fans into the action. My team was not sold on VR for the NHL and proceeded to collect more data.
While my team continued with domain research I started to put together a C&C analysis and included the Red Bull application, even though it's not a national broadcaster of team sports.
During our research, we discovered that Red Bull was the sole company consistently utilizing point-of-view (POV) technology in the United States. Notably, the Red Bull app had recently been awarded the Google Play award for Best TV Experience, showcasing impressive POV and 360-degree videos. This finding led us to consider that focusing on POV, rather than virtual reality (VR), might be the right direction for our project. However, we recognized the importance of consulting our user base to gather their insights and preferences before finalizing our approach.
Defining Our User
To get a better feel for what fans really wanted, we started by reaching out to hockey fans we knew and connecting with people on hockey forums. But then we thought, why not widen our net? So, we decided to chat with anyone who watches live sports.
We ended up interviewing eight potential users to gather their thoughts. After that, we organized all the info using an affinity diagram to spot any patterns. What stood out was a clear trend: most users were really into the idea of using POV cameras to improve their experience at home.
To organize feelings of our users we created an empathy map. We used the empathy map data as a reference when debating which way we were going to go, POV or VR. Since research survey data, and fan interviews had revealed a familiarity with POV technology we voted to build a POV experience.
We had started to discuss ideas when I asked, "Has anyone been to an NHL game?" I felt the only data we lacked involved our own knowledge of the live experience. We realized none of us had ever gone to an NHL game so we quickly planned a contextual inquiry.
During breaks we asked people sitting next to us about their experience and what aspects of the game they enjoyed. We also talked about how to improve the experience for the fans sitting far away from the ice. Fans wanted better replays. This was repeated over and over. Other fans talked about the cost of games. One person said, "it's hard to make it to games since it adds up.. but that adds to the 'hype' of being here." When fan's can't afford to go to games they prefer to go to sports bars as the next best option for the atmosphere.
Now that we had gathered qualitative and quantitative data and synthesized our findings from our interviews, we created a user persona. Patrick Lemieux is a 22 single male, living in Vancouver, Canada. Patrick works as a freelance videographer. He grew up surrounded by sports because of family, and he is passionate about ice hockey and likes to record on his GoPro when he’s playing.
Patrick's problem is that he is unable to feel the same immersive stadium experience when watching a hockey game at home. We used Patrick to build a story for our journey map. We focused Patricks journey on users fears of FOMO and the inability to have better camera angles to review close calls when watching a game at home.
Design Ideation
Moving on from our user journey we began to focus on the app experience. Since the app is anew concept we created a feature prioritization matrix to get an idea of the MVP feature set.
We concluded that high expense features such as the player POV cameras, switching player perspectives, and livestream must be added to the app because they were key solutions for solving our users problems. I was outvoted in this section when trying to add social features and direct messaging so our users could send funny memes and drawings of instant replays to each other. I saw interaction as the key to making this immersive experience come alive. We continued on with a review of the weeks goals and drew out a high level user flow before jumping into sketches.
Wireframes
I suggested we use the a rapid sketching exercise called 6-8-5 to come up with quick ideas for the home page. After completing a few time boxed design cycles we had come up with a tile layout. We discussed the pros and cons of creating an app that visually varied from the current NHL app. Since our data showed us that 100% of avid fans used the NHL app we chose to stick with a similar layout to cut down on cognitive load.
Our team spent the day iterating and testing our designs until we had developed a user friendly flow 80% of users could make it through. We had asked users to:
- Login to see a list of games to choose from.
- Select a game and cast the live stream onto a TV.
- Click out of the video and toggle between the points of view available.
Mid-Fidelity Ideation
We updated small problems from our low fidelity design including some wording of buttons and then rushed to produce the middle fidelity wireframes. We still needed to complete user tests for the mid fidelity designs, and pick a high fidelity prototyping tool that I would use to make our designs interactive.
Once my teammate finalized the mid-fidelity design, we promptly put it to the test. Users were asked to select a game, connect via Airplay to cast it to a TV, and switch to the player's point of view. The results were promising, with a 90% success rate for casting games to a TV and an 80% success rate for switching POVs. However, we identified a significant issue with navigation.
Many users struggled to understand the functionality of the “Record” button, and the “Scores” button did not resonate with those looking for a home button. Given our timeline, I had already begun working on high-fidelity navigation but decided to pause my efforts while my teammates crafted a second version. This would allow us to A/B test two different options with users.
In my design (shown left), I retained the original terminology from the mid-fidelity wireframes, with the exception of the “Scores” button, which I renamed “Home.” To enhance usability, I incorporated icons to help clarify the options. Meanwhile, my team opted for a more minimal approach, providing users with just three options.
Feedback for My Design (left)
- Users liked the idea of sharing videos but the record button was now similar to snapchat.
- "Live" icon was confusing since there was also a "NHL.TV" in the top navigation.
- One user asked if they were on the home screen and pressed "Live" where would they go?
Feedback for my teams design (center)
- Stress free, but not enough navigation choices.
- Users didn't want to always have to use the "More" button.
The team got back together and made changes to the navigation language. We reviewed user test notes and saw users really wanted a navigation button for highlights.
The new design, presented on the far right, had a 100% navigational success rate. Since the app was focused on showing game, Games over home made the most sense to users. No user we tested was surprised or had issues with what they saw when selecting a navigation option.
High-Fidelity Designs / Demo Video
I updated the app's design with the new navigation and added the current NHL colors to stay in line with the brand. My team wanted to impress our audience at our presentation, so I took the design into Flinto and put in movies to show everyone how the app would work if it were live. You can view the InVision prototype by clicking here
Below is the video demo of our application showing the find game, cast to TV, and switch player point of view flows.