Twitch Project: A UX Design Case Study
Team Members : Nimisha, Kirsty, Ben
Time : 2 weeks (4–15 April)
Methods : Contextual Analysis, User Interviews, Survey, Competitor Analysis, Affinity Mapping, Task Analysis, User Journeys, Personas, User Stories, User Scenarios, Design Studio, Sketching, Paper Prototyping, Usability Tests
Tools : Omnigraffle, Keynote, Google Suite, Invision, Skype.
Twitch is an extremely popular website with over 100 million visitors per month that provides a platform for passionate computer gamers to watch streams of others’ game play. We were required to enhance community engagement by designing a useful and entertaining walkthrough feature that increases the traffic and revenue for the creators of the content and the site. We were also asked to provide a responsive website solution.
Understand the current process of uploading walkthroughs and finding walkthroughs from the user perspective.
Identify pain points/ opportunities in the current processes and what the users need in a walkthrough or platform.
Understand who the users would be and how to help them.
We immediately set about investigating the online gaming world with a view to understanding the service that Twitch currently provides, an initial identification of competitors, game developer websites and the concept of what makes a walkthrough video.
We then decided that we needed to know more about the habits and behaviours of the gaming community so researched where they might gather. This led us to interview them in the 2 main gaming bars in London (Loading and Meltdown). We also sought to draw from as wide a pool as possible for information about how gamers went about uploading and searching for walkthroughs by conducting a survey (https://goo.gl/Ku6r4M) which we posted on social media. We received 46 responses. The key requirements were to find uploaders of walkthrough videos and gamers who had ever searched for these videos.
The interview was prepared with a loose structure to allow conversations to develop as naturally as possible. Participants were asked about their searching and uploading habits for walkthroughs and what they enjoyed or didn’t enjoy about these processes, also where they went for the videos and what the experience was like.
The main things we learned from our interviews and contextual analysis were that there was some discrepancy between gamers as to what a ‘walkthrough was’. Some referred to a practice of posting text explanations of how to play games/ find easter eggs etc. , others saw them as being solely video. We also learned that sometimes people were initially not admitting to watching walkthroughs but would later tell us they did. For some the process felt like cheating and could be seen as breaking the sense of challenge and achievement so many felt while playing video games.
For this reason and because some videos were very long (sometimes over and hour), users wanted to be able to find specific helpful points in the videos without unnecessary and cumbersome scrubbing.
We decided to look further into the market that Twitch was in and looked at things like which websites provided tips, which provided walkthroughs and where people shared their successes. Our general conclusion was that it was a great opportunity for Twitch as many users went to YouTube for both uploading and finding walkthroughs but that the site was saturated often with either inaccurately labelled, overly-long, or troll videos that users had to scrub through. We also found that although uploaders used YouTube, the revenue from this wasn’t significant until they hit very large numbers of viewers. Using YouTube and other sites for eSports meant that both types of users had a disjointed experience.
We collated all our observations and answers to our questions onto Post-It notes and into an Affinity Map in order to draw together common themes.
These then formed the backbones of three Personas that represented key goals and pain-points of all the users we had spoken to:
Matt The Pro (uploader) — pain point: presently has to use two sites for different styles of content
Kevin The Team Player (viewer) — pain point: overwhelmed by no. of videos to browse through.
Sam The Problem Solver (viewer) — pain point: hates seeing spoilers.
We broke down the steps users would take in our two flows (uploading and searching) to pinpoint specific actions any solution would need to cater for and allow ourselves to design the simplest process possible for them.
We mapped out User Journeys for both Uploaders then Walkthrough Searchers and find the main points for addressing pain points and opportunities.
How Can We Help Them — Our Design Hypothesis
We saw that there was a clear opportunity to help our Personas by capitalising on Twitch’s passionate and dedicated user base.
“By creating a service that enables players like Matt to upload walkthroughs with content specific information we will enable players like Kevin and Sam to get the help they really need and in turn boost Matt’s following.”
We started with a Feature Prioritisation exercise to reduce to the key tasks that our 3 Personas would need for a minimum viable product and reduced further to find our 3 key features for our first release.
Extra Written Content (descriptions of the video content) for the clips.
These addressed Sam and Kevin’s need to find specific parts of uploads to save time and avoid spoilers and thus would build Matt’s following and revenue.
We moved into some preliminary sketches of paper wireframes to how these features could be used on screen and used a method that allowed independent thought to flourish. All three of us working on solving the design separately and then coming together to discuss the pros and cons to build the best of all of them, again independently with another time-boxed period for group review.
We soon realised that the need for time-stamping could be clearer than the very rare use on YouTube by having a strip alongside the video with time-stamps, chapters and extra written content. Uploading could work by keeping the common design patterns from YouTube and Vimeo but adding pre-defined keywords and time-stamping.
Sketching and Prototyping
We used our sketches from design studio — tidied up — to run a pilot test and ironed out a couple of basic issues. We then transferred them to digital.
As soon as we had our 3 key screens designed in terms of layout and functionality in Omnigraffle we moved to testing with users. It was clear immediately that the list of items in our chapters/markers list was not clear enough as a guide. This was adapted to include chapter headings that were repeated in the scrubbing bar underneath the video.
We also found that Twitch’s present site map used Browse as a secondary way to lead users to non-promoted content so added Walkthroughs to the main landing page’s tile design.
We then added and extra layer of fidelity to our wireframe and this immediately added the possibility of some usability solutions. It became clearer when we used colour as to the functionality of our buttons and how they tied up with the markers on the scrubbing bar.
The results from several rounds of testing were very encouraging. Niki, a serious role-playing gamer said “I would definitely use this shortcut instead of forwarding for the video”. Users found the uploading process very simple and liked the idea of clicking on pre-defined keywords applicable to the game rather than a more manual approach.
We were confident that we had created something that would aid Matt our uploader gain better revenue by tapping into Twitch’s dedicated user base with content-specific labelling, time-stamping and extra text content. In turn giving easy ways to find videos that help users like Sam and Kevin avoid spoilers and save time when using a service that sometimes felt analogous to the joy and challenge of video gaming.
Explore further monetisation design for uploads. How uploaders can be encouraged to upload their valuable and marketable videos.
Explore the popularity of comedy walkthroughs (e.g. Skippy). These are entertaining videos where someone doesn’t take the game too seriously or has amusing comments to make. They can be extremely popular.
Further testing for perception of ‘chapters’ and ‘time-stamps’. What did users feel works best. Could chapters be added automatically?