Case Studies

Twitter Timestamps for Live Video

With Timestamps on Twitter, you can share broadcasts at specific times and show people what you want them to see. Whether it's SpaceX launching a rocket, or your favorite soccer team scoring a goal, you can watch the most important moments of 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 in a ‘Twitter-y” way. Meaningful at a glance. Starts or contributes to a conversation. Helps you discuss, inform and stay informed.

DEEP DIVE

User Stories Driving the Process

To make sure we were building the best tool, we first had to understand why someone would share one moment instead of the complete stream. There were a variety use cases, from highlights of a news story to my niece’s first steps, cute dog tricks to phenomenal sports moments.

Combining the why with the who helped simplify. The users of Timestamps naturally divided into two distinct groups: broadcasters who put the time and effort into creating video streams, and viewers who discover, watch, and discuss the videos on Twitter.

🤳 As a broadcaster, I want to:

  • Invite more people to my live broadcast.

  • Drive organic sharing of the best parts of my broadcast.

  • Create video highlights without staffing editors.

👁 As a viewer, I want to:

  • Tweet a specific moment in the video with my followers.

  • Share quickly and easily without missing the ongoing broadcast.

  • Ask friends watch live with me, after witnessing the moment I shared.

People on Twitter were creating Timestamps in hack-y ways.

People on Twitter were creating Timestamps in hack-y ways.

Picking the Right Moment To Share

The biggest design challenge was picking the right moment to share in live videos. You could only watch livestreams synchronously. There was no scrubbing affordance, and no way of going back in time.

Our initial UI took inspiration from the slider on videos you watch on-demand. After all, once you started scrubbing, you transitioned into the pre-recorded video world. This slider reinforced our concern about time selection, as it was difficult to navigate precisely in long streams.

We considered two solutions: a shorter scrubbing window to select from or a more complex scrubber that you could fine-tune. Our product lead rightfully pushed us toward building a consistent product experience throughout live, replay, and video on-demand. So, we brought the existing slider into the Timestamp selection flow.

2.png

With the two-minute window, viewers can find the right moment to share. 👁 ✔
Meanwhile, best parts of videos get shared. 🤳✔
Broadcasters crowdsource video highlights. 🤳✔

Bridging Live and Replay, from Backend to UX

Before Timestamps, our live and replay video viewing experiences were completely separated. The back-end video stack operated on two frameworks: livestreams and replays. The UX served this purpose as well. You could comment and interact with the broadcaster only in livestreams. The UI amplified this separation. Live videos got hero-cell treatment, autoplayed, and had eye-catching, red badges signaling the immediacy.

This project created an in-between state: Timestamps shared from an ongoing stream — that is, replays of a livestream. This edge case in code was a major use case for the feature: Does a person want to know if a stream is live? If they know the stream is live, do they want to skip to live or keep watching from where they started?

We knew our broadcasters wanted their audience to watch them in real-time. So we decided to tell viewers when a stream is live with a red badge. This urged them to skip forward.

This also fulfilled the broadcasters’ need to attract viewers to the livestream.🤳✔

Design iterations lead us to the winning option on the right. ✅

Design iterations lead us to the winning option on the right. ✅

In the exploration, we went one step further and decided for viewers. Through prototyping, we explored skipping to the livestream after a countdown. However, user testing taught us that the interference distracted viewers. People frequently wanted to stay in the flow of watching the replay. We ended up letting the viewers decide if they wanted to keep watching or skip to live.

Seamless Watching and Sharing

The next challenge was incorporating the timestamp selection into the viewer experience seamlessly. We took a holistic look at scrubbing.

1.jpg

Eventually separated the flow for sharing from scrubbing. Instead of convincing people to share when they want to navigate elsewhere in the stream, we streamlined Timestamps into the sharing flow. Sharing now takes two steps: tap to share and choose a share option. While you choose the moment to share, audio of the ongoing stream keeps you grounded to the context.

Last but not least, sharing a live broadcast has been a way to tell people to come watch with you. So, we treated watching live with friends as an equal counterpart to witnessing the moment I shared. We ended up with a radio button to choose share live versus share with a Timestamp.

Watching live with friends remains an option. 👁 ✔
The two-step share flow does not let viewers miss the broadcast. 👁 ✔