The following is an excerpt from the case study written for my co-authored book, "Building Design Systems.
Direction and Facilitation: Sarrah Vesselov
By 2017, GitLab, as an organization and product, was growing fast. We were working on introducing new features while bringing additional designers, engineers, and product managers on board to handle the increase in scope and volume of work. While there was existing markdown documentation in our UX Guide, upkeep was manual and time-consuming. The use of static images meant it was prone to being out of date. In addition to a lack of current usage guidelines, our CSS was growing without clear technical guidelines. We had page specific styles that would cascade down, affecting other areas and producing more interface bugs. Overall, we were lacking two crucial things: reusable components and clear guidelines for their use
The problem
GitLab was experiencing a growing number of stylistic issues as the product continued to increase in scope. This highlighted consistency concerns; colors and fonts were not well defined, and the way we handled components differed from page to page. We found ourselves addressing the same usability problems over and over. The pace of design was slowing down, leaving us unable to focus on much beyond the current milestone. Rather than working closely with product managers to generate future features and strategic roadmaps, we found ourselves in a purely transactional role. With these problems in mind, we needed a way to do the following:
- Increase speed of design and design handoff
- Improve consistency across GitLab
- Make time for exploratory UX work and discovery
- Empower the entire company to make design decisions
- Speed up and improve the quality of onboarding
- The full case study is available in my book, "Building Design Systems" published by Apress. You may also reach out to me personally to receive a free copy of the chapter in PDF form.