Find the streamers you want to watch
NEW Twitch Clips is a speculative rethinking of how Twitch Clips are watched on mobile devices taking design cues from popular short video apps like TikTok, YouTube Shorts, and Meta Reels. Vertical video apps have conquered the mobile video space and for good reason. Their ability to showcase endless videos for you, UI/UX that perfectly matches the cadence of modern all-edge displays, and their intuitive shareability make these platforms king. In this case study, I’ll be tackling these concepts, figuring out what works with modern vertical video apps, and applying this to Twitch Clips.
Rethinking an existing system is difficult. You don't want to break the design systems in place but at the same time, you want to redo so much of the system. Respecting the design language is already tough. Now on top of that, you have to try and make a horizontal video work vertically. Twitch has some pretty complex streams where just cropping won't be enough.
This was a solo project. My roles included project management, UX research, analysis, strategy, ideation, prototyping and testing.
User surveys, competitive analysis, user flows, user stories, wireframing, prototyping, and usability testing.
The approach is simple. Take a look at problems that Twitch currently has and use user-backed data to formulate a solution. The problems don't have to be related to Twitch Clips in their current state. They can be other problems that NEW Twitch Clips can solve.
There are 3 main pain points I wanted to focus on in this case study.
Creators are the lifeblood of Twitch. If there are no creators, Twitch has nothing to show. This is a quote from the Colin & Samir Podcast where they interview ex Twitch Streamer Ludwig. Ludwig is infamous for his iconic subathons (subathon is a type of live stream where every time a streamer receives a subscription—US$5 donations from viewers—more time is added to a descending timer. Once the timer reaches zero, the stream ends). Before leaving the platform he had the most subs in history. If anyone knows how Twitch works, it's this guy.
Samir: “How does growth happen on twitch? Do viewers just watch it and share it with other people? Is there trending? Like how do you grow?”
Ludwig: “It doesn't. You don't grow. That's not how it works. What you do is go on to another platform. Then you bring them to Twitch because of the way Twitch is categorized by most viewed. This means that only the people with the most views are gonna get any sort of traction and more viewers. So, if you have four viewers in the Valoran section, it hurts to scroll through and find you. So, you can't grow on twitch.”
Ludwig
3.5 million followers
Ex Twitch Streamer
Colin and Samir Podcast
Twitch is nothing without its creators and creators are nothing without their viewers. And viewers want a feed of short clips to get highlights of the previous stream. In a user survey, I sent out one of the questions "Why do you watch clips of Twitch?" More than 50% of people said it was to get highlights of a previous stream. And on Twitch there is no way to watch these clips in a feed like most other video apps. Clips as a category are buried in the current UI, and they are all separated from each other. You can watch clips of a category or a content creator but not both.
As a newbie to Twitch, it can be tough. You don't know who to watch and to find out you have to watch hours of a stream. You can waste a lot of hours watching a c retail streamer to realize maybe their content isn't for you after dedicating a couple of hours that you can't get back. In the same user survey I talked about in the previous section, people expressed that they watch short-form content of streamers on other platforms. The problem is that when they discover these streamers on those platforms, they don't take the initiative to watch a stream. Furthermore, people stated how watching clips on Twitch "just felt right" but weren't able to articulate why. A picture is forming and it's crystal clear. People want to discover Twitch Streamers on the platform and they'd be able to do that through some sort of short-form video feed.
The formulation of these pain points came from a user survey and a competitive analysis. The survey consisted of 23 participants who use Twitch and the competitive analysis compares all the creator-driven content platforms that have short-form content. You can click on these images to enlarge them.
For this project I created 3 archetypes to further understand the users needs.
Behaviours: Time-poor has a strict streaming schedule and is a night owl.
Goals + Motivations: Wants to grow on Twitch and is motivated by outdoing their last stream.
Needs: Needs a way to grow organically on the platform. Doesn't want to make content on other services like TikTok, they just want to stream.
Behaviors: Time-rich works from home, and never misses a stream from their favorite streamer.
Goals + Motivations: Wants to see there their content creators succeed and gush about their favorite streamer to an outsider.
Needs: Needs a new way to share short segments of a stream with outsiders. The current system is unintuitive and the viewer needs a more modern approach.
Behaviours: Time-poor works 9-5 and commutes to work every weekday.
Goals + Motivations: Wants to get into watching streamers more but lacks the time it takes to watch a full stream.
Needs: Something convenient and accessible to work around their busy work schedule.
Based on our research and by creating our archetypes, we were able to establish a common theme between them, which is a lower barrier of entry to follow a streamer. Right now it can take hours to find a streamer, watch their stream, and actually like their content to follow. If there was a short-form video feed that allowed people to watch suggested clips on the go, people would find the content they want and potentially watcha full streams in the future. This also helps the creator archetypes go on the platform and avoid relying on platforms like TikTok. I kept in mind this theme when developing these ideas when I started the sketching and ideation phase.
I started brainstorming and coming up with possible design solutions with a focus on vertical UI and started exploring how to convert horizontal streams to vertical clips.
In this section, I sketched the current way clips look horizontally. I highlighted the main areas that I needed to focus on the gameplay, face cam, and the chat. Next, I needed to find a way to translate this into a vertical application.
I broke down the UI on popular video apps like TikTok. I noticed a design pattern where there was body text at the bottom left, action buttons on the right, and settings at the top. Next, I took the main components (gameplay, face cam, and chat) and stacked them vertically. Then I made a sketch of both of these ideas together.
Lastly, I sketched out what their final profiles could look like. Right now you can only preview 1 clip at a time because of the way the clips are stacked. If they were stacked vertically and 3 across, you could preview up to 9 clips at a time. That's a 900% increase in the visibility of a clip and gives the end user more chances to tap on a video.
After the sketches, I created some low-fidelity wireframes making sure I focused on how videos would look vertically, how the UI lays over the video, and how the profiles stack clips.
Feedback was mostly positive. People were engaged and similar to the new clip's UI and how clips were organized. The negative feedback came mostly from my peers because they were worried about prototyping. Figma has limitations with incorporating videos and vertical scrolling locking onto each video. Some workarounds would have to be made but I was up to the challenge and moved forward with refining the design.
After all of this work, it's time to make some high-fidelity mock-ups. Taking into account what I gleaned from users, design patterns from popular video apps, and Twitches design language I created these deliverables.
I made mockups of the home page, the NEW Twitch Clips feed, the category page, and the profile page.
I then prototyped all of this in Figma.
After taking what I've learned this far and adding the feedback from the user feedback, it was time to make the final version of this project
I made mockups of the home page, the NEW Twitch Clips feed, the category page, and the profile page. This time I added a bigger card at the bottom of the clip, to allow better readability and room for the UI. Every interaction of the clip lives at the bottom card. I also carried this card to the clip thumbnails for better readability of clip titles.
I then prototyped all of this in Figma. I was able to get the scrolling to mimic other video applications, something I wasn't able to accomplish in the previous version.
Users' feedback was very positive about the final version. It had design patterns of other vertical video apps they were familiar with, it followed the design language of Twitch and felt a part of the system, and users could see themselves using the feature if it was implemented.
Refining the current version and implementing the users' feedback is the next step. Also prototyping what it would look like to create a clip, having users choose how to stack the clips, and other refinements feel like a natural progression of what's already made.
I learned that I needed to focus on connecting the creator, viewer, and outsider in a more uniform way. I feel like they are connected and NEW Twitch Clips solves pain points in all three categories, but I felt lost in the features I wanted to create. In the future, I should understand all archetypes affected, but instead focus on one for the project at hand.
I would have focused even more on accessibility. Colorblind modes, screen readers, and captions should have been considered. Twitch already has great accessibility options and applying them to this would be a great next step.
