User Interface Design and User Research

Designing the Streaming Gallery

Local Sports Network

Local Sports Network

Local Sports Network is a digital media company that seeks to revolutionize the way people watch youth sports. Based in Austin, Texas, the network sought out a way to provide a user-friendly platform that would allow the user to watch their local sports from the comfort of their own home. I was brought onto the team in September of 2022 as a User Experience Designer to assist the company in creating a platform that was aesthetically pleasing yet easy to navigate.

In this project I worked as the sole user experience designer and collaborated with our engineering team and head of design in order to bring this streaming gallery to life. I was in charge of creating the designs as well as conducting the research to validate my design decisions.

Duration:

4 Months

Role:

User Experience Designer

  • Visual Design

  • User Research

  • Prototyping

  • Usability Testing

Tools and Methods

For this project we used various user research methods such as user personas, empathy maps. In order to create these we utilized tools such as UserTesting to conduct surveys and user interviews with potential users. With the insights we gained and synthesized, I developed various prototypes and wireframes with Figma, testing each possibility using UserTesting to get us to our final design.

Defining the problem

With the help of User Testing I was able to gather insights from over 100 users using survey data. The survey mainly focused on trying to understand who our users were and what they were like. How they typically watched sports and which sports they were drawn to. Through the surveys and user interviews I was able to generate the following data:

There were a large percentage of people who watched local sports and a significant amount were parents. When asked how they felt about missing their children games several of them felt distraught but could only compensate through communicating with other parents who were able to attend. We knew had the ability to livestream these games but our job was to figure out how to get these livestreams from our database to the palm of their hands.

How might we display these games in a way that will entice users to watch?

The User Problem:

Parents and students often do not have the ability to attend local sports games due to schedule conflicts or look back on past games due lack of coverage. They do not have a way to tune into their local sports teams to show their support without having to attend in person or having to communicate with someone who can attend.

Developing the idea

This leads us to the third phase of the double diamond, which is development.

Through analyzing our data gathered from the various interviews and surveys we found that most users watch live sports through YouTube and networks such as AmazonPrime. When it comes to live streaming in general users typically were drawn to TwitchTV as their main platform to watch live videos. 

So my designs were fabricated with the idea to create a streaming gallery that took in the design aspects of TwitchTV, Youtube and Netflix. I figures these platform were successful due to the usability and intuitiveness of their designs. 

I curated sketches, presenting them to our team of engineers and product managers in order to narrow down possible designs. I worked to develop a brand new UI Library with over 100+ assets to achieve our design and created prototypes to showcase what these designs will look like to the user.

Testing The Usability of the design

After using Figma to create functional prototypes, I generated a series of questions and tasks to test the usability of my designs. I then gathered users to go through the prototypes.

The first task was to ask them to identify what their favorite team was. By asking this question this allowed me to gauge whether or not the icon used to signify ones “favorite team” was an icon that translated well to our users. 

I then asked the users to set up a notification for and upcoming game with the intent of them clicking a bell icon in order to do so. I wanted to find if that icon was appropriate for the function or if another icon might be better suited.

In addition to these tasks I asked for general feedback on colors and usability of the streaming gallery. With the results from the first rounds of testing and we developed an affinity map to help us identify common trends among our user feedback.

We found that a while the vast majority was able to identify their favorite team a significant amount of them had difficulty setting up a notification. However, it was not due to the icon but as a result of the placement of the call to action button and a lack of confirmation. 

Solutions & Iterations

Our solution was to create a tooltip notification that would slide into the frame when the user would click the bell icon. By doing this, the user would have confirmation that the have scheduled the remider and be notified that they will recieve an email as well.

In adition we made a few changes to the overall aesthetic to make the design a little more seamless.

Final Designs