Inspired by Brad Frost's Atomic Design blog post, I developed a design system for the CarStory product to manage the vehicle reports that we generated across a network of partners while maintaining brand quality and a good user-experience. The design system was not only a functionally different way to deliver assets to developers, but also aimed to change the way that product Design happens. It's the manifestation of the product's brand that best leverages the all the underlying systems (content strategy, development, brand, data).
Defining the atoms
I found that by identifying and developing an atomic design pattern library, the discussion between the developers and designers became a much easier, more actionable conversation. We were able to talk more about the complexity of the underlying system which made iterating the visual interface and it's underlying technology much easier.
It also let us take a better look at how the brand was expressed through the product, and how we could iterate on the visual style and content.
Iterating the Product through Organisms & Molecules
The design-asset was streamlined during the product lifecycle. Because we had to manage high-level requirements development, as well as release timelines of various contingent teams, page mock-ups were not a reliable way to deliver feature iterations. By defining molecules and organisms, we were able to iterate on those specific areas, and document those iterations independent of other areas of the page that may be awaiting a server release, or a backend release. Making this shift was crucial to our agile design process, and clarified the desired state of the interface.
There is still more exploration to be done about how the system gets documented and iterated upon. Exploring more of the data-driven content strategy and how we show product's states and communicate the system. I continue to explore design systems and how we can create a better interplay between engineering and design through those systems.