FanChat

Project Overview

FanChat is a service that allows you to watch live sports games from any of the major sports leagues and interact with fellow fans at the same time. This project was created for General Assembly’s User Experience course.

The Problem

Watching sports can be frustrating if you don’t have the channels to watch a certain game or you don’t want to/can’t pay for a package (NBA League Pass, NFL Game Pass, etc.). How can I improve the experience of streaming sports games so that games are accessible for everyone?

My Role

This was an individual project. I handled all research, interviews, designs, and final deliverables.

Timetable

The conceptualization of this project to handing in final deliverables took 8 weeks.

User Research

I focused my initial interviews on people who I know watch sports, ranging from casual fans to the more dedicated ones. I compiled all the replies and sorted them into six categories:

One of the pain points I was able to identify was the the reason people turn to streaming games: paying for a sports package on TV or a league app (e.g. NBA League Pass) does not justify the purchase with the amount of times it will be used. Why pay a premium when you can watch games, albeit at a lower quality, for free? That posed another problem. What can I offer that a free stream won't?

Persona

Problem Statement

Sullivan needs a way to interact with fellow fans because he streams games on NBA League Pass when he travels abroad for work.

I created a persona with the pain points from my interviews in mind. Sullivan's problem with NBA League Pass is that he only uses it a few times a year. He feels the price point is not justified. He is also unable to interact with fans while he uses the app.

Competitive Analysis

I looked at all the streaming apps that each major sports league offer, as well as SlingTV. As expected, there is truly nothing like FanChat on the market. Only SlingTV offers the option to watch games for every league. But, there are restrictions to games. If a game is being aired on a local network in your area, you are unable to watch the game on any of the apps. I chose not to include replays because FanChat is a service meant to stream live games and to be used when a game is on. Why would users want to pay for the ability to watch replays when there are free alternatives to it? No other service offers chatting or video chatting.

Feature Priority

The MVP is to watch games live. At the core, FanChat is a streaming service to watch games live. I also included what the competition does not: a social aspect. The ability to interact with friends, as well as strangers, is what will set this apart from everything else.

The Design Process

As I started to sketch and build early wireframes, I made the mistake of only drawing up what I wanted the user to see, not what an actual user would see. I got straight to how I wanted the homepage to look, how live games would be displayed, and the payment process. I designed thinking that the user was already familiar with the product and what they would see once they were already logged in. A question that was asked to me during this phase was, "What would a new user see?" I hadn't thought about the onboarding process nor really fleshed out my idea past the home screen.

Sketches

The three primary elements I wanted to be shown on the homepage were live game thumbnails, friends list, and a navigation to switch between sports. I sketched out how it might look with a fixed top navigation and/or a fixed side navigation.

Early Wireframes

One problem that kept plaguing me was the credits system to watch games. I got the idea from looking at services like FanDuel and DraftKings. I thought it would help users by allowing them to pay whenever they wanted to watch a game and not be charged when they don't. However, I had to dedicate real estate for it which began to clutter the navigation bars. I also did not get to interview people whether they would even want to keep depositing money when they wanted to watch games. With that realization, I started interviewing people about this system. One answer stood out to me which made me rethink how I was approaching this.

"I would rather pay a monthly subscription to Spotify rather than keep buying individual songs on iTunes."

I realized I was too fixated on a system used by daily fantasy sports. It makes sense for them since users compete for cash prizes. There is no incentive to keep depositing money for credits with FanChat other than to watch games. I had been looking at the wrong market. Streaming services like NetFlix and Hulu were more similar to what I am trying to offer. They all use a subscription service. With that in mind, I decided to scrap the credits system in favor of a monthly subscription. That also forced me to think of onboarding. Users aren't likely to commit to a monthly subscription without knowing what they are paying for. Because the credits system didn't require you to pay until you wanted to watch a game, I didn't think about explaining what the service was. Instead, I wanted them to play around with the site and figure out if they wanted to pay money or not.

User Flow

I wanted to highlight the onboarding process to show what a new user would see and how they would sign up for a free trial. From there, the main actions that a user will interact with are friends, browse, profile, and live game.

Mockups

The final mockups expanded in a completely different direction from the early wireframes. Certain aspects were kept like the square portraits for the friends list and a grid to display live games. I had to learn and adapt from early issues with how the friends list would be displayed and how the chat/video chat function would look and work.