top of page
Design System
| 2022 - 2024
Vasion Design System
Welcome to the evolving world of our design system. This isn't just a static set of rules; it's a living, breathing journey that grows alongside our design language. Join me as we continually refine and expand our toolkit, shaping a cohesive and dynamic design experience.
From Chaos to Cohesion: The Evolution of Our Design System
The Broken Beginnings at Vasion
When I arrived at Vasion, the design system was in disarray. We had a basic, cookie-cutter design system in Figma for Vuetify 2 that didn’t suit our needs and an older design system based on a platform built in PHP. We lacked up-to-date design components, colors and icons. Also, what we had was copied and pasted from online and not customized to our needs. There were way too many colors and too many variations of components which made life confusing. Within the first year, there was a lot of talk but little progress, as we kept coming up with disparate designs using the broken system we all inherited. Something had to be done.
Yes, you can have too many colors.
This is only half the colors that we had when I started.
This is half the chips. The icons, colors and shape were all outdated.
The first working version
At the time, we decided to append components that we needed to copy all the time. This saved us an enormous amount of time if we were creating quick prototypes and needed to change something. As I mentioned, our color palette had way too many colors, with 15 or more grays and multiple versions of other colors. We collaborated with our design friends in marketing to adopt their color palette so we all used the same colors. It took time to get everyone on the same page for colors, but this was a crucial step.
This is a sample of the new color palette that only uses a few primary colors. This was our move towards using Material Design 3.
Unifying Icons and Components
Icons were the next priority. We already had Vuetify 2 and some components that came along with it, but there were still many gaps. Different development teams were using different libraries in the code, which didn’t help. About a year in, we decided to move towards the Material Design 3 icon library and unified around that. We also adopted a single Figma icon library using Material Design 3's icon set. This reduced the number of questions from designers and developers, speeding up the design process.
Multiple outdated libraries
%20%E2%80%93%20Figma%202024-05-27%2012-54-14.png)
Consolidated into a shiny new Material Design 3 library
Building a Secondary Library
Despite these improvements, we still had a mess on our hands. We were using an incomplete Vuetify 2 Figma component library, so we decided to create a secondary library to supplement our needs. Three of us took a few days to work on a complementary library to our existing Vuetify 2 library. We created the most needed components and ensured all designers started using them. Although it wasn’t the final solution, it helped us for the next several months until we could develop the ultimate design system.
Not sexy but they really sped up our time-to-deliver.
Table components
Often used navigation side rails, top bar and other associated components
Creating the Ultimate Design System
Over the following months, much time was dedicated to deciding on a new color palette and the complete design system that would replace the old and incomplete Vuetify library and our temporary components. We strategized with our front-end architect to tokenize colors and create a component library within Storybook. If you’re not familiar with Storybook, it’s a library of coded components attached to GitHub. It took many more months to get Storybook up and running and assemble a team around the design system. We created the new design system and trained all designers and development teams on it. Storybook has drastically reduced developers from using their own or making their own components. This cuts down on developer time to release and creates design cohesion.
Vasion design system within Storybook
Maintenance and Design Language
The next big step was ongoing maintenance and updates to the library, as well as creating a design language. A design system is good, but we needed to know when and how to use certain components. With the help of leadership, we created a design system team to maintain components and evangelize their use, assisting teams as needed. We also established a weekly cadence for designers to meet and discuss new design languages, ensuring the system evolved with our needs.
FigJam weekly design language sync; every week the design team gets together to discuss new language topics.
Notion design language pages; this is where our design language lives.
Emphasizing Accessibility
The last piece of the puzzle, which we are still working on, is integrating accessibility into everything we do. Some may argue this should have been first, but we addressed it as soon as we could. Our company works closely with many government organizations, and to remain competitive, we needed to become FEDRAMP certified. This certification ensures compliance with government-specific security requirements, and our designs needed to meet the highest accessibility standards.
These and other guides are part of our design system. It's work-in-progress. The next step is to tailor the screenshots to our own designs.
This is built into the design system but to avoid assumptions we added error handling for accessibility too.
Ongoing Evolution and Learnings
As I’ve mentioned many times, the design system and its associated language are ongoing projects. The journey from a broken, fragmented system to a fully functional, cohesive design system has taught us invaluable lessons in collaboration, consistency, and the importance of a unified vision. Our design system now not only speeds up the design process and reduces questions from developers, designers, and leadership, but it also sets a strong foundation for future growth and innovation. The key takeaway is that a design system is never truly complete; it must evolve continuously to meet changing needs and standards.
A few pieces from the design system including custom things.
Credits
This project couldn’t exist without these wonderful people I collaborated with over the course of the project:
Zach Kelley
Associate UX Designer @ Vasion
Corey Singer
Product Manager @ AccuLynx
Mila Knight
Associate UX Designer @ Vasion
Justin Gish
Principal Engineer Architect @ Vasion
James Walsh
Sr. Software Engineer @ Tomo
bottom of page