Diversity & Inclusion Innovation: Wrapping dozens of interlocking efforts and an aggressive company goal to improve diversity into Facebook’s Diversity Hub.
In the fall of 2018, Facebook came to Uncorked at a critical juncture. It was preparing to build a home for its 2019 Diversity Report, a highly-publicized document showing the company’s progress toward diversity and inclusion in its workforce, and helping people from under-represented communities learn about careers in tech.
In past years, media coverage of the report focused narrowly on the numbers, noting the company’s slow progress, and not the wealth of programs the company undertook to change those numbers both internally and externally. With this year’s report, Facebook made a commitment to bringing new voices forward to tell a more cohesive and comprehensive diversity and inclusion story. The report showed Facebook had made progress, and so the site needed to do more than simply share demographic data.
This website is a physical manifestation of us at Facebook recognizing there’s more power when we bring all these things together. The site does a better job of showing the breadth and depth of the work, to capture and showcase all of it.
During the initial strategy development phase of the work, the project team came to a key insight: Showing ongoing institutional progress on diversity and inclusion while honoring employee commitments to support their colleagues was critical. Building this trust was more important than merely presenting demographic data that was impersonal, and that would be judged by the press and forgotten in a news cycle.
Meanwhile, we surfaced the importance of a straightforward way to identify progress. A simple logic (Find, Grow & Keep, Apply) explains the link between Diversity and Inclusion innovation and the company’s broader innovation vision.
Incorporating over 40 separate groups and initiatives—both inside the company and in the community—meant we needed to give the site a lucid design logic. Diversity Report content is intermingled with Efforts and Initiatives, both inside Facebook and in communities. Visitors can navigate directly to topics they’re interested in.
The site’s launch was anchored by a risky announcement: on launch day, Facebook’s Global Chief Diversity Officer, Maxine Williams pledged 50 percent of Facebook’s employees would come from underrepresented groups by 2024.
We envision a company where in the next five years, at least 50% of our workforce will be women, people who are Black, Hispanic, Native American, Pacific Islanders, people with two or more ethnicities, people with disabilities, and veterans. In doing this, we aim to double our number of women globally and Black and Hispanic employees in the US.
The Design
Bringing employee stories to life also represented a unique opportunity. Traditional diversity and inclusion reports address change by zooming in on single-axis attributes, but this project widened the frame to include a multi-faceted view of the richness of human experience, showcasing people who participated in programs or helped build benefit for their communities. Ideally, other employees and potential colleagues can identify Facebook as a work environment where they can be seen as their whole selves.
A subtle pattern language is incorporated into the site’s design, and will continue to evolve and form internal collateral to accompany employee stories. “The idea behind the whole website was to tell a story beyond the numbers, and the patterns were a subtle part of this concept,” says Dan Zhou, graphic designer at Facebook. “We adhere to the standard government categorizations of gender and ethnicity for the report, but at the same time we want to acknowledge the irony of putting people in these rigid categories when the goal here is to celebrating diversity. So, respectfully and playfully, we wanted to create categories of our own, and make patterns that represent traits like “wise” or “adventurous” or “determined” and have interviewees choose patterns that resonated with them, in order to tell a fuller story.”
“I’m very much looking forward to employees getting excited and being proud about all we’re doing,” Harrison says. “To be able to point employees to this to say, ‘Hey, look at all this stuff we’re doing, here’s what you can get involved in, here’s how we can help the community,’ that has a ripple effect. They feel good about it, and they talk to their friends and family about it. We’re doing a lot to celebrate this internally, and we have a big plan to talk about this more inside the company.”
The Build
We learned early on that the site’s foundation would be built on WordPress and VIP, its de-facto enterprise platform. We dove into the VIP documentation, quickly learning we would have to do things a bit differently than we have before. With limited third-party plugin support and pre-defined development workflows and configurations, it was important to divvy up lanes for capability and continuous integration and deployment exploration.
Initial explorations started with Gutenberg Blocks, the new React.js-based editor framework at the core of WordPress since late 2018. We started where we usually do: prototyping, sharing, and weighing risk against speed, quality, and schedule liability. After a few rounds of prototyping around extending built-in Blocks and building custom Blocks, we felt comfortable enough to move full steam ahead with Gutenberg Blocks as the backbone to our WordPress VIP implementation.
With the core architectural decisions made, we moved quickly into learning how best to integrate smoothly within the VIP processes. We started by spinning up an AWS CodeBuild pipeline that utilized the VIP-required PHP_CodeSniffer rulesets and standards, which was then integrated into our GitHub workflows. This allowed us to quickly catch and fix any potential code review issues before they were introduced to the VIP team.
Once we had our implementation foundation laid and workflows humming along, we got to work on building out the editor and front-end experiences. As our teams collected ongoing feedback, we collaborated closely with Facebook to adjust content structures and presentation quickly and efficiently, incorporating our gained Blocks API knowledge and cross-studio integration with our design and strategy teams.
