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.
Hyun Tae Park
Jung Been Lee
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.
Sketch, Figma, Framer, Protopie
" 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
• Market Research
• Observational Study
• User Interviews
• Pain points
• User Persona
• Brainstorming & Ideation
• Idea Synthesis
• Information Architecture
• Low-Fidelity Wireframes
• Mid-Fidelity Wireframes
• Usability Testing
• Brand Identity Design
• Hi-Fidelity Prototype
• Hi-Fidelity Interaction Design
- Over Watch
- League of Legend
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.
E-Sports Market Research
Contextual Inquiry / Observation
Grouping research notes into affinities
Key Pain Points in 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.
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.
Lack of communication channels with pro-gamers
Viewers have no proper ways to communicate with teams and pro-gamers they are cheer for.
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.
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.
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
• Provide selectable information before and during the broadcasts through Interactive UI.
• Provide real-time match information and answer user's questions about the match details with chatbot system.
• Divide the current unified chatting system into respective teams and provide community channels for fans, gamers, and clubs.
• Give tips and know-hows to users so that they can enhance their game skills.
3. Design Prototype: Iterative Prototyping
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.
Broadcasting: Before match starts
Broadcasting: During the match
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
League of Legend
Before the match
Before the match
During the match
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:
Allow users to view their tutoring results sorted by respective games
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.
To solve this issue, we added the option to choose the game they want and view the tutoring results separately.
Provide shortcuts for frequently asked questions in AI chatbot
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.
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.
Reorganize hierarchy of the floating button to be more simple and intuitive
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.
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.
Remove the setting feature and add the clip recording feature in the floating button
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.
COLOR / FONT
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.
Introduce the new Interactive E-sports broadcasting service
Before The Match
During The Match
League Of Legend
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.
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.
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.
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.
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.
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
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.
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.
Before The Match.
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.
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.