Twitch Clip Editor

Getting discovered by new viewers is hugely important for a Twitch streamer’s growth, both on and off the site. Social media apps like TikTok, YouTube, and Twitter are key ways that streamers can build their community. A 2022 study from Twitch’s Central Research org found that over half of Twitch’s engaged viewers found their favorite channel via social media.

One of the most popular ways for streamers to spotlight their channel is with clips, short snippets of their stream that help showcase what makes them unique and worth watching. A snack-able glimpse of the full experience you get from watching them live. That also makes clips the perfect medium for short-form video apps like TikTok and YouTube Shorts, the top two platforms driving discovery of new streamers off Twitch.

However the volume of clips shared in 2022 was surprisingly low given their effectiveness. Only about 9% of Twitch’s biggest streamers were sharing clips, and even fewer for smaller creators. We wanted to find ways to improve the experience of sharing so more streamers would decide to use their clips, and in turn grow their audience.

Click here for a Figma Prototype of the finished project.

Initial Research

The Clip Editor and focus on improving the clips experience came out of a larger arc of work looking from ways of improving discoverability of streamers off Twitch. We began with user research, talking to creators to understand their workflow and looking for ways we could streamline their experience, or offer something completly new that would have value to them.

To do this I put together a questionnaire, then conducted interviews with 12 streamers to better understand how they shared content off Twitch, and the tools they used to do it. These interviews were incredibly illuminating, and reinforced just how much work streamers were putting in to manage their brand and content across social media. The majority of streamers highlighted posting clips as an impactful way of self promotion, but also talked about the effort required on their part to do it. For example:

‍Kendle visits the Clips Manager, downloads a clip, then uploads it to Streamladder to convert it to portrait mode. He then downloads that new clip and uploads it to TikTok, edits it further within TikTok, and posts it. He then downloads the edited version from TikTok (which adds a watermark in the process), uploads it to Youtube and then creates a YouTube Short. He then links to the Youtube Short from Twitter.

Not only did we hear from streamers saying how much work they put in, but also from others who knew the value of clip sharing, but didn’t have the time to invest in doing it, or know where to start.

Customer Opportunities

With the majority of feedback we received from streamers focused around the importance of clips, and the effort that was required to find, edit and share them we decided to invest our resources there. While there are already 3rd-party tools for editing Twitch clips our hypothesis was that a Twitch Clip Editor with sharing built in would dramatically simplify streamer’s workflows, and introduce the concept of sharing portrait clips to a whole new set of users. In addition we would display their username alongside Twitch branding, to help educate viewers on the origin of the clip, something that was lacking in the majority of clips we saw being posted.

My objective with the user experience was to make a simple to use tool that didn’t feel like a tool. Speed, simplicity, and delight would be core tenants of the experience. I wanted streamers to be excited by how easy it was to create a great clip, and come back to use the Converter again and again.

Early Concepts

My initial design explorations were focused on how to select the areas of the original clip that would be displayed in the portrait formatted version. I started by looked at interaction patterns used across Twitch and our apps, especially Twitch Studio, for common ways elements could be manipulated.

The solution that felt most intuitive to me was to use masking boxes that the user would then reposition on top of the original clip. Users likely had some familiarity with cropping from setting up their stream, or using simple photo editing tools like the ones on their phone. As they resized the boxes they would easily see be able to see what was in and out of frame, and make quick adjustments.

I also experimented with moving and scaling the footage in a layout that matched the final portrait clip. While this gave a great preview of the final asset it made selecting the right parts of the original clip difficult. The face cam on a stream is often fairly small, which meant the user would have to zoom in close and then reposition, likely a few times to get it just right.

In the final design I was able to combine elements from both of these concepts, after discussing the technical feasibility with the project’s engineering team. Taking the straightforward box selector, then adding a clip preview next to it would give us the best of both worlds, and keep the entire creation experience to just a single page.

Design Walkthrough

The Clip Editor would be accessed through the Clips Manager page in the Creator Dashboard. This page already existed so I had to be careful to balance any new UI I added with the current design so as not to disrupt existing workflows.

An announcement banner at the top of the page would spotlight the editor and explain its value to the streamer. Clicking the share icon on any clip row would launch the editor, with that clip loaded. The user could also clicking on a specific clip to expand the row. This would show  a larger preview of the clip, additional management options, and a more prominent callout for the editor.

The editor opens as an overlay on top of the Creator Dashboard. The user journey is split into two main steps; assembling and customizing the portrait clip, then sharing it.

On the left are the template options for the portrait clip. For launch I chose the two most frequently used layouts seen in existing portrait clips posted on TikTok and YouTube, with space to add more in the future.

As the streamer drags the selection boxes they’ll see the portrait clip preview update in real time. This gives fine grain control over the selection, ability to easily see what’s in and out of frame, and a realtime preview of the finished clip. The interaction is also fun, moving one element and having that update something else on the screen brings an enjoyable tactility to the UI.

Overlayed on the portrait clip is a Streamer Tag, with the Twitch logo and streamer’s username. This gives a spotlight to the streamer without any additional effort on their part, while also tying the content back to Twitch. This option could also be turned off if the streamer wanted to add their own text or overlays in another tool.

The last option on the page ‘Default to final selections…’ streamlines the creation experience even further by saving the positions of the selection boxes for future clips. For streamers who use a single stream layout (the majority on Twitch) this means they shouldn’t need make adjustments for future clips, they simply click ‘Render & Share Clip’. In just a few seconds they have a portrait optimized clip, with attribution, ready to share.

The final step is choosing how and where to share. We launched with YouTube Shorts integration, and TikTok following shortly after. Social accounts would need to be linked first, adding a small speed bump. However a large portion of our affiliates and partners already had YouTube connected for VOD backup, which meant their accounts were already connected.

For the clip’s title and description the fields are pre-populated with information from the original clip, along with the stream tags and username, speeding up the sharing process even further.

The final clip is rendered on Twitch’s servers, which meant the sharing actions could be completed and queued up prior to completion, removing any downtime between creating the clip and choosing where to share. It also means the streamer doesn’t need to stay on the page to finish rendering, they just click ‘Done’ and move on. If they do decide to stay then once the render finishes they can download a copy of the portrait clip, ready to share on other social platforms.

If the streamer has closed the editor but are still on Twitch they’’ll see a global notification when the clip has been successfully shared. When they return back to the clip manager they now have an extra item appended to the original clip. They see a thumbnail of the portrait clip, when it was rendered, and actions to directly download or share.

Results

The Clip Editor launched in June 2023, and has proved extremely popular with our users. The completion rate dramatically exceeded expectations, in the first month 80% of users who open the editor rendered an edited clip, and then shared or downloaded it. This was fantastic validation that we had built something people wanted, and that the experience was intuitive.

Adoption of the product was around 19% of people who visit the Clip Manager in the launch month, which was inline with estimations. This was a way of launching the product to a smaller engaged audience, then as we got data to validate its impact we could start to add it in to other parts of the streamer experience, such as the post stream summary.

The Clip Editor also received overwhelmingly positive feedback from the community, especially on Twitter. It’s one of the most positive receptions to a product launch Twitch has ever had.

‍“Oh my god you just made my job so much easier. An actual god tier Twitch feature thank you.” - YungJeff
“This can be a game changer for content creators! Big W for Twitch! Time to mess around with it!” - SmokinJoe

Overall i’m incredibly happy with this project. I was able to design a simple, enjoyable experience that dramatically reduced the effort it takes for streamers to share great clips, and grow their audiences.

Next Steps

TikTok integration didn’t make it in to the launch, but arrived just a couple of months later. This addition shipped to coincide with TwitchCon Europe, combined with a larger marketing push of the Clip Editor. I had designed the sharing layout to accommodate multiple social media providers, so this was a straightforward addition.

Alongside the desktop experience I also worked on a prototype for a mobile version. While the focus of the initial product was on desktop, I knew we would want to eventually launch on mobile if successful. This gave me an opportunity to use the uniqueness and benefits of a touch based system to explore different ways of interacting with the clip. Here you can pinch and drag to move the clip around, then use the standard iOS share sheet to export directly to the social app of your choice. The mobile version of Clip Editor will be launching later in 2024.