Role: UX Designer, member of Agile team of 3
Duration: Two weeks
Tools used: Pen & paper, Omnigraffle, Sketch, Photoshop, Illustrator Invision
Twitch is the largest video game streaming platform. Every day hundrends of thousands of gamers visit the site and watch other gamers play live, either for fun or to get help and improve their skills in a game.
This was a project for General Assembly's UXDi course. Me and my team received a brief that asked us to introduce a dedicated walkthrough feature to Twitch.
We designed a walkthrough system that serves both walkthrough viewer's and uploader's needs while also building a stronger community around each game on Twitch.
For this project we followed the Double Diamond method which is consisted of the following four phases:
Identify, research and understand the initial problem
Limit and define a clear problem to be solved
Focus on and develop a solution
Evaluate, ready the concept for production and launch
In the discovery phase we researched why, how and where were people watching gameplay videos online, in order to better understand Twitch's current and potential users' needs and preferences. We conducted 13 interviews and contextual inquiries in addition to going to gaming bars and doing guerilla research. We also conducted an in-depth competitive analysis in order to identify a gap in the market and thus were lied the opportunity for Twitch.
In the Define phase we synthesized all of our insights from the research in useful tools like user personas, and user journeys that would allow us to better understand our users and also make sure we are keeping them in mind in every step of the design process. We found out that Twitch's users fall into two main categories: Viewers (users who consume gameplay videos) and Uploaders (users who create gameplay videos). A major common pain point between both types of users was the fact that no single platform provided with all the functionality they needed which was: Video, Text and Community Interaction. We concluded in the following two hypothesis:
1. By creating an annotated video-game walkthrough feature, we will allow viewers to quickly find the help they need without having to leave Twitch.
2. By curating all the video-walkthroughs in a “walkthrough hub” tailored to each game, we will build a stronger community around each game. We believe this will increase engagement and encourage more uploading.
We started the Develop phase by conducting a team-brainstorming session during which we rapid prototyped
ideas based on the main features we had previously decided that we are going to include on the site. Based on these ideas we began forming the interaction design and information architecture of our walkthrough feature by designing user flows and the site map. We then developed our designs into paper prototypes which we tested
with users, and iterated based on their feedback. After the first iteration we elevated our designs to wireframes and kept testing and iterating until we saw that we fully met the needs of the users.
At the end of the two weeks sprint we presented our proposal and delivered a design specification document which included our research, annotated versions of our design iterations, information architecture, and a high-fidelity clickable prototype in Invision. We received a lot of positive feedback from our testing. Most viewers felt that our annotated Walkthrough feature and Walkthrough hub page would provide them with all the functionality they needed when looking for help online (video + text) and that in addition to the community interaction that Twitch offers would eliminate their need of using multiple websites to complete the experience.
Latest Clickable Prototype
The prototype we delivered was both for the flow of the viewer and the flow of the uploader. Our solution took into account Twitch's existing Information Architecture, Interaction and Visual Design in order to feel part of the ecosystem and not alienate the users. The following prototype is for the desktop version of Twitch.VIEW PROTOTYPE