3 Ways to Onboard onto a Design System Quickly
So you can get to designing faster!
Design systems are the core basis with which all designers and developers are able to create a cohesive experience for users. It ensures consistency across a product and allows engineers and designers to spend more time building, and less time focusing on the components that a system is comprised of.
Today, while using some new components from Segment’s beautiful design system, Evergreen, I came to a realization. Over the course of the past two years, I have used four distinct design systems (!!). This is a product of being in consulting for a year and a half working on three (very) different projects, and just now starting at Segment, a product company with a robust and growing design system.
This means in addition to using four design systems in two years, I’ve also onboarded onto four design systems in two years. No one really talks about how tricky it can be to shed the skin of a past design system and start fresh with new buttons, line heights, font styles, writing styles, design philosophies and so much more.
What are some things that may help you onboard to a new design system faster?
Study the system and the way components have been assembled to create experiences.
One of the best ways to start on-boarding onto a design system is to deconstruct the existing system into components and match them to pieces of an existing design system. Breaking apart pieces of a page to what elements they are comprised of is one of the best ways to get familiar with an unfamiliar system.
So, for instance, taking a page like this:
and breaking it down to this:
Referencing the nomenclature in the design system you are referencing is a crucial part of making this exercise successful. It allows you to get familiar not only with how best to leverage these features in a product, but also how to communicate about it succinctly.
Build a screen flow using design system components.
The next step is, expectedly, practice! Use design system components to rebuild existing pages to get a better sense of how pieces of the system have played into each other to create a holistic experience. Can this feel redundant?
This will also allow you to see places where design systems may not cover every piece of a product and getting comfortable with that. Product designers should work hand in hand with Design Ops/UI Engineers to ensure components don’t already exist before adding new components, and follow an established process to do so if needed. On that note…
Ask for feedback from someone familiar with the design system early and often
When I was on-boarding at Segment, I was lucky enough to have Jay Ransijn, the architect behind Evergreen, sitting next to me. I was transitioning off of government web design standards onto a robust, evolving system that was nuanced, detailed, and intricate. Without Jay to seek feedback from for my designs, I can’t even imagine where they would have gone.
Seeking his feedback on every design early on allowed me to get to a point where I would anticipate his feedback, which meant my familiarity with the design system was increasing everyday. That process is still very much ongoing, though — I’ve been at Segment for two months, and this happened today:
Ultimately…
Onboarding onto a design system is not a one time thing, because theoretically, design systems are evolving as designs do. You’re never going to get it all right the first time. Learning to be accepting of the time it takes to get familiar to an entirely new design construct and following some of these tips might make it easier to begin to contribute to your team through them.
And who knows? Maybe you’ll be the one onboarding someone else onto your team’s design system soon!
Want to learn more about Segment Design? Check out www.segment.com/design!
P.S. We’re hiring!
