Facebook B2B Web Experiences & brand
Brand & Web Design that Helped Businesses Succeed in the Age of Social Media
Facebook Business was originally nested within the Facebook Ads Help Center. A legacy search and discover site dedicated to providing people with info and step by step instructions on how to create ads. Not helpful when you don’t know what to look for. It was within this legacy system that Facebook Business was born. We, the global business marketing team, already knew that in order for people to succeed on our platforms we needed to give them the power to do so and inspire them or give them something to aspire to through story and suggestion.
I led the brand and web efforts dedicated to creating the platform that educated, inspired, and informed people across all of the Meta surfaces that were searching for their audience. Using a highly structured, narrative, and data focused approach I considered nearly every instance from the minute micro-interactions to the giant hero sections, deep thought and empathy were poured into each moment and product across the site leaning on real business experiences and stories.
I also led many projects within the Facebook Business ecosystem that were beneficial not just to the company but also to small and medium business owners around the world. Including various conceptual campaigns, events, webinars, content platforms, and of course education.
You can view the Facebook Blueprint project here if you’d like to see more work that’s focused on education.
You can view the Facebook Visual and Illustration Systems project here if you’d like to see work that is more focused on illustration and visual standards.
THE PROBLEM
Facebook and its brands have a lot of services and therefore a lot of information to bestow unto their users. And with a lot of brands comes a lot of initial disparity as well. Design decisions were shaped by the need to balance scalability, flexibility, clarity, and enablement for global teams to adopt easily and for varying forms of content needs.
THE BRIEF
Bring together the Facebook family of apps and services into one unified online location that provides critical announcements, news, and helpful information to users that’s digestible. Allow teams around the world to reuse templates and patterns to ensure consistency and efficiency.
INSIGHTS & LEARNINGS
Information and data are your best friend when making a point or looking for which way to go. You always need a guiding light, a north star, in order to rally everyone forward together with clarity, empathy, and understanding.
RESULTS
Increased engaged visitors from 14M per month to over 40M per month.
Over $1.2B generated in revenue per year.
United consumer brand, product brand, global business, small/medium business, and internal brand teams with 1 ownable and enabling set of illustration and icon standards.
Educated over 6M people on Business Manager and Ads Manager products through Facebook Blueprint online initiatives and in-person events.
Developed a flexible modular system + assets along with a set of web standards within the Facebook CMS that enabled global teams to create on-brand marketing websites and web-pages for countless initiatives.
Paved the way for high level concept work on product focused advertising and digital campaigns.
2014
10 – 14 Million Monthly Visitors
2019
Over 40 Million Monthly Visitors
GRID BASED LAYOUTS
The application of a fluid column structure and fixed vertical rhythm intervals results in beautiful, responsive layouts that are performant on every browser.
UI COMPONENTS
A foundational set of UI elements injects personality into interfaces. Used across all pages, it helps to unify every touchpoint across the site and affiliated sites. Shapes, corners, colors, fonts, and motion are all considered and derived from what is natively found in the overarching brand structures that are publicly available. This creates a familiarity while remaining own-able and unique.
COLOR
Each of our platforms has a lot invested in their unique identities. We primarily use their existing brand colors when designing their pages, to let them stand apart from each other.
DATA VISUALIZATION
Data visualization is a powerful way to let numbers tell a story. Combining color, grid systems, iconography, typographic hierarchy; we put clarity first—making complex information simple—and incorporating the friendly details and color that make data approachable, scannable, and memorable.
PHOTOGRAPHY
We shoot photography with a documentary approach to tell real stories about real people. With the idea that there’s always more than one way to photograph a story but used effectively, it’s a powerful tool to convey human impact, establish empathy with viewers and make our content more relatable.
MESSAGING and TONE
HUMAN
Businesses need people to build their communities and grow. And no one knows people like Facebook. Simply put, we’re here to help companies get closer to their customers.
EMPATHETIC
We understand businesses because we are one. Millions of companies of all shapes and sizes come to Facebook to succeed. We care about who they are, why they’re here and how we can help.
CONFIDENT
Businesses look to us because we have some of the most powerful tools and insights available online. We inspire confidence by knowing our offering, and conveying its value to those who could benefit.
CLEAR
Our audience is busy, and they need our help to get things done. We respect their time and attention when we communicate with them in the simplest terms, avoiding jargon, and getting straight to the point.
TYPOGRAPHY
Our typography for marketing was previously built around Freight Sans. Now, we’re making the transition to Facebook Sans, a proprietary geometric sans serif family with the tone, technical details and language support needed to modernize our typographic voice.
MOTION
Time is our most valuable asset so using a limited set of easing curves to control all animations results in a branded motion signature. Our motion is smooth but snappy, making interactions feel more human without wasting any of our users’ time.
The idea is that each click, scroll, swipe, or tap should feel like an action. A little bump in your device. A subtle click in your speaker. Or that feeling of pressing into something showing up on your screen.
APPROACH and PUTTING IT TOGETHER
So many pieces create a holistic brand experience. Every piece was strategically considered in how it plays a role in the larger theme. Templates including a bank of each module ready to be customized along with page templates from introductory hero pages, to success stories, and deeper product learning pages were created to make it all as easy as possible to use for all who contribute to the META web eco-system.
Each template followed simple structure rules:
Introduction
Challenge or Use Case
Solution
Results and/or Examples
To maintain engagement, interactive product modules, data visualizations, video, photo, and graphic expressions aimed at expanding the core page narrative supplement the content down the page.
THE PROCESS
Every page, request, project is of course different. The typical flow for a key additional page or section, a new product for instance, would follow quite a few steps.
Internal announcement and discussion: the moment a new product is announced internally it’s all hands on deck. I meet with the product lead and marketing director to understand the new product, it’s flow, use, provided solution, and any case studies from early use partners.
Project Brief: Once the product is understood I meet with the engineer manager, content leads, and creative leads across the organization. I convey the information and available assets in a presentation as well as orate the story we plan to tell. This becomes the blueprint for the web page, blog articles, help center articles, and any forthcoming marketing campaigns.
Direction and Management: I work with project management to plan. Then building off of the templates I’ve designed, the design team is partnered with available engineers and a copywriter. From there my team begins the design process and laying out the page according to the defined brand standards. I encourage a second option that pushes our standards and allows our creative team to flex what they do best.
Content Strategy: As my creatives develop page designs and copy in collaboration with the product teams I then begin working with the content director and web manager to develop key moments for blog posts, linking strategies, SEO, social posts, events (where applicable), and off-site announcements with partners. We also decide where within the sites eco-system said page will work best.
Publishing: We share progress with the stakeholders along the process so that nothing glaring or critical is missed. This also helps curve any potential changes to the product and the content around it. Once we land on the final layouts, strategy, and site architecture I and the team present to the stakeholders (product leads and marketing director). Here, nothing is a surprise as all the decisions and changes have been communicated throughout the process and we are able to get approval for launch in the meeting or shortly thereafter.
Budgets: Typically the budget is coming from finance teams and is accounted for in quarterly calls. If we end up creating something new that goes outside of the established CMS systems and standards, budget conversations will happen and we will have a stand-in module for anything that is approved until the final new module can be created.
AD PRODUCT ADVERTISING
With every advance in technology, a new way to interact with content shows up. And with new interactions a new way to advertise. At Facebook, a lot of these we called “ad products.” From your standard photo ad to a more involved carousel or slideshow ad, and the video revolution to the vertical video innovation. We, my team and I, were at the helm of nearly every wave and had the pleasure of introducing them to the world from the simple product page to a conceptual world that invited and excited new users to come and play.
STORIES ADS: “It’s a great day to video.” Campaign
Instagram Stories is probably one of the most well-known and most used products today. The twist that it opened up to everyone was the introduction to “vertical video.” Ironically the ad campaign was mostly horizontal to capture users across YouTube, Facebook, Twitter, and everywhere video lived online in horizontal formats to make the introduction.
My Role: Art Direction, Design, Illustration, User Experience, Prototyping, Story, Data Collection
Instrument: Design, Branding, Motion
Sonny Brabez: Engineering, CMS Development
Allie Townsend: Copywriter, Content Strategy, Story, Site Map
Ilana Solomons: Copywriter, Content
Scott Larson: ExecutiveCreative Director
Sang Han: Creative Lead and Producer
Leonardo De La Rocha: Creative Lead
JJ Gray: Creative Lead
Chean Wei Law: Creative Lead
Length of Project:
Ongoing, 4 years