Component Library
How can I efficiently wireframe new digital spaces for Missouri Online?
Create a design library in Adobe XD that upholds brand standard type, color, and components.
Version 1
One of my first tasks at Missouri Online was to consolidate all the disparate design elements on the website into one place. My main goal was to come up with an easy way to sort components between use, location, and form. Initially I decided it was easiest for me to divide the site using the Atomic Design Guide, which I had used to build design libraries before. I did change the terminology to match the organization of the SCSS library, but it (essentially) matched the purpose of the Atomic Design method. All "atomic" elements were separated into base elements. These were colors, type, icons, and buttons that are shared between all sites. Then, rather than use "molecules" I split the paragraphs that were grouped together into he SCSS library into responsive text blocks, text content, landing pages, interactive content, header, and breadcrumb.
Version 2
As I designed more elements these categories became too narrow and there were some development changes that made it easier to group the components. We started to implement viewmodes, which take a datatype (like events, employee profiles, articles, or pages) and display them as a component like a card, callout, or list. The change in content display was reflected in the component library. I separated each viewmode into its own category containing each datatype. This made it easier for me to take stock of each design, and to consolidate variations of design that were unnecessary. For example, the list component of the page datatype and the article datatype were often used together but one had a box shadow and one didn't which made it hard to combine them.
I did keep some of the Atomic Design principles that I had used previously, like the base elements (color, icons, type, and buttons). The rest of the components that didn't fit neatly into the base category or the viewmode category were all variations of default HTML elements (like dropdowns, buttons, and tables) so I separated them in a category called "elements" that contained subcategories of function, like input, table, and linking.
The second version was much easier to work with, and had a much cleaner component library in XD.
