The Unification Project
Focusing on the Bloomberg enterprise web apps, they are web-based applications that allow the user to handle their company’s internal and external needs and operations. These applications include platforms for Trading, Compliance, Legal, Customer Service and many more. Given the depth of our web app network, there are many different teams to design, implement and manage them. To make this a successful network, consistency of the interface is critical to ensuring clients are able to navigate through noise and access the data they need — quickly. This is the story of how the Bloomberg UX Team established consistency for their web products through a unified Design System.
“ A design system offers a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive.”
The Problem
How does Bloomberg ensure its web applications provide a consistent end-user experience? And, how does the User Experience (UX) team advocate for a predictable experience for all of their Enterprise web apps?
In 2018, the UX department did an “All Hands on Deck” effort to audit the enterprise web products. Our objective was to sort, breakdown and understand the existing components and patterns. Here is what UX found:
Screenshots from the “All Hands on Deck” audit
Each web app team were working in silos and therefore a lack of communication
They were using their own very different component libraries and frameworks (some were built in React and some were built in Angular)
Some users would have access to multiple web apps and by navigating from one app to the next (which have different user interfaces) would create a very jarring experience.
Due to the lack of communication and each web app using their individual frameworks, it created a conflict in not only the user experience but also the Bloomberg brand as a whole.
The Scope
Introduce a Process to Create Standards
World-class software has to be innovative, yet deliver a consistent experience. The standards process helps us balance these two imperatives.
Establish a Design System
Creating a unified design system (Crescent) is the foundation to the success of this project
Build a Framework
Provide a collection of common user interface components and patterns (Bloomberg Web UI Framework or BB-UI for short) that can be used by Bloomberg web applications
Success Criteria
Adoption
The audience (i.e. Designers, Engineers and Product Owners working on web products) will design and implement web products using Crescent and BBUI components and patterns
Team Collaboration
Establish an environment of transparency and teamwork
Efficient Design and Implementation
Shared design system and component library for all web apps
Create a Team Dedicated to Crescent and BBUI
From an introduction process to an established team fully dedicated to the design system and framework
Before there was Crescent & BBUI
In 2019, there was a group of volunteers from the UX team, Product and Engineers working on web products (including myself) to lead the initial effort to create a process for how we work to establish standards and consistency on the web. This group would eventually form the official Crescent and BBUI teams.
My Role
Lead Product Designer
My Team
6 Designers | 1 Documentation | 4 Researchers | 4 Team Leads | 18 Engineers
Platforms
Desktop
The Web Infrastructure Process diagram
The Web Infrastructure Process
The diagram above shows the basic process for designing and developing a component/pattern.
Intake
Anyone working on web products can inform the “Pre-Crescent” team (UX/Product/Engineer volunteers) about new use cases for existing components or requests for new components.
Create Epics on Jira and issues on Github
Component Prioritization with Product
Discovery
Find out if there are existing components we can use in the new BBUI Library
Find out if the component design exists but has not been implemented
Find out the component is a new requirement
Design/Development/Documentation
IX Review: The spec for a component is being drafted and reviewed
Eng Review: The IX drafted spec is given to Engineers for feasibility and raises any concerns
VX Review: The spec for a component is updated and documented (Crescent Design System)
Doc Review: Documentation for the component is drafted and sent out for RFC to UX, Product, and Eng
TL Review: Reviews component spec and documentation
Eng Implementation: Consumes final specs for implementation (BBUI Library)
Crescent vs. BBUI
Crescent is the design system created by UX. It contains components, patterns, styles and standards. BBUI is an implementation of the components using React. The reason this distinction exists is because Crescent includes more than just components and it is possible there will be more implementations of Crescent using other technologies in the future.
Pitching the Team
UX conducted research to better articulate the issues of the current process:
Communication breakdowns - designers didn’t know if there were others solving for the same problem.
No allocation to work on system/standards - designers were allocated to working on the web products, but not the system/standards.
Standards can only be made when a product needs them.
Ownership was unclear - if someone worked on a standard/pattern, who would own and maintain was unclear.
No way of anticipating needs - because we didn’t have a team overseeing things, there was no way to anticipate needs for the system.
No central place to track patterns/standards
Crescent supports both light and dark themes, hence the name “Crescent”.
In late 2019, a dedicated team for Crescent and BBUI was approved and Crescent 1.0 and BBUI 1.x were released. The release contained many components that have been adopted by the Product teams. By the start of 2020, Crescent 2.0 was on its way.
Crescent 2.0 Goals
1. Execution: Growing & Improving the system
Crescent 2.0 will revise all the existing components to account for new use cases and add/remove components depending on needs. All of the work will be released as a part of BBUI 2.0.
Tables, header patterns, faceted filtering and contextual menu
Forms, side navigation and global search patterns
Accessibility, type and text, tone and voice guidelines
2. Enablement: Helping others use Crescent/BBUI
Onboarding process for new designers and engineers should be seamless. Giving users and stakeholders a cheat sheet with an overview of the system and a walk-through of the design guidelines and standards documentation.
3. Process: Improving how work is done
Streamlining Delivery
Components created for immediate use but not finalized by UX. This can create an efficient workflow where Engineering can start work on a component once confirmed for addition.
Charting Future Directions
Hosting frequent workshops with Product to provide progress reports of Crescent/BBUI. The goal is to collect feedback and requests to chart future initiatives and vision.
Communication
Crescent team to release a newsletter to introduce Crescent and provide regular updates. This is to increase adoption of Crescent/BBUI and to allow web app teams to plan for upcoming releases.
What did we learn?
Since 2018, the Crescent Team discovered the biggest hurdle was getting some Product people from the web app teams to be onboard with the new design system and framework. This is due to the old saying “if it ain’t broke, don’t fix it”. Some of the web app products gain a considerable amount of revenue each year and for some people in Product, that sort of success does not grant an update. Also, some clients may be sensitive to “change” and may become confused or even frustrated to the new system.
As Crescent noticed this trend, this lead us to schedule workshops and create a newsletter to work with Product and bring them into the process a bit more. As more and more web apps were adopting Crescent and BBUI, more and more Product people came to understand that the new system was the best for the Enterprise web apps and for Bloomberg as a whole.