Designing Timestamps for Live Video
Share the most important moment as it happens
Until a few weeks ago, if you wanted to share a live video, you could only Tweet the entire clip. Whether it was SpaceX launching a rocket, or your favorite soccer team scoring a goal, it was easy for these moments to get lost in a lengthy stream. It was difficult to discuss what mattered most.
With Timestamps, you can share broadcasts at specific times and show people what you want them to see. Now you can watch the most important moments of video on Twitter.
This project was a joint effort between Design and Engineering, in partnership with different teams at Twitter. The best part was meeting people passionate about the same product. I met employees who designed the Home Timeline, some who optimized the Tweet composer, and others who made broadcast cards into components for our design systems.
The hardest part was taking input from all stakeholders and making them feel heard. I knew it wasn’t possible to weigh all opinions equally. I learned to defend my perspective after synthesizing other points of view. I had to facilitate conversation among teams, present ideas thoughtfully, and be patient in the process.
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.
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.
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.🤳✔
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 then took a holistic look at scrubbing.
It was invaluable to work closely with the Engineering team to get their input on design. In fact, as a holiday gift, our iOS engineer prototyped the slider to the left!
The benefit of this view was that you kept watching while scrubbing. However, the fullscreen takeover left no real estate on the screen to provide further action. Sharing took four steps: tap to scrub, scrub, tap to share, and choose a share option.
We then 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. 👁 ✔
Ta-da 🎉
Here is Timestamps in action. 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.
Lots of people worked on this project, but here is shoutout to: Mike, Christian, Lucas, Noah, Chen-Rui, Jonah, Annie, and Clem, who poured their hearts and souls in this. Also, to Ben and Tyler for their emotional support, and Veronika for her faith in me. To Jeremy for creating our icon. And all of Twitter Design for building this collaborative design family.
