Facebook Favorites Animations

Introducing the story of Favorites to users in the News Feed with a set of animated illustrations.

ContentBranding

Understanding Design Context & Creative Considerations

During our kickoff meeting, we had the product team walk us through the flow of the Favorites feature so that we could understand the tone and context of the screens where the visuals would live. Favorites is a new way to make sure people are caught up with the people and pages they care about most. Understanding what other visual elements will surround the illustration informs our compositions. For instance, since we knew that there would be interactive elements in the top-left corner, we knew we needed to focus on keeping that portion of the illustration less busy. We also discussed how the feature was going to be introduced across the iOS, Android, and desktop platforms. This meant that any illustrations would need to be simple not only so that they could be read at a small size, but also so that we could more easily grab users’ attention by animating them.

There were a few must-have visual elements the product team had as well. The brand icon for Favorites is a yellow star, so that needed to be represented. The visual style also needed to use Facebook’s updated version of Alegria.

Process

In order to get to the best ideas for the two illustrations, we began the process with an internal brainstorming session to generate a list of potential ideas. The team felt that using human figures as a metaphor was a good way to represent the meaning of Favorites, so we used that as a parameter of our brain dump. We then sketched up the ideas we felt were the strongest and reviewed them internally to establish a final list of four sketches per illustration to present to the Facebook team. Discussing first with the internal team the pros and cons of each concept and how they would be animated allowed us to utilize our time with the larger team more efficiently. After our discussion, the Facebook team chose their top illustration for each screen to move forward with, the first being people inside of stars communicating with each other and the second being people inside of devices connecting with each other and hi-fiving with excitement.

[favorites] color

When we had the concepts for each illustration down, it was time to move into the medium-fidelity phase and start adding color and texture to them. During this stage, the Facebook team was able to provide detailed and rapid feedback, which allowed us to iterate even more to get to a better final product. A lot of collaboration and tweaks resulted in two really strong illustrations ready to be animated that represented the connection we were after.

Final Polish

Since our team worked so closely throughout the illustration process, there was just some slight character rigging required in After Effects (AE) to start animating. The real challenge came from using Facebook’s own internal tools, which had some limitations we needed to work with in order to animate and export the correct files for delivery. Luckily for us, we’ve used similar plugins with a similar set of requirements, such as BodyMovin, so after some slight trial-and-error run-throughs, we knew how we needed to build and animate each illustration.

Before animating each individual character, we needed to make sure the animation looped seamlessly by figuring out the rough timing as well as a matching starting and ending position for each subject. Setting these frames before animating them also gives you a length for your loop, which helps set the pacing for the rest of the animation.

Facebook was excited to get these fun animations so quickly and to be able to meet their ship date for the feature. Keep an eye out for them next time you’re cruising your Facebook feed!

I felt entirely at ease working with Underbelly from the very first conversation until the end delivery, which is a testament to their relationship-first approach and personal touch. Throughout the project, they were incredibly responsive, empathetic and collaborative. Moreover, we’re thrilled with the final assets!
Vince Lau
Design Program ManagerFacebook

Credits

  • Facebook
    Internal Team
  • Caitlin Askew
    Project Manager
  • Dave Keller
    Creative Director
  • Matt Royce
    Motion Graphics
  • Matt Scribner
    Art Director
  • Tim Pacific
    Illustrator