Twitch

This case study for a concept project details the two-week process our team went through to conceptualise, design and integrate a new feature for the World’s leading social video platform for gamers.

twitch_ux_project

The Client

Twitch, the world’s leading social video platform and community for gamers with 100+ million unique viewers per month.


PROJECT OVERVIEW

The Brief

Conceptualise and design a prototype for a video game walkthrough feature, that could integrate well into the existing Twitch platform.

The Problem

Video-game-walkthrough consumers spend too much time searching for their walkthrough solution. The platforms they currently use are not designed well enough to prevent spoilers from appearing, which would cause further frustration for the consumer.

Video-game-walkthrough creators, were frustrated because they had trouble managing their walkthrough content on different platforms, which also reduced the quality of communication with fans and followers. As a result, this reduced the chance of making money through video game walkthrough content.

The Solution

We propose a platform that is designed to allow users to create video game walkthroughs in the most widely used formats; text, images and videos, all in one place. This will in turn help consumers find the solutions, in their preferred format, more quickly than ever before.

PREPARATION

Duration

2 weeks, split into 2 sprints:

  1. Discovery Phase
  2. Design Phase

Team

A team of four, incuding Sia Georgieva, Nicolas Menaud, Elias Poveda and Ollie Moser.

Team Lead: Ollie Moser

The Tools

  • Pen & Paper
  • Google Forms
  • Sketch
  • Keynote
  • Marvel
  • Trello

The Process

Design

  • Design Studio Method
  • Content Prioritisation
  • Sketching
  • Rapid prototyping
  • Paper Prototypes
  • Digital Wireframes
  • Style Tile
  • High Fidelity Mockups
  • Clickable Prototype

Discovery

  • Competitive Analysis
  • Business Analysis
  • Survey
  • User Interviews
  • Concept mapping
  • Usability Testing
  • Task Analysis
  • User Journey
  • User Flows
  • Storyboarding
  • Personas
  • Feature Analysis

Testing

  • Paper Prototype Testing
  • Iterative Wireframe Testing
  • High Fidelity Prototype Testing

DISCOVERY

"When it involves a shared interest, people enjoy watching others who are highly skilled or entertaining." Twitch.tv

Business Analysis

A video game tournament

Twitch is the world’s leading social video platform and community for gamers with 100 million unique viewers and over 1.5 million content creators per month. Twitch is a platform that allows gamers to broadcast, watch and communicate with each other through their common interest of video games. Twitch was named the 4th largest website in terms of peak internet traffic in 2014, making it an entertainment industry leader and hub for social interaction for video gamers. Many streaming celebrities have been formed through Twitch some of whom earn up to $100,000 annually and amass up to 1 million fans worldwide.

A community dedicated to a single cause of this size has tremendous potential.

Competitive Analysis

Next up was to understand who our competitors might be, what they were or were not doing and what we could potentially learn from them.

We began by getting to know which are Twitch’s current competitors for live streaming, but also future competitors for Twitch’s new walkthrough feature — those who offer video walkthroughs, as well as text & image guides.

Findings

  • Although all competitors offered video game wakthroughs, none offered all possible content options for a Video Game Walkthrough on one platform. Text, video and image
  • Not all competitors offered spoilers alerts
  • Only Youtube offered the opportunity to make money

 

 

 

Survey

To begin our journey, we needed to identify and interview the creators and consumers of video game walkthroughs in order to better understand their behaviours, needs and frustration.

In order to find our users, we constructed and sent out a screener survey, targeted at the gaming community. With a strategy set, we posted our survey across a number of online channels as well as physical locations. 

Findings

  • Youtube is the most commonly used platform for watching VGW content
  • Youtube is the most commonly used platform for uploading VGW content
  • 70% of respondents also view VGW content on mobile devices
  • 82% of respondents frequently share content they like online

Interviews

After a successful response to the survey, we contacted a number of them to interview. We selected people who had experience either having watched video game walkthroughs online or who had actually created them.

The feedback from the interviews was insightful and helped us to better understand the gamers who had experience in this area. What was interesting was that there was a large variety of gamers who have used VGW's but had different needs for them.

Findings

  • Most consumers only want very specific information when using VGW's
  • There is no preferred platform for gamers, just as long as they find their solution quickly
  • Social aspect is very important to many gamers
  • Making money would be an incentive to create VGW's
  • More experienced Gamers tend to only use guides when they are really stuck
  • Less experienced and younger gamers prefer to be more sociable and interactive with VGW content
  • Consumers prefered text walkthroughs with images and video accompanying them.

 

Contextual Enquiry

We continued our user research with rounds of contextual enquiry too, which allowed us to gather more qualitative data to help shape the frustrations and needs of our users.

We recorded the user's actions from the moment they pause the video game and attempt to find a solution using a video game walkthrough guide.

We discovered that users almost invariably go straight to Google search and in a hurried nature, scroll through the search results. Using the descriptions, ratings and imagery to help them decide. They will click on the links (often still not knowing if it will give them what they want). Once on the pages, they scan the content looking out for spoilers first and then for the very specific solution to their problem, as they still need to get back to their game! Users go back and forth between Google and games websites until they find what they need.

Task Analysis

We attempted to replicate the sub-tasks performed by our users and the emotions they felt when they attempted to complete the overall task of finding a solution.

The frustrations clearly start to appear when they waste time moving back and forth between gaming page (with irrelevant content) and Google search. On top of this, there is always the danger of coming across a spoiler, especially with web pages that they are not familiar with.

 

 

 

User Journeys

With the data from the interviews and the task analysis, we mapped out typical journeys for both the VGW creator and consumer. These user journey's helped us to establish the real frustrations for our users and to pinpoint where exactly in the journey they lay. 

Video Game Walkthrough Consumer User Journey

Video Game Walkthrough Creator User Journey

Personas

With the quantitative and qualitative data available to us, we were able to shape a set of 4 key personas. These personas would become a representation of the goals, frustrations, habits and behaviour of our user groups.

With the personas drawn up, we needed to work out the main common aspects from each, so that we could focus our attention on solving common needs.

Commonalities

  • Need a quick and accurate gaming solution
  • Need a few options for the solution
  • No Spoliers
  • Wants to make money through gaming
  • Wants to gain notoriety through gaming
  • Build fanbase
  • Find more influential gamers
  • Need easy indicators to quickly validify the VGW content
  • Feedback helps to create better content

Primary Personas

From the 4 personas we chose 2 primary personas who we felt had the most complex needs. We felt that if we were to solve their problems we would be able to address the needs of the other user types too.

Rachel's Needs

  • Quick & easy access to walkthroughs
  • To become an active member of gaming community
  • To become an influential gamer

Frustrations

  • Spoilers ruin her gaming experience
  • Hard to find influential gamers to learn from
  • Finds it difficult to share, comment and be social
  • Lacks of a single platform to develop her own skills and reputation

 

 

Jake's Needs

  • Create image, text and video walkthroughs
  • Communicates with his fans regularly
  • Wants to make money through gaming
  • Wants to increase fan base

Frustrations

  • Has to switch between gaming platforms to manage his VGW content
  • Finds it difficult to share and communicate across different platforms
  • Spends time researching the best VGW hosting platform
  • Can't find dedicated gaming community on Youtube
  • Hard to earn money well by dividing operations across different platforms

 

Feature Prioritisation

Now we know who are personas are, we needed to decide on the features that are needed to solve their problems, as well as to satisfy the needs of our stakeholders at Twitch. 

Based on the criteria set out by Twitch, what we had learnt from what our competitors were offering and what our user's needed, we soon realised that this feature list was quite extensive! 

Criteria for video game walkthrough feature, as set by Twitch:

  • Creators should be able to upload game walkthroughs
  • Consumers should be able to discover walkthroughs that appeal to them
  • Consumers should be able to find specific moments in a walkthrough

 

MoSCoW Method

In order for us to move forward with the project, considering the time constraints, we used a method called MoSCoW to help us prioritise the features.

We divided the features up , which helped us to work out what features were most important to have (for both consumer and creator). These were then mapped onto a graph to further establish what was most important according to time, effort and most essential.

At the end, we selected a range of features that sat nicely in the range between essential and low to mid effort, taking into consideration the needs of the business and the users.


DESIGN

Design Studio

With the discovery phase wrapped up, the problem identified and feature list refined we were ready to start our Design phase.

We started the design phase off with a collaborative Design Studio. We used this method to conceptualise the design and the screen-flow of the video game walkthrough feature by sketching a number of ideas in rapid succession. We used the newly prioritised feature list to steer us in our design ideation. 

Feature list

  • Annotations on Video
  • Ratings
  • Video-Game-Walkthrough-Creator User Profile
  • Payment review
  • Filtering/ Sorting of Videos
  • Comments
  • Recording date
  • number of views
  • Image references
  • Spoiler Alerts
  • Walkthrough Text & Image Descriptions
  • Suggested Video Lists
  • Author Validation
  • Video Length
  • Date uploaded/created
  • Custom Hub Page
  • Predefined Tags

 

Several rounds of sketching were conducted and after each round, as a team, we used a system of up-voting the design solutions, functionality and screen flow that we liked. The most voted-for designs were then refined again as a team until we were happy with the work.

Paper Prototype & Testing

We tested the flow of the screens using our rough sketches from the design studio. We set a task for users to perform, the aim of the test was to ensure that users were able to perform the task and move through the screens without trouble.

We found that our original concept of having multiple-walkthroughs on one video was too confusing for our users, both for creators and consumers, so we adjusted the design to suit.

We also found that the original screen flow was too long and confusing, so we cut it down and added a step by step wizard process for the walkthrough builder which seemed to be the problem area.

Low Fidelity Wireframes

Changes made to the ratings icons and the video 'moments' icons.

Changes made to the ratings icons and the video 'moments' icons.

With the revisions noted we progressed into our second iteration of the paper prototype, raising the quality of the prototype. 

People still seemed to be having problems with our social share and ratings buttons so we made the adjustment to include universally recognised thumbs up and down icons (as seen on Youtube too).

The changes we also saw at this stage were to allow users to click on links that will automatically take them to a point in the text and visa-versa, this proved to be really usable and it was quick for users to grasp. 

Hi-fidelity Wireframe

The next round of changes were included in our mock-up of a digital wireframe using sketch so that we could continue testing through a clickable prototype. This next round of testing was done in context, at a gaming bar.

The feedback from this round of testing was centered around refining the icons and the positioning of elements on the screen according to where they were expecting them to be.

With the round of testing complete and the revisions to our designs made, we would like to present to you the clickable, hi-fidelity prototype.

 

Test our Prototype

We used Marvel to create the prototype.

 

Future Steps

In order to continue to improve the experience for the Video Game Walkthrough consumer and the creator,  we identified a few more features to to add to the Twitch walkthrough manager:

  • Requests and comments management tool that would be useful for creators to manage those comments coming in from fans.
  • Interactive maps to the walkthrough page to help consumers link moments through another tool and by adding an index we hope to increase the speed and efficiency for the consumer to find the walkthrough she is searching for.

Thank you for reading.