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:
Info from our discovery deck
We then translated our goals into quantitative success metrics:
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:
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:
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.
Geography of users by continent, Mar. 1, 2019 - Feb. 29, 2020
Next, we found that the pages with GUI downloads got the most engagement.
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.
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.
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 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.
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.
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.
RELATED STORIES
Read more stories about process
Design at Meta 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.
