Design Systems: Building a Parts Kit
The investment in development quality is equally important to the investment in design.
In our series on design systems, we’ve discussed the advantages and approaches to creating a system from a design perspective. In this post, I’d like to cover some of the technical benefits of a well-organized built design system, or “parts kit”.
By now, you’re hopefully convinced of the benefits of a design system and are ready to invest the time and money to partner with an agency, like Viget, to create something that achieves your vision. The next step will be to apply it to your digital platforms by building it. But wait! If the design system represents your vision and investment, a good parts kit is like insurance that protects that vision when it goes out into the world.
The Importance of Building it Right
A well-constructed parts kit has many benefits that can ensure the consistency and longevity of a design system. The investment in development quality is equally important to the investment in design and will have a long-lasting effect on the success of the system.
Systems Are Easier to Maintain and Extend
One of the lesser-known challenges of building and launching a site is efficiently maintaining it after it’s launched. Ongoing work, big and small, can quickly bloat a codebase as developers unfamiliar with the project (or even original developers once they’ve moved on to other projects) drop in for bug fixes and new features. Without a system, these developers are forced to recreate the wheel every time, adding more and more to the codebase, making it unwieldy over time. With a well-organized system and parts kit for reference, developers can leverage past work to create new things. In some cases, new features and entire pages can be built with little or no addition to the parts kit.
Systems Lead to Better Code
Most developers, including the ones here at Viget, revel in building modular and systematized code. If you look under the hood of a site that’s made up of seemingly all unique parts and layouts, there will still be an underlying system that a developer sussed out. That’s because creating a system is at the heart of the DRY (Don’t Repeat Yourself) principle. Whether it’s a high-impact marketing site or a structured UI system for an application, building in a systematic and modular way results in well-organized and efficient code.
Systems Improve Workflow and Collaboration
In the same way that a visual design system communicates branding and consistency and provides a “source of truth” for everyone who needs to work with it, we have found that a parts kit is essential in a variety of working situations:
Post-Launch Transition to Client Team
Some of our projects result in turning over the day-to-day running of a site to an internal web team. From ongoing maintenance to adding new pages and features, building from, or extending, a parts kit is considerably faster and results in better consistency with the original system.
Framework Hand-Off
In other cases, the parts kit is itself the deliverable. For Rotary International, we worked with their highly-capable and enthusiastic internal development team to deliver a framework specific to their design and content strategy. Their team integrated our work with their content management system for a site refresh and continue to utilize it as they produce new content.
Agency-Client Collaboration or Staff Augmentation
Whenever we work closely with external designers or developers, having a shared vocabulary is an essential communication tool. In building a parts kit, accessible by everyone on both teams, we’re able to have a reference point for conversations, whether it’s about design, interactivity, or quality assurance testing (QA).
Systems Expose and Enforce Design Consistency
Let’s face it, the design and review process can be brutal on design systems. On one project, I counted over 40 shades of gray that had sprawled like a family tree over successive generations of comps and revisions. In a built-what-you-see approach, I would have incorporated every color into the codebase and lost any structure around what gray was used for what. Instead, taking a systematic approach, I collected all the shades and presented them to the designer (he was embarrassed) so he could consolidate them down to a tidy eight. In this example, building with a system in mind allowed me to critically look at small variants in the design system and normalize them into a more streamlined and maintainable codebase.
Systems Provide a Deliverable And “Source of Truth”
As is discussed in many of the above examples, a parts kit can be a lasting and valuable reference for the original work. As sites grow and age, one of the keys to maintaining a consistent look and feel across all content, new and old, is to constantly refer back to the parts kit as the “source of truth”. Using it as a guiding light, future developers and content contributors can work more quickly and efficiently while maintaining the original vision of the design system.
Wrap Up
Building a design system into a parts kit is where the rubber meets the road — a static design becomes an interactive, usable thing. At Viget, we believe that a rigorous design process should be matched with equally robust development.
