ARISTOTLE
A Data-Driven Design System – Part 1
To reflect on the steps up until this point, I had facilitated an Experience Workshop with stakeholders to collectively establish the criteria for a design strategy, locked in some styles to apply to components of MDL and MDC, while working with the Brand Team to establish requirements for a cohesive end-to-end Brand Strategy. We were behind the development sprints, managed to catch up, fell back a little due to a post Acquisition-Merger re-brand, and were starting to catch up again.
The acquisition-merger had brought a new level of importance to establishing the Design System and publishing it for consumption. The company just grew from a few small shops spread around the U.S. and a couple other countries, to a massive global scale. In order for the product to take a on a cohesive look-and-feel, we needed to get this thing out ASAP.
Color
One of the most valuable discoveries that made Aristotle so scalable was how we mapped the color pallet to the UI. A requirement for the product was for the customers to be able to re-brand the layout based on the brand guidelines of their company. Part of my primary objective was to preserve the built-in capabilities of Material's framework, while having our own look-and-feel. The way Material's color palette maps to components allows for a very simple theming of the entire UI. This is something that was in our better interest, especially with the requirement of our customers needing to be able to theme our product according to their brand requirements. The re-brand efforts post acquisition-merger was the perfect test, and it passed with flying colors.
We had three palettes. One palette was reserved for the global elements in the page, leveraging Material Design's theming concepts, for a "simple" customizable palette, layered with a tint-shade concept for flexibility. The second palette was breaking the Material theming capabilities, with custom color builds for each palette swatch, and was only applied to the page content. The third palette was reserved for data visualizations, and fully independent of the Material Design palette system. What this did was allowed the customer to designate their primary brand colors to theme the global elements, independent of the page content. There are other advantages to setting up the palette this way but the theming was biggest win for this approach.
Type Ramp
sasa
Sticker-sheet
After the acquisition-merger, I had been placed on the Core Design Team to quickly nail down the design requirements based on Atomic Design principals. Material Design Style-guide provides a sticker-sheet that we leveraged as a starting point for applying the styles and expanding on. Below is an image of the sticker-sheet that was distributed globally and published to the living style guide as the requirements came to fruition.
The color palette was loaded along-side the components and applied to the styles in Illustrator. If a color build changed in the palette, it would reflect across all components instantly. All components were also distributed to the design community via Adobe Creative Cloud.
Nomenclature
Living Document
Since I was the only one on the Core Design Team with development chops and the Prototyper was busy incorporating the design specs into the css framework, committing the changes to the dev repo, while building out a hi-fi prototype, I took on the publishing role. As I was helping the Core Design Team establish the design specs, I was noting the logic from our discussions, incorporating it as the content, generating assets and publishing it all as the content of our living style-guide...Aristotle.
