Twitch Mobile App

Expanding the streaming platform Twitch’s social features, a group discussion feature for friends and followers.

Overview

My Role: Research, Ideating and wireframes, Prototyping, Usability Testing

Twitch is the largest online video streaming service on the market with almost 75% of the total viewing hours of all available platforms. While a user can stream just about any interest of theirs, video gaming is by far the most widely viewed category, and it can be accessed through desktop and a mobile app. Twitch has more than 15 million daily users and an average of 2.7 million broadcasters each month.

Problem

Twitch allows its users to communicate with each other via a streamer’s live chat or through Whispers, what they call direct messages, but that is about the extent of the social capabilities. The live chat can move at a rapid pace due to the number of viewers on a stream, which can make it difficult for other viewers and the streamer to follow along and participate. My job was to find a way to expand on the currently available social features for the mobile app, while maintaining Twitch’s brand and voice. *UX Academy Project*

Process

User Research

Before I could begin talking to users, I needed to learn about Twitch and what it offered its users. I read up on user demographics and usage statistics to gain an understanding of who uses Twitch and why. I also downloaded the mobile app to see first-hand how the app is laid out, what the navigation is like, and what patterns they use for different types of screens.

I followed this up with a competitor analysis of Twitch’s three main competitors, Mixer, YouTube Gaming, and Facebook Gaming. I wanted to see if any of them were doing something different with their social features, but all three platforms were similar to Twitch with live stream chats and direct messages.

No one was really going beyond those two features, so I decided to find out how widely used they are through a short survey. I initially posted my survey on my social media feeds and on a slack channel, but got minimal traction (read 2 responses). I ended up having to use other outlets to find participants. I posted in a few live chats on Twitch and also made a post on a Twitch related Reddit page. I ended up with almost 30 responses. 85% of my survey respondents said they do participate in the live chats and communication and interaction with streamers and other users was most commonly chosen as the most important aspect of Twitch.

I used the responses from my survey to help direct my interviews. I asked more pointed questions about different features and why they use them. I wanted to find out why communication and interaction was so important to users and if there might be something Twitch was missing out on. I interviewed three users who were all males in their 20’s (82% of users are males and 55% age from 18-34).

All three interviewees talked about communication and interaction, and one even said it was key to growing a community. They wanted to build relationships and be a part of a community. Two interviewees mentioned using Discord channels to communicate with other users in a larger group chat format. One interviewee, who was mostly a streamer, said he uses it to communicate with his followers by sending updates about when he’d be live streaming or if he needed to reschedule. He also would ask what games his followers would want to see him play.

It was clear that building relationships and communities was important to these users and that became the driving force for the rest of the project.

Say Hello to Ben

Ben is a people person and loves to meet new people. Even more so, he loves helping other people be successful in their endeavors, both professionally and personally.

Brainstorming

To get an idea of how different elements, features, and ideas were connected, I created a word map. It helped me visualize which aspects were most important based on how they were connected. I then used the word map to make an early stage task flow to start figuring out what kinds of pages and content might be needed.

Sketching and Ideating

I used my initial task flows to start sketching out some of the screens I would need. Because I was expanding on Twitch’s already existing social features, it was important that I paid attention to the patterns and designs that they were already using. My sketches took different elements from the current app to create what I was originally calling “Exchange.” I was originally thinking I would have Exchange be accessed by the bottom navigation bar.

Twitch already had a social icon in the top right corner and I wanted move it down to bring more attention to it. However, shortly after starting this project, Twitch came out with an Esports feature that they added to the bottom navigation. My first thought was to keep the social features in their current locations, but after playing around with different ideas, I went back to putting in the bottom navigation bar so that it had a greater sense of importance.

Wireframes

When I started making my wireframes, I wanted to get down initial ideas for each screen that I would need before I started to ideate on those screens. Because I was adding to an existing product, I tried to keep the same patterns that Twitch uses on different screens, while still working through different ways those patterns could work together.

I took screenshots of the Twitch app to make sure that I was following along with their current patterns and UI elements. This came in very handy as I was upping the fidelity levels of my designs. I also added UI and navigation elements from Android to work within another given product.

Usability Testing

I took my wireframes to as close to finished as I could to begin conducting usability testing. My goal was to test the clarity of the navigation I had added to Twitch and the ease of creating a new discussion. I conducted un-moderated, remote usability testing using Maze.

I conducted two quick tests to work out any bugs with my prototype.

Testing Round One:
- Two participants
- Needed to relate content in prototype to what users actually watch

Testing Round Two:
- Three participants
- A path got linked wrong which wouldn’t allow participants to finish the given task

After those kinks were worked out and my prototype was updated, I started my official usability test. Like with my research surveys and interviews, I got very little interaction through my initial points of contact (social media and Slack). I once again went to the Twitch sub-Reddit to see if that would garner more participants.

Testing Round Three:
1. 7 initial participants (4 left after the first task)
2. I gave participants 3 tasks:
a. Navigate to Discussions page and join a discussion
b. Create a discussion
c. Accept a discussion invitation
3. Problems that arose:
a. The miss-click rate was high on some screens. However, looking closer at where they were happening, showed that they were from the clickable area being too small. (Mid Priority)
b. Two participants tried completing the “Create” sections out of order. In the live product, they would be able to, but they would still need to fill in all of the sections. (High priority)
c. There was some confusion as to where to locate discussion invitations. (High Priority)

Final Prototype

I went back to my prototype to try to find solutions to the problems that developed through the usability testing:

- Added specific error messages to the “Create” pages for when a user tries to click the “Create” button before adding all of the sections.
- Enlarging the clickable area size of some elements
- Visually indicating that all friends have been selected when a user selects “All Friends” to be invited to a discussion.

While revising some of my screens, I needed to go back into the Twitch app to find more specific patterns that they use, such as accepting and declining friend requests and notification indicators.

Review

When adding a feature to an already existing product, it is vital that, as a UX researcher or designer, you really listen to what the users need and are frustrated by. Digging as deep as you can and understanding what users aren’t currently gaining from your product is going to help immensely when brainstorming ideas for an additional feature. This is why user interviews are so important to the design process.

Hitting bumps in the process is normal. Finding ways around those bumps or navigating through them will only make the designs better in end. When looking for interview and testing participants, my original source of contact wasn’t resulting in the number of participants I was hoping for. I needed to get out of my comfort zone and find an alternate path. That alternative path gave me access to more Twitch users and users that I wouldn’t have found any other way.

My interview participants made it clear that building relationships and communities was an area in which Twitch was lacking. Building a feature that allowed users to generate communities for themselves and build those relationships was the main goal of this project. I believe that the Discussions feature accomplishes that goal.