Design system: site design automation
Customized sites in under twenty clicks
date and role
Principal designer
2021
summary
PowerChord needed a design system to automate site mockups for prospective sales, but the detail to be implementation ready. I gathered requirements for what the project needed, strategized a solution and got to work.
As a result, I developed a comprehensive, cloud-based design system and site templates that created customized sites, tailored to prospect/client needs, with just a couple updates to incorporate their branding.
challenge
We needed to create a tool that could cover all of our bases, with flexibility to meet client needs while maintaining what was possible in our proprietary site components. That wasn’t our biggest challenge: we also needed to make the complexity of maintaining a design system simple enough that a marketing and sales intern without knowledge of systems/tools could operate it and deliver quality comps ad hoc.
solution
We utilized the cloud and created three core elements to the system: the Style Guide, the Component Library, and the Template Gallery.
In this system, the Style Guide was silo’ed to just contain the branding and updates needed to completely transform the sites and was basically the only design aspect of the system for the creator to use.
The style guide’s symbols and styles composed the Component Library, a zero-touch powerhouse that contained every permutation to a website component so no component editing was required.
These components were assembled in a downloadable Sketch template folder that was the foundation of the Template Gallery: tier- and strategy-specific site templates with guidance on which were best fits for that client.
To ensure ease of use, in-depth documentation detailed how to manage updates between files and how to work within a cloud-based design system.
results
The Component Design System was a hit. We were able to help close sales with the mockups created, shorten design timelines for implementations from weeks to minutes, and facilitated system-to-system migrations of existing clients with ease.
The project (and the initiatives it underpinned) garnered me Powerchord’s monthly employee recognition, the Spotlight Award, for ingenuity, problem-solving, and planning existing clients’ migrations off of an outdated system.
To this day, the Component Design System has largely taken sales website comps and implementation design out of the UX team’s hands, but centered around the best practices we imbued in every pixel.
