GEODESIC: META'S BUSINESS DESIGN SYSTEM

Largest design system within Meta, supporting over 40 apps in Meta Business Suite

Largest design system within Meta, supporting over 40 apps in Meta Business Suite

Largest design system within Meta, supporting over 40 apps in Meta Business Suite

Team

Meta

Scope

Component Creation Program Management

Platforms

Web

Date

Present

The Meta Business Design System, Geodesic, supports over 40 apps across Meta Business Suite. The Geodesic Design System has been around for over 5 years. The primary objective of the system is to help businesses communicate with their customers across Facebook, Instagram, WhatsApp, Messenger, and Quest headsets. With our team of 6 designers, I lead a small team of three, focused on our creation, development, and maintenance of our Figma component libraries.

The Meta Business Design System, Geodesic, supports over 40 apps across Meta Business Suite. The Geodesic Design System has been around for over 5 years. The primary objective of the system is to help businesses communicate with their customers across Facebook, Instagram, WhatsApp, Messenger, and Quest headsets. With our team of 6 designers, I lead a small team of three, focused on our creation, development, and maintenance of our Figma component libraries.

The Meta Business Design System, Geodesic, supports over 40 apps across Meta Business Suite. The Geodesic Design System has been around for over 5 years. The primary objective of the system is to help businesses communicate with their customers across Facebook, Instagram, WhatsApp, Messenger, and Quest headsets. With our team of 6 designers, I lead a small team of three, focused on our creation, development, and maintenance of our Figma component libraries.

Jobs to be Done

  • When I view Geodesic documentation, I want to be able to click through and view Figma components that reflect coded components 1:1, so I can ensure design is up-to-date.

  • When I view our internal Figma plugin, I want to be able to access all the most up-to-date components in Geodesic, so I use the plugin as an entry point as intended.

  • When I browse our internal “Facebook” group for the team, I want to understand what the design team is working on in support of the component libraries, so I can follow along with the latest Geodesic library releases.

  • When I are utilizing Geo component libraries, I want our components to pass our internal design plugin’s check for  contrast and styling, so I can save time and trust Geo components are WCAG AA compliant.

Continous feedback through System Usability Scale (SUS) survey

  • Provide enough documentation moving to enable Geodesic usage to be more self-serve, and cut down the number of support requests for component library questions. 

  • Simplify layering on previously code-generated components in Figma and ensure the Figma props and variants worked properly. 

  • By providing linking between docs site into Figma, we wanted to make the experience seamless to get into the file. 

  • As of mid-year 2023, we've Increased favorability score of component library, +28% on ease-of-use for Figma components

Quantitative Data and usage patterns

  • Usage and adoption is an ongoing learning metric for the team, and while we track both metrics for React component usage, Figma usage is a great barometer to infer usage across design and code. We wanted to ensure that we are able to support our top 5 components, all of which include 100k instances each, but aim to bring detachments down, and refactoring these components to ensure they are kept intact.

  • For our top-10 used components, we have a detachment rate of under 1%.

Support channels for product designers to gain support

  • We have an internal “Facebook group” where we answer support requests, but we wanted to provide an additional layer of support. We developed a Figma-specific Office Hours where my design partner and I do live-design and jump into the file with product designers. This was a method of support that had worked particularly well at Disney Streaming that I elected to try again.

Program Management

  • Simple Google Sheet tracker that we got off the ground earlier, that we would track component and documentation status. This worked really well with dead simple formulas that got us into the habit of tracking work on our own.

  • For 2023, we moved our work into Asana where we can link all our tasks to our Documentation Asana project which is on a different release cadence than us.

  • Document our playbook on how we audit components in React, align on naming if needed, build components, write baseline documentation.

  • Regular comms of releases. Bi-weekly posts during the course of getting our libraries to Geo Web feature complete for 1.0 theme.

Outcomes of 2022-2023

  • We currently maintain a set of 69 core web components with the number spiking to 147 include sub components. Our goal was to maintain 1:1 parity with our coded React components, including representing any code example that is available in our docs site.

  • Ensure amongst the 147 total components, all 6743 variants work and are responsive (can stretch) as needed.

  • Maintaining docs site on a bi-weekly basis. Every time we update a component, we ensure the documentation is up-to-date.

  • We acted on survey feedback from our product designs on simplifying our components further, and cutting down on the number of variants. Since our system if comprised primarily of subcomponents, we built simpler, more configurable components utilizing new functionality in Figma component props and nested instances.

What’s next and in flight:

  • We have now organized under a Foundations pillar, in which I officially manage 2 designers focused on Figma components, documentation, accessibility, education, and support.

  • Currently in Meta Business Suite, we manage 2 themes, an existing legacy theme, and our new Meta brand theme. In order to become in line with the greater Meta brand, we are looking to apply our new Geo 2.0 theme to our refactored library. 

Hi I'm Davy, a Product Design Lead supporting Meta Business Design Systems

Hi I'm Davy, a Product Design Lead supporting Meta Business Design Systems

Hi I'm Davy, a Product Design Lead supporting Meta Business Design Systems