Designing Facebook Collage

A journey in design & storytelling

Christophe Tauziet
Dec 15, 2015 · 9 min read

The Problem

Telling a good story is hard. Photos and videos go a long way (even though we didn’t support letting you post both at the same time), but it’s only when they’re ordered and presented in the right way with the right context that suddenly a story becomes interesting for the viewer. People usually end up sharing all of their photos from a moment into an album, without curating or captioning, which is often quite hard to consume/relate to for the viewer.

As we take more and more photos, picking which ones to share has become a lot harder.

Our process

Based on our research, our team worked on figuring out some principles that would guide us through our design journey. When building a product, a lot of decisions have to be made on a daily basis that will influence a lot the final outcome. A good set of design principles can add a point of view and influence every decision, to make sure they’re aligned with the original problem you’re trying to solve.

  • Make it fast and easy to share a rich & visual story
  • Design a format that makes people proud of the story they share, and makes the consumption experience engaging & fast.
A few early concepts I designed and prototyped for the consumption experience

Design Prototyping

It’s no secret that many of us on the Facebook Design team use prototyping tools to create high-fidelity demos that show how a feature would look and feel when actually using it. To design collage, I mainly used Framer.js and Origami, and prototyped end-to-end demos of some of these concepts and interactions. Building quick prototypes allowed us to get a better feeling of what would be the experience for someone consuming one of these stories on their phone. While some interactions felt very compelling — for example, swiping down to reveal an interactive timeline of the story — we knew we needed to build a flexible system that would require as little input as possible from the user. We also worked on stripping away the distractions and focus on what really mattered.

A few concepts I prototyped for the photo picker experience.

Designing our North Star

As our Director of Design Julie Zhuo suggests in her article “Design’s North Star”, it’s very important in the design process of a product to communicate what the high-level narrative of your vision is. What do you want your product to look like 2 years from now? Why is this product so exciting and how will it improve people’s lives?

An early prototype I made using Framer.js

Research & Internal Testing

Once we had defined our North Star, we started working on simplifying our product to its core minimum.

  • Out of all these things, which ones were most likely to immediately provide value to people?
The internal prototype we built as a standalone app.

Building the real thing

Now that we had something we felt pretty good about, we started moving some of our code into the main Facebook app. It was also time for me, as a designer, to start polishing some of the elements of the UI and craft the interactions and layouts.

Some of our explorations of the visual treatment for displaying our story suggestions at the top of the camera roll.

Public test

When building products at scale, you make tons of design decisions on a daily basis that are mostly based on hypothesis and your understanding of the problem. There is nothing more effective than testing these hypothesis by launching some public experiments and getting data as early as possible. Usability testing can go a long way and help unblock some difficult design decisions. But a public test will give you a sense of what impact your product or feature has on the overall system. It will also give you a better understanding of how people interact with the product:

  • Do people easily discover X or Y, etc. How do they use Z?
Designing the web and Android experience was essential to launching a public test.

Shipping

Alongside running the test in Scandinavia, we continued polishing our experience, mainly by focusing on our set of curation tools, and on the performance and stability of the product. We also started ramping up our marketing efforts, working with our research, marketing and content strategy teams on finding a name (Collage!), preparing screenshots, shooting a video... and other efforts to get ready for launch.

Lessons learned

When designing products, it’s always good to look back at the journey and try to identify the things you could have done better, so you can apply your learning to your future projects. It’s also important to reflect on the learnings you’ve made about people’s behaviors, since that’s often the key to identifying the next set of problems to solve.

  • Create a way to share pride — Photos are pride. We found time and time again in testing this product that people loved that we made it fast and easy to share a rich & visual story that makes them proud of their photos.

Facebook Design

Stories from designers at Facebook offices around the world.

Thanks to Jonathon Colman, Laura Javier, and Jasmine Friedl.

Christophe Tauziet

Written by

Leading design for Facebook Spaces - Social VR at Facebook. Previously Parse & Apple.

Facebook Design

Stories from designers at Facebook offices around the world.