Image for post
Image for post
Canvas fits into the creative workflow—sketch and ideate, start building an experience, then refine and iterate.

Canvas: how we crafted Facebook’s new immersive ads

Jaime Rovira
Feb 25, 2016 · 7 min read

A few days ago, I tapped to read a link on my mobile browser. A pop-up appeared on screen almost immediately — it was largely innocuous, forgettable, and in no way related to anything I would be interested in. Tapping the ‘X’ did nothing to dismiss it. I fiddled around with it briefly before giving up. I know I’m not alone.

Mobile ads can be a painful experience.

Mobile ads often look spammy, are disruptive, and feel intrusive. They can stop you dead in your tracks for all the wrong reasons, without delivering anything valuable to you.

And yet, other mediums such as TV, radio and print show us that advertising can tell fascinating stories in 30-second snippets or in a magazine spread. Think of Volkwagen’s Think Small, Apple’s Mac vs. PC, Dos Equis’ Most Interesting Man in the World (tell me you haven’t chuckled in your car during these radio spots), and Nike’s Just Do It. They connect on a personal level, hitting on some universal truth.

Mobile ads can be painful. But they don’t have to be.

Introducing Canvas

Gatorade’s Canvas ad

Giving people control of their mobile ad experience is good. Assuring they have a rewarding ad experience is even better.

Take a moment to think through what that means. Your News Feed today could’ve had a story about your former college roommate’s newborn, or perhaps your best friend posted a video of their dog doing a silly trick, or your cousin’s graduation picture. We make sure that ads feel at home alongside that content and aren’t disruptive for people.

About eighteen months ago, we started to conceptualize a new approach to mobile advertising to create a more rewarding experience for people. This presented an opportunity for product design to lead the charge — to define our team’s new North Star. So, we embarked on a listening and learning tour. We met with other teams at Facebook, and specifically sought the perspective of the Creative Shop, our in-house team that collaborates closely with brands and agencies. Since this team is on the front lines, we wanted to understand what they were hearing and seeing from these companies — what were their pain points, what did they wish they could do, what could we improve. We led brainstorms and white-boarding sessions with agencies and brands that were unconstrained by the limits of our existing patterns. Once those ideas were winnowed down and refined, we learned two key things from the exercise:

  1. Brands are still trying to figure out mobile
  2. Agency designers found Facebook too creatively restrictive

Before putting mouse to pixel, understand the problem and embrace collaboration with other teams that can help define it.

Image for post
Image for post
Canvas design principles from an early-stage meeting in November 2014

Just as we focused on the people experience, we saw the need to appeal to creatives that didn’t see Facebook as a compelling environment to work with. As they gained the opportunity for greater expression on the platform, these creative makers could help push and evolve the product. Plugging into their existing flow would be key. This in turn challenged us to thoughtfully approach the advertiser creation process—it needed to be simple and easy to grasp, reducing friction as much as possible. And we’d have to achieve this while not sacrificing end-user control of the ad experience. The other space crystalized when we found the sweet spot of these two goals: a flexible tool where we were able to control the variables. We spent a lot of time crafting this other space and its three parts — the feed entry point, the post-click experience, and the creation tool. Each part depends on the others.

We drew inspiration from all sorts of places. We considered the few comparable post-click examples available within Facebook, specifically Collages and Instant Articles. We looked at how brands were using other products outside of Facebook, and what they were doing on their own. We saw things we liked such as the emergence of full-screen vertical video as a media type and the use of a device’s innards such as the gyroscope to enable more interactive experiences.

As a designer, your role morphs and shifts as the product evolves. Don’t be afraid to evolve with it—different stages require different approaches.

These explorations informed most of the design patterns you see in Canvas today. While making these interaction decisions, we were keenly aware of the advertiser’s creation process which provided actionable constraints. You can see this in the navigationally flat experience we settled on. This structure makes it easier for people to get in and out and know where they are (limiting the sense of ‘inception’). But flat navigation also keeps things easier to create — it’s much easier to conceptualize something linear than more complex multi-page hierarchies. We saw the enormous value in the immersive and expressive qualities gained by simply stacking basic elements. This hinted a way forward for the creation tool: modularity.

Image for post
Image for post
Our initial authoring tool

Embracing modularity led us to approach the Canvas creation tool as a set of components. We settled on a toolkit that consists of: a header block (for branding and section headers), image, video, carousel, text blocks, and a link button element. These might seem too basic to create rich interactions, but the toolkit’s utility and flexibility lies in the customization of its attributes. The component model gave us the freedom to offer controlled customization without having to rely on a library of templates. An advertiser has the creative flexibility to construct a narrative with the blocks that best meet their goals, and we guarantee a consistent user experience. But would advertisers find the toolkit to be enough?

Last April, we started the process of finding partners to begin public alpha tests. We worked closely with select partners to build their custom experiences — playing various roles in the process from art direction to pure production. Our early tests saw promising results and gave us early indicators of how people were engaging and interacting with the product. While the process was by no means scalable, it also gave us an intimate and invaluable insight into the agency creative process. For the first time, these tests helped us assess the capabilities of our components library. They provided a good sense of how advertisers were using them, and the opportunities we had to improve their weaknesses. We iterated on the visual design, improved interactions and simplified creation of the building blocks.

Image for post
Image for post
Current production version of the Canvas Builder

A product MVP should never sacrifice the user experience for expediency. It should set the product up well for continued refinements along with opportunities to adapt and extend.

Rich media experiences have been available for years, but the level of complexity and cost to create campaigns means only the most sophisticated advertisers could build them. We committed from the outset to make Canvas more immersive than any previous rich media experience, and so easy to build that any of our millions of advertisers could use it—from mom-and-pop shops to the world’s biggest brands. After more than a year of testing and development in close collaboration with our brand and agency partners, I’m excited about what we’ve built and can’t wait to see the amazing things creatives build.

Canvas represents what mobile ads are capable of. It illustrates the value of giving people control and telling stories. But we’re not finished. We’ll continue to add new features and solve for new complexities, while always driving towards helping brands and agencies create the most rewarding experiences for people on Facebook.

Image for post
Image for post
Many thanks to Jessica Watson, Austin Bales, Adam Berger, Chris Jones, Ji Lee, Mark D’Arcy, Jeff Gipson, Claire Mulhern, Linda Xiong, Krishna Vudata, Blaise DiPersia, Julie Zhuo, Fidji Simo, Chris Cox, Ali Griffin, Jackie Rutherford, Zack Hendlin, Mike Manning, and the many other people that touched this project throughout its development.

Facebook Design

Designing for the global diversity of human needs.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store