Building the Sketch Library
Product design work was already underway before I identified a need to create a design system for our team. While the larger design system at Vrbo was excellent, we found ourselves needing new or altered patterns with more of a focus on compact, data-dense UIs. We explored these patterns as a team and I began building up a Sketch library to not only standardize those patterns, but also to speed up each designer’s workflow.
Each time a new pattern was proposed, I conducted extensive audits to understand how the team utilized the same or similar patterns, as well as what kinds of customization and variation would be needed. Patterns needed to be flexible for our designers to fully embrace the library, so there are a lot of customization options through the use of nested symbols and layer styles.
Documentation
As the library grew, so did its documentation, which was critical for onboarding new designers. The extensive documentation not only covered what was in the library and where to find it, but it also included information on how to customize each symbol, content guidelines, spacing and placement recommendations, and more. I also developed a contribution process to help other designers contribute back to the system, in addition to being able to make suggestions and submit issues. Updates to the library were communicated through several channels, including internal blog posts and a dedicated Slack channel.
React Components
Thanks to my role as a Design Technologist, I was able to take design patterns and bring them to life as reusable React components. This helped speed up our engineering team’s work, as I was often able to hand off a working component that they could plug-and-play. When I wasn’t building the components myself, I also provided front-end assistance and conducted UX audits as other parts of the design system were implemented.
Due to the nature of this work, it is only available upon request.
