New Feature for Twitch—Social Gaming Site
brief
About Twitch
Twitch is the world's leading social gaming site. It offers live streaming of video walkthroughs that allow users to watch and comment on people playing games. Users can search for these game walkthroughs by game or gaming channel.
Problem & Opportunity
To help Twitch increase customer engagement, I worked in a team of three to introduce timestamp and comment features that would allow users to easily upload and find useful video game walkthroughs and helpful moments in them.
My Role
We worked in a team of three each contributing to all aspects of the process. I conducted one-on-one interviews; developed personas; researched and analyzed competitors; generated ideas and concept maps; designed interfaces; and create and tested prototypes. Finally we presented our work as a group at the end. The tools we used we're Sketch, Marvel and Keynote.
ECOSYSTEM
We first reviewed Twitch in depth and looked at it alongside key competitors, including YouTube, IGN and GameFAQs. I then mapped the game walkthrough site landscape to understand where Twitch currently was in it.
USER RESEARCH
- Interviewed six casual and avid gamers, asking probing questions to better understand the ups and downs each user experiences with game walkthroughs.
- Visited a gaming bar to conduct a contextual enquiry and further talk to gamers about their walkthrough needs.
To learn more about the needs and experience of Twitch's users, we sent a screener survey to find both avid gamers who play games multiple times per week and casual gamers who play them less frequently, asking what types of video game content they used. From there, I:
“Video walkthroughs help me visualize and locate points on a map, but I hate when there are game spoilers.”
Key Findings
With our research we developed an affinity map, synthesizing our findings and concluded that gamers:
- Typically use Google and YouTube to find game walkthroughs;
- Use video walkthroughs to find items or learn tricks that are difficult to visualize, but dislike video plot spoilers;
- Have to scroll through lots of content to find a relevant moment to help them solve a problem; and
- Use text walkthroughs to guide them to exact moments in a game, but often find they are too dense.
Affinity map for game walkthrough consumers
Personas
We then developed two primary personas — one for "Devon," our primary consumer of walkthroughs and one for "Paddy," our representative walkthrough creator.
Journeys & Painpoints
With our personas to guide us, we developed user flows for steps walkthrough creators and users take to pursue goals. And then we constructed an experience analysis, which mapped out Devon's and Paddy's thoughts and feelings as they moved through those steps to achieve their respective goals.
- For Paddy, frustration arose when he wasn't able to upload easily searchable content & increase views.
- For Devon, his painpoints happened when he got stuck, searched for a walkthrough, watched it and felt disappointed that it wasn't exactly relevant.
idea generation
We generated a variety of ideas for solving our personas' pain points, and prioritized them according to a Must / Should / Could / Won't method. From there we focused on the following:
- Adding a new tagging feature in the upload process, so that Paddy could make his video easily findable on Twitch.
- Adding a new ‘timestamp’ feature that would allow Paddy to indicate where game objects, secrets, tricks were located.
- These links would allow users to skip video footage forward or backward to relevant topics.
- Adding a tickbox for creators to warn users of game spoilers.
INTERFACE EXPLORATION
In exploring and designing our solution, we focused on being consistent with the existing Twitch design, clutter-free and visually driven. We first developed paper screen sketches for Devon's and Paddy's journeys, each contributing visual ideas to how the search, tagging and time-stamping would look. Then we reduced the ideas to what we believed would be most viable for an initial paper prototype.
TESTING & VISUAL ITERATIONS
Prototypes & Wireframes
We tested our prototype asking users to pursue the goals of uploading, editing or finding a walkthrough. We then incorporated feedback into wireframes we created in Sketch and further tested them, iterating the designs until we had high-fidelity versions of the new features— now aligned with Twitch's branding.
Key changes based on testing feedback:
- I added a "comment" box to allow creator to provide short explanations to aid walkthrough viewer
- Added missing “walkthroughs” button on the homepage
- Deleted the confusing “advanced edit” button
- Moved “spoiler alert” button to the “comment” feature on timestamp
Sketch of timestamp / upload feature
Low-fi timestamp with MY added "comment" box
Hi-fi with revised comment box, "Advanced Edit" removed and "Publish" button added
proposed solution
Presenting & Next Steps
Our final presentation of our prototype took our audience on a lighthearted and engaging journey through our process and the solution we developed. As next steps for further developing the solution, we proposed creating an “advanced video editing” feature to enable gamers to add text and transitions. We also made suggested changes to Twitch’s global navigation to make the information architecture more intuitive for finding videos.
What We Learned
We were proud of our work and learned as a team that it’s vital to:
- Develop and agree upon a strong project summary and project plan that you refer to throughout the process
- Communicate openly so we can ensure we stay on the same page
- Respect and listen to each other’s opinions and ideas — a good idea can become even stronger through collaboration!