Cobalt

Design language system and UI component toolkits for enterprise software including data visualization grammar.

Design Compass (an internal website), including a design language system code named "Cobalt", was a project I worked on at 3M Health Care's design department, the company's internal agency for the Health Care division. The design system was first introduced as a by-product of Petrifilm Plate Manager software (a desktop application) and then expanded to another, much larger product suit, 3M Health Information Systems (HIS), which consisted of several products such as coding, patient classification, and operation performance analytics.

Challenges

A plethora of products across a multitude of industries, with an almost incomprehensible 55,000 items;
Diverse portfolio of software products with front-end technologies ranging from various versions of Windows, to mobile, to embedded computers;
Lack of digital product branding guidelines, with the corporate branding style guide focusing on the print specifications.

Project Phases and Components

Requirement discovery: We conducted a division-wide survey using Qualtrics that identified the technology stack variability, pain points in designer-engineer workflow and common need in software development;
Extension of 3M branding: The team proposed digital product branding design based on the corporate branding guideline. The UI type and 3M UI color sets are based on colors specified in 3M Visual Identity Guidelines and optimized for screens;
Basic UI controls: The team identified a set of UI controls, web fonts and icons to be included in the first release;
System design: Responsive layout, information density design, themes, animation, i18n and L10n, empty state and loading states for data driven components;
Tooling: Automation of designer tools. As of today, the mainstream software design and development is still a labor-intensive process. There's repetitive work that should and can be automated to increase the efficiency and quality of design. For example, color palette design, evaluation, and validation.
Data visualization library: Charting was heavily used in many products across 3M business divisions, from process control in food safety to performance management in healthcare.
Todos: Sample, domain specific mock data built-in for data-driven components. For example, a designer can specify that she wants to display some network devices as a table in a desktop screen, and as a list with single or 2~3 rows in a small screen, and maybe as a flow (a.k.a., "sankey"), or a network in yet another screen.