Discovery Deck Unlocked: Inside the New Facebook Design Site

Facebook Design
Nov 18 · 8 min read
Laptop and iPhone showing homepage of the new Facebook Design site.
Laptop and iPhone showing homepage of the new Facebook Design site.

Over the past year, we at Facebook Design have been reflecting on how we communicate. What we saw suggested that we needed to revamp the Facebook Design website to better serve you, the design community, as one of our goals is to generously contribute to the field of design. This often means sharing insights, best practices, and tools. In the case of this article, we’re sharing the discovery process that led to some of the executional decisions we made for the new Facebook Design website, which launched yesterday.

A discovery presentation is usually long as far as decks go; they pack months of research on business objectives, technical issues, audience insights, and current and competitive content. We’ll spare you all that and surface a handful of findings that most surprised us and how they inspired a few executions in visual design, UX and messaging.

Why redesign?

Business first

A slide from a Facebook internal presentation titled “what we want to achieve,” expressing the goals of the site.
A slide from a Facebook internal presentation titled “what we want to achieve,” expressing the goals of the site.
Info from our discovery deck

We then translated our goals into quantitative success metrics:

A slide from a Facebook internal presentation titled “we measure the success by an increase in” expressing metrics goals.
A slide from a Facebook internal presentation titled “we measure the success by an increase in” expressing metrics goals.
Info from our discovery deck

Easy enough. We figured we could do all that. But could we? If meeting these goals were so easy, why hadn’t we met them long ago? What was standing in the way of where the site was, in terms of quality, and where we wanted it to be? To answer these questions, we looked long and hard at our site and listed what wasn’t working with it:

A slide from a Facebook internal presentation lists the old site’s limitations as: being too focused on product design, etc.
A slide from a Facebook internal presentation lists the old site’s limitations as: being too focused on product design, etc.
Info from our discovery deck

This led to the more substantive and fascinating phases of discovery, beginning with audience research.

Who do we think you are?

Learnings from personas

Five faces represent the junior designer, the lead designer, the design manager, the researcher, a writer, and their needs.
Five faces represent the junior designer, the lead designer, the design manager, the researcher, a writer, and their needs.
The five personas we created to represent our site’s audience

The biggest takeaway was that across design disciplines and seniority levels, people want vastly different content and formats, and have different expectations of what a Facebook Design website should offer them. We acknowledged that if we wanted to reach people in different roles and points in their careers, we’d have to present an identity and content relevant to them all without seeming generic.

Learnings from Google Analytics

First, we found that our top site visitors come from Europe, Asia or the Americas. While we strive to attract an international audience, the fact that we’d been succeeding wasn’t front-and-center for us, given our attention to the previous site’s more obvious technical shortcomings.

An internal presentation chart titled “current site use” shows audiences come equally from Europe, the Americas and Asia.
An internal presentation chart titled “current site use” shows audiences come equally from Europe, the Americas and Asia.
Geography of users by continent, Mar. 1, 2019 — Feb. 29, 2020

Next, we found that the pages with GUI downloads got the most engagement.

A slide from an internal presentation titled “current page engagement” shows that the top-visited page is the devices page.
A slide from an internal presentation titled “current page engagement” shows that the top-visited page is the devices page.
Most popular pages by events, Mar. 1, 2019 — Feb. 29, 2020

Most people who download GUI files are front-end and product designers, which told us that if we wanted to appeal to people in the larger design community (industrial designers, content designers, sound designers, researchers, etc.), we’d have to create more diverse content, and also cue people from different disciplines to the fact our site would have something for all of them.

Learnings from competitive analysis

An internal slide titled “competitive analysis” shows competitors’ site audiences, with Facebooks as “product designers.”
An internal slide titled “competitive analysis” shows competitors’ site audiences, with Facebooks as “product designers.”
Info from our discovery process’ competitive analysis

This finding put a fine point on the fact that our site had to open up to people in different roles. After all, our design community within our company is diverse — we employ linguists, virtual reality designers, marketing creatives, academics, the list goes on — all of whom, at the end of the day, practice design.

Our discovery process surfaced other important considerations, such as how we might prioritize improvements over time, our team’s dreams and dreads for the project, technical issues, SEO optimization, and more. But what we’re most excited to share are the findings that lead to front-end design decisions, because one of the things our research told us about you is that you probably aren’t an engineer or SEO maven.

Pivoting into execution

Site content

Our new site’s homepage copy explicitly addresses a diverse audience. Word choices throughout the site help show that we value empathy, collaboration, and accessibility. We use simple English devoid of regional nuance, while the second-person point of view (addressing visitors as “you”) makes the language feel more personal.

We’ve used a homepage image for the redesign launch that includes a person wearing an Oculus headset to not only help showcase the range of apps and technologies the Facebook Design community works on, but to also nod to the various roles (in this case industrial design) that work requires. For imagery used throughout the site, we took direction from our overarching Facebook company photography guidelines. These encourage us to show relatable and authentic scenes that focus on real people (not actors) in their environments. Within those guidelines, we strategically chose images of people who might fill different roles and interact with objects that reflect our varied technologies.

A montage of pages from the new Facebook Design site shows copy that expresses inclusivity and images showing diverse people
A montage of pages from the new Facebook Design site shows copy that expresses inclusivity and images showing diverse people
Montage of pages from the new Facebook Design website

We’re also realizing our opportunity to publish more articles related to disciplines outside strict in-app product design, and to inspire authors who live around the world. We want you to benefit from all the skills and knowledge our design community creates — not just from Menlo Park and New York City, but from Tel Aviv, Singapore, London and more. Look out for more diverse content from us over the next year — we’re brewing articles on everything from responsible innovation in VR design and social impact projects to growing your design career and designing for digital wallets.

User experience

An animated .gif shows the new Facebook Design site scroll behavior: images and text panels interconnect through motion.
An animated .gif shows the new Facebook Design site scroll behavior: images and text panels interconnect through motion.
Motion in the new Facebook Design website nods to the idea of interconnectedness

It was a conscious creative choice to mimic the fluidity and interconnectedness of all the roles within Facebook’s design discipline. We are constantly building, growing, and including people from more diverse backgrounds, and we wanted our site to embody that in every dimension.

Color

Color palettes: a grayscale called “functional,” a muted spectrum called “empathetic,” bold colors called “endorsed brand.”
Color palettes: a grayscale called “functional,” a muted spectrum called “empathetic,” bold colors called “endorsed brand.”
The three types of color behavior for Facebook company communications

We decided that using the empathetic color palette aligns with our company branding and provides visual flexibility between functionality and diversity. To ladder up to our “radically inclusive” concept, we used a generous breadth of colors from this palette — they’re warm, empathic and human, not jarring, overly assertive or attempting to belong to any discipline. We also applied them with full-bleed on many pages to help establish an inviting sense of place. White negative space has a more utilitarian feel, so we used it sparingly.

A montage of pages from the new Facebook Design site showcases the empathetic color palette used throughout the site.
A montage of pages from the new Facebook Design site showcases the empathetic color palette used throughout the site.
Examples of the Facebook company’s empathetic color palette used in our new site

While our use of color doesn’t manifest a concept on its own, it’s one of the many design choices that work in concert with others to do so.

We hope this peek into our discovery and design process has given you insight into the way we work and how our new site will be valuable to you. We’ve created the new Facebook Design site for designers of every stripe, and we’ll be adding to and enhancing it over the coming months and beyond.

Check out the new Facebook Design site here.

Facebook Design

Designing for the global diversity of human needs.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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