Posted in Experience Design, Software & Development
November 2, 2022
Benefits of using a design system in web development
In digital commerce development, a good design system is the new gold standard for creating a single source of truth for how a company wants its brand seen and interpreted. But what benefit does a robust design system bring to your web development project?
Website design systems 101
The best place to start answering that question is with a quick overview of what a design system is and what purpose one serves.
What is a design system?
“A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.” — Nielsen Norman Group.
While accurate, this definition understates the tremendous value a well-working design system can provide any business.
Listen now
Listen to this article by using the player, or subscribe using Spotify, Apple Podcasts, or Google Podcasts.
A design system’s purpose for web development
Before design systems, organizations used a hefty PDF style guide that defined in great detail the proper way to use a company’s brand: colour values, typography, logo usage, etcetera… and if you were lucky, there may even be some examples of the brand in action like you know, a golf ball with the logo on it.
But one of the key problems with a style guide is that it's static — it’s a reference. It requires a human to seek it out, understand what it means and apply it to whatever they are trying to create; let's face it, designers were the only group interested in following the style guide correctly.
Designers never created style guides to handle the complex user interfaces we see on modern websites and applications. But design systems are.
Think of a design system as a live toolbox of pre-defined styles, components and layouts — specifically branded for your company. And it’s not just the look and feel of these elements but how they work. They are prebuilt, tested and documented, responsive and accessible. Different teams, like marketing, creative and UX designers and developers, can now reach into the same toolbox, allowing them to speak the same language, reducing miscommunication and missed expectations.
Design systems significantly benefit many different parts of a company. Let’s talk about how some key roles are impacted by using a design system.
Benefits of an ecommerce design system
Design system benefits for UX designers
As a UX designer, you get to focus on designing the user experience, creating high-fidelity prototypes and workflows with the confidence of knowing that you have a single source of truth for all things design and UI. This shared source of truth means a smooth handoff to the development team because you’ve prototyped with the same components.
Design system benefits for developers and engineers
Developers and engineers get to focus on what they do best: making things work! There is no confusion over what button to use or, worse, building a button from scratch. When design and development use a shared language, there’s less miscommunication and rework. Just reach into the toolkit and grab the code you need for the component you want, knowing all the critical bits are baked in, like accessibility standards and mobile responsiveness.
Design system benefits for content creators and marketers
Content creators and marketers also benefit significantly from a design system. Having one in place allows creators to focus on message and layout, knowing the styling is entirely handled by the design system, creating brand consistency, even across multiple sites and applications.
All these benefits equal faster design and development, getting your product, service and message to market faster with the higher quality and consistent brand experience that today’s customers expect and demand. That makes the benefits of implementing a design system for business owners and management pretty clear!
If you want to see a great use case of a design system, look no further than Acro Commerce’s own website. We recently completed a revamp of our site, which included a move to a more modern headless architecture, an upgrade from Drupal 7 to Drupal 9, and allowed us to build a robust design system. This work is the launchpad for all future client builds at Acro Commerce, so check out our case study if you want to learn more.