Stories Visioning
Overview:
Twitch introduced a new feature called 'stories' in its mobile app, enabling streamers to engage with their community when not live. This feature, resembling familiar 'stories' formats on other platforms, allows users to post short content that disappears after 48 hours. Initially available to Partners and Affiliates who streamed recently, stories aim to foster community interaction and offer exclusive content for subscribers. I designed the first prototype of this feature in 2020.
Read more:
blog -stories
Company
Twitch
Role
Sr. Product Designer
Year
2020 - 2021
✦ iOS & Android applications ✦ Concept Design ✦ Discovery ✦ Visual Design
The Problem:
Many Twitch viewers, existing and new, state that finding new channels to watch can be difficult. Twitch discovery surfaces prioritize live channels.
The Solution:
A new interaction pattern, following the direction of stories to discover new channels on Twitch. This pattern would utilize channel trailers - the intro video capability that had been recently been released. These trailers would let you quickly swipe through channels to find new personalities and follow them. Followed channels are displayed prominently and viewers are notified if they are live.
Since this product was being pitched to executives as a design-led initiative, I decided to lean onto Amazon Working Backwards process. I drew a few product launch tweets as part of the press release. This stage of the process defined customer needs and writes a speculative press release articulating how we would communicate this product to customer upon launch. The other tool in our toolkit is an exercise called “the user describes”, which like it sounds frames the goals of the product in the voice of the customer not the company. This is helpful to move away from business goals and jargon to clarify customer needs.
Lo-fi mockups exploring content exploration. The main interaction pattern, swipe for more content, introduces a new channel each time. However to see more of a particular channel, we explored a swipe right to see clips and live content.
Competitive analysis of other stories content and how it is used. Since our pitch was to use channel trailers instead of clips, there were some key differences to articulate. Our product goal was most similar to Netflix swipe to watch more movie trailers.
We had some concerns from execs about the quality of content of channel trailers. In collaboration with data science, we were able to pull a random set of 100 trailers and watched them all to understand the quality issues. We identified 5 categories: a true channel trailer that explained what to expect and when to watch, an intro or screensaver static video, a highlight reel of clips with no introduction to the channel, a single clip from the channel, and non-english content. While 23% of trailers were “true trailers” with all the elements we wanted in a trailer, there was still questions about supply. However, without surfacing channel trailers in a discovery format, there was no incentive to broadcasters to make their channel trailers better. A bit of chicken and egg question that polarized stakeholders internally.
Explorations of the shelf pattern to enter the “stories” interaction pattern. The cards needed to highlight the creator and explored showing a teaser of the trailer content as well.
Option C was picked as the most in line with product brand guidelines, which state that circles should be used to denote people, while rectangles denote game art (categories).
Final Designs
The final design shows the channel trailers in a swipe up to see more interaction pattern.
The design utilizes creator color as the background. This helps to differentiate each channel. The metadata displayed is simply channel name and CTA.
The primary CTA displays “watch now with 1.1k viewers” in the live state and “follow” if the channel is offline.
The follow notifications UX flow.
Landscape view.
Results:
I have a few key takeaways from this project.
The timing was off - trailers adoption was too low and they were not included in recommendations. This meant that the ranking of channels to show in this format was not ready. I believe that that format could be successful, but the backend pieces had yet to be put in place.
While it can be exhilarating to work on speculative work, it can also be disheartening if they don’t ship. This project did not go through development during my time on the team. however I believe speculative design projects have power to excite and inspire teams. This project paved the way for a future product called Stories. Being able to draw prototypes, even in Figma, can motivate teams towards exciting possible futures.