Understanding the challenge

The problem these content writers and managers are facing is that the People Portal and HR Knowledge Base (HRKB) are currently implemented inconsistently across individual surfaces and tools. This has led to redundancy and conflicting and out-of-date content.

To illustrate their differences – People Portal is a manual process for creating and updating content, and HRKB has a bespoke CMS exclusive to their content:

Outlining the opportunity

Meta's vision was to design an easy-to-use single solution. It needed to:

→ Enable quick content creation and updates

→ Facilitate distributed publishing across platforms

→ Consistent structure and presentation of content across systems and audiences

Guiding pillars

For this first phase of work, I focused on creating content template experience including the creation, editing, reviewing, and publishing features to help illustrate the future vision. To align the Meta team and myself, I created the following pillars to validate direction and material output:

Fidelity

Utilize Facebook’s existing component library

Architecture

Users need to switch between content repositories often. Ensure flexibility and build familiarity in the interface.

Interface

Maintain a proof of concept fidelity. Illustrate the complexities and highlight the possibilities.

Making sense from the complex

As part of their first milestone for this work, the People Core team produced a data schema, which was basically an excel spreadsheet consolidation of the various data points that would make up article templates for both the People Portal and HRKB surfaces.

Design artifact of data schema leveraged to identify every data point across People Portal & HRKB

Using this as my only source of truth, I leveraged these data points to, first illustrate my ideas via whiteboarding. I used these artifacts to get on the same page with the team and validate my design was heading in the right direction

Whiteboarding sketches

Initial designs

Over the course of eight weeks I utilized XDS, Meta’s internal design component library, and created a 55-screen clickable prototype, actualizing the 120+ data point requirements in to a working interface.

Examples of first design iteration used for testing

Initial prototype screens

Testing our assumptions

Collaborating with a Meta researcher, we conducted usability tests and interviews with these initial designs with eight Facebook content writers to identify opportunities to optimize the content templates and validate the design direction.

We uncovered moments of improvement to give the user more clarity, such as highlighting that this experience is for both creation and editing. Overall, the creators and editors we tested with appreciated the simplification offered by the tool. We were headed in the right direction.

Improving based on insights

I improved those initial designs and continued creating additional flows related to the content templates. Below are examples of the product thinking behind highlighted features.