Twitch

User Experience
High-Fidelity prototyping
CLIENT

UXDI Project

TEAM MEMBERS

Leo Ah Kun
Daise Roche
Louise Newton
Dan Thompson

SKILLS

User Experience, High-Fidelity Prototyping

My ROLE

User Interviews, Contextual Inquiry, Design Studio, Paper Prototype, Digital Wireframes, High-Fidelity Prototype

PROJECt DURATION

2 weeks

CASE STUDY

The Brief

To increase Twitch's audience by designing a method for users to upload walkthrough videos, allowing gamers to share their tips and tricks with one another and make a profit. Twitch is a live game streaming service which allows gamers to stream and consume gaming video content. 

The Solution

The main features of our design included

  • Combining text and video walkthroughs by synchronising content
  • Designing the interface for creating this synchronised walkthrough
  • Synchronising map locations with video

Main Challenges

We had 2 main challenges

  • Finding walkthrough creators
  • Designing the UI to create the walkthrough content we envisioned

Process Highlights

Contextual inquiry while exploring the world of hardcore gamers. 

Realising digital wireframe does not show as much information as paper prototypes.

User Research and Discovery

Surveys 

Our research began with designing a survey and sending it out to as many people as possible. 

Competitor Analysis 

For our competitor analysis, we researched competitors that hosted walkthrough videos and walkthrough content. The main competitors in these areas include Youtube, IGN and GameFAQ.

Youtube allows users to easily upload video content and includes simple annotation features. IGN and GameFAQ include extensive walkthroughs, guides, tips and tricks. These are wiki based and also include videos hosted on third-party sites such as Youtube.

Contextual Inquiry and Interviews

We wanted to find out further details on what participants actually did when they got stuck in a game, what motivated current content creators and why others did not feel the need to create gaming content. We found interview participants by visiting Meltdown, a gaming bar and contacting respondents to our survey.

From our interviews, we identified that there is a need for both text and video walkthroughs. Generally it was dependent on the type of game and the type of gamer. For non-story based games, video walkthroughs were generally the ideal means of content consumption. For story based games, gamers usually prefer to read text walkthroughs as it is quicker to find where they are, and avoid spoilers. Many participants mentioned that they want to experience the game while playing rather than seeing it in a video. If they really can not figure out what to do from the text, using a video is their next resort. Casual gamers, however did not seem to care that much about spoilers and just wanted to know how to progress on with the game, so watching for them a video was the simplest solution.

For the recreational content creators, the reason for uploading content was mainly for sharing knowledge or interesting things they had created in the game. For professional content creators, the reason was mainly about helping build their community/followers and creating better content than their competitors. This results in more views and thus more money being made.

Design

Personas 

To start our design we needed personas to focus our design decisions around. Personas are fictional people who are represent a large group of people  summarising their goals and needs. Below are our 2 main personas we focused on.

Alex - Professional Gamer

“My drive is to contribute to the community, as long as I'm winning!”
Bio
  • Male
  • 21 Years Old
  • Single
  • Owns gaming PC and PS4
Behaviour
  • Creating content for the online community
  • Attending meet-ups and tournaments
Motivations
  • Building a reputation for expertise
  • Standing out from the competition
  • Growing his follower-base
Pain Points
  • Taking too long to record and edit videos

Richard - Recreational Gamer

“Most people I know play games. Even my wife plays Angry Birds.”
Bio
  • Male
  • 32 years old
  • Media Marketing Manager
  • Own iPhone, iPad and Xbox One
Behaviour
  • Playing games on iPhone whilst on train
  • Plays alongside partner, family and friends
  • Work hard but do not make much money
Motivations
  • Find gaming relaxing
  • Likes to complete a game story
Pain Points
  • Getting stuck at challenging stages
  • Not having time to play whole games

Design Studio

The design process started with holding a Design Studio. This is where I get developers, managers, marketing, customers and other stakeholders together to design a solution for a particular task. People are grouped into small teams. Each team gets 5 minutes to design a solution. Each person gets to talk about their design and get critique. This process is repeated to refine the ideas. This method lets me get a lot of ideas quickly. From this method, I gathered many ideas around how the walkthrough should be designed. Interesting ideas that came up were

PROTOTYPE

Paper Prototype

A feature analysis was compiled to determine which features should be in our minimum viable product (MVP). With these features in mind, we developed some paper wireframes which we tested with users. From our tests, testers did not notice the timeline and markers we added. Comments were also not in the correct place, and testers noted that some information seemed duplicated. After a couple of iterations, we were ready to move to digital wireframes. The digital wireframes added additional detail to clarify certain aspects of the design. These again needed a few iterations to iron out clarifications, exact sizes and placements of interface components.

Paper Prototype

Digital Wireframe

From our clickable digital prototype, we found a major issue which was not immediately obvious from our paper prototypes. With our paper prototypes, the entire interface was shown all at once. In the digital clickable prototype, users had to scroll to different parts of page. This affected the video and text walkthrough content being in sync. With our layout, the video took up most of the screen to be visible and text content would only be seen later on when scrolling down.

Our initial design to fix this problem was to let the video decrease in size and float to the top right as you scrolled down. However, when testing this, it was hard to convey or confirm this idea without building an elaborate prototype.

View PRototype
Final Prototype

High-Fidelity Prototype

This led to us making a major layout change by putting video and text content next to each other. With this came many other mockups and tests such as putting video on the right and text on the left. However, many testers felt that the video looked more “correct” on the left. Other changes we made included

  • Synchronising text and video content
  • Being able to comment on specific parts of a walkthrough
  • Being able to highlight areas where many people get stuck
  • Matching map locations with places in videos
  • Having a walkthrough timeline which could be used to navigate through various points in the game

For our creation process design, there were minimal changes made as this was not something many of our users were familiar with. The found the interface usable with minor things needing clarification and interface element position changes.

Conclusion

Summary

To demonstrate our concept in a more high fidelity mockup, you can find it in our presentation here. We designed an addition to the existing Twitch website which allows content creators to create elaborate walkthroughs. These walkthroughs make it easier for gamers to find specific areas in a game where they get stuck and can quickly get on and enjoy their game.

Next Steps

For future work, we would like to test various video sizes and layouts as a lot of casual gamers preferred larger video on the screen.

Many of our participants enjoyed being able to comment on a specific part of a walkthrough, but we could not figure out an simple way to do that in the time of this project. We would like to investigate this further.

From competitor analysis, most walkthrough content is wiki based which allows all gamers to contribute to the walkthrough. We would like to investigate whether this is a better approach to create content rich walkthroughs quickly however this would add complication to the existing monetisation model where creators are rewarded for the amount of views of the content.

OTHER PROJECTS

Check Out More Projects

Sorry as a service
Helping companies turn customer mistakes into legendary experiences
Third Space Learning
Redesigning the Third Space website
Twitch
Reinventing the walkthrough
BHS
Inspiration for home decorators
Mates
Event planning for friends
SUP
Connecting with people nearby
LUNCH
Find delicious food nearby
Sneakers
The complete sneakers guide