Mobile App

- UX / UI Design, UX Research, Interactive Prototyping

Interactive E-Sports 

Broadcasting Service 

Project Overview

In 2018, the value of the e-sports market surpasses one trillion US dollars and it is growing rapidly every year. Numerous new game leagues are being created, and broadcasting platforms such as Twitch, YouTube are gaining in popularity.

 

However, due to the one-way and limited information dissemination of current e-sports broadcasts, users have difficulties in acquiring proper information about matches being broadcasted. Additionally, chat rooms are losing their function due to abusive words and fights among users. What's more, excessively professional broadcasts are creating high entry barriers for users who are not familiar with games being broadcasted, making users losing their interests.

As a solution for these issues, we designed Interactive e-sports broadcasting service - FLICK which provides real-time and selectable information during live broadcasts, creates enjoyable communication channels, and serves as a tutor for users' gaming skills.

Team

Hayden(Hyun) Park

Jung Been Lee

Project Duration

Nov 2018 - Feb 2019

Role - UX / UI Designer, UX Researcher

Mainly contributed to design ideation, UX / UI design,

interactive prototyping, and video production, helped UX research. 

Tool

Sketch, Figma, Framer, Protopie

Design Challenge

" How might we improve the experience of

e-sports broadcasting viewers? "

Interactive E-Sports Broadcasting Service Flick

I made it from scratch with After Effect & Element 3D

1.

Research

• Market Research

• Observational Study

• Surveys

• User Interviews

• Pain points

• User Persona


 

2.

Design

Ideation

• Brainstorming & Ideation

• Idea Synthesis

• Solution


 

3.

Design

Prototype

• Information Architecture

• Low-Fidelity Wireframes

  - Iteration

• Mid-Fidelity Wireframes

• Usability Testing 

  - Iteration

• Brand Identity Design


 

4.

Final

Design

• Hi-Fidelity Prototype 

• Hi-Fidelity Interaction Design

• Broadcast

• Community

• Tutoring

• On-Air

    - Over Watch

    - League of Legend

고화질_바탕투명_흰색.png

1. Research: Understanding Users & Context

We conducted multiple research methodologies to better understand how people use e-sports broadcasting services currently and what are their pain points. At the beginning of the project, we conducted e-sports market research to get a general understanding of e-sports broadcasting services. After that, we performed Contextual inquiry and Observation to not only understand how e-sports viewers use the broadcasting services but also to observe how they behave during each moment of the match - before, during, after the match. In addition, we wanted to be informed of our survey questions and direction for further research steps. We then conducted user surveys to understand more about the demographics of viewers as well as quantify their watching patterns. To get more in-depth qualitative data and figure out e-sports viewers' pain points and needs, we conducted user interviews as the last research activity. 

1/3

E-Sports Market Research

1/3

Surveys

Contextual Inquiry / Observation

Semi-structured Interviews

Grouping research notes into affinities

Key Pain Points in using e-sports broadcasting services

By grouping the research results, we were able to spot notable pain points that users have in current e-sports broadcasting services.

1

One-way and limited information delivery

One-sided information transmission and passive observing system of current e-sports broadcastings hinder viewers from acquiring proper information that they want to know from e-sports matches.

4

Lack of communication channels with pro-gamers

Viewers have no proper ways to communicate with teams and pro-gamers they are cheer for.

2

High entry barrier for beginner level viewers

Highly professional e-sports broadcastings creates entry barriers for viewers who are not familiar with e-sports games.

5

No consideration for different purpose of watching

Viewers have different purposes of watching e-sports broadcasts depending on their proficiency with games but current services have no consideration on that.

3

Excessive conflicts and curse words in chat room

Currently, all fandoms are mixed in the same chat room. This causes conflicts among fans of different teams and countless use of abusive words.

Who are our target users?

From the research findings and pain points, we found that there are 3 types of e-sports viewers who have different contexts and needs depending on their proficiency with e-sports games. Based on this finding, we divided the level of proficiency into 3 steps: Novice, Intermediate, Master. And then we created the personas of our target users for each step. 3 different personas show the changing needs of users as they become more familiar or skillful with e-sports games. Personas helped us put the research findings into context to better understand our target user. 

After conducting qualitative research - contextual inquiry, semi-structured interviews, we performed affinity mapping exercises to group the research insights and spot key pain points that users have in the current broadcastings. 

2. Design Ideation: Exploring Design Ideas

To draw design opportunities that could handle problems of e-sports broadcasts, we conduct keyword affinity mapping ​​based on the previous research steps. We started with brainstorming keywords based on the quotes/insights from contextual inquiries and user interviews, and grouped the generated keywords into 4 categories: Persona, Object, Emotion, and Service.

Categorized & highlighted keywords affinity map

After categorizing the keywords, we moved on to the ideation process. We chose notable keywords that align with the qualitative research insights and user pain points from each category as a guideline, and generated a number of ideas and downselected by combining the ideas.

Notable keywords and generated design ideas

Solutions

INTERACTIVEBROADCAST

• Provide selectable information before and during the broadcasts through Interactive UI.

AI CHATBOT

• Provide real-time match information and answer user's questions about the match details with chatbot system.

COMMUNITY

• Divide the current unified chatting system into respective teams and provide community channels for fans, gamers, and clubs.

TUTORING

• Give tips and know-hows to users so that they can enhance their game skills.

3. Design Prototype: Iterative Prototyping

Information Architecture

The information architecture of the proposed service is consists of an app part, live broadcasting part, and rerun. The app part is where users can view a list of e-sports broadcasts, use community features, check personal interests and viewing history, and get tutoring service. Once a user taps a live match video on the broadcast screen, users will be directed to the live broadcasting part where users can view live e-sports broadcastings, use team and AI chatting, and get real-time information on the matches. Rerunning the match videos provides the same features with live broadcasting except for team chatting.

We started building the initial low-fidelity wireframes to visualize the information architecture above. While exploring the designs, we continuously had usability testing sessions with professors and people outside of the project to get better insights and figure out if there are things that we missed out on. Based on their feedback, we kept iterating the wireframes to have more simple and intuitive usability. 

App screens

Broadcasting: Before match starts

Iteration 01

Iteration 03

Iteration 02

Broadcasting: During the match

Iteration 01

Iteration 02

Iteration 03

Iteration 02

Iteration 01

Broadcasting: Chatting

After quick iterative low-fidelity wireframing, we discussed the significance and relevance of each iteration and shortlisted notable points from the low-fidelity wireframes. Based on the list, we further improved design ideas and details that need to be addressed in the subsequent step. We then created mid-fidelity prototypes to better visualize key functionalities of our design and to conduct usability evaluation sessions with potential target users and experts.  

During the match

Home

Community

Broadcast

Chatting

League of Legend

Before the match

Overwatch

Before the match

During the match

Tutoring

With the mid-fidelity prototype, we conducted design evaluation sessions with 5 e-sports viewers and 2 usability experts. We made clickable prototypes to test our design in a similar setting with live broadcastings. Our goal was to receive feedback on a variety of topics that include the overall functionality, the user’s expectations, the ease of use, the error frequency, the user’s satisfaction, and the level of connectedness of each touchpoint.

Photos from the usability testing sessions with users

Photos from the evaluation session with usability experts

From the collected data, we highlighted key findings from our evaluation sessions, and discussed next steps for design iteration. The findings were grouped based on related features and ranked by severity of the problem. Some of the changes that we made after the evaluations include:

1

Allow users to view their tutoring results sorted by respective games

Before

After

Issues

Participants gave us very positive feedback on the tutoring feature. However, some of them questioned why they cannot view the tutoring results for each game of their interest.

Solutions

To solve this issue, we added the option to choose the game they want and view the tutoring results separately. 

2

Provide shortcuts for frequently asked questions in AI chatbot 

Before

After

Issues

During participants were using the AI chatbot feature, we found that the typing questions every time even for frequent questions such as match scores, player roster, and match details could be taxing for users and might hinder them from focusing on the broadcast itself.

Solutions

As a solution for this problem, we added shortcut options for frequently asked questions in AI chatbot so that users can quickly get answers they want to know and focus on matches. 

3

Reorganize hierarchy of the floating button to be more simple and intuitive 

Before

After

Issues

Having many depths in the floating button required more effort for participants to get the information they want. In addition, too many action taps of the floating button ruined the view of participants and increased error frequency.  

Solutions

To address these issues, we removed a few depths by pulling out inner action taps outside and reorganized the features that require many steps to achieve. This will help users use the features more simply and intuitively.

4

Remove the setting feature and add the clip recording feature in the floating button

Before

After

Issues

Some users thought having the setting option in the floating button doesn't make sense. This was because, first, there is no need for putting the setting option separately rather than following the way existing video or broadcasting services do. It would just be more confusing for users. Second, it takes up too much space of the screen so it might hinder the view of users.

Rather than having the setting option, we decided to possess a feature that can give more value to users. After quick ideation, we added the clip recording feature that users can record scenes of a match as a video.

Solutions

Brand Identity

" Enjoy e-sports broadcasts, as you want "

ACTIVE & POP

BLENDED

FUTURISTIC

KEYWORD

COLOR / FONT

ICON SET

4. Final Design

Since e-sports broadcast scenes have active movements, splendid effects, and various colors, we wanted to keep UI design as simple as possible so that users can concentrate more on the broadcast itself.

FLICK

Introduce the new Interactive E-sports broadcasting service 

Log In

Team Selection

Game Selection

Interaction.

 

KEY FEATURE

1

BROADCAST

Game list

Rerun

Chatting

2

COMMUNITY

My Community

Team Feed

Player Feed

3

TUTORING

My Page

Play Recording

Tutoring

4

ON AIR

Before The Match

During The Match

Overwatch

League Of Legend

BROADCAST

This is home and broadcast screens. On the home screen, a current live broadcasting video recommended and trending content is located. Game lists are categorized according to the user's preference and arranged by the current broadcasting conditions. Live game is always located at the top, and other offline games provide rerun videos of previous matches.

Home

Broadcast

Rerun

Chatting

Users can select 'open chat' and 'chat channels' for each team, regardless of which team they support. In addition, AI Chatbot allows users to ask questions about current matches in real-time and provides shortcuts for quick questions.

Interaction.

COMMUNITY

On the community screens, users can see the various contents of teams and players they are cheering for. Users can also access contents that usually are not available on the live stream, such as off-the-record, player's personal screen.

Team Feed

Team Feed

MY Community

Player Feed

Interaction.

TUTORING

Users can use tutoring service by connecting their game accounts to Flick service and uploading their gameplay recordings. Then, the service will analyze the recordings based on the professional gamer's play data. After that, the service will provide users a new video with bookmarks on the progress bar about the points that the users could have been done better. Once a user taps one of the bookmarked points, the video will be automatically played and show an advice box on the top of the screen. The newly generated videos will be saved on the Tutoring page of My page.

 

My Page

Tutoring

Tutoring Bookmarks

Interaction.

ON-AIR

The live broadcasting is divided into two steps - Before the match starts / During the match.

Before The Match

Before the start of the match, usually, upcoming match information will be briefly relayed only by the casters. After that, viewers have to wait until the match starts. To make that tedious time more useful, Flick service provides various Interactive contents for users to check the information of today's match such as Records, Map set, and LIne up.

Season Records

VS Records

Match Score

Map Set

Line Up

Player's Info

During The Match

During the match, users can get unconstrained information through Interactive UI, and these UI compositions are different depends on each game. This UI provides functions such as changing viewpoints, scoreboard, and clip recording.

 

01. In the case of Overwatch, Automatic / First-person view / Third-person view / Real-time Scoreboard / Clip recording functions are provided.

 

02. In the case of League of Legends, Mini-Map movement / Champion Information / Real-time scoreboard / Clip recording functions are provided.

 

Changing & Moving Viewpoints

Score Board

Champion Info

Clip Making

Before The Match.

Before the match starts, in the case of Overwatch, Flick service provides various contents including remaining time for a match to start / Season Records of each team / Details of the previous games with an opposing team. Also, It provides today's Mapsets that games will be played / The score of the previous matches. Users can see Line-Up of the match and the players' detail profiles.

Record

Map Set

Line Up

Interaction.

During The Match.

During the match, Flick service helps users change Viewpoints, check Current Records, and record Clips. In the case of Overwatch, there are three buttons at the bottom of the screen and the buttons have different functions. First, changing viewpoints: Auto(AI managed) / FPV(First Person View)/ TPV(Third Person View). Second, checking real-time player records. Third, making the part of the clips that users want. 

 

Observing View

Score Board

Clip Recording

Interaction.

Before The Match.

Record

Match Info

Line Up

Before the match starts, in the case of League Of Legend, Flick service provides contents including the remaining time for the start / Season Records of each team / Details of the previous games with an opposing team. Also, It provides today's Mapsets that games will be played / The score of the previous matches. Users can see Line-up of the match and the players' detailed profiles.

 

Interaction.

During The Match.

There are two buttons at the bottom of the screen and the buttons have different functions. First, checking real-time player records. Second, making the part of the clips that users want. Additionally, users can change their viewpoints by tapping the champion's portraits.

 

Default

Champion Info

Score Board

Interaction.

Thank You.

Designed with passion by Hyun Park © Copyright 2020