logo-tcc

The design studio of Michael Mulvey

About

Design Direction, Creative & Art Direction

26 years experience across digital, print, & content

Based in Miami & San Francisco

Born in New Jersey

ki-ario

Contact

michael@thecombustionchamber.com

Twitter / Linkedin

case-header-daikin-design-system

Daikin

Documentation & Components & Tokens & More

Client:
Daikin Open Innovation Lab Silicon Valley (DSV)

Agency:
Grio

Role:
strategy, Design direction, UI design, Copywriting

Daikin is the world's largest air conditioner manufacturer. Whatever city you're in, if you look out a window at the rooftops of nearby skyscrapers, chances are the HVAC units you see are made by Daikin.

In 2019, Daikin Open Innovation Lab Silicon Valley (DSV) approached Grio to help them begin the creation of a design system that could be used by product teams and business units around the world. I was hired by Grio to lead these efforts.

Below I've highlights some of the key areas I focused on to bring the Daikin Design System (DDS hereafter) from 0 to 1.

No product, no design system.

DVS was asking for a design system, but we needed a product first. We needed something grounded in reality, and used by people, on which to build our design system. A design system's sole reason for existence is to be in service of products and product teams, so my first step was get access to some exist software for reference.

Once I had access to some products, I began reimagining them with a more consistent use of brand colors and components:

DAIK-D-IS-BEFORE DAIK-D-IS-AFTER

Governance

Having a design system is great, but it's not complete. It will never be complete. Like an organism, a design system requires updating, refining, and refactoring. What do we do when a product team adopts DDS but it's missing a component for one of their dashboards?

The way a design system handles requests for new components and changes is determined by a governance model. I referenced governance models of other design systems, laid out one I thought made sense for the Daikin organization, and presented it to the client. We iterated on it a few rounds until we arrived at the flow chart below.

Maturity Matrices

During the early days, I made maturity matrices to track our goals and measure progress for the development of individual components as well as the system as a whole.

A Feedback Loop

In 2023, three designers from my Grio team who were not on the DDS project were working on another Daikin project: HERO Cloud. We got permission from the HERO Cloud client to import many of their components into DDS component library.

Because Daikin has many engineers but very few designers, we included some full-page patterns based of of HERO Cloud to give engineers ideas when designing their products.

HERO-Dashboard
HERO-Admin-Settings-1
HERO-Admin-Profile
HERO-Tabular-Layout
HERO-Tabular-Layout-with-Modal

Design Tokens

Also around 2023 we created design tokens for all the visual styles in DDS including: color, type, border, border radius, and spacing. I spent much time researching token naming conventions, Figma plug-ins, code repositories, and implementation strategies.

DDS-tokens-TS-component

component-level tokens

DDS-tokens-TS-color-ramps

primitive color ramps

DDS-tokens-TS-tokens-applied

component-level tokens

DDS-tokens-TS-json-code-view

sometimes it's easier to work in code

DDS-tokens-TS-branches

Github branches

DDS-tokens-TS-borders-and-type

radii, borders, and typography

I created developer resource decks to help the developers and engineers at Daikin familiarize themselves with tokens, and to solicit feedback from them on how we could tailor the integrations to function best in their workflows.

The documentation

A design system without documentation is just a design kit. Many people use the terms interchangibly, but there is a big difference between the two (like the big difference between ‘font’ and ‘typeface’). Documentation is secret ingredient. It informs people how to use the system and the best practices they should adhere to in order create a consistent and cohesive product.

I orginally drafted the DDS documentation in Figma. We eventually migrated it all to zeroheight.

Conclusion

DDS continues to evolve within the Daikin organization. They evangelize it internally to various product teams and divisions, refining and maturing all the foundational elements I helped establish.

I enjoy creating and overseeing projects, but it's even better when I can work on a project long-term to correct initial assumptions, iterate on designs, and collaborate with the client. When you do this, you end end up with a product that gets better with time.