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

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:
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.





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.

component-level tokens

primitive color ramps

component-level tokens

sometimes it's easier to work in code

Github branches

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.