My role at Facebook was to create new pages on the Facebook Business website, taking them from rough sketch to high fidelity design with technical specs for the engineering team, and to get/ maintain buy-in from stakeholders across the organization along the way.
I worked on an agile team of two designers, two copy writers, a content strategist and an onsite engineering team. Each page went through roughly five phases, although there was often overlap and the designs were constantly being updated. Sometimes engineering would get started using my first draft comps while copy and content were still being ironed out. The challenge was to always keep things moving no matter what.
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.
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 are the teams within Facebook Global Business Marketing being represented by these pages, and who will ultimately be responsible for maintaining the content.
I worked closely with the copy team to flesh out content and design. I refered to the module library to see if there were viable solutions already built by the engineering team. If so, I put those on the page first.
Example: For the events index page, there was content for several past events and two upcoming, with high resolution photos and high quality video. Because events accumulate over time, I decided there should be just one post format flexible enough to accommodate a range of conditions: Such as if an event is past or upcoming, if it has a microsite with subpages, if it has a simple signup page, or if it has a video recap, etc.
3) Internal review and module selection
In this phase, the team reviews the page and identifies what content could be presented with existing modules, where new ones should be developed and how this will effect timeline.
The Facebook Business site uses modules and a custom CMS, so designers keep that in mind from the earliest sketches. As pages were built, we added new modules to the module library which could then be deployed on any page across the site.
We organized the library as Sketch symbos, so they could be kept up to date in one central place.
4) Final stakeholder review
They were usually involved at every stage, watching the pages progress and providing feedback on tasks. This was their last opportunity for input before the the page is locked in and sent to build.
5)
Technical specs
Finally, once we had thumbs up from stakeholders, engineering, design director and copy team, I produce the final design with technical specs. This includes redline instructions describing all states, interactions and responsive behavior in detail. I use the SpecKit plugin for Sketch to handle basic red lining quickly.
Once engineering work is done, we have a design review where more issues can come to light when seen in browser.
But we usually go live shortly after.
Facebook's QA team tests the pages on a variety of browsers and devices. Facebook employees can report bugs directly from the page, and there are always updates coming from stakeholders. So the fun never truely ends!