Discovery Deck Unlocked: Inside the New Facebook Design Site

Facebook Design
Nov 18, 2020 · 8 min read
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?

The Facebook Design website began as a scrappy side project in 2015 (see an early iteration of it here). At the time, it served as a storehouse of free utilities for more traditional graphic and front-end designers — not people in broader design roles such as content designers, user experience researchers, etc. Its main fare was free iOS GUIs: useful files for concepting ideas, mocking up apps or creating custom interface elements. Back then, we didn’t have a place to talk about how we designed for our brand and how we think about design. As time went on, it became clear that the site could be so much more, so we started with a discovery phase.

Business first

The first phase of discovery meant identifying our business objectives. What were we trying to do? This slide from our discovery deck lays it all out:

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.
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.
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?

Whenever we begin a discovery project, we typically expect our audience research to help us determine a specific target user with a narrow set of needs to design for. In the case of the Facebook Design website, we concluded the opposite: both the business objectives and the user data told us that we needed to broaden our audience set.

To understand how we might build a site for the broader design community, we conducted interviews with people across different design disciplines and seniority levels. These personas represent a synthesis of what we found:

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.

If you’ve ever examined a Google Analytics dashboard, you know you could spend months scrutinizing what seems like an infinite amount of data. So, we’re extracting three of the most significant bits we learned from analyzing data between Mar. 1, 2019 — Feb. 29, 2020.

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.
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.
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.

We undertook a competitive analysis to understand how our new site could offer unique value to our intended audiences, and to see what executions were working for other companies with design practices similar to ours. We were surprised to find that our site was the only one that most obviously and exclusively spoke to people in product design roles.

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

Throughout discovery, the message we kept getting was that our audiences, both real and aspirational, thought our site was only for product designers. This perception did not match up with the broad diversity of the Facebook Design community, and in order to build a meaningful relationship with all our audiences, the new Facebook Design site needed to embody a radically inclusive platform. This term, “radically inclusive,” became the driving concept behind our design decisions. To execute on this concept, we focused on making the site empathetic, collaborative and accessible.

A site’s homepage typically introduces an organization and sets expectations for what users will get from diving deeper. So you can apply this explanation of a few choices we made for the homepage to other sections.

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
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.

We executed on our “radically inclusive” concept not just in the more obvious arena of web copy and blog content, but in subtleties of how you experience the site. For example, as you explore, image and text panels connect through a specific kind of motion.

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.

In discussing how we’d use color, our main challenge was adhering to the overarching Facebook company brand guidelines while differentiating Facebook Design and emphasizing our “radically inclusive” concept. The Facebook company uses three color palettes for different types of content. Our functional palette is subtle, speaking to the larger Facebook company and brand, while our empathetic palette celebrates the diversity of tools, stories and people we feature. In specific cases, our Endorsed Brand colors are used to showcase the variety of Facebook products.

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.
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