Designing Live for Facebook Mentions
We set out to connect both public figures and fans on Facebook in an immersive, authentic way. Last month, we launched Live.
How We Started — The Story Behind Live
and Facebook Mentions
Live is a new content type for Facebook Mentions, a Creative Labs app that was built to help give public figures simple and direct access to Facebook through mobile for the first time. Mentions provides tools for public figures to more easily connect with their fans and tell their story in a direct and authentic way. A couple years ago, we were thinking about the Facebook experience for this group, and we realized that the Facebook you and I use doesn’t scale very well for public figures who deal with tens of thousands of interactions everyday. Prior to launching Mentions, as a Page, public figures had no News Feed, no way to see what people were saying about them (aside from comments on their own posts), no filtering on notifications, and most of all, no access to a mobile app designed specifically for their needs.
When we launched Facebook Mentions in 2014, we tried to address the main points of feedback we had gotten from public figures: that they wanted a simpler mobile experience, and they wanted to easily interact directly with their fans. By connecting public figures to their fans through Mentions, we saw a huge increase in authentic posts and interactions with fans through comments and replies. This is especially true with video. Fast forward to present day, and we’ve seen a huge amount of video shared from public figures using Mentions and enjoyed by people on Facebook every day.
Video has been a huge hit with public figures, as it allowed them to express themselves and tell a more immersive story of their lives, while also giving fans a space to respond, interact and share these moments. Even before launching Mentions, public figures have consistently expressed a want to create an intimate experience for them to share and have conversations in real-time with their fans. We’ve also seen how people love to watch videos from their favorite atheltes, musicians, politicians and more. Naturally, we knew the next step would be to continue fostering those connections that could bring both public figures and fans even closer, and that step was creating live video for Mentions
Designing Live
Working within Facebook’s Scale
Designing for scale is always a huge challenge, with a lot of deep implications and complex edge cases along the way from a design, engineering, and infrastructure standpoint. As a small team wanting to hack on a big idea, we had to roadmap a strategy to enable a system where a network of more than a billion people could access live videos on Facebook.
Working within a Platform
One of the first things we tackled was the video itself. What we thought would be a seemingly simple design question ended up being a much meatier problem to solve. We narrowed it down to three options; 3:4 landscape, full screen portrait, and square video, with each ratio having it’s own design implications.
Portrait seemed like the obvious choice in the beginning; it took full advantage of the screen real estate and looked great on a phone. However, by choosing portrait we quickly realized that it did not scale well across interfaces on Facebook, particularly on web News Feed stories. Landscape alleviated a lot of the scaling issues but also created wasted space or disproportionate hierarchy between the video and comments. In the end, we decided that a square live video was the best option. It gave us the most bang for our buck to scale consistently across platforms as well as making it easier for viewers and public figures to see and interact with comments.
This small design problem set a larger precedent around the rest of our design process. It personally helped me frame it not just as a product designed specifically for mobile, but rather, a product designed for a larger system with mobile as one of those pieces in the puzzle.
The Viewer Experience
Live consists of two main components, the broadcaster experience and the viewer experience. When crafting these experiences, we made sure to set overarching design principles which we could always refer back to when jumping between those two contexts.
One of the main principles we set was that the broadcaster and viewer should have a consistent, shared experience. So when designing for the viewer experience in particular, this helped us ask questions like; what is the broadcaster seeing when a viewer does x? if a viewer on a mobile phone can do x-interaction, can a viewer on desktop do x-interaction as well in the same way on a feed story and with a mouse?
The broadcaster and viewer should have
a consistent, shared experience
Initial Explorations
We did a wide spectrum of explorations around viewer feedback, ranging from ephemeral and aggregated interactions to socially ranked comments.
Live Comments
The design of comments was crucial to creating the live experience, it allowed us to make Live to feel like a living, breathing product.
We realized a need to move pretty quickly to prototyping in order to fully understand the way in which the design of live comments could behave in a real scenario. Comments weren’t just about the layout and hierarchy of static information, but rather, it represented a much more complex and organic system in which large streams of content are funneling through from one end to another, triggered by various signals and interactions.
One of the biggest hurdles while iterating was figuring out whether we were on the right path. Within the team we were able to do small tests on our own builds, and comment on each other’s live videos, but to replicate the true scale at which public figures would be using this product was almost impossible to recreate. This is where Origami came in, a design tool we use at Facebook Design to prototype modern user interfaces. It became one of the most used tools through this whole process to communicate and refine ideas until they were just right. Not only did it serve as a presentation tool, but it became a tool for feedback, where we could stress test a flow of mock-comments along with a live video and active buttons. When things didn’t feel just right, we could easily make live-adjustments and redesign pieces of the flow without having to redo an entire prototype.
The Broadcaster Experience
Designing the broadcasting experience for Live was a huge collaboration effort that involved a lot of input across disciplines from content strategy and media partnerships to sound design and engineering.
Another principle we set for ourselves when designing for public figures was to clearly define what was happening and to establish a level of comfort in each step of going live. This involved two things, first it required creating a flow that felt lightweight and simple to go live. Second, it required us to create enough cushion through contextual education and accessible opt out points in order to allow a public figure to exit a live broadcast with ease or continue through the flow with relative confidence.
This was one of our favorite parts of designing Live, as it involved so much thinking around both structuring large components as well as finessing crafted details. Macro level questions like how much friction should we add from the composer to ending the live video; and micro level details like how we could use sounds and subtle nods to entertainment (a context Mentions users were familiar with) like a film reel and countdown to ease anxiety when going live.
Clearly define what is happening and
establish a level of comfort in each step of going live.
Lessons We Learned
This process was never straightforward, and we’ve had ups, downs, and everything in between that taught us valuable lessons along the way:
Get Context Early
As a designer, it’s easy to tend towards a mindset of designing with the best case and most aesthetically pleasing scenario in mind. We realized quickly that not every live video was going to have the best connection, an ideal background and scenery, good lighting, flawless sampling, and perfectly spaced out comments. One of the best lessons learned during this process was seeing perfectly crafted designs break in real world settings. It taught us to create a design process in which there were constant feedback loops and testing in real world contexts in order to keep our presumptions in check. Whether those real world contexts related to how those designs were being built and implemented, or related to the conditions in which Live would have to sustain in, having context early was key to designing an empathetic and sustainable product.
Embrace Constraints
Whether a feature is just technically unfeasible, or time is just not on your side to build a fully realized design, there will always be constraints that hinder an ideal vision. When we were working on live, it seemed like constraints were everywhere; whether it was visual considerations around the sizing of the video and amount of space, or technical constraints around how much we could build in the amount of time we had, they were a constant that kept us on our toes. Constraints are scary and can sometimes make a problem seem unsolvable, but sometimes it’s okay to just embrace them, and to embrace them with a positive outlook and fresh eyes. Constraints will always create challenges, but sometimes those challenges will incite untapped creativity.
Jump In Head First
There’s sometimes never a definitive path towards a shared vision or goal. Our team experienced that first hand, where open questions constantly existed around key product decisions. Questions like: how do viewers give feedback? should we do ranked comments or live comments? What’s the entry point to Live? What happens to the video when it’s ended? There’s always going to be an ease in relying on assumptions and sticking with what’s comfortable, but it’s when you jump in head first into those open questions and accept the ambiguity of not quite knowing the right answer that creates huge opportunities for learning. Find and soak up other people’s expertise, take risks and experiment with new processes, be bold and step out of your comfort zone in order to find those answers. It can be scary to not know if you’re doing things precisely right, but it’s the hustle of iterating and constantly challenging yourself that will lead to a new understanding around the problem you’re trying to solve, and ultimately, growth.
What’s Next,
The Future of Facebook Live
Launching Live has been a hugely exciting time for us at Facebook, it’s been a blast. We’re proud of the product we were able to ship, and are excited to continue gathering feedback from public figures and people watching live videos. We’ll keep learning and iterating from milestones, triumphs, mistakes, and continue to improve the live video experience.
The Team
To say this was a team effort feels like an understatement. This launch truly could not have been possible without each and everyone’s contribution and desire to push, challenge and inspire one another. It was a true collaboration between design, engineering, product management, content strategy, partnerships, PR, and marketing to make this shared vision into a reality.
Vadim Lavrusik | Product Management
Dave Capra | Engineering Manager
Robyn Morris | Product Design Manager
Abhishek Mathur | Technical Program Manager
Sameer Madan, John Fremlin, Bhavana Radhakrishnan, Kevin Lin, Kunal Modi, Cloud Xu, Ryan Lin, John Detloff, Kirill Pugin, | Engineering
Sabayashi Roy, Keyun Tong, Federico Larumbe, Peter Knowles | Infras Engineering
Abel Chan, Xiangpeng Zhao, Nithya Manickam | Data Scientists
Patrick Strange, Jane Francis | Content Strategy
Shirley Ip | Product Specialist
Zanique Albert, Bree Nguyen | Partnerships
Peter Yang | Marketing
Carolyn Thomas | PR/Comms
Some of Our Favorite Live Videos
Jeremy Lin Gordon Ramsay Serena Williams Zac Efron Michael Buble
Lindsay Vonn Carson Daly Anthony Davis Jason Silva Pharrell Williams
