Bloomberg is one of the most important financial institutions in the world. With dozens of websites and microsites under management, and many different stakeholders, the Bloomberg marketing team needed a design system that would make creating and maintaining their websites easier and more predictable.
The marketing team over at Bloomberg managed over 60 websites and microsites around three main themes of selling their Bloomberg Terminals, philanthropy initiatives, and government services. The problem was that there were no design processes in place and so these websites were maintained manually by copying and pasting old designs into new Figma files. This caused more work than needed, especially having to go into individual components and change things like fonts, colors, and spacing. The team's initial solution was to go with UI kits and style guides. But this then created another issue having multiple different UI kits and style guides that were inconsistent with each other.
Bringing me onboard, the goal was to build a Design System for the marketing websites to take the guess work out of updates and new websites. By creating a Design System in Figma and using its components and variant features, Bloomberg websites and their styling could be maintained. We first had to figure out the structure of the design system and came up with the following atomic design: Themes (websites) are made up of multiple templates (blog, home, etc.) that are made up of multiple patterns that are made up of multiple components that are made up of a foundational base of colors, spacing, and typography. At each of these atomic levels, there is a set of rules and guidelines that include use cases, accessibility, design tokens, variations, and behaviors.
Now to clarify, the Marketing team did have typography, grid, spacing specs in place, along with colors for each theme/website. But the problem was that these guidelines were either being used inconsistently or not at all. For example, there were websites that used 6px or 12px spacing, grid layouts were different, or even websites having no color palettes. With a good foundation, or in this case a good base, we wanted to be able to clean up the inconsistencies across the ecosystem of websites and set a new standard moving forward.
I took the components that were scattered across the team’s Figma files and created both Design tokens and documentation. Each component was organized by its behaviour, variables, accessibility requirements via WCAG, and theme (the BPS theme in the example above used both and light and dark version). This process was also repeated for the patterns like jumplinks, headers, footers, etc.
The combined components and patterns made up templates for each theme that would be available for future marketing websites. With consistency in mind and a new set of standards, the marketing team did not have to waste time creating webpages that already existed somewhere else. Less time recreating and more time being efficient and hitting marketing and business goals.