Tweet Live Video Highlights
Tweet Live Video Highlights
B2C, Mobile and Web, Lead Designer • Twitter
B2C, Mobile and Web, Lead Designer • Twitter
Background and Goal
Background and Goal
Go-to platform for Live Video
Go-to platform for Live Video
Twitter is a microblogging and social networking platform where users interact via "tweets". As a mirror to what’s happening in the world, Live Video was integral to the company strategy.
Through Partnering with leading brands including NFL, Buzzfeed, and Wimbledon and capturing worlds most popular events, Twitter wanted to be to the go-to platform for Live Video consumption.
In addition, our competitive research showed that other video platforms didn't have live video sharing functionality. Twitter wanted to maintain competitive edge and drive revenue.
Twitter is a microblogging and social networking platform where users interact via "tweets". As a mirror to what’s happening in the world, Live Video was integral to the company strategy.
Through Partnering with leading brands including NFL, Buzzfeed, and Wimbledon and capturing worlds most popular events, Twitter wanted to be to the go-to platform for Live Video consumption.
In addition, our competitive research showed that other video platforms didn't have live video sharing functionality. Twitter wanted to maintain competitive edge and drive revenue.
Project goals
Project goals
Be the go-to platform for live video.
Maintain competitive edge for live streaming.
Drive revenue through establishing partnerships.
Be the go-to platform for live video.
Maintain competitive edge for live streaming.
Drive revenue through establishing partnerships.
Twitter wanted to maintain its competitive edge as the go-to platform for live video and drive revenue. Collaboration Credit: Tyler Hansen.
My role
My role
Following the Periscope-Twitter acquisition, this project was a key effort towards product integration. Three teams including Twitter Core, Revenue, and Video organizations collaborated closely for the first time.
I was responsible for the end-to-end experience. I led interaction and visual design, systems thinking, prototyping, and user research, in collaboration with 1 PMs, 8 engineers, 1 DS, Marketing, Research, Brand and Systems Design.
Following the Periscope-Twitter acquisition, this project was a key effort towards product integration. Three teams including Twitter Core, Revenue, and Video organizations collaborated closely for the first time.
I was responsible for the end-to-end experience. I led interaction and visual design, systems thinking, prototyping, and user research, in collaboration with 1 PMs, 8 engineers, 1 DS, Marketing, Research, Brand and Systems Design.
Outcome
Outcome
Before Video Timestamps, if you wanted to share a live video, you could only Tweet the entire clip. This feature allowed for better discovery and engagement with broadcasts, through highlighting the moments that matter.
Before Video Timestamps, if you wanted to share a live video, you could only Tweet the entire clip. This feature allowed for better discovery and engagement with broadcasts, through highlighting the moments that matter.
Twitter Video Timestamps feature allowed users to share video highlights, and increased discovery and engagement metrics.
Discover & Define
Discover & Define
User research to identify personas
User research to identify personas
User research helped us identify three broadcaster personas. Influencers, Revenue Partners, Journalists. Through analyzing each of these broadcaster and their viewers, I distilled user needs for each.
User research helped us identify three broadcaster personas. Influencers, Revenue Partners, Journalists. Through analyzing each of these broadcaster and their viewers, I distilled user needs for each.
Broadcaster needs:
Invite more people to their live broadcast.
Drive organic sharing of their broadcast highlights.
Create video highlights without staffing editors.
Viewer needs:
Tweet a specific moment in the video with their followers.
Share easily without missing the ongoing broadcast.
Invite friends to witness the moment they shared.
Broadcaster needs:
Invite more people to their live broadcast.
Drive organic sharing of their broadcast highlights.
Create video highlights without staffing editors.
Viewer needs:
Tweet a specific moment in the video with their followers.
Share easily without missing the ongoing broadcast.
Invite friends to witness the moment they shared.
User research helped us identify three broadcaster personas. From left to right: Influencers, Revenue Partners, Journalists.
Narrowing our target through research and data
Narrowing our target through research and data
I partnered with my PM and DS for opportunity sizing, and we identified our target metrics and hypothesis.
Hypothesis:
If users can tweet live video at specific times, broadcasters will grow their audience and viewers will discover quality content.
Success metrics:
Timestamps creation accuracy and ease of use
Click-through rate from the Home Timeline
Core video org metric: watch-time
I partnered with my PM and DS for opportunity sizing, and we identified our target metrics and hypothesis.
Hypothesis:
If users can tweet live video at specific times, broadcasters will grow their audience and viewers will discover quality content.
Success metrics:
Timestamps creation accuracy and ease of use
Click-through rate from the Home Timeline
Core video org metric: watch-time
Develop
Develop
Connecting three teams and app surfaces
Connecting three teams and app surfaces
This project was a highly collaborative effort between three organizations. The end-to-end experience connected three major views on the Twitter app. Starting in Broadcast Watch-mode to pick a moment to share, to creating content in the Tweet Composer, and finally viewing the Timestamp card on the Home Timeline.
This project was a highly collaborative effort between three organizations. The end-to-end experience connected three major views on the Twitter app. Starting in Broadcast Watch-mode to pick a moment to share, to creating content in the Tweet Composer, and finally viewing the Timestamp card on the Home Timeline.
Picking the right moment to share
Picking the right moment to share
Before this feature, live streams didn't support rewinding. Replays had a full-screen takeover on long-press, where you could scrub over the thumbnail previews.
Before this feature, live streams didn't support rewinding. Replays had a full-screen takeover on long-press, where you could scrub over the thumbnail previews.
Before this feature, live videos had no scrubbing affordance. Left to right: Live and Replay Videos. Collaboration credit for video on left: Brand team.
Our initial solution was using the replay scrubber on the live broadcast. Through prototyping and early testing, we learned that the large scrubber made it very difficult to rewind back in smaller increments. Moreover, displaying the thumbnails took up important real estate. We wanted to surface the sharing options in the view as well. In this experience sharing took 4 taps: tap to start scrubbing, scrub, tap to share, and choose a share option.
Our initial solution was using the replay scrubber on the live broadcast. Through prototyping and early testing, we learned that the large scrubber made it very difficult to rewind back in smaller increments. Moreover, displaying the thumbnails took up important real estate. We wanted to surface the sharing options in the view as well. In this experience sharing took 4 taps: tap to start scrubbing, scrub, tap to share, and choose a share option.
Prototype we made to test the full screen scrubbing experience for sharing. Collaboration credit: Christian Niles.
Continue watching while sharing
Continue watching while sharing
To prioritize viewer needs for seamless video consumption, I designed an experience where the viewer can continue watching while sharing.
Instead of prompting users to share after scrubbing, I added a mini scrubber with a preview image in the share panel. We kept the audio and video of the broadcast in the background, to keep the viewer grounded in context.
To prioritize viewer needs for seamless video consumption, I designed an experience where the viewer can continue watching while sharing.
Instead of prompting users to share after scrubbing, I added a mini scrubber with a preview image in the share panel. We kept the audio and video of the broadcast in the background, to keep the viewer grounded in context.
Seamless sharing where the viewer stays embedded in watch mode through background video and audio.
Bridging live and replay video
Bridging live and replay video
The back-end video stack operated on two frameworks: livestreams and replays. live vs replay explain. This project created an in-between state: Timestamps shared from an ongoing stream — that is, replays of a livestream.
For the UI treatment of the live video timestamp card, I collaborated with the design systems team and iterated on our card component. Since signaling that the broadcast was still ongoing, I reused the bright red of our live component UI.
I collaborated with our iconographer to design a new pill for the card to denote the moment the video was shared. This approach maintained consistency while drawing attention to timestamps.
The back-end video stack operated on two frameworks: livestreams and replays. live vs replay explain. This project created an in-between state: Timestamps shared from an ongoing stream — that is, replays of a livestream.
For the UI treatment of the live video timestamp card, I collaborated with the design systems team and iterated on our card component. Since signaling that the broadcast was still ongoing, I reused the bright red of our live component UI.
I collaborated with our iconographer to design a new pill for the card to denote the moment the video was shared. This approach maintained consistency while drawing attention to timestamps.
I collaborated with the design systems team to iterate on the video card component.
The final timestamped card, aligned with Live video card styling with a timestamp pill.
Experimentation to test clipping
Experimentation to test clipping
The next question on the consumption side was entering watch mode of a timestamped broadcast. We leveraged experimentation to fulfill both the viewers and broadcasters needs.
Competitive analysis into streaming platforms and event highlights inspired us to build 30 second clips. I partnered with PM and Data science to analyze video highlights but it was difficult to come up with an upper limit for how long a clip should continue.
Nonetheless, since broadcasters wanted to invite new viewers to their livestream, we experimented with clipping. After a 30 second countdown, we skipped to the livestream. Viewers were disoriented and confused. We decided to signal the stream is still LIVE with a red badge to let the viewers stay in the flow of watching.
The next question on the consumption side was entering watch mode of a timestamped broadcast. We leveraged experimentation to fulfill both the viewers and broadcasters needs.
Competitive analysis into streaming platforms and event highlights inspired us to build 30 second clips. I partnered with PM and Data science to analyze video highlights but it was difficult to come up with an upper limit for how long a clip should continue.
Nonetheless, since broadcasters wanted to invite new viewers to their livestream, we experimented with clipping. After a 30 second countdown, we skipped to the livestream. Viewers were disoriented and confused. We decided to signal the stream is still LIVE with a red badge to let the viewers stay in the flow of watching.
Through experimentation with video clipping, we learned that viewers prefer to stay in the flow of watching the replay.
Deliver
Deliver
End-to-end flow
End-to-end flow
Here’s the end-to-end experience from our marketing video.
You tap on share and slide back to the exact time you want to point your audience to. Then compose your Tweet about that moment in time. Stamp your video at the moment that matters the most. Share and consume video on Twitter to join the conversation.
Here’s the end-to-end experience from our marketing video.
You tap on share and slide back to the exact time you want to point your audience to. Then compose your Tweet about that moment in time. Stamp your video at the moment that matters the most. Share and consume video on Twitter to join the conversation.
The end-to-end experience for creating and engaging with Twitter Live Video Timestamps feature. Collaboration credit: Marketing team.
Reflection
Reflection
This project set the foundations for Periscope - Twitter integration, where Video org became integrated into the larger company ecosystem. There were positive user, business, and team impacts.
This project set the foundations for Periscope - Twitter integration, where Video org became integrated into the larger company ecosystem. There were positive user, business, and team impacts.
User impact: This feature met a core broadcaster need by introducing live video sharing on Twitter. It allowed broadcasters create quality video content and viewers to discover broadcast highlights.
Business impact:
Increased watch-time and clickthrough rate.
Unlocked event partnerships that drove revenue.
Recognized for originality and got patented.
Team impact: This work was foundational for Periscope-Twitter video integration work. Later, Periscope became the video engine of Twitter Video.
User impact: This feature met a core broadcaster need by introducing live video sharing on Twitter. It allowed broadcasters create quality video content and viewers to discover broadcast highlights.
Business impact:
Increased watch-time and clickthrough rate.
Unlocked event partnerships that drove revenue.
Recognized for originality and got patented.
Team impact: This work was foundational for Periscope-Twitter video integration work. Later, Periscope became the video engine of Twitter Video.