b l o o m b e r g

Design System

Positioning a platform for scaling

T H E   T E A M

Led a 10-member cross-functional team, including

  • Product Designers

  • UX Research

  • Design System

  • Design Ops

T H E   C H A L L E N G E

The Bloomberg Know Your Customer platform had evolved organically and over time developed many issues:

  • Many variations of each pattern spread throughout the system, each with slightly layout, behavior and functinality

  • High maintenance cost due multiple codebases – making global changes was extremely challenging

  • Challenging for users:

    • No consistency in behavior, available functionality, or layout

    • Many patterns were based on an inappropriate interaction paradigm

    • User frustration was at an extremely high level, resulting in a high churn rate 

A C T I O N

As Head of Design, I oversaw the creation of a Design System and associated governance process:

  • Design Library: new design language, unified patterns to improve usability & eliminate duplication

  • Optimized design process to integrate the Design System

  • Evolved the platform down a path to full implementation 

R E S U L T

We built the entire Design System (Design Library & Component Library) in 9 months, achieving near 100% adoption:

  • Streamlined design process and positioned the platform for scaling

  • Reduced design time from days to hours as designers were able to snap screens together like Lego blocks

  • Design System adopted by Bloomberg as the standard for all web-based products

U x   a u d i t   o f   k y c   p l a t f o r m

This is an example of the proliferation of variations that created inconsistency, frustration, and increased the cost and effort to make updates

  • Tables – 24+ variations, each with its own functionality & behavior

  • Not an Enterprise application paradigm

  • Highlighted a critical weakness at the heart of the platform: tables are the
    bread & butter of most Enterprise/SaaS platforms!

  • Also, notice the two radically different themesOn-demand statement

D e s i g n   s y s t e m

A system of documentation and assets that consists of two core parts: 

  • Components: content-agnostic UI components and their relevant documentation

  • Components are classified according to their purpose and consist of four types: Elements, Independent Blocks, Dependent Blocks and Layouts

  • Patterns: Common arrangements of components that address specific domain content and high-level user workflows

p a t t e r n s

Common compositions of components that have factored in domain content and user intent. They are extensible in that they can accommodate for use case nuances by adding or removing elements, and they do not have corresponding code assets. There are two types of patterns:

  • Object View Patterns, e.g., Detail, Index

  • Workflow Patterns, e.g., Create Object, Edit Object, Filter Object Set

c o m p o n e n t s

All components were documented with a consistent set of content and structure:

  • Classification

  • Description (What it does, When to use it)

  • Requirements and Limitations

c o m p o n e n t   o p t i o n s

Options for each component were explicitly documented, including rules to guide designers when to use each option and illustrative examples.

t a b l e   c o m p o n e n t

The new Design System was able to replace all 24+ previous table types with a single component

Explore More Work