Experienced designers and digital developers understand now more than ever the importance of user experience (UX) when creating digital products. Building products with exceptional UX can be easier said than done, but one effective solution is a design system. By implementing a design system, designers and developers can more efficiently create products that delight your users.
What is a design system?
To borrow an analogy Wolfram Nagel used in his book “Multiscreen UX Design,” imagine if you were building something out of Lego bricks. You could just dump all the bricks onto a table and pick through them to find the specific parts you’ve already determined that you need. Instead, imagine if we took some time looking at the pile, arranging and organizing it. What if you could instantly sort those Lego bricks by color, shape and function? That would not only save time in searching, but also help you discover pieces that you didn’t even know you had, allowing you select the best bricks for the job and create an even better finished product.
Whether creating Lego houses or mobile applications, we often start designing and building artifacts immediately based on need, but we do so without considering all the possible patterns and components. Design systems help us look at our available components in a different way and let them inform how we design and build.
At its heart, a design system is a repository for user interfaces (UI), functional standards, and reusable components such as typography, grids, color, code, etc. Traditionally this would also include pattern libraries along with anything needed to inform the efficient and more rapid design and development of an application.
Design systems are distinct from style guides. A style guide is representative of a specific design solution – documentation of what the design is and how to recreate it. A design system supports a design ecosystem and thus informs what went into a design solution. It also typically contains a pattern library for applying interaction and UX patterns.
How is a design system managed?
A design system is meant to influence design, not dictate every aspect of it. The specific components or patterns may vary from one product to another depending on user need. The designers should have the flexibility and skillsets to be able to define patterns while being representative of the overall system. In the end, those product-specific patterns may influence the system and evolve. A good design system is always evolving and growing based on feedback from the actual solutions it helps inform.
Having a design-system-first ecosystem forces designers and engineers to pause and consider how any changes, feedback and iterations to one solution or pattern library affect the whole. When you take the opportunities and insights learned from individual applications and act on those changes in the system, these improvements become systemic across the ecosystem.
How do you maintain a system for long-term success?
It takes a diverse group of people to maintain a design system. You need executive stakeholders supporting the effort as well as UX designers, UI designers, and front- and back-end engineers involved. The system should also be as cross-disciplinary as possible, approachable and visible for others outside of design and engineering, such as product, sales, marketing and legal.
It’s also important to make the design system as agnostic as possible in terms of context and code. If engineers can utilize the system no matter what the technological needs or context of their specific projects, then the system will enjoy better adoption and a longer shelf life.
What are the advantages of a design system?
The advantages of a design system will vary depending on the specific features of the system. The CoreLogic design system, Ensemble, offers a number of benefits in creating superior digital products:
- Scalability: While built in Bootstrap, Ensemble improves on the framework’s shortcomings, allowing designers and engineers to create agnostic components that work effectively with many popular front-end and back-end technologies.
- Accessibility: Meeting the accessibility standards of government and compliance regulations can be difficult and time-consuming, but Ensemble features baked-in standards that are compliant with WCAG 2.1 Level AA and Section 508. The design system also provides education on these standards as well as access to tools to test them and ensure compliance.
- Flexibility: Ensemble helps designers efficiently roll with changes as they come. Rather than use hard-coded visuals, the look and feel of products can be adjusted on an enterprise level when brand standards change.
- Design Efficiency: All components are built in Sketch as a library, so designers can simply select a component and drop it, fully styled, into their product prototype. Rather than spending time translating visual styles into design mock-ups and front-end code, designers and developers can focus on more important tasks.
- Education: Ensemble offers explanations, tips and rules for design best practices. These not only keep designers and developers informed on vital UX principles, but also help professionals from other departments, such as sales and legal, learn more about the reasons why the company’s tools are designed the way they are. This way, everyone in the company stays on the same page and keeps the focus on optimal UX, brand consistency and accessibility compliance.
Ultimately, using a design system like Ensemble makes it more efficient for companies to focus on delivering the best experiences to their users and superior digital products to their clients.
Written by Jason Verlangieri, Senior Leader, User Experience, CoreLogic