Twitch Video Playback (UX Case Study)

[Twitch Background] Founded in June 2011, Twitch is the world's leading social video platform and community for gamers. Each month, more than 100 million members gather to watch and talk about video games, with over 1.7 million being unique broadcasters. Twitch's live video service caters to the entire video game industry.

[Project Background] Walkthroughs are used to help gamers get through difficult parts, find secret / hard to locate items, or be an exhaustive guide to fully completing a game. Currently, Twitch allows gamers to broadcast their gameplay but lacks the ability to let other gamers find specific sections within a video.

During a two-week design sprint, we (a three-man team) were tasked with introducing a 1) new way of uploading and 2) viewing content, allowing gamers to share their tips and tricks while 3) making a profit doing what they love. Through heavy user and competitive research, along with an Agile UX approach, we ended the sprint with a high-fidelity design of both features. 

This was a concept project through General Assembly.

 

The research

To understand how gamers currently watched video walkthroughs, and why they're share live gameplay video, we mapped three key research objectives. These questions became pinnacle during our sprint, as we referenced them through every stage of our process:

  • Understand why people watch walkthrough online.

  • Find current methods of navigating through video walkthroughs.

  • Find reasons behind gamers uploading video game walkthroughs.

 

“Your biggest challenge would be making this a prominent feature. Twitch isn’t necessarily a top destination for ‘guide’ content. People wouldn’t necessarily seek out Twitch, as it’s primarily a live environment and therefore harder to catch the part you need. 

You do occasionally get someone asking for tips in the chat, but that generally has a mixed reception (as those users tend not to deliver anything to the overall community and therefore have minimal worth).”

— Sam, Technical Support Manager at Mtivity

 

Our research brought to light two distinct user types: video creators and video consumers; within those two subsets sit two extremes, the active creator / consumer and casual creator / consumer. The remainder of our research was summarised into a few insight points:

  • People don’t associate Twitch with ‘video walkthroughs’ or ‘uploaded content’

  • YouTube is the main competitor for walkthroughs and uploaded video game content

  • Twitch has a loyal and active community

  • Although users are able to save video streams on Twitch, users are unable to edit or directly upload video walkthroughs

  • Some users stop viewing stop watching walkthroughs after getting needed information to avoid spoilers

  • In-video navigation within a walkthrough video would be extremely helpful

  • Most Twitch users have a goal in-mind prior to opening the webpage

Personas

The challenge this particular project presented was designing a product that satisfies both the extreme gamer, and the casual gamer. All of which were included in our four personas. To ensure all needs were met, we elected Stephen (The Impatient Gamer) as our primary persona.

 

Design opportunity

We found context (where someone live streams video, and when someone searches for a walkthrough) to be extremely important. On one hand, we're designing for frustrated individuals: these are people who can't solve a particular level challenge, which is why they're looking for a bit of guidance. On the other, we're hoping to improve the process of uploading walkthroughs.

If we're able to provide a clean, flexible upload process to these 1.7 million creators, then that'll shine through the viewing experience as well. We hypothesised: 

  • By providing users with the ability to upload and watch walkthroughs, this would increase the Twitch community from not only live streams but an actual video database.
  • By providing a highlight and bookmark section in the video player will help the user navigate to a certain point in the video fast saving more time.
 

Prototyping

We ran through multiple versions, creating various paper-prototypes, updated mid-fidelity wire-frames, and more. Every bit of feedback was extremely valuable, especially when our team took our final design to a gaming pub. We interviewed real gamers, while gaming.

"I love Twitch, but I can’t upload anything without live streaming first. I'd like to edit; you know, cut out the parts I die, the stupid comments I say, and add a bit of a personal touch / branding. And don't get me wrong, watching those streams is great, but sometimes I don’t want to watch eight hours worth of commentary. I want to get what I need, then keep playing. No one has time to sift through hours of footage when you're trying to beat a level!"
 

Visual design

Keeping with the overall Twitch aesthetic we ramped up the fidelity. Each round of testing brought to light crucial changes in our design from the placement of our donation button, to providing guidance through the uploading experience. 

 
 
 

 
 

Up next