Twitch is a live streaming app with over 140 million monthly active users as of February 2020. Twitch brings effort with the promotion of not only streamers, but the various other broadcasts that occur on its platform. These broadcasts range from esports tournaments, music concerts, conferences, and sport matches. Twitch has broadened their scope as a live-streaming platform for both new and familiar users can use.
I do not work for Twitch, and the views in this case study are strictly my own. As a budding designer, I acknowledge that my vision for this project is overly ambitious and at times reliant on assumptions of business goals. In a perfect world, I'd love to work alongside the Discord team with direct access to these resources to guide my work. Until then, this case study is meant to be an exploratory learning experience is a product I deeply admire.
I interviewed several twitch users with different familiarities to get their insight on what kinds of aspects of the platform they liked or didn’t and why. Many of the users mentioned the usability and pain points regarding following streamers or other portions related to chat. Some takeaways from these interviews was that although Twitch has its benefits, but users have issues with the current platform’s navigation for finding streams.
Twitch has an issue with what events and streams they would like to promote across its site. Sometimes when channels are on the font page, some streams noted to be a big event for the site but not featured onto the font page gets lost its navigation. New users to the site if heard about an event occurring on Twitch can put off by having them go through all the other livestreams. From here, I focused on creating a feature that would help Twitch hold its own way for promoting these kinds of streams.
These conversations led me to the following opportunities:
Currently, Twitch provides users with recommended streams based on streams they watch and promote streamers on the font page of Twitch. However, some of these recommended streams might not suit what the user might look for with their experience using Twitch.
I had set my proposed idea for an upcoming event feature.
This map provides how might users who are new or familiar with Twitch interacting with the current discovery page. Friends and social media sites regularly promote streams leading users to Twitch with no cues where to search. This map then integrates the additional feature of being able to find the event being live streamed on Twitch.
Going into the development of this feature, I became aware the issues of how to handle the feature coincide with the other tabs of the application in which if I want it in a similar style of promotion or be totally differently. I initially experimented with various solution ideas, but I had shifted its focus to being more like a timeline similar to apps like Instagram that displayed images of the events.
As I went into the development of the creating how I would like structure the upcoming streams functionality into the current framework of Twitch without overloading the user navigating the site. I originally set out by placing the upcoming streams as a section within the discovery page.
Moving on the Figma prototype, I used what drew from my sketches and current user interface as the reference for developing this prototype. One focus that I had set out was designing within Twitch’s design system and using it within the upcoming events feature. This was both a measure of understanding how the layout and implementation would occur on mobile and desktop. In designing for the desktop some aspects where changed to overall match Twitch’s user interface since it needs to fit a larger screen.
Then identifying my target audience to those who have different use cases with the Twitch application to get their input. After user tested my prototype with 5 Twitch users who have familiarity with the app. I interviewed them via Discord’s voice call in where they screen share their usability testing with the prototype and provided feedback.
They could explore the prototype to which they then gave their thoughts on how this feature will work and will go into the changes I make (major or minor) in the final design.
When exploring designs for different sections of the Upcoming feature and testing them with Twitch, users allowed me to understand more about what designs had to remain consistent within the design system. I explored different variations of the Upcoming feature, whether it would have an expanded event viewer. I chose a design that would always have the stream that is currently being streamed at top and the rest as a lineup below so that the user will always know what is currently happening.
Designing the Event Information page was simple for mobile, then became a matter that I had to face for the Desktop version because of the additional space that was created. Understand responsive design is the matter where not all designs will work with all screens and this page changed from the feedback. When redesigning this page, I added the rest of the Upcoming Streams lineup below so that users can navigate to the next stream in that lineup.
After the interview, some notes that I would remark on the current Twitch UI and prototype for my revision were:
1. Some expressed how the current Twitch interface is kind of confusing to navigate.
2. Some expressed that this feature will help new users see what twitch is promoting.
3. This feature is a great way for people to know the large events that is happening on Twitch.
Take a glimpse of what streams are in store for the day and know what is happen now.
Get to learn more about the stream and be able to know ahead of time what is to occur.
Finding what to watch can be troublesome find nowadays. Twitch offers a great way for people to find a variety of streams to watch and enjoy. Often it is difficult navigating across a site that had filled with content. I designed an Upcoming Events feature that helps the platform what is the highlighted streams people are most likely to be interested in and watch.
Twitch is an impressive site that is constantly growing and still some issues for people to get into long form content like watching a live stream. The platform itself feels overbearing to navigate to so when creating a feature for it was a challenge. I had to focus on the matter that its practicality would have to work on both its mobile and desktop versions. This was a great way to learn responsive design and understand Twitch’s branding from reading their Beyond Purple article to grasp how to integrate a feature within an established design system.
