Twitch
Channel Page Video Extension

Summary

Twitch Extensions launched in September 2017 with the goal of enabling developers to build interactive experiences that powers the future of multiplayer entertainment. 

In June 2018, Twitch launched component extensions, which allows broadcasters to have multiple interactive overlays on top of their stream. We tracked the data internally after the launch and we observed that the concept of component Extensions is confusing. Because components are in transparent iframes, components may overlay on top of other extensions creating multiple usability issues for viewers. As a broadcaster, setting up and deploying a component Extension provides many points of failure which create poor experiences and confuse or frustrate both viewers and broadcasters.

    Goals

    By improving  the current experience of video extensions, we believe that viewers will quickly find, use, and understand the purpose of Extensions.

    Contribution

    • Principal Product designer
    • Conducting the UX discovery phase (data analysis, competitive analysis, stakeholder interviews)
    • Analyzing the data and provided design recommendations.
    • Creating user flows, wireframes and prototype.
    • Participating to the Usability Study process.

    Discovery

    We first conducted an unmoderated UXR study with active Twitch viewers to better understand the usability issues and product value associated with streamers placing multiple overlay Extensions above their channel. Viewers were sent to one of two live Twitch channels that had multiple Overlay Extensions activated and asked to evaluate the experience. 

    Usability Study Findings 

    Overall, participants struggled to understand what was – and was not – a Twitch Extension on a channel page with multiple active Overlays; participants quickly dismissed Extensions that didn’t feel relevant to the content as ‘clutter’, and many struggled to find the controls to hide/show individual overlay Extensions

      Design

      I provided the following recommendations to improve viewer’s experience.

      • Review the default and minimized states of video extensions.
      • Provide clear cues, controls and CTA so viewers can easily minimize, maximize, hide and show extensions on the stream.
      • Review the video extension thumbnail location and style.
      • Review the video extension option menu and location.

      We believe that grouping video extensions in proximity together will help viewers recognize that  extensions belong together as a content type. I also wanted to provide the followings:

      • Clear affordance of how to interact with video extensions.
      • Give viewers more control over what they want to see on the stream.
      • Remove the minimized state of a video extension to reduce the confusion of what an extension does and provide more context about its purpose.
      • Create a consistent and predictable experience for all video extensions.

       

      Results

      Previous tracking limitations made it difficult to identify changes before and after the launch. However, post-launch data allowed us to establish baseline open and engagement rates, commonalities between most performing Extensions and find areas for improvement.

      Extension open rate is lower than expected. The hypothesis is that Viewers may struggle to discover active Extensions on channel pages. A series of experiments to validate that hypothesis is planned for Q3 and Q4 of 2019.

      However, engagement with open Extensions is high (54%), which is a positive indicator of Viewers intent and alignment with their expectations.

      Initial wireframes
      Initial wireframes
      Initial wireframes
      Web Prototype Example
      Mobile Prototype Example