My Role

Concept Development
UX/UI Design
Ideation
Research

Design Exercise

Seven day Design Challenge to an existing mobile application. Identified pain points, and proposed solutions for up to two core flows.

Social Experience with ESPN

Expanding the ESPN Sports app with the addition of a social feature to watch sports entertainment to encourage more users logging in to the application. 

 

With live sports on an indefinite halt due to the COVID-19 pandemic, sport lovers around the world are missing the social connection of watching sports with their friends. 

Problem/Pain Points

Approach

Design a new social feature on the ESPN app allowing users to watch sports entertainment virtually with others while staying safe and being engaged with their friends and family. With this additional feature, users have the ability to group message and video call their friends while watching the game as though they are sitting right next to one another. 

Focus One

Invite Your Friends

Users are able to add friends onto their account to join chatrooms so they can co-watch sports entertainment among friends. 

Focus Two

Create A Watch Party

Create a watch party by choosing a channel to watch and the friends you want to watch it with. This is a customizable watching experience and if you want to add more friends to join, it's easy!

Focus Three

Watch ESPN separately, together.

To keep that sense of community alive within ESPN, users can video call each other allowing people to watch the game together at the same time despite being at different locations. Bringing the “hanging out” experience is extremely important especially during the pandemic. 

Why ESPN?

1. Due to COVID-19, ESPN will have a ratings decline of as much as 80% due to the pandemic and earn $250 million less this year than projected.

2. Users are no longer looking forward to getting together on the weekends to watch sports. There is a loss of social connection and the sporting community. 

3. Not all is lost, with the rise of the documentary “The Last Dance”, and UFC fights coming back without a crowd, there is still entertainment on ESPN. The only thing missing is the social gathering. 

With this in mind I thought, how can I increase user engagement within the ESPN application by adding a social gathering experience due to COVID-19?

Process

1. Research

2. Design

3. Evaluate

Questionnaire 
Interviews/Usability Testing
Storyboard
Personas
Competitive Analysis

Design Ideation
2x Core User Flows
Sketches
Mid-Fi Wireframes/Feedback
Final Design

Takeaways
Future Steps

01

Research

Due to a short amount of time, my research focused on five key areas: Questionnaire, Interviews/Usability Testing, Storyboarding, Competitive Analysis, and Personas. 

I wanted to understand the competitive market and narrow down to sport fanatic users, who would use this feature regularly. The age bracket was between early 20s to mid 50s. 
 

The Current Experience

The current experience of the ESPN app is mainly used to watch thousands of live events and shows from the ESPN networks. Additional features include viewing scores, news, highlights and expert analysis. There is also an additional option of subscribe to ESPN +  to stream live sports, exclusive originals, premium articles, fantasy tools and more. 

However there is currently no additional social feature for users to be able to connect with one 
another or group setting to watch games simultaneously. 

Questionnaire

I conducted a survey with eight questions to quickly quantify the characteristics of ESPN users to gather in a virtual social experience and interact with one another while watching sports entertainment. 

90%
70%
88%

Of People said they watch live sports.

Of people said they don’t currently call/video friends & family while watching the sports/sport related shows. 

Of People said they would use the ESPN app if you could watch games with others virtually. 

Interviews

I thought it was important to understand my users deeper by asking more meaningful questions to do with the user experience of watching games together while in quarantine and in multiple different locations. I interviewed 5 avid sport fans who are current ESPN+ subscribers using the application. With this test, I chose to do it on “The Last Dance” documentary of Michael Jordan as they were all currently invested in the series. The objective was to discover if there was any overlap responses and where I could potentially solve some underlying issues within the user experience. Through the interviews, the focus was on the primary goal of being able to communicate. I wanted to understand the pain points during this experiment and the general dynamic between the users. 

  • Users said it was difficult to talk to each other as the background noises were not in-sync with one another. 

  • Some users were viewing the documentary 2 seconds earlier than the others so there were delayed responses. 

  • The timing was completely off and the background noise were deemed distracting. 

  • Users were having to switch between two separate applications at once to view each others faces and also watch the game on their phone at the same time. 

Storyboard

To break this down further I did a story board of their experience. Based on a true event. 

01

02

03

04

05

06

Personas

Isabel Soriana, 29

“I hate flicking between different apps so to watch something on my phone and talk to my friends at the same time.”

Pain Points:

Using two different apps on the phone. 
Can’t see friends and ESPN program at the same time. 

Goals:

To watch ESPN whilst being on the phone and seeing my friends at the same time. 

Chris Brothers, 22

“I can’t watch ESPN with my friends. We usually all hang out together during this time for NBA finals. ”

Pain Points:

Misses spending time with his friends.
Misses watching live sports.
Misses the social connection.

Goals:

To be able to connect with friends and enjoy sporting events with them. 

Thomas Liamani, 36

“I’m away from my family when I try to watch sports with them, I always hear their TV in the background delayed 3 seconds later than mine during FaceTime.”

Pain Points:

Delayed responses.
Too much background noise. 

Goals:

To be able to spend time with my family while enjoying tv without delays or background noise.  

Competitive Analysis

After focusing my research on sport fanatic users, I conducted an audit on competitors with similar features having sports and social interaction. The two audits I focused on that had these features was Bleacher Report and CBS Sports. 

Both of these applications were missing that “Watch” Social Feature for the fans that want to watch games together, separately. 

PROS

  • Social Feature

  • News & Scores

  • Comment, Like, Share

  • Saving Favorite Teams

  • Messaging 

CONS

  • No Broadcasting

  • No Watch Feature

  • No Video Feature

Bleacher Report
My Main Findings
  • Struggle of social connection due to COVID-19.

  • Not having the ability to watch sports entertainment with friends due to social distancing. 

  • Unable to watch ESPN with friends and family remotely due to background noises during calls, delayed responses and inadequate timing. 

  • Lack of shared sport watching experience.

02

CBS Sports

PROS

  • Watch Feature

  • News & Scores

  • Saving Favorite Teams

  • Broadcasting

CONS

  • No Social Feature

  • No Live Messaging

  • No Live Calling

Design

After the research, I understood what design aspects I wanted to narrow down on. 

I chose to focus on two key design goals

Connect people with one another despite the social distancing due to COVID-19.

 

Provide a helpful and convenient social “hanging out” experience along with sports entertainment  for users to socialize. 

Based on my design goals, I wanted to focal point the design principles:

Engaging: How pleasant, satisfying or interesting the ESPN social feature is to use. 

Efficient: The speed and accuracy with which users can socialize with their friends/family while watching a channel. 

User Flow #1

Connect people with one another despite the social distancing due to COVID-19.

ESPN currently has no form of a social feature, so I had to create a completely new experiences in order to successfully connect the users. I wanted to create a system where it was easy to create a watch party for you and your friends as well as join a watch party that is already existing. 

  • To join a watch party I wanted to make the system quick and easy from both users. 

  • To create a watch party I wanted there to be straight forward steps for the experience to be as efficient as possible. 

User Flow #2

Provide a helpful and convenient social “hanging out” experience along with sports entertainment  for users to socialize. 

This user flow is particularly important because there are missing social connections with friends, family and others which affect the well-being of the user. For many people, young adults in particular, communication online is already a huge factor in their social life.

  • I wanted users to message and video chat with one another to make sure the sports entertainment being watched wasn’t obstructed.

  • I also wanted a simplified flow where users can easily communicate while watching the game. 

Wireframes/Usability Feedback

At Home, Users would click on the new group button on the top left and it will redirect them to a page where you can see your friends, Add friends, join a watch party and create a watch party. 

Based on user feedback, for first time users it was hard to understand what “Create” and “Join” mean without any context. There needed to be clear buttons to indicate what each section meant. 

After clicking “ create” users will then choose a channel to watch. They will be taken to a “Start a Watch Party on the court” page where they can either share a code for first time users, or add friends for existing users. 

Users will be able to invite their friends and be taken to the watch page, where they can watch the channel that they have chosen with their selected friends. 

On the Group page, the user will be able to add friends or join a watch party. Through adding a friend, they will have the option to add them through contacts, Facebook or phone number.  

When Choosing to join a watch party, the user will have to request to join that party that was created by a different user. Once you have requested it, the user will have a pop-down notification, letting them know the request has been sent. 

From user feedback, I discovered that people want to know what parties are already going on with their existing friends, this would limit the amount of time it would take to ask your friends what game they are currently watching.

From the request-receiving perspective, the opposite user will be notified of the party request. They may either accept or decline this request. 

Once the opposite user accepts this request, another notification will be sent to the original user letting them know that they have been accepted into the watch party. 

There is also another way you can choose to watch a game/show on ESPN with your friends, with the current ESPN “Watch” Feature. Just like the original app, you would be able to select a show to watch of your liking. 

Users found the original “Dark mode” of the watch feature confusing as the rest of the app was light mode. I intentionally changed this in the wireframes to get user feedback and compare the original design to the new design. Users found they liked this version better. 

The original design had “More Live Events” underneath a show that was playing. I added the “Start Watch Party” tab, as I thought this would entice users to click on it so they would be able to watch the game with their friends.  

Once you’ve invited your friends to the Watch Party you will be taken to the page with the game/show. You will be able to message your friends and it will also indicate if they are in the party with you. 

Users can also watch the game and video call one another at the same time for that social communication experience. 

Sketches

I wanted to explore visually how I could implement the features into the current design of the app. Looking at the user flow information architecture, I knew that each of them would go hand in hand with one another. 

New Social Feature

Introducing the new social feature on ESPN where you can view your friends, join and create watch parties and socialize with your friends while you watch the game!

Request to Join an 
Existing Watch Party

Users have the ability to either enter an invite code or they can request to join their friends to watch the game together. 

Your Friends Are Notified And Can Let You in the Party

Once the user has requested to be let in the party, their friends can accept the request and will be able to join in on the fun. 

Create A Watch Party

For users to watch the game with their friends, they must create a watch party, choose a channel to watch (game/show) and then select the friends they want to watch it with. 

Message and Video Chat with Your Friends

You can message and call while watching ESPN and if you forgot to add somebody, don’t worry! You can add more people to the chat. Enjoy the game while socializing with your friends!

03

Evaluate

Key Takeaways

With adding a new feature to an existing application I found it was important to make effective design decisions that go hand in hand with the original purpose of the application. I challenged myself to think deeply about how the new feature would potentially change the existing flows and interactions on the app. For example, I needed to make room for the “Create Watch Party” social feature without interfering with the existing user experience (More Live Events). I tried not to disrupt key features that users are used to using on the app for the additional feature to be a resource rather than burden. 

While I was doing this project in a short amount of time, I found it extremely useful to look at existing products that had similar key aspects and find inspiration. I was also able to gather more research than anticipated, which was extremely helpful when it came to the design. 

Future Steps

I will definitely be revisiting the design. I changed my first idea after two days, and had to re-evaluate what was more important to the user. This cut my time down a bit, and I would love to go back and test out my design further. This project was focused more on the User Experience due to a short amount of time. In the future I plan to make improvements to the visuals. 

I would also like to do another storyboard to see what the social feature experience would look like in real time. Whether I would need a lot of adjustment, and if I am missing something important. 

There is more to add and a lot of potential within the social feature. Perhaps an addition where athletes can reach out to fans.