Feb 25, 2016
Canvas: how we crafted Facebook’s new immersive ads
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
Giving people control of their mobile ad experience is good. Assuring they have a rewarding ad experience is even better.
Today, Facebook announced that Canvas is available to our advertisers worldwide. The product is a perfect representation of how we approach ads at Facebook. Falling under the News Feed umbrella, our Feed Ads team — from Product Managers, to Engineers, to Designers — focuses on building the best user experience and delivering the most value to advertisers. Those two things aren’t mutually exclusive. Our internal mantra is to enable ad experiences that deserve to live in your News Feed.
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:
- Brands are still trying to figure out mobile
- 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.
As a vision of the product emerged, we drafted design principles that would guide its development. We wanted to build a natural and familiar experience: fast, fun, and rewarding. For advertisers, we wouldn’t simply port over their website, but instead create a separate surface living within Facebook: a blank slate where they could combine different pieces of their media. Aware that we’d be competing for people’s attention, as well as making sure the experience didn’t negatively impact News Feed, the product had to allow for deeper engagement while giving people full control over their interactions with it. We affectionately started calling it the other space.
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.
The early team was scrappy. Facebook’s product teams generally run lean. Ours was no different — there were four of us: two engineers in London and two designers in Menlo Park. In early 2015, we nicknamed the product Faraday. Along with this, we tinkered with concepts and prototypes seeking to share with teams and build support for the product.
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.
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.
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.
The value of a good story is too often overlooked. Telling stories has been a fundamental form of communication since the development of language. And now the great majority of us walk around with a mobile device in our pockets capable of telling us the best stories, in the most personal way. We were already seeing some of that on Facebook through richer content creation and the success of autoplay video. How could we piece those delightful interactions to form an ad product that allowed brands to tell richer, more personalized narratives? That became Canvas.
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.
