Building a design system in a small team
Comprehensive design systems, made by enterprises with large and mature design teams, are often impractical for small teams to build. The costs usually outweigh the benefits and this was the challenge I faced while working on a business-to-business (B2B) app for a project.
We had a small team and building a design system from scratch was a bit of an overkill. You had to take valuable resources away from visual design and shift it to creating this system.
“The more decisions you put off, and the longer you delay them, the more expensive they become.”
Craig Villamor of Google Maps
I felt it was necessary to build a design system with just enough detail to serve as a foundation for future growth.
Process
Start small and plan
I planned for the design system to include the basic collection of assets and components like typography, colours and a user interface (UI) pattern library. I went through a visual audit of the key screens, looking for patterns and repeated application of components.
Cleaning up design files
From the visual audit of the Sketch files, it was clear that major housekeeping was required. I needed to remove unused styles, delete unused layers, order folders, standardise layer names, and the list goes on. Thankfully, there were Sketch plugins I could rely on to clean up the files:
- Sketch Runner: Perform Sketch actions quicker with your keyboard. Launch, search, and execute. Designing becomes a breeze
- Rename It: Keep your Sketch files organized, batch rename layers and artboards.
- Style Generator: Programmatically generate hundreds Shared Styles, all at once
- Unused Style Remover: Remove unused layer and text styles.
- Symbol Organizer: Organize your symbols page, and layer list, alphabetically and into groupings determined by your symbol names.
- Artboard Manager: This plugin automatically arranges the position of all Artboards in your Sketch document, to snap them to rows & columns.
- Rename Text Styles: With Style Master, you can rename all or some of your shared styles at once. With the power of regular expressions, you can even completely redesign the naming hierarchy. The possibilities are limitless.
- Sketch Cleaner: Sketch plugin that helps you get your design files as clean as a whistle.
These were compiled into a list so future designers working on the project could use them to maintain clean, organised Sketch files.
Creating the visual design language
Typography and colour
Using Apple’s typography guidelines as my reference, I kept font usage and styles to a minimum. Stray colours and shades were removed. This reduced fragmentation of code and kept the visual experience simple.]
UI pattern library
I utilised Brad Frost’s atomic design methodology to bring structure and logic to the individual screens.
To keep files organised, I wrote guidelines for naming working files, artboards, layers and symbols.
Material Design’s design kit for Sketch was a good reference for assembling the components into a sticker sheet, with elements organised neatly into sections.
Challenges
No matter how detailed your onboarding document or style guide is, you will encounter designers or developers who will resist change. Your design system won’t scale if no one embraces it. Being the guardian of the design system, I had to constantly remind our team about the benefits of having one. Designers were frustrated at new and unfamiliar processes.
“Why do I have to name things a certain way?”
“How do I categorise this component?”
I was there at every step to guide and point them in the right direction.
Outcome
Onboarding new designers was a breeze with a design system. Even though multiple designers were working on screens for different user flows, they all maintained a consistent visual language. We were using Abstract for version control and that allowed for seamless handshake of the design system with the offshore development team. Designers were also focusing more on the work at hand instead of housekeeping tasks like looking for files, creating their own components, etc.
As this is a constant work in progress, we’re hoping to establish more rules and principles with proper documentation, create a typographic scale, add grid and spacing guidelines, and so much more.
Conclusion
It can feel scary for small teams to build a design system but the benefits outweigh the costs in the long run. As your team and projects scale, so will your design system.
This article was originally published on my blog.
