My primary role at Facebook was designing pages for Facebook's flagship site for B2B marketing (facebook.com/business), taking them from rough sketch to high fidelity design, providing technical specs to the engineering team, and earning buy-in from stakeholders across the organization.


A sampling of finished pages I made (not all modules were used, the idea here was to create a blueprint for page owners to see what was possible with the CMS). Click to enlarge:

My process for creating these pages went roughly as follows:

Step 1: Rough sketch

Sketching out the basic outline of the page and ideas for content types is where I had license to explore creative direction for the page, Most of it would not be used, but I like to get a visual representation in desktop and mobile for every idea I can come up with, keeping in mind the existing style guide and shape system.

Step 2: Deploy real content

Once I received content from stakeholders, I started placing it in the design and getting a better sense of what’s realistic for the page. Stakeholders were the teams within Global Business Marketing (GBM) being represented by these pages, and who were ultimately responsible for maintaining them.

The case study I’m using here is an events page that I designed in close consult with the GBM Events Team. The content I received included upcoming events, past event recaps, and event highlights. For the index page, my design included one single post format flexible enough to accommodate all three.

Icons I contributed to the icon library:

Step 3: Internal review and module selection


The project had a module system, which covered about 75 percent of our needs. The events card was a new module. I contributed 42 new modules to the system.

Retracting/ revealing nav prototype

Scrolling down moves the navigation out of the viewport naturally. But when you scroll up a little bit, the navigation is unveiled without the need to scroll to the very top of the page where you left it before. I also added an offset defining how many pixels you must scroll up until the navigation is unveiled, preventing distraction from content when user scrolls up just a bit. Once scrolled to the very bottom, the navigation reveals again, giving users new opportunities for where to go when finished reading the content.

Step 4: Final stakeholder review


The events team was involved at every stage, watching the pages progress and providing feedback. This was their last opportunity for input before the the page design was locked in and sent to build.

Step 5:
 Technical specs

Once we had thumbs up from stakeholders, engineering, the copy team and design director, I produced the final designs with technical specs. This included redline instructions describing all states, interactions and responsive behavior in detail. I use the SpecKit plugin for Sketch to handle basic red lining quickly and embellished where necessary.

When engineering was done we tested the pages on a variety of browsers and devices, but would usually go live shortly after: facebook.com/business/events

Finally, the pages were handed off to stakeholders to update on their own in the CMS.