Duration
4 weeks
Focus
User Research
Market Analysis
User Interviews
User Testing
Deliverables
Wireframes
Prototype
UX Flow
UI Design
Feature Design
Industry
Sports streaming
Introduction
The Houston Rockets are an American professional basketball team based in Houston. Throughout its history, Houston has won two NBA championships and four Western Conference titles. It was established in 1967 as the San Diego Rockets, an expansion team originally based in San Diego.
The basketball team has a digital presence through website and mobile app.
Goals
-
Create an app where supporters can watch Houston Rockets' live streaming games when people can't attend in person in the arena.
-
Research digital streaming platforms that feature sports content and understand how they solve problems and what services they offer.
-
Interview sports fans and understand what channels they prefer to watch sports games and hear their experience throught these streamings.
How to provide a good experience with a live broadcast that meets sports supporters' needs?
Design Process
Step 1: Research
Competitive Analysis:
Research Questions:
What channels do sports supporters use to watch games?
What do they value in these channels?
Can they have access to the previous games?
Can they download games and watch them offline?
What are the features that people the like most?
User Interviews:
​Through a fluid call interview with four participants, I tried to capture their motivations that affect the way these users behave, focusing on their current problems or pain points, and ultimate goals. These were a few main points that interviewees expressed during the sessions:
Insights
Goals and Needs:
-
Watch the live broadcast games when supporters can not attend the games at the arena
-
Watch games from the phone or on TV
-
Avoid long lines at the arena and watch the games at home or with friends
-
Get informed about the team, follow the previous and upcoming games
-
See the team scores in real time
Pains and Frustrations:
-
Private sports channels are a bit expensive
-
Sports apps only show quick replays of the previous games
-
Some people would like to follow their sports games in only one single place to watch
Step 2: Define
Users Personas:
With the interviews, I could abstract experiences from participants, and what they value and enjoy the most in streaming channels.
Sitemap
The next step will be defining the pages and information and the structure and features that the app will present.
Task Flow
In Task Flow, we show the high-level steps that a user would take to watch a live broadcasting game on the app.
.png)
User Flow
In User Flow, we have a path that the user took to conclude a task, which was watching a live broadcasting game exploring other existing features in order to bring further possible options to the app.
Step 3: Ideate and Prototype
Mid Fidelity Wireframes
I had a good understanding of how users would navigate through the app and what features to include in the wireframe. Through the pages, I could organize the multiple flows that users would take to complete specific tasks.
.png)
UI Design
As Houston Rockets is an existing brand, I decided to keep its logo but created additional items that would be essential for my design system.
Hight-Fidelity Wireframes
Loading / Pull to refresh
Sports supporters can now watch Houston Rockets' live broadcasts and replays, download videos to watch any time of the day, and follow the team scores and upcoming games.
Step 4: User Testing and Iterations
Affinity Map:
During the user testing, I could observe how participants concluded tasks through the app and heard from them their feedback which includes what they liked the most and what could be improved.
.png)
Iterations:
With the user's feedback and ideas, I could move to the next step and bring their ideas in order to improve the app.
The background was changed to give more contrast to the other elements on the page.
The "Watch now" button was removed to avoid long scrolls and users can start the live broadcast by tapping the image.
Users can share live broadcasts and replays, and download videos to watch offline.
The color of the button selected was changed to bring more contrast.
Conclusions
-
This project was a challenge for me, especially because I never worked with the sports industry before but it made me learn a lot and do lots of research about the field.
-
Creating Houston Rockets helped the audience to connect to the team and follow the games firsthand.
-
The download feature gave the opportunity to people who struggle with internet connectivity to watch games.