Vroom Design System
Vroom is fast, efficient, and made to move us forward.
Creating a design system from scratch is a lot to handle, but breaking it down into pieces and starting with something I've already designed beforehand made it a lot easier.
Timeline
5 weeks
Software
Figma
Sorta From Scratch
Before this project, I spent time creating a transportation website for my dream bus company, Autobus. This prototype is high fidelity and allowed for a nice baseline when creating my system.
Making a Brand
To create the design system, I needed to pinpoint what Autobus was all about.
"Here at Autobus, we thrive on sustainable energy. As the first public electric bus company, we provide a comfortable and fast ride to where you need to go."
Something for Everyone
A key part of creating this design system was the fact that it needed to be accessible to everyone. The way I ensured this was to make sure my contrast ratios followed WCAG, at AAA level. I also made sure that in the system document itself, all layers are labeled consistently.
Styles
For my styles, I chose to organize them into their own "chunks" to cover specific things. For example, colors were broken into two sections, one chunk depicting the ratio of how the colors are used, and a chunk for color swatches
Components
Components are made in a way that makes them very customizable through properties that can toggle particular aspects. They follow the previously established styles but also give a nice starting point for anything that needs to be designed.
Key Takeaways
This case study allowed me to appreciate the work that goes into creating a fully functioning design system. Starting with an already existing project allowed me to express more creativity and personality for the brand in my design system, which otherwise would have been a little soulless, defeating the purpose of the system being a living document.
Other Case Studies
Like what you see?
© Jenna DuBois 2024
Jenn(a) (DuB)oi(s)
Let's connect!
Reach me at
jenna@jennoi.design