Twitch.tv – Extensions

Implementing Viewer Interactions within Game Streams

Designing to Motivate and Integrate Active Participation

Client

Twitch.tv

Role

Researcher, UI,
UX and Interaction
designer

Timeline

6 Month

Deliverables

Interactive Prototypes
Initial Design Guidelines

Overview

During the first half of 2018, I had the amazing opportunity to work at Twitch, one of the largest gaming streaming platform in the world. To explore on-screen interactions through the use of extensions. With this project I explored different ways of creating an experience that would enhance the viewing experience and at the same time not take away from the main focus of the viewer, which is “watching streams”. I also investigated how this experience could then be applied and in which ways we could motivate viewers to actively participate in it.

Through an iterative design process, I made mockups, designs, conducted user tests and with the use of tools such as Sketch and Proto.io created  interactive prototypes. As a conclusion to the research project we also provided a set of initial design guidelines for those who want to design and conduct further research within the area.

The problem

With live-streaming Twitch has enhanced and enabled viewers to participate through the use of chat. However, as the platform grows and the amount of viewers increasing each year, it has become harder and harder to participate through chat. During late 2017, Twitch introduced Extensions, a real-time interactive overlay ontop of streams to motivate active participation from viewers. As it stands, the existing extensions are rarely used by streamers and viewers alike.  Its also mostly created for specific games, not fufilling their full potential. With this in mind, we wanted to explore interactions and extensions to see in which ways we could create something that can engage and motivate users to actively participate during live-streams.

Challenges

Mental Model

Regular viewers are already preceiving elements on screen as non-interactable and see it as a static video. Therefor we must create something that can prompt the user in order to change their mental-model of what live streaming is.

Limited Variety

The currently implemented extensions are very limited to what they can do and are often created specifically for a certain game. Other utility type of extensions act more as an enhancing feature (Top Donator, music), not something that promotes active participation.

Motivation

Lastly, perhaps most importantly. There is no incentive as to why viewers should participate in different extensions. As mentioned, many of the current extensions are very specific in what games and viewers they are targeting. This in turn excludes the general viewers.

Iterative Design Approach

In order to tackle these challenges and adapt towards new findings along the way, we decided on an iterative design process which would let us work in shorter intervals and make changes based on continuous feedback within 3 iterations. Starting with a background research looking at prior research and researching the platform in order to better understand Twitch and its users. We also conducted user studies by sending out questionnaires through various twitch related forums regarding user habits and extensions reciveing over 100 replies. By analyzing and categorizing this data we created 3 personas in combination with already defined viewer types from Twitch.

Iteration 1

Together with 5 chosen games, based on their iteractivity levels, the personas were used in brainstorming sessions to generate ideas which were divided and sorted into seperate categories. From each category a number of potential ideas were chosen and developed further upon 6-3-5 brainwriting method (we customized it 4-3-4 for our purpose),  by doing this we found the ideas that had potential to be evolved into an extension.

The first iteration of prototypes were created in mid/high fidelity in a semi-interactive manner using Sketch, we had to incoporate some wizard-of-oz techniques to show some of the functionalities that were not interactive. In total, we created 7 seperate extensions. The reasoning behind mid/high fidelity prototypes instead of low fidelity was due to the fact that a low fidelity porototype on the high fidelity environment would have dissmissed the whole point and made very easy for user to distinguish extensions to the background. This then would not have reflected the current situation of extensions on Twitch.

Our first user-test was conducted on Iteraction Designers to sanity-check the design and its interactions. Due to the fact that most of them have never heard/used Twitch, a higher fidelity mockup was also required to demostrate the flow and idea. The interviews were conducted in a semi-structured manner focusing on the flow and potential of each extension. At the end of the user-test we also gave each participant a quick survey of extensions that they believed had potential to increase active participation/made them actively participate.

Main takeaways from first iterations feedbacks:

  • Testers had a hard time to distinguish/seperate on screen elements to the stream
  • Some users imagined it can quickly become cluttered if many extensions were to be active
  • Concerns were raised regards to the larger size of certain extensions as it might become distracting

Iteration 2

In order to solve the issue of hard to distinguish/seperate extensions to the stream. We tried to draw attention from the users by having the extension to be activated by a button that where half inside and half outside of the screen to create visual hirearchy. One extension had blinking button to indicate clickability. We also shrank down the size and simplified the layout of extensions to take less space and less attention. Another idea that we tried out was making an extension half transparent, were the user could see through the extension.

The second iteration of user-tests were conducted on both Twitch-viewers and non-viewers with a gaming interest, this to see the clarity and ituitiveness of our extensions. Each test were performed in around 1 hour and in a less descriptive manner, as the prototypes were interactive and gave users ways to explore them as they see fit. Some elements of the design were intentionally not functional and used as discussion points, asking them what they believe would happen?

From the second iteration of testing we gained the following insight:

  • Too much animation is annoying for the viewer, especially if the viewer are not actively using extensions
  • What are the incentives for the user to actively participate in extensions
  •  Smaller extension designs feels less intrusive and half transparency felt unnecessary and made it more distracting

Iteration 3

The biggest change for the third iterations comes with the creation of the extension bar menu which groups all active extensions in one place. This was done to give users a clear view of the stream and create a way to easily access all the extensions from one place. This also meant all extensions are now scaled down to a certain size and frame to meet users expectations. We tackled the issue of motivation by introducing an currency that is earned by participating and a shop where the user can redeem their earned coins to engage the user and provide a goal for them to strive for.

In the final iterations of user-tests, the tests were conducted on Twitch viewers. Again, each test were performed in around 1 hour like previous test. During the test, we investigated each extension prototype with the user through different tasks that was given to them such as “Can you access the match history?” “Could you bet on WE and then retract the bet?” etc. to gain insight of the user flow and interactions between the combined extensions.

From the last iteration of testing we gained the following insight:

  • It was less intrusive when the button animation faded away after a few seconds
  • The new cohesive concept was welcomed, as it felt like they all belong together
  • User also said that they like that they can find everything in one place compared to not knowing where the extensions are on the screen
  • The users found the shop/rewards as a good incentive and something they felt motivated them to join

The results

In the end, to tackle the challenges mentioned earlier. We have made use of  animations to bring users attention to on-screen elements and grouped all extensions in one place. This hoping to create awearness and changing the mental model of the user. To tackle the lack of variety and exclusion of viewers, we created four different types of extensions, all which are non-specific to a certain game, but more general concepts that applies to the general viewers. These were: Betting, Shopping, Mini-games and Tutorial.

Lastly, for the hardest problem: Lack of motivation. We created a positive feedback loop to challenge this problem. Seen with the model below, this revolves around the whole concept. By gamifying and introducting a platform-wide currency called “coins”. The viewers earn coins by simply watching streams, the main goal of the platform. This in turn gives them a passive source of income. Using their earned coins, the user can participate in various activities such as betting or playing games. By earning coins, they can then trade these for exclusive rewards in the shop which further incentivices users to participate.

In our final concept and prototypes, all extensions are grouped under an combined extension bar which is located to the bottom right of the screen. The reason to place it at the bottom right is due to the fact that the chat is located there. This means the user will look more frequently at that area. By simply hover over the screen, the extension bar button will appear. It prompts the user to interact with it by fading in and out for a few seconds. If the user choose to click on it, it will expand into a list of extension options. By having the extension bar expanded users can easily access different types of extensions with ease and at the same time keep extensions sorted neatly. If the user were to not interact with the extension bar within a certain time limit, it will automatically fade away to not hinder users viewing experience of the stream.

Extension Interfaces

What have I learned?

Animations.
Working with animations has taught me how to appreciate the extra dimension that it adds to the design. In our case, we used it as a way to challenge the mental model of the users and a way to prompt users, but at the same it is equally important to balance the amount used, as it can become both distracting and annoying for the users.

Less is more.
While working on the project, I found myselfs often times trying to add functionalities or wanting to create a more robost design as if I was designing a whole new system. But both from feedbacks and insights gathered through out the process, it was proven that simplicity is king. As our goal in the end was to create something that enchances the platform not remaking it.

Everyone can be winners.
It seems like, often times there are always a compromise between user goals and business goals in design. Where you have to choose between one or the other. But for this project I believe we created a system and design that could benefits both ends. In that, the underlying design can consider both sides without contradicting each other.

What I'd do differently?

More interactions.
One regret I have from the project was that we did not manage to incoporate the interactive prototypes in a “real scenario”, in the sense of a moving background stream due to both technical and time limitations. It would have been very interesting to see how the testers would interact with our extensions in a near “real scenario” where sound and the constant moving background would have to be taken into consideration.

More user tests
In our testing phases, we had Interactions Designers, people who werent twitch viewers and twitch viewers as our testers. We did have a hard time finding a larger sample size of Twitch viewers that were available for user-tests. Another iteration with Twitch viewers specifically would have been even better to validate our design. With that being said, I believe that by including different types of testers we were able to see different perspectives and add another polish to our research and design.