Creating and evangelizing a new design system for multiple products.
Prism was the name of the design system much of AvidXchange's products were based off of for our designs. As Engineering decided to consolidation into a single coding language ( Material ) it was the perfect time to revisit our design system and rebuild it to be more up to date and incorporate Material design components into the design.
This was a project that I led and collaborated extensively with my fellow designers and the UI developers. 70% of the components in the file linked below were created by me.
Lead Designer
Visual Design, Interaction Design, Facilitator, Team Educator, Wireframing
Dec 2020 - May 2021
Our old design system was based on Bootstrap. We need to update to include Material components while refreshing the look to reflect current branding and accessibility considerations.
Up until this point our designs were based off of an older Bootstrap framework used inconsistently across the organization. We also faced the issue that any of the developers implementing the UI were backend developers by trade. We needed a system that was elegant, easy to use, accessible, had great usability, and clear documentation.
Having a design system is a wonderful tool, but can only go so far if we did not get product or engineering buy in to incorporate into the three mainline projects identified as going through the Material overhaul. This proved to be the most challenging. I got the product and engineering team leads for those three projects into a room to discuss our plan, and how we may best roll this out to cause minimal impact to our project deadlines.
If this version of the design system was going to be successful we in the UX team needed to create unified way of working across our various project files. As part of the growing pains of a tea going through explosive growth we allowed our files and personal processes get the best of us! Part of this revamp was to revisit how our project files were structured. We wanted to ensure that both a fellow designer and a developer referencing our files for their cards could navigate easily.
In short: Two project files should have the exact same structure and organization principles behind them.
I created the first round of content for ways of working file, specifically around naming structures for individual objects and components within the design system itself. I wanted to illustrate we were doing this for the sake of making our lives easier, but also to solve the problem of backend developers needing guidances when implementing UI classes.
I enlisted the help of the UX content writers to help finesse my first draft of ideas and to ensure what I was writing made sense to someone outside of weeds of the project. Finally, my documentation was tested with a few of the developers. Ultimately, I had great success and my portion of this documentation was well received! With all our proper guidelines in place we could move onto the fun part of our work!
I took a methodical approach to each component. I wanted to make sure I could replicate the same quality of work into each component. As such I created the following steps to creating a component:
One of the drawbacks of the first version of Prism was a lack of quality control. Often designers were publishing changes that caused unintended consequences in project files. To curb this we placed two designers in charge of checking the quality of component changes and with publishing privileges. This was given to myself and the B2C product line designer.
When a new component was ready for publishing we would check that it included proper references to other components ( where applicable ), and that all variations followed our branding and accessibility guidelines. Only once they passed that quality check where they placed on the 'Components' page and published ready for product consumption.
One of the projects currently in flight was selected to be the test project and incorporated the new components into both old designs and new designs. I was also the lead designer in this project. The other two candidate projects only added them on newer workflows and pages with revamp of older pages coming at a later date.
With each new rollout of components it drastically reduced the time it took designers to produce designs. There was a lot less back and forth during reviews on whether an 'alert' should look like x or y. Most importantly, we created a strong collaboration going forward with our development teams.
This was the first time I have had to pitch the idea of a design system to the whole of the product and development team. It was certainly a learning experience for me. I have learned new techniques as a result on pitching an idea. I have also learned better ways to get team feedback on a system that is meant to be used by all designers and referenced by development teams.
Return to the Homepage
