TWITCH
Making Edits on Twitch's UI
View the high-fidelity, clickable prototype here.
Overview
Twitch is an online, web streaming platform for content creator, professional gamers, and viewers. Majority of the platform is used by avid gamers and fans to watch and stream everyday gameplay, tournaments, or their favorite professional gamer. Since COVID-19, with more people being at home, content creators has joined the scene to streaming cooking, podcasts, educational workshops, workouts, or even the stock market.
During this past year, I found Twitch and began reminiscing as I watched players play my childhood games from Nintendo Mario 64 or connected with new friends online through Valorant and Among Us. As I was watching more, I had friends that started to pursue their passion through the Twitch platform but had no idea where to start, from designing the stream layout or navigating the backend.
*Disclaimer: I am not affiliated with Twitch in any capacity.
Tools Used:
Figma, Google Surveys, Zoom, Slack, word-of-mouth
Deliverables:
Competitive Analysis Report
Personas
Customer Journey Mapping
Sitemap
Empathy Map
Wireframe
Low-Fidelity Clickable Prototype
User Testing Interview
High-Fidelity Clickable Prototype
Problem
Through usability testing, I found that most newly Twitch streamers had trouble navigating the features Twitch had to offer. In addition, it took them about 1-3 months to become familiar with editing as their channel grew bigger.
Audience
Twitch's platform consists of 2.9 million concurrent average viewers & 9.7 million creators streaming each month. With the majority of users being a streamer, my focus is to better the experience for Affiliate Streamers and to close the gap and skill range of Affiliate Streamers to reach their goal of Partner. For most typical Streamers that have not reached Affiliate, most have a trend of not utilizing any Twitch function due to their small audience while Parter Streamers usually outsource/hire a stream manager/designer to set up their channel.
Solution
Based on my research findings, I redesigned the site map and added an Onboarding process and validated them further with usability testing. We wanted to create an inclusive and simple onboarding process for new and tenured streamers.
Process
Twitch has an overwhelming amount of features in order to cater the various types of streams and experience levels of streamers. Below are my research and findings.
Research
I compared Twitch online's streaming platform with other platforms that allowed creators to stream live. Below are my findings.
Information Architecture
From the user survey, I determined 3 main MVPs users did to first start up their stream.
Ideation
Before going into ideation, I had to figure out what Twitch's current site map was in order to determine the bottleneck of their process. After finding that bottleneck, I was able to redesign the sitemap to optimize the quickest path for the user.
Interview
Follow along the clickable prototype as our users did during their user testing.
Brand Development
With Twitch already having a strong brand with their glitch and word mark, we decided to focus on color to strengthen the redesign. Twitch has a variety of secondary colors that they only utilize for their viewers and not streamers.
Final Thoughts
Twitch is an overall great streaming platform for content creators for all sorts of topics. It has a niche in creating a platform for the content creator to interact with the community live through various interactions that none of their competitors has yet discovered or implemented. Being able to leverage this niche, Twitch has to continue developing its backend user experience for content creators instead of mainly focusing on the front end for its viewers.
If you’ve got a favorite game, favorite meme, or a strong opinion on how to spell favourite.
You’re already one of us.