Design System for Enterprise IoT Company
Project: Create a design system to aid in the visual and interactive consistency of Cloudleaf's intelligent sensor platform.
I began the project by logging into their platform, and taking inventory of all the visual components that were in use. I presented this inventory to Cloudleaf's Head of UX as a starting point for our discussion of where inconsistencies currently existed, and what sort of design system framework would best suit their needs.
After some discussion, we decided that the Atomic Design System would suit what Cloudleaf needed in a design system best.
As it's creator, Brad Frost, explains: "Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:
1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages"
To cover everything that Cloudleaf needed, we decided to modify the Atomic System slightly. I set up the Sketch file to so that all the various pieces would be organized by complexity in descending order.
Some of the design system elements fell outside the traditional Atomic structure. These included colors and color usage, all text styles, the logo, and all icons.
I originally wanted to use Invision's DSM (Design System Manager) for this, but at the time I was putting it together, DSM had to be manually updated each time something changed in the master Sketch file. We wanted a singular source of truth for this system, and having to add the second step of updating DSM would have introduced another weak point where the system could break.
It was decided that one master Sketch file would work well, and that designers could copy paste what they needed from this file. With this in mind, I started using the symbols feature in sketch to create a living pattern library that would keep it's consistency. Components were created by nesting symbols together, which meant that if the text style changed, or if a color or line width changed in the symbols, all components would be updated automatically with that change.
