This case study was done during a quarter long project course at University of California, Irvine, where I studied human computer interaction.
What is Twitch?
Twitch is a live streaming platform primarily geared towards video game content. Since its launch in 2011, it has quickly become the top site for gamers to come together and enjoy live gameplay. Twitch now has over 3.8 million streamers broadcasting monthly, and over 140 million active monthly users. In addition to supporting livestreams, Twitch also functions as a social media platform, including options to follow other users, add them as friends, and send private messages.
The Problem
Being an avid gamer, I often browse Twitch looking for video game content, either to watch and improve my own gameplay, or just for entertainment purposes. When I have a specific streamer or category in mind, finding the right stream usually takes a couple clicks. However, browsing for something new and different often becomes a frustrating process. Many of my team members also experienced the same pain points when using Twitch, which ultimately led to this redesign project.
As the popularity of Twitch increases, it attracts an audience beyond those interested in gaming. New users are coming to Twitch to stream cooking, travel, music, and much more. However, the language and navigation of the website has not been improved to align with user expectations.
Role: 1 in a team of 4 UI/UX engineers
Project Duration: March 2020 — June 2020 (~3 months)
End Result: Axure RP 9 Prototype (here)
The Process
- Competitive analysis
- Research about direct and indirect competitors
- Compare and contrast the products - User research
- Define the target population (age, interests, gender, etc.) through research of the Twitch user base
- Send out a survey for a better understanding of the target population in a greater scope
- Conduct 6 interviews to better understand user motivations and experiences
- Analyze data from Twitch analytics, interviews, and survey to curate relevant personas - UX Testing
- Perform remote user testing, using a series of set tasks for each participant
- Inspect the interface using heuristic evaluation protocol to further determine usability
( we used Jakob Nielsen’s “10 Usability Heuristics for User Interface Design”)
- Review the results from user testing and evaluation to identify important usability issues - Redesign
- List out redesign targets
- Form a style guide to maintain consistency with Twitch’s current color scheme and font styles
- Create sketches individually, then come together as a group to form a consensus on the desired features
- Develop low and mid-fidelity prototypes
Competitive Analysis
Prior to redesign, competitive analysis was performed to increase our understanding of Twitch as a service, as well as how it compares to other livestreaming services on the market. Since Twitch focuses primarily on gaming, I found that there were few direct competitors operating in the same niche — and even if they did, they were smaller and less popular. Nonetheless, each service had their own unique features and something new was learned from each one.
Direct Competitors: Mixer, Facebook Gaming
Indirect Competitors: WatchESPN, LoL Esports
Like Twitch, Mixer and Facebook Gaming both focus on video game streams from all users. They offer their own unique edges, like lower latency streams for Mixer and better advertising for Facebook Gaming. WatchESPN and LoL Esports have a slightly different audience. WatchESPN streams traditional sports, and LoL Esports is even more niche with streams of professional League of Legends competitions only.
UX Research
Defining the Target Population
According to Statista, 65% of Twitch users are male, and 35% are female. Most of its user base is age 14–24 (making up 41% of its user base), followed by 25–34 (32%). This is in line with my group’s expectations, as these are the age groups that grew up during the time of initial/increased video game popularity. Video games, like many other sports, are also a male dominated industry (but this is changing rapidly). My group also took into consideration that users of Twitch also have, at minimum, a basic understanding of basic computer functions and navigating websites. This statistical information is pertinent to our research as it allowed us to capture the right audience.
Surveying Users
In addition to demographics, the survey intended to capture how, when, and what users watched on Twitch (or similar livestreaming platforms). Questions ranged from how often they watched livestreams to which methods they used to search for streams and how often they used specific features. This survey was written in Google Forms and all questions were marked optional, so respondents could pick and choose which questions they preferred to answer. Here are some of the findings:
From the 53 responses on our survey, we were able to closely match the demographics of the Twitch user base. Of our responses, we received 71.5% male identifying respondents and 24.5% female identifying respondents. We also found that users browsed the website in similar ways. Most (80.8%) users browse the streamers they “follow” to find streams to watch, followed by using the “recommendations” tab (7.7%) and browsing based on game category (5.8%). We also left a section for users to leave any additional thoughts an opinions. These are some direct quotes:
“Subscriptions can be kind of hard to navigate to. Also getting to your streamer profile feels very disconnected from the rest of the platform.”
“It needs to reevaluate specific categories due to the growing popularity of non gaming categories such as, Music and Performance Arts. It should at least have a subcategory like DJ, Piano, Singing, Lofi, etc.”
“Easier discover-ability on twitch would be nice for smaller streamers.”
Conducting Interviews
I conducted 2 of the 6 interviews for our user research portion. It was important for me to interview people who already use Twitch regularly, as I was interested in their opinions about the features as a long time user. Each interview took around 30–45 minutes and was conducted through Zoom. The questions I asked revolved around the context in which they use Twitch, how they prefer to find content to watch, and how interactive they are with others (streamers, other viewers, etc.) on the platform. Here are some of the questions I asked and some of the responses I received:
What were your first impressions of the Twitch website?
My first impression was that it’s really messy. You see the front page and you immediately want to go to “Browse” to find something familiar to you, cause the front page has everything. But yeah, I remember thinking “Wow, this is so messy. I need to find League right now, because it’s the only thing I understand.”
Is that still how you find videos to watch?
Since I’ve become so connected through smaller communities I don’t go looking for new channels by any means. I watch who I’m already following, and beyond that I don’t search for specific types of games or streamers.
Personas
The results of the surveys and interviews suggested that many different kinds of users use Twitch. From our collected data, I curated three personas that reflected these user differences so my group could better understand each of the user types’ individual needs.
Two of the personas represents users of Twitch that leaned on opposite ends of the user interaction spectrum. One of them reflects users who want a simple, no frills stream watching experience. The other represents a user who is highly interactive with other users, and stays to watch streams to find a sense of community.
The last persona represents a newer user who needs more help finding out what content they prefer. This last persona is important to highlight, as they may have navigational needs that are unique from the others.
UX Evaluation
User Testing
I led 1 of the 5 remote user tests done by my group. Each user test was done remotely via Zoom screen share and lasted around 45 minutes. The participants had varying levels of familiarity with Twitch, some using it daily, some having never used it at all. Each of these participants had the same set of tasks to perform on the website. I timed the amount of time it took for the participant to perform each task, and at the end, my group’s collective findings were compared in the end to find the most “complex” tasks.
Confusion in User Relationship
One of the tasks we asked all participants to do is to subscribe to a streamer. During this task, I found that there we found that was confusion when it came to differentiating between the terms “follow” and “subscribe”. This was especially obvious for the participant I observed, as they were new to Twitch. I watched as they hesitated between the two buttons when reaching the correct landing screen.
It is not uncommon for social platforms to allow users to make connections by “following” each other (think: Instagram or Twitter). It is also not uncommon to have options such as “subscribe” (YouTube, for example), but most platforms do not use both. They mean similar things: agreeing to sign on to some sort of content from a specific user or source. On Twitch, they have different meanings, one meaning to “follow” a creator’s content, the other being a financial transaction as an indication of streamer support.
The downfall of this terminology is not only the similarity in word choice, but also the fact that the interface did little to give more context to the user before they selected one option or the other.
Confusion in Esports Tab Navigation
Esports is known as the sport of video game competitions. It is different from everyday game play in the sense that it is often professional, organized, and overseen by a managing entity (often the company that created the game). Like any other sport, these games are usually attended by a live audience, but are also streamed online.
Recently, Twitch has changed their website layout by bringing “Esports” to the fixed navigation bar on the home screen. One of the tasks we asked participants to perform is to find a professional streamer via this tab. However, many participants had trouble finding this page. This was an interesting find, since the button was one of the main categories featured on the top of the page.
Another interesting issue was the amount of time it took the participants to find the pro streamer after landing on the Esports page. There is a lot of content on this page, and the only way to get to a certain section is to keep scrolling. They really weren’t joking:
This overload of information made it difficult for the participants to select a game, scroll through the live matches and the highlights, and then finally reach the bottom to select a pro streamer.
Heuristic Evaluation
After user testing, I performed a heuristic evaluation on the Twitch.tv website. Each member of my team did this process separately for for additional, more robust testing of the interface. We wanted to see how the Twitch website held up against a set of interface guidelines. For this portion, we used Jakob Nielsen’s “10 Usability Heuristics for User Interface Design”.
One of the main issues I identified in my heuristic evaluation was that some elements did not align with common user expectations, violating the “consistency and standards” guideline. It is important for websites to follow common practices as it is unrealistic to expect users to learn a new, unintuitive design.
Firstly, there is this fixed (but collapsible) sidebar on the Twitch website. It features the channels the user follows, recommended channels, and, (not visible in image) an online friends section at the bottom. It also has this search bar at the very bottom of the website.
There is a lack of consistency with this format, as friends is tacked onto the bottom of this list with no correlation with the other two. Having a friends search bar at the very bottom of a webpage without any indication that this sidebar has anything to do with the user’s friends list also also suggests a lack of consistency.
Secondly, the three ellipsis icon on the fixed navigation header of the website is also confusing. The three dots, sometimes called the “more options” icon, is similar to a hamburger icon as both suggest that there are more actions under this button. However, that is about all the information this button is able to convey. Given the context that it is besides two very different stream categories Twitch decided to showcase (Esports and Music), this icon might suggest that there are more types of streams to be discovered here.
Instead, Twitch presents us with this:
This list contains a hodgepodge of information, including “About”, “Gift Card”, and also all its legal pages. Not to mention, “Music on Twitch” is a category in the list when “Music” is literally a button besides the three ellipse icon.
These additional resources could use better organization into different categories. It would also be more consistent with other websites to put this information on the footer of the website where users would expect to find additional resources and contact information.
Redesign
Redesign Targets
- Navigation bar
- User relationship terminology
- “More options” button
Style Guide
The colors, feel, and aesthetic we wanted to keep in mind for the redesign:
Sketches: Individual and Consensus
First, I sketched out some possible ideas for how we could make improvements to the redesign targets. For each target, I illustrated three different possible ways to improve its design.
After meeting my group and discussing the commonalities and differences in our ideas, I drew up a consensus sketch — reflecting our agreed upon redesign.
We decided to remove Esports and Music from the navigation bar as they were discoverable via “Browse” anyways. “Browse” and “Channels” were kept as the two main categories as they were primarily how users looked for content — either by category, stream type (which they’d access through “Browse”), or by a specific streamer (which they can discover through “Channels” in the redesign”).
Low Fidelity Wireframe
After making the sketches, another group member and I worked together on Zoom (modern times!) to create the low fidelity prototype on Balsamiq. Labels, links, buttons, and images showed in further detail which aspects of the redesign would be interactive.
Mid Fidelity Wireframe / Prototype
The mid-fidelity wireframe is done on Axure RP 9, and at this stage the prototype begins to look more like a functioning website. Images and animations are included to simulate the working build, and the colors are more similar to the actual Twitch interface.
Click here to view the full prototype we created.
One of the main decisions in the redesign is to remove the carousel on the home screen, as not many users used it. The content it currently displays is a random list of featured content. It is not only unpopular, but also bothersome to many, as the video automatically plays loudly upon entering the website. “Flattening” this carousel in the redesign maintains its essence of featuring potentially interesting small streamers, but also allows users to look through all featured streams at one glance with no additional actions.
The sidebar with followed channels on the side is also redesigned, to show the three types of relationships users may have on the platform: subscribing, following, and adding friends. This allows users to find those they are connected to easily, and see who is online.
Additionally, the “about” information and legal pages have been placed in the footer to better match user expectations of where to find additional resources.
Conclusion
What I Learned
This project is the first full length UI/UX project I worked on. I was able to learn the process of redesign through this experience from scratch, since all that we started with was a brainstorming session and a streaming platform we knew we were passionate about.
- A lot of thought goes into UX research — not just what to ask users, but how to ask, when to ask, and what can be learned from their answers
This was my first time conducting UX research, and I am glad this project allowed me to explore many different methods of research. This redesign project really pushed me to explore my group’s motivations for conducting surveys, interviews, and user tests, and as a result, we were able to learn to frame the questions we ask with intention. I put thought into the questions I asked my interviewees and when I asked them, and made sure I built upon their points with more relevant questions. I also learned the importance of how to word questions in interviews and surveys, as it is extremely important to make the process flow smoothly without influencing their answers. These minor details can determine whether an adequate level of trust is built with the interviewee, and whether their responses will be meaningful to your research.
2. Sometimes, the circumstances change, and then so does your design
In the midst of redesigning Twitch, something really unexpected happened: Twitch changed the layout on their website.
Shown above is how the top bar used to look, and below is how it was changed during our project. We were really unprepared for this change, as the navigation bar was one of our main targets. Still, we evaluated the new layout and worked around it. In the end, it presented a good opportunity to task our users with navigating the new layout, and see whether the new design was working well. This was also where we came up with the idea to ask users to explore the Esports tab.
3. Documenting the process is VERY useful
Something that was beneficial to this process was documenting everything on the project. It made it much easier for me to collect visual and textual notes on what I contributed to the redesign and add it for this case study, but more importantly, having references during this whole process made things simpler. Every time my group wanted to look back on an idea or a sketch, we had all our information, right there, in a single drive. Having all the documentation also allowed us to easily see the improvements we made with each iteration, and how each one was different from the next.
Next Steps
The next step of this project would be to create a high fidelity prototype. The high fidelity prototype will take on more aesthetic elements from the style guide, allowing the redesign to look and feel more similar to the Twitch.tv website. Doing this would allow us to do more useful comparisons of the before and after, and determine the effectiveness of our redesign.
For those that stayed to the end, thank you for reading! I appreciate any feedback or advice for improvement.
