STORIES

Discovery deck unlocked: Inside the new Facebook Design site

PROCESS
CASE STUDIES
BY FACEBOOK DESIGN
8 MIN READ
NOVEMBER 17, 2020
Laptop displays the new Facebook Design site's homepage, which shows a man using the Oculus virtual reality headset. Near the laptop is a smartphone also displaying the new Facebook design site.

SUMMARY

Peek into the research and insights that drove our overhaul of the Facebook Design website.

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



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 making people want to work at Facebook, creating an awe-inspiring experience, making a site that employees are proud of, and creating a resource that provides value upon every visit.

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," listing the metrics page views, click-through-rates, new and returning visitors, referrals from careers site, downloads, social traffic, organic search traffic, and positive visitor sentiment.

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, undistinguished design, content on other platforms, little work showcased, diversity not showcased, senior roles not highlighted, not geared toward global audience, and too text-based.

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.



Learnings from personas


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 five site audiences. The junior designer audience wants inspiration;  lead designers want to validate ideas with seasoned colleagues; design managers want to understand the rationale behind design decisions; researchers want to know how Facebook conducts and solves research briefs;  writers don't think the site is for them.

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


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.

A slide with a chart from a Facebook internal presentation titled "current site use" shows 37.25% of visitors come from the Americas, 30.57% come from Europe, 27.52% come from Asia, 2.14% come from Africa and .42% are unknown.

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 a Facebook 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


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.

A slide from a Facebook internal presentation titled "competitive analysis" shows the audience breakdown of other companies' design websites, such as Google Design and Spotify Design. The Facebook Design website is the only one perceived to address product designers only.

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.



Site content


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 using different technologies.

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


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, images connect through motion.

Motion graphic sample shows images and text animating to fluidly compse a page as a user scrolls down.

Motion in the new Facebook Design website nods to the idea of interconnectedness

This 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


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.

A triptych shows one cirlce with grayscale colors called "functional," a middle circle filled with a full spectrum of muted colors, called "empathetic," and a third circle filled with select bold colors labeled "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.

Facebook Design is for everyone who touches user experience and design.

Whether you're a product designer, writer, creative strategist, researcher, project manager, team leader or all-around systems-thinker, there's something here for you.

Facebook Design is a global resource for all things design, with specialized focus on Facebook apps and technologies. We believe everyone is a designer, in some shape or form.

FacebookInstagramTwitterDribbleMedium

© 2020 Facebook