Facebook IQ: a new brand identity, site refresh, brand guidelines and updated design system

facebook-iq-logo.png

100+

pages reconfigured, redesigned and migrated to Facebook stack from WordPress


The Ask

  1. Facebook IQ Brand Identity refresh

  2. Update Content Strategy, Site Architecture, improve SEO

  3. New visual design for Facebook IQ site

  4. Site Migration from WordPress to Facebook stack

  5. Identify, Design and Build new components for Facebook IQ’s specific needs that were not already in the Facebook for Business component Library

    1. includes editorial style components

    2. dynamic infographic components to handle readable, importable data (phase 2, not MVP)

  6. NEW: Partnered with the Singapore team to launch their Cross-Border Insights tool on Wordpress, so they could access their Chinese audience, as well as International businesses for international reach. Created and shared assets, and aligned on new brand style. Design and built their marketing page.

  7. NEW: Partnered with “Moments” team out of London and New York, to launch the Insights-to-Go tool and their marketing page. The tool was the first of its kind on the Facebook platform to take dynamic data and render into animations, and then into static images for marketing tools for Facebook’s marketing customers.

  8. NEW: Partnered with Facebook Audience Insights team to create marketing pages and a directory for their Audience Insights partners. Phase 1 is currently live.

  9. NEW: Partnered with the Facebook Audience Insights product team to update and create seamless experiences between our marketing sites and their tools. Partnered closely with their product UX and visual designers and program managers to align on user flows between product, marketing and research.


In order to get a sense of what we were working with, I learned the Facebook stack proprietary CMS and designed and coded 50+ pages on new site during the course of the project.

These are a sample of pages I built and designed as part of the migration, as well as establishing templated component styles:

The lead Facebook developer and I ran workshops with Front End developers to teach the Facebook IQ editorial team on how to build basic pages and edit articles if they needed to make quick changes. This was valuable to give the Facebook IQ team the insight to appreciate the work, skills and time required to build complicated pages by other team members.

  • Weekly build days in the coming weeks before launch

  • Booked a conference room every Thursday where our team would hang out and build pages together, share work and train each other in knowledge gaps

Managed various internal and external teams, budgets, schedules and their deliverables:

  • Brand Refresh Design agency/vendor

  • Site Visual Redesign agency/vendor

  • Data visualization design updates merging Facebook IQ Brand ID with Candela—Facebook’s product data visualization guidelines

  • Engineering teams for Facebook stack

  • Front End Developer and Build teams

facebook-iq-brand-id-animations.gif
facebook-iq_infographic-animation.gif
 

Design concept for Brand Guidelines site

Animation style and motion tests for Facebook IQ rebrand

 
 
 

Related work

Twitter Partners

Brand and site refresh for the Twitter Official Partners site. Latest version of design system.

Google Ads marketing

Microsite, YouTube Channel and annotated videos support “The Forge” Super Bowl spot.

Google Nexus

Global Google Nexus 5, 7, 10 digital campaign. Production, Art Direction and UX Design.