Why Should You Consider a Design System?
Style Guide vs. Design System
Gone are the days when using a standard style guide is enough to support the ever-evolving needs of a digital product. While style guides are extremely beneficial, it’s not uncommon to see 25+ pages for print guidelines to a much smaller 2- to 3-page brief on implementing those styles online. Products — and people — are changing, and it should come as no surprise that interacting with a brand digitally is much more prevalent.
This is where a design system comes in. Having a central hub that is available for the multiple parties involved with the digital product helps to ensure brand consistency, efficiency in production, and practical collaboration.
What is a design system?
UX Collective, an online publication with curated content for the betterment and growth of UX designers worldwide says, “a design system is the single source of truth which groups all elements that will allow teams to design, realize, and develop a product.” On a similar note, InVision, a prototyping platform with intuitive tools for ideation and design management considers a design system, “a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.”
A design system takes multiple elements — tangible and intangible — and puts them together into a usable whole. It’s made up of brand identity factors such as colors, fonts, sizing and spacing, images, and voice and tone, while also representing principles like overall objectives and brand values. This is achieved all while tying in best practices for UX along the way.
The sum of these parts help develop a guide for reusable components and patterns. These elements come with their own “technical baggage” such as functional and technical documentation (as they should). Assuming only UX designers will interact with the design system would be a mistake, so detailed documentation on what each component is and when to use it essential to ensure all involved parties — developers, UX designers, graphic designers, etc. — are on the same page. With a clear understanding of why and how to use them, the design elements become easier to discern.
Why Use a Design System?
There’s plenty of reasons why companies like Salesforce, Buzzfeed, Pinterest, or Microsoft have implemented a design system.
(Hint: follow the links to see their actual design system!)
With national brands like these (and many others) adopting a design system, there has to be a good reason or two to evolve in that way, right? We think so, too. As a technology company made up of hard-working designers, developers, and strategists, it’s our goal to build custom digital solutions that push the creative envelope because we believe users should have exceptional digital experiences. Saving time and money for the client in the process is an added bonus, and working with a design system can help accomplish this.
In the following example, we’ll break down how a design system has saved resources and streamlined processes. If you’ve been considering implementing a design system for your digital projects, now’s the time to pay attention.
Indiana Insurance Company Implements Design System
Our team has had the privilege of partnering with Physicians Health Plan of Northern Indiana, Inc. (PHP) to develop a design system that’s used across their public website, as well as their secure portals for insurance members, brokers, and employer groups. PHP is a not-for-profit health insurance and employee benefits company whose focus is on providing their customers with quality, affordable, customizable health plans to meet the specific needs of residents in Indiana
One part of meeting those needs was providing a digital platform where members, brokers, and employers could interact with their benefits and health information in a quick, accessible way. In a time where employers can shop the ACA Marketplace for insurance plans, redesigning the public website for a consumer-friendly audience was essential. From there, the various secure portals PHP offers to members, brokers, and employers would also need updated.
To save valuable resources and streamline collaboration between our design and technical teams with PHP’s technical team, developing a design system seemed like the best logical approach. Among many benefits that have come from implementing this design system, we’ll highlight the main ones below:
1. Maintains Brand Consistency
Building the PHP website from the ground up meant starting over in terms of design direction, patterns, components, imagery, and even voice and tone. The site took on a whole new “life” and it was fun working to build it into something that truly embodied the values and objectives of this Indiana insurance company. As multiple projects came up such as the main website, a training module for employees, and the initial steps for the member portal, we quickly realized these design components needed to be stored in a way that was accessible and repeatable.
Branding and identity for a design system goes far beyond look and feel. It needs to incorporate a consistent functionality that is usable across multiple platforms.
– Javon Bell, Lead UX Designer
Compiling repeat styles and components into a usable, accessible location was the first step, but as our UX Designer, Javon Bell says, “Branding and identity for a design system goes far beyond look and feel. It needs to incorporate a consistent functionality that is usable across multiple platforms.”
2. Encourages Practical Collaboration
Speaking of functionality, assuming a UX designer is the only person using this design system would be a mistake, as we mentioned before. When building a design system, it’s essential to remember that this streamlines processes not only for a designer, but for developers, too. Implementing the design system has helped our internal design and development teams collaborate more efficiently, as well as with PHP.
A design system breaks everything into smaller components that are developed one time, with the longevity of using those components an infinite amount of times wherever it makes sense.
– Jarrod Nix, Lead Front-End Developer
This collaboration component has helped encourage rapid prototyping and real-time feedback which allows all parties to review and revise components quickly and more efficiently. It identifies problems early on so the need for pivoting late in the game is mitigated.
3. Streamlines Expectations
Having approved styles and components upfront gives designers the freedom to “run with it,” so to speak. It relieves the pressure of having every iteration of a design approved by the client and allows for the UX team to build out larger chunks of the digital product at one time. Front-end developer on the project, Jarrod Nix, shared that this approach is extremely helpful because it “breaks everything into smaller components that are developed one time, with the longevity of using those components an infinite amount of times wherever it makes sense.” He also mentioned being able to reuse components such as buttons, icons, etc. across various platforms amplifies the brand consistency, as well.
4. Saves a Company Time and Resources
Among brand consistency, collaborative efforts, and efficiency through streamlined expectations, protecting valuable time and resources (typically budgetary resources) can be accomplished through using a design system. Think about it: if our team designed and developed PHP’s website but didn’t have a way of sharing those elements or components with PHP’s IT team, we’d experience substantial back-and-forth discussions and waste time sharing resources. The design system gives all parties access to the styles, components, and code elements to effect change as needed.
With the design system in place, our working meetings with PHP are more focused on innovating and improving the customer experience and less focused on ensuring table stylings or icon styles are the same across the board. The time spent is more meaningful, understanding that the work that took place to build the design system is being used again and again.
A solid design system helps support and scale the design process, is an agent for change, and a key competitive differentiator for PHP. We push for innovation, speed, and rely on a library of standard graphics, fonts, reusable icons, and interactive buttons. Our design library helps provide coherence and consistency to a customer’s journey and helps our team communicate and collaborate more efficiently.
— Lea Ann Powers, Public Relations and Content Manager (PHP)
The Future of Design Systems
As companies continue to grow and evolve, no doubt becoming more digital in nature just as us humans have become, design systems will be more common. This isn’t to say there’s no place for a standard style guide of ages past, but the need for consistency and efficiency across digital platforms will be in high demand. Javon shared, “A useful design system takes a dedicated team to help grow it to its fullest potential. When those working with the design system truly believe in it and see the benefits, there is potential to provide a great digital experience for your customers.”
Wondering if a design system would serve your brand well? We’d love to talk it through with you. Connect with us to get started. We’ll be sharing more about how design systems benefit teams in future blog posts, so if that’s something you’re interested in, stay tuned!
Originally published at reusserdesign.com.
