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

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.

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:

  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.

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.

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.

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.

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.

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.

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.


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.
Next Story — How To Make Your Not-So-Great Visual Design Better
Currently Reading - How To Make Your Not-So-Great Visual Design Better

Photo by William Iven

How To Make Your Not-So-Great Visual Design Better

“How do I get better at visual design?”

This question comes up a lot. I coach and mentor a lot of students on product design by tutoring for the Academy of Art in San Francisco, reviewing for AIGA’s portfolio reviews, hosting interns at Facebook and so on.

There’s a bridge from a student’s perspective to a professional’s perspective. For most, it’s guaranteed to be a blend of fear and excitement and curiosity, peppered with a lot of questions.

“What’s going to happen when I get out?”

“What kind of design jobs are out there?”

“What might I be a good fit for?”

“What if I don’t get a job?”

“WHAT IF THERE ARE NO JOBS?”

“What can I do now to prepare?”


We recently hosted a critique at Facebook with a student from Cornell, Jon Lee. There’s something that I really liked about Jon in our brief interaction: he’s self-aware. He already knows that he’s got room to improve in terms of visual design. He knows this because he’s gotten feedback on this from potential employers, and he — like many other students on the brink of their careers — is curious how his skills will prepare him for a design role. He wants to know how he can get better.

Being a solid product designer requires a broad skillset, and having visual chops is a big part of this role, particularly at Facebook. I’m excited that Jon is curious about these skills, and if I were able to pull him aside now, I’d ask Jon the same questions that I ask other students and give him a framework that hopefully will serve beyond this project.

Here’s a quick look at the designs Jon shared. At this point, he was just beginning to look at visual design.

Nearspace app design concept by Jon Lee

We often refer to visual design as craft and execution at Facebook. In order to evaluate the current state of Jon’s work and encourage him towards well-crafted design, I need to ask questions. Inquiry should come before judgement, because it broadens the understanding of someone’s intentionality.

What is your type hierarchy?

  • Have you audited your type styles? I see two casings (Title Case and UPPERCASE), at least three different type sizes, two colors of type, centered and left aligned type.
  • What styles belong with headers? Which ones for buttons? Which ones for body copy? For metadata?

What patterns are you using?

  • I see text buttons of two sizes, two button heights, two casings, and three colors, and I also see buttons with icons.
  • I see two different list styles. One more clearly relates to existing discovery patterns (photo with business name, categories, and star rating) and one that looks like a wireframe (Recent Posts).
  • What is the difference between buttons and lists? On the Profile page, cards, buttons and lists are using the same white background with grey outline pattern. Should they be different?

How does this compare to existing or established patterns?

  • If the selections are toggles, could they automatically toggle on? Are Cancel and Apply necessary?
  • Is Back the same as Cancel? Would an X in the top right corner suffice?
  • I see there’s a Reset button without any filters applied. Is it necessary in this state? Could Apply replace Reset?
  • Should the bottom nav stay put in this part of the experience?
  • Do products in the same vertical have parallel patterns? Are any of these useful?

What are your margins and padding rules?

  • I see minimal margins on the Nearby and Profile screens; Filter has much more generous margins.
  • The “y” in Nearby in the bottom nav nearly touches the edge of the screen.
  • What is your grid?

Are your icons clear?

  • I see a single seat icon and clusters of 3 and of 6. Is that a count of seats or an approximation or a range? Would there be a better way to represent this? Is this the equivalent of “good for groups”? Is there another way to show this?
  • Why is there no iconic equivalent to the opposite of outlet? If something is not important, why would you have to indicate that lack of importance; wouldn’t initial results include all available options?
  • Does pie mean pie? Or desserts? Or food? Does the cup mean drinks? Could you assume that every food place serves drinks as well? Are there better groupings here?

How consistent are your design choices?

  • I see distance using a dropdown while other filtering choices are buttons.
  • Some buttons contain icons and other contain text.
  • One icon uses perspective, while the others don’t. The wifi icon has the thickest lines; the outlet the thinnest. Some are pixelated; some are not. Some are black; some are grey.
  • Most of the cards and buttons are using the same pattern: corner radius, outline, color fill, type. Are they too consistent?

Does everything on the screen need to be there?

  • I see a divider above the search field and dividers under each Availability choice.
  • I see one use of the color green.
  • I see both icons and text in the nav. Are both necessary?

How would you define your color palette?

  • The palette is pretty muted. It’s warm in tone, excepting a brighter green button. Do you have rules around what to use where?

Is your spelling, grammar, and punctuation correct? Have you considered content strategy?

  • I’m familiar with Nearby and Profile in the bottom nav; what does Add mean? Add what?
  • “Availability” is misspelled.
  • Is the word Availability necessary?
  • How does the flow of the page “read” (be it through words or visuals)? Your page title is Filter, and your section headers are Distance, Seating Availability, Wifi Availability, Outlet Availability, and Food/Beverage Availability. How would you describe what you can do on this page to a friend? Are these constructed in the right hierarchy? Are they named correctly?

How would this translate to another platform?

  • If you designed this for an Android device or for desktop, would you make the same above decisions? What design decisions would you make differently?

How do I get better at visual design?

Having answers to these posed questions is an excellent place to start. Being a good designer—being a good visual designer — requires intentionality. That means that you’re thinking through these questions and answering them as you’re making design decisions, not only when someone asks you the question after the fact.

The next thing to work on as you answer these questions with intentionality, is to ensure that intentionality is based on solid design principles and research and attention to detail, and yes, sometimes things like style and preference. This can be tricky, because not every designer has these sensibilities or well-founded opinions yet. And that’s okay, because the path to improving this begins by understanding that your work isn’t quite there yet.

Ira Glass has fantastic perspective on this:

“Nobody tells people who are beginners — and I really wish somebody had told this to me — is that all of us who do creative work … we get into it because we have good taste. But it’s like there’s a gap, that for the first couple years that you’re making stuff, what you’re making isn’t so good, OK? It’s not that great. It’s really not that great. It’s trying to be good, it has ambition to be good, but it’s not quite that good. But your taste — the thing that got you into the game — your taste is still killer, and your taste is good enough that you can tell that what you’re making is kind of a disappointment to you, you know what I mean?”

If you have taste, and that taste tells you that you have room for improvement, you can improve your visual design. How?

You observe design in the world and form opinions on what’s good and what’s not good. You solidify your opinions on foundational design principles.

You look at established design systems like material design and Human Interface Guidelines.

You practice.

You browse websites and apps and Dribbble for excellent design work, and you don’t copy them, but you ask yourself why is this working? You search for answers.

And you practice.

You show your work to people who have the sensibilities—the visual design skills—already, and you listen to the questions they have about your work. (In Jon’s case, this is exactly what he did in our Facebook Design critique.) You think about your intentionality behind them, and you find your answers.

And you ask yourself questions like the ones we just went through.


Now, I could have given Jon reactions, things like “your styles are all over the place” or “that green button feels out of place.” I could have also prescribed solutions like “left align all your filter categories and buttons” or “make the corner radius of your buttons smaller” or “choose a brighter brand color.” But if Jon wants to get better, if you want to get better, it takes more than polishing a single project.

Feedback and mentorship can be very similar; the best development usually comes from asking questions and guiding rather than being prescriptive.
Improvement takes practice. The proven ability to execute again and again is what gets students that first design role, and once that first role is landed it’s the self-awareness and the progress that point towards a trajectory of growth.

Next Story — Framer Snippets Library
Currently Reading - Framer Snippets Library

Framer Snippets Library

47 Repeatables For A Faster Workflow

In a previous article about how I work with Framer and Sketch in my workflow I mentioned one of my favorite snippets, which slowed down all the animations of a project. It received quite a few highlights, so I felt it would be cool to publish my snippets library in the Facebook Design Resources. Our goal is to help spread great design tools to the larger design community, so we hope you find these useful!

I built this library to complement the included snippets library in Framer. These snippets focus on repeated actions and include as little code as possible. It should be quite helpful to beginners who are learning the basic behaviors of Framer, but it should be also be helpful to more experienced users when used as shortcuts.

Download here: https://github.com/robotdestroy/Framer-Snippets-Library

Install

  • Open Framer
  • Tap snippets icon
  • Show snippets folder
  • Either clone or download snippets to folder

Actions

A variety of common actions.

  • Click
  • Keydown
  • Touch Start
  • Touch Move
  • Touch End

Animate

The animate snippets are a variety of common animation starters. Including scale, opacity, and position. Choose the one that makes the most sense and customize it to your needs.

  • Opacity
  • Position
  • Scale
  • Dimensions
  • Rotation
  • With Delay

Trigger On End
Included are two ways to trigger an animation on the end of another animation. The formal one should be used when you intend on reusing the animations, the casual one can be used for one off triggering.

Repeating
This snippet allows you to create an infinite loop of two animations. The ‘Halt’ snippet will stop the repeating animation.

Slow Motion
This will allow you view your prototypes in slow motion to more finely tune your animations.

Drag

  • Start
  • Move
  • End
  • Postion

Use these to trigger events from drag actions. Position reports back the current drag position, use it to trigger events when you drag an object into a trigger area.

Layer Properties

Use these to effect your layers.

  • Blur
  • Border
  • Center
  • Circle Shape
  • HTML
  • Image
  • Name
  • Saturation
  • Shadow
  • Style
  • Place Before & Behind
  • Bring To Front & Send To Back

Scroll

Position
Reports back scroll position. You can use this to trigger events that need to occur at certain positions of a scrollLayer.

Direction Lock
Locks scrolling to one direction at a time

Velocity
Reports back velocity of scroll.

Simple Click and Touch

  • Click
  • Touch Start
  • Touch Move
  • Touch End

Very simple click and touch listeners. Use Click when you want immediate feedback. Touch allows more control over the touch event, but has a small delay.

Slow Motion

This will allow you view your prototypes in slow motion to more finely tune your animations.

Spring

  • Fast
  • Loose
  • Slow
  • Variables Setup

Some starter springs. The variable setup snippet allows you to create reusable springs. Place this at the beginning of your file. Use the variable name in place of springs throughout your document.

Other

Delay Utility
Delays anything.

Device Check
Checks to see what device the project is being run on.

Project Setup Example
An organized way to set up your projects.

Follow Me

Next Story — Peek Inside a Facebook Design Critique
Currently Reading - Peek Inside a Facebook Design Critique

Peek Inside a Facebook Design Critique

At Facebook, where we’re working to make the world more open and connected, an inherent part of our mission is to share how we create the things we build. We recently decided to begin sharing a critical part of our process as a result: the design critique.

By showing how design critiques at Facebook typically go, we wanted to highlight what makes for a good critique and what can often get in the way. We asked designers around the world to collaborate with us on this, inviting them to share work to be critiqued using the hashtag #FacebookDesignCrit.

A dozen of you shared your designs, and we’re ready to show how our first collaborative critique went.

Kicking off the critique

For this, we reached out to New York based design student Jon Lee to discuss his design for a local workspace discovery app called Nearspace.

Six members of the Facebook design team — Nathan Garvie, Paola Mariselli, Jeff Smith, Jasmine Friedl, Geoff Teehan, and myself, Tanner Christensen, as facilitator — sat down (virtually) with Jon to discuss his project and critique the work.

As you read, we would love to have you leave us comments on what you think went well during this critique and what could have been improved. Jump to the bottom of this post to read a few of our own highlight takeaways.


Tanner: Jon, can you take a minute to quickly summarize the problem you’re solving?

Jon: As a student I often ran into the problem of trying to find a place to do my work. With the limited spaces here and all the features I need to work remotely, it was often the case where I’d enter a Starbucks nearby or go to another place to study and it’s just very uncomfortable.
I figured, why not create an app that would help you find a place very quickly that could fit all your needs? …I interviewed another student and an instructor to see their perspectives…I gathered…key insights which highlighted the idea that the app seems to be good for people who are in new areas that aren’t familiar with their surroundings areas.
Nearspace app design concept by Jon Lee

Tanner: It looks like you made some good progress and did a bit of research. What specific part of this are you looking for feedback on?

Jon: Specifically the high-fidelity end, because this is my first time ever designing anything [on my own]. One of my biggest concerns is that as I’m looking for internships in user experience, all the employers often ask for my portfolio and say “You know the process pretty well, but you’re lacking graphic design skills,” or “your visual experience just isn’t there.” That’s something I want to focus on today.

Tanner: Before we do that, does everyone understand the problem that we’re looking at here and agree on what we’re solving for?

Jasmine: Can I first ask a clarifying question? You talk about the problem being mostly students having a hard time finding places to work, was it just students you designed this for?

Jon: Initially it was just for students, but then I started thinking… one persona that caught my eye was the common business man or woman who’s just trying to get things done on the go. This is something I haven’t necessarily determined yet, whether or not my main focus would be just for students.

Jasmine: I know you’re asking for feedback on the end result, but can we dig a bit more into the problem, making sure the end result is meeting the needs of that problem? I’m imagining if a person doesn’t have a work space, why is that a need? Is it something where working at home isn’t an option? They don’t have an office? They’re on the go, meeting clients? What are the characteristics of the problem?

Jon: I think the biggest characteristic is the last thing you said: they’re on the go, trying to get things done quickly. They’re not necessarily looking for somewhere that they’re going to be staying at for long or go back to consecutively. The main issue is the idea that you’re already short on time and you need to get something done quickly.

Tanner: It’s interesting that you’re talking about the emphasis being on something quick and efficient and also comfortable. The core part of the app—looking at the screens now—isn’t necessarily about time efficiency or how close it is to you. Right now it’s more about the aesthetic and these filters. What led you to focus on this filtered design rather than something that’s more efficient for users?

Jon: Initially I thought about how I would design something just focused on efficiency. To be honest, if I was just working toward efficiency, it could have just been a map app, where it’s like “What’s the closest place? Here you go.”
The difficulty I had was balancing efficiency with the user’s needs, right? A filtered view is still necessary, otherwise how are we going to determine a decisive system for what you’re looking for? It was definitely a struggle I had.

Geoff: I think one thing you want to understand is are people actually going to add places? Are they not protective of their space since it’s limited? No one is incentivized to add a place if they’ve found their own, right? To share just means less likelihood that they’ll be room there in the future. So it’s one thing to be aware of that you may want to do more research on, how willing are people to share a space?

Jon: That definitely was an issue that came up. I think the limiting factor in my entire design is simply the lack of research. I think that limitation itself has prevented me from addressing a lot of those problems.

Jasmine: I think you do have a lot here that you could still use to make some assumptions and move on. Let’s go back to when we were talking about making a decision based on time. You have this brainstorm cloud here where you have a whole cluster of categories: you’ve got travel time, you’ve got public transportation, you’ve got distance. I could see you adding: do you have to wait in line here, are there open tables, things like that. Sometimes, even though you haven’t had time to dig in and talk to 20 people, you still have a good guess as to what you could move on.

Jon: So you’re saying rather than having filters that are more general focused, to focus on filters related to the time decision? Things like is there a waiting time in line?

Jasmine: I think what Tanner had zeroed in on is that if your goal is solving for people—both students and the regular working force, who don’t have a lot of time—the app you’ve shown isn’t really highlighting that problem. We’re talking about limitations on research and how it’s hard, especially for being a school project, to get to an end result that is verified and validated. If you looked at your problem and said: “Which of these ideas address the problem?” I think you can answer that through what you’ve already explored.

Nathan: One thing I’d challenge you to think about is what’s the size of an actual work location pool you’re going to start with? It might be more efficient just to start with a long list of the places nearby, within a radius. If you’re dealing with a small pool of work locations, you might not even need the filters to start.

Jeff: I agree with that. I do think one other thing that filters are good for is helping us make trade-offs for a service like this. You may say: I want wi-fi or it’s not important, I need a power outlet or not. For a lot of people, if the problem is “I just need a place to work,” then it’s not about filtering. You may just show all the information in the list view, you’re not really displaying that much now. You have some things like a star rating, which isn’t really telling you a lot. Is it because it has a lot of seating? Good wi-fi? Is it because it’s mostly available? I don’t want to get too technical, but try thinking about taking those filters and bringing the information into the actual list items.

Geoff: When it comes to the visual design, you could probably consider thinking through what information you’re surfacing, along the lines of what Jeff brought up. To me, it seems like distance and name are probably the two most important factors that I want to see in a list. Right now, the distance is actually the most reduced of all elements on the page.

Early mocks for the app

Paola: Were you thinking that either of these cards would be tappable and would lead you somewhere else?

Jon: No, I think tapping would lead you to a page that just contains more information, some pictures, at the bottom they would have a “go” button that would just bring up Google Maps and bring you directions to get there. I do 100% agree with what you all have said, which is to bring the information up to the forefront. When you mentioned that I started imagining a design where it still maintains this kind of blocky design, but with the information in the card and a tiny block with the picture and making that more narrow so options can be seen quickly. Rather than having more information when you select it, one click could just bring you to the map. It reduces the friction here as well.

Paola: Always go back to your original problem statement so you can verify that everything you’re going to release is actually meeting and solving that problem. For example, if you’re considering keeping a search bar, and the original intent is for people new to an area, then what exactly would you be searching for? If you’re new to a place, you’d likely be searching not for the name of a place, but for a type of place—a book store versus a cafe.

Jasmine: I agree, what makes this different from Yelp? Right now you’re getting a lot of the same things.

Geoff: That’s a really good thing to think about: the competition. How is this different? How are the needs of my users different and what can I do to help them that’s going to assess some of those needs? For example, most photos on Yelp are going to be of the food. For this, people don’t care about that— they want to see the work space, they want to see where the outlets are, they want to know how good the wifi is, what times of day are busy, how many seats there are. Think about all the things that you’re going to be considering and then, again, how they play into your information hierarchy.

Jon: Ok! I have a question now, with all these different aspects to consider, how do you recommend selecting which ones are to be at the top of the hierarchy? How many should be displayed in such a short amount of space?

Jasmine: I think Jeff had a good thought around that. You literally go through and try to identify what are the core pieces of information that are important to a user and then list those out and put them in a logical format.

Geoff: Yeah, I think for something like this you can use your gut a little bit, or you can talk to other people. One thing that can really help is to think about not just yourself in a certain scenario but yourself in many different scenarios. If you’re jammed on time and it’s 11:00 PM, what do you need to know? Is this place even open that late? You wouldn’t think about that if it’s noon. Think about different contexts and rank those to consider all the information you’d need and when it’s most important.

Paola: As long as you try to solve the core problem for each of these contexts to try to make conscious decisions about why you’re solving them.

Jasmine: It’s okay if you’re looking through your list of things—like I’m looking at your brainstorm again—and saying: “this doesn’t apply.” Getting rid of options can make your job easier. Maybe food doesn’t even matter in this, maybe you could actually be looking for locations that specifically aren’t restaurants.

Additional mocks from the critique

Tanner: We’re just about out of time, does anyone have anything to say in closing?

Nathan: You asked for feedback on visual design and we gave you product critique. I think there’s a lot of things we probably could have gone through with a red marker and give you feedback on. One tactical thing I would suggest is to go out and find articles on UI design. Things like “12 hot tips” that will help you deal with things like list lock-ups, margins, and how to overlay text on images. Those are good starting points as you experiment. Beg, borrow, and steal if you see something in another app or service, try to reproduce it and see how it works for you.

Jon: Right, okay. Since we’re on this topic, I wanted to hear from people working in the industry: what is your opinion on how important someone’s visual design skills are when trying to enter into user experience work?

Jasmine: You could get a lot of answers on that, it really depends on what role you’re looking for and how important that is versus other factors. One of the reasons we went and did more of a product critique for this is because you can have the best looking app, but if it doesn’t work, no one is going to use it. Those things really going hand in hand.

Tanner: All right, hopefully that was helpful. We went over a lot of stuff here. Do you feel like you have a good sense of what you would do next with this product based on our feedback, Jon?

Jon: Definitely. I think the first part is like you mentioned: going back to the beginning and focusing on my problem and just knocking out what I need or don’t need then working from there. Finding that hierarchy. Thank you so much, I really appreciate this.

Tanner: Thank you for sharing your work in such a public forum. We’re going to learn from this too.


What We Learned

Now that we’ve had some time to reflect on how the critique went, we wanted to share a bit about what we learned,

Critique can be a great place to develop a deeper understanding of the problem landscape.

One of the more surprising takeaways from the critique was just how much time was spent not focusing on what Jon initially asked for. He came into the critique looking specifically for interface and user experience feedback, but the group ended up spending all 30 minutes discussing the problem the product design was attempting to solve in the first place. This was an important direction that Jon may have not initially considered, as Jasmine states:

“We went and did more of a product critique for this is because you can have the best looking app, but if it doesn’t work, no one is going to use it. Those things really going hand in hand.”

Context up-front makes a world of a difference when it comes to presenting your work for critique.

Jon came to our critique with a clear story of how he landed on the concepts for Nearspace that he had. Being able to briefly show our team his original comps as well as more polished versions, in addition to a brainstorm cloud, helped guide the discussion.

In several instances we referred back to Jon’s original problem statement and brainstorm doodle when addressing a question related to the problem he was attempting to solve.

The best feedback is inquisitive, not prescriptive.

By asking questions about the design direction—and the problem being solved—the conversation was able to go where it needed to, rather than where any one person felt it should go.

The result? Both Jon and the group felt like they had landed on an improved vision of where the product could go, despite the fact there was no concrete “vision” of what that experience might look like.

When it comes to critiquing others work, questions help drive the conversation forward. As I’ve written before:

Getting the right questions out is vastly more effective than trying to find the right answer.

Join Our Next Critique

At Facebook, we know that critiques work best in person, and that transcribing a critique isn’t the best way to share how it went. We’re considering this the first of (hopefully) many open critiques. As such, we’re viewing it as an experiment.

If you found this helpful and want to participate in future critiques, leave your feedback on this post or write your own response and we’ll take a look. You can also continue submitting work for us to review on Medium by tagging it with the hashtag: #FacebookDesignCrit.

Next Story — Questions (and Answers) from Design Interviews at Facebook
Currently Reading - Questions (and Answers) from Design Interviews at Facebook

Questions (and Answers) from Design Interviews at Facebook

At the end of our interviews for Product Design at Facebook, we reserve a few minutes for the candidate to ask questions. It’s one of my favorite parts, where I can be asked anything about Facebook, the Product Design role or my experience, and I always try to answer those questions openly and honestly.

What’s caught my attention lately is how I’ve been introducing this bit. It’s become something like this: “I’d like to answer any questions that you have, because Facebook can be a pretty mysterious place.
 
Facebook has an incredibly open and transparent culture. Why would I choose to describe it as mysterious?

Our family of products covers a lot of ground, and yet many people still imagine Facebook simply as News Feed. There’s also the fact that design roles vary significantly in definition; Product Designer is an ambiguous title to many, and one that is left open to interpretation. And people interviewing are always pulling from past experiences both bad and good; while shopping for new roles, there are triggers and there are deal-breakers.

In the spirit of the transparency at Facebook that I firmly believe in — and to reduce that sense of “mystery”—here are my thoughts on five commonly asked questions in Product Design interviews.


What does your day look like?

Schedule-wise, I get in fairly early, usually shortly after 8am. I’m able to leave when I see fit, usually between 4 and 5pm. I used to be rigid about refusing to work on my “off” time — past experiences have compelled me to value and protect personal time — but now I’m comfortable going home and finishing up a thing or two in the evening if needed or prepping for the week on a Sunday.

It’s up to each individual to decide what they need to invest to be successful in their role.

Each day has a completely different flow. Often my calendar is packed; I call those days “all-day-meeting-days,” and I relax into that. This means I have product team meetings, design meetings, check-ins with cross-functional partners, 1:1s with mentees, design critiques, working sessions, interviews, etc. I might also attend one of our hosted events like our Facebook Design Lecture Series, our weekly Q&A where Mark answers employee questions, or informational talks on developing products. Sometimes I squeeze in an onsite chiropractor appointment or go to the gym.

We have an informal policy of “no-meeting-Wednesdays” where people in many roles are able to work remotely, often from home. At bare minimum those days are fully open for productivity. These are an essential complement to the rest of my week.

Ultimately, you’re in control of your own schedule, and it’s up to you to own both working time and non-working time. You make sure the flow of each day works for what you need to accomplish both short and long term, personally and professionally.

How do you decide who works on what?

I like to think that we’re very thoughtful about who joins what team. It’s not an exact science, but there are some clear facets.

Our group of Facebook products—and Facebook itself—span a lot of territory from consumer products to business tools, from complex systems to independent experiences. We have products and projects that rely heavily on strategy and product thinking, and we also have those that have bigger needs in interaction and visual design. The recruiting and interview process helps determine what products might be a good match for each new designer. At times we’ll hire people who are strong in a very specific area because we already have an open role in mind for them.

While we expect Product Designers to have a range of skills, it’s not an expectation that everyone is an expert at everything. This is where matching comes in.

Before you’re even hired, we do our best to match what you’re good at, what you enjoy doing, and where you’ll grow the most with an available and supportive team.

That might mean if you have experience designing systems, we’d want to look at teams with projects that have lots of complex dependencies. If you’re a junior designer, it’s important for us to consider teams that have solid mentors. If you’re passionate about a certain problem space, we might want to consider a team with that sort of content area.

It’s not a perfect system, but setting both you and your product team up for success means there’s a mutually beneficial partnership, and that’s the sort of match we strive to make.

What’s one thing you love and one thing you hate?

What I love most is that I’ve been able to get an enormous range of experience at one job, and that I have been in direct control of that path.

I’ve worked on three teams over my three years at the company: Payments — specifically Payments in Messenger — and simultaneously designed the first launch of Safety Check. I worked on Privacy for nearly a year, and I started on Facebook’s K12 Initiative at the beginning of this year. These teams have all had products and features focused around my areas of interest: complex problems faced by people using Facebook, often dealing with a common thread of trust.

The immense growth over the course of my time with these teams wouldn’t have been possible without the freedom to raise my hand and take action when it was time to move on.

I’ve been committed to and invested in each team, but I’m grateful to be able to ask for a new challenge or new environment when I need one and be able to find a good match.

As for the worst part of the job, for me, it’s the commute. I live in San Francisco, and the travel to Menlo Park is grueling. However, it’s a tradeoff, and I still keep coming in every day knowing there’s nowhere I’d rather be.

I’m fortunate not to get motion sickness, and I can get plenty done on our shuttles. It’s not difficult to be productive and get things done like emails, reviewing decks, doing audits or research with shuttle amenities like wi-fi. Many people sleep or listen to music or podcasts. I count commute time as work time; it is time that I do not have to myself. The time between home and work and vice versa are dependable ramping up and coming down periods, and personally, I value the time to switch gears.

I’d still rather have this job without the commute, but all of the other things I get from this job — not just the perks and benefits, but the growth and the ability to have impact—keep this tradeoff in balance.

How do you work with engineers?

For me, it’s been crucial to consider developers as my design partners. We work in a fast-paced environment, and products are often designed and built simultaneously; we don’t work in silos. Rarely is there a formal hand off of final designs and specs to a developer team. The best teams work collaboratively. We sometimes might have entirely different skillsets, but they’re always complementary. Often, we have overlapping expertise and interests.

I do my best to bring my engineers in early in my design process so that they can share ideas, feedback and constraints with me.

Likewise, I want to be involved in the development process so I can connect research and share the intentionality behind design decisions, and ultimately help the product get to the best state possible.

I host weekly design-eng syncs at the beginning of every week. I share early work, and my eng teammates share what they’re working on — all in the name of collaboration. I also utilize groups or chat threads or simply chat in person to share on the fly.

It’s up to you to build those partnerships with your engineering team; working closely together builds strong products.

What’s the design culture like?

We are invested in our design teams and the design community. We value inspiration, connection, and innovation.

Our design team hosts the Facebook Design Lecture Series where we bring in speakers from diverse perspectives that aim to inspire, elevate, provoke, and educate our entire Facebook community. We host our Artist in Residence program in which we bring in artists and designers to create installations in our workspaces. Our Analog Research Lab offers poster-making, screenprinting and woodworking, and they brings in external classes like TypeCamp. We have meetups like Draw Club, where anyone can come in and join an informal drawing class. We have quarterly hackathons—a permanent part of our product and design culture—where anyone can bring an idea to life and propose it in a few short days. We invest in building and teaching designers the best tools for the job like Sketch, Origami, and Framer.

Our resources have grown as our team has grown. Facebook’s Product Design team has changed substantially since I started three years ago; we’ve scaled to nearly 10 times our size.

Growth changes things, from operations to how we connect.

We used to have a volunteer team that worked on our interface guidelines comprised of a handful of people. Component questions or proposals would sometimes go through that group or often be resolved or implemented independently. We now have a fully functioning and comprehensive Interfaces team, which is ensuring quality, consistency and innovation in our standards.

There’s been some downsides as we scale. For a while, I hosted an intro session for my team in Design Camp — a three week training course for new design hires — and I had the opportunity to meet everyone that came through the door. Once I passed that role on to someone else, I no longer was guaranteed an introduction to everyone. I miss that, but even with that touchpoint it still would be difficult to maintain genuine connections with every incoming designer.

We still try to stay connected. We have events and offsites for both our entire design organization and our product teams. We’ve been to beach parties, visited goat farms, taken cooking classes, gone bowling, attempted glassblowing and gone kayaking. We’ve done metal-smithing, hung out on boats, taken mixology classes and baked croissants. We’ve had countless dinners together as a design family.

To keep abreast of current design work, we have quarterly all hands meetings with our entire design organization and regular monthly meetings for the our smaller teams. Our direct teams have weekly critiques, which allow us to share work with designers we interface with regularly and get continued feedback.

Everyone sits with fellow designers. We don’t, however, have our own floor or exclusive design space. I’ve twice in my career been the lone designer working on a product; I was still included in a team of closely related products so that we all could have support and camaraderie. Every design team also sits in close proximity to their respective product teams. Being at the cross-section of both design and cross-functional partners allows us to closely collaborate with every teammate, and in a way, that keeps us feeling small and connected, almost like a start-up.

I find this fascinating, that through the massive growth we’ve had, we continue to work in a scrappy yet connected manner. If you were ever to join our design family, I’m sure you’d be pleasantly surprised too.


And that’s my two cents. If this sounds interesting to you, check out our design roles on our Careers page. We’re always hiring!

Sign up to continue reading what matters most to you

Great stories deserve a great audience

Continue reading