Design systems are an essential part of creating consistent and efficient digital products. As companies grow, they often face the challenge of maintaining consistency in their design and development processes, resulting in user confusion and technical debt. To address this issue, many organizations turn to design systems to help streamline their development and design processes, allowing them to maintain a consistent visual language and user experience across all products.
In this guide, we will explore the challenges of implementing design systems and provide tips on how to overcome them based on my personal experience leading digital product teams at large organizations.
An Introduction to Design Systems
WHAT IS A DESIGN SYSTEM AND WHY IS IT IMPORTANT?
A design system is a standardized toolkit for designing and developing marketing materials.
A design system offers several benefits, including:
- Faster Workflow. Pre-made, reusable design components can streamline the design and prototyping process for designers, as well as simplify complex ideas for developers.
- Consistent Visuals. Each element within a design system is informed by its visual language, ensuring that they work together harmoniously, regardless of where they are used.
- Improved Collaboration. Design systems enable stakeholders and designers to quickly visualize and articulate complex ideas, leading to greater understanding and a more cohesive team.
- Better Code Quality. Modular, reusable elements result in cleaner, more efficient, and scalable code, reducing complexity and minimizing UX and technical debt.
WHAT CAN BE INCLUDED IN A DESIGN SYSTEM?
Design systems can vary in terms of their scope.
- Sometimes, a design system is focused exclusively on digital products or a website. It could include a library of elements, components, design patterns, and templates that can be reused and remixed to quickly conceptualize experiences.
- Other times, a design system could expand beyond digital products to include any marketing materials, such as digital banner ads, email templates, and social posts, as well as traditional business cards, flyers, and direct mail pieces.
The focus of this document is on building design systems for a digital product or website.
CAN YOU PLEASE PROVIDE EXAMPLES OF DIGITAL DESIGN SYSTEMS?
Learning from others is a great way to get familiar with design systems. Here are some examples of design systems worth exploring:
What is Inside of a Digital Design System?
FILE TYPES
Design systems for digital products generally have two types of files:
- Design files which are built in your favorite design software ( Sketch, Figma, InVision, etc.)
- Live code built with HTML, CSS, and Javascript files which replicate wireframes elements.
These two files are essentially digital twins which should be synchronized as much as possible. When enhancements are made to the graphic file, the live code should be updated. Conversely, if there is an update to the live code, the graphic file should be modified.
CONTENTS
Digital design systems should include:
- Visual Style Guide – Attributes that establish a visual language for your design system. Examples: colors, typography. [Required]
- Utility Library – Elements that influence all other aspects of the design system. Examples: Grid, page structure, templates, CSS utilities. [Required]
- Elements – Basic web elements. These are the smallest type of web element, which gets reused throughout the system. Examples: Buttons, headers, form fields. [Required]
- Components – Remix different elements to create components and patterns what solve for specific use cases. [Optional]
- Templates – Frameworks for common pages within site. Define page layout and structure. Remix components and elements for a specific use case. [Optional]
- Capabilities – Designs for special capabilities or complex tools that do not fit into standard page templates. Example: Live chat, shopping cart. [Optional]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
NOTE
Not all of the items above are necessary to have a workable design system. I've indicated which ones are [Required] vs. [Optional]. Start with the required elements as a baseline, then expand over time. To determine which items make the cut, ask (1) Who will use the design system? (2) What will they be doing? (3) What elements are most important to them?
DOCUMENTATION
To increase the adoption and impact of your design system, it may be helpful to include documentation that (1) provides overarching principles and philosophies governing design work and (2) provides various team members with guidance on how to use the design system.
This documentation could include:
- Overview – Describes the purpose, intended audiences, and intended use of the design system.
- Get Started Guide – Explains how the system is organized and may include instructions on how to use it. If icons or graphics are used throughout the system or documentation, include a key or legend here.
- Principles – Provides general statements that capture the essence and heart of the team’s design philosophies. Could also outline the approach to solving customer issues. Topics could include design thinking, empathy, customer validation, etc.
- Standards – Describes guidelines, rules, and best practices in key areas that govern the system. Topics could include SEO, design, usability, performance, code, accessibility, folder structure, taxonomy, etc.
- Considerations – Outlines additional considerations for all audiences as they use the system. Because these considerations do not carry the weight of principles or standards, they should be captured separately.
- Case Studies – Use fictional or real scenarios to showcase examples of the design system “in the wild”. Provides ideas on how to translate ideas into reality.
- Asset Library – Includes live assets that can be downloaded and used. Includes snippets of code that can be cut and pasted where needed. While each of these items can also be integrated throughout the design system, in context with the area it is related, this library provides one location for quick access.
- Inspiration – Collection of screenshots and ideas from related companies and/or competitors.
- Resources – Highlights key contacts and includes links to resources and additional information.
CHECKLIST
Here is a checklist of what to consider including in your design system.
Digital Design System
There are millions of ways to think of which elements make up your design system. I offer the following as inspiration only. It’s helpful to have a starting point for planning your design system.
Visual Style Guide
Color
Typography
Grid & Layout
Images
Media
Visual Form
Motion & Sound
Design Tokens
Elements
- General Elements
- Lists
- Buttons
- Table
- Forms
- Boxes
- Separators
- DropCap
- Blockquote
- Highlighted Text
- Specialty Elements
- Elements – Labels, Tags, Pills
- Elements – Badges
- Elements – Charts
- Elements – Spinners/ Loaders
- Elements – Numbers/Stats
- Elements – Scroll to
- General Elements
Components
- Text Boxes
- Notification / Message Boxes
- Code Box
- Alert Box
- Content Panels
- Tool Tips
- Content Organization
- Accordion
- Show/ hide content
- Toggle/Collapse
- Tabs
- Tour
- Carousel
- Guided Navigation
- Guided Navigation – Facets
- Guided Navigation – Sorts
- Guided Navigation – Pagination
- Guided Navigation – Horizontal Filters
- Guided Navigation – Vertical Filters
- Guided Navigation – Filter box
- Guided Navigation – Stepped Navigation
- Guided Navigation – Breadcrumbs
- Modals
- Modals – Content Box/ Lightbox/ /Dialogue Box
- Modals – Promotional Popup
- Media
- Media – Cards
- Media – Gallery
- Media – Maps
- Media – Media Player
- Text Boxes
Content Blocks
Navigation – Topbar
Navigation – Main
Navigation – Other
Footer – Violator
Footer – Main
Footer – Sub-Footer
Header- Hero Image
Header – Slider
Header – Title
Header – Breadcrumbs
Content Blocks – Listings
Content Blocks – Features
Content Blocks – Promos/ CTAs
Content Blocks – Text/Image
Content Blocks – Text
Content Blocks – Testimonials
Content Blocks – Price Tables
Content Blocks – Client Showcase
Forms – Wizards
Forms- Generic
Forms – Gated Content
Forms – Signin/ Login
Forms – Lead Generation
Social – Social Feeds
Social – Social Share
Social – MicroYes
Listings – Content / Blog
Listings – Store
Listings – Portfolio
Listings – Skinny Sidebar
Page Templates
UVP – Homepage
UVP – Services- Main
UVP – Services – Single
UVP – Products- Main
UVP – Products- Single
UVP – Tour/Features
UVP – FAQ
UVP – Pricing
UVP – Portfolio- Main
UVP – Portfolio- Single
UVP – About – History
UVP – About – Career
UVP – About – Team
UVP – About – Investor
UVP – About – Annual Report
UVP – About – Press Kit
UVP – About – Newsroom
Engagement – Events
Engagement – Resources – Main
Engagement – Resources – Details
Engagement – Blog- Main (listings)
Engagement – Blog- Authors/ Contributors
Engagement – Blog- Categories
Engagement – Blog- Archives
Engagement – Blog- Single (Details)
Conversion – Find Rep / Location
Conversion – Contact
Conversion – eCommerce Listings
Conversion – eCommerce Details
Conversion – Landing Page
Conversion – Lead Generation – Form
Conversion – Lead Generation – Thank you Page
Conversion – Gated Content
Converion – Microsite
Specialty – Search
Specialty – 404
Specialty – Sitemap
Specialty – Login/Register
Specialty – Legal- Terms and Conditions
Specialty – Legal – Privacy Policy
Special Capabilities
Application – Master & Detail Views
Comments
Live Chat
Ratings
Shopping Cart
Contact/ Location Finder
Interactive maps
Search elements
Sidebar/ Footer Widgets
Dashboard
Utility Library
LIBRARY
Textures
Scene Creators
Backgrounds
Patterns
Stock Photos – Hero
Stock Photos – Blog
Stock Videos
DESIGN TOOLS
Color Palettes
Brushes
Patterns
Presets
Actions
DEV HELPERS
CSS Utility Library
Frameworks/ 3rd Party Vendors
Snippets
Beyond the Digital System
For your overarching digital marketing effort, you may find it helpful to broaden your designs thinking beyond your digital design system. If this is the case, here are some areas that might you might target.
Social Marketing
Instagram
Facebook
Twitter
Pinterest
Facebook
Email Marketing
Video Marketing
Cover
Thirds
End Slate
Contact
Call-to-Action
Intro
Digital Advertising
Process for Implementing a Design System
CONDUCT A VISUAL INVENTORY
Begin your design system journey by documenting what your digital ecosystem looks like in its current state. By doing this, you will understand how pervasive any challenges that might exist are, and will be better able to bridge the current state and desired state when you build your design system.
Steps involved in creating a visual inventory include:
- Determine which sites and channels you will be targeting.
- For each site you are targeting, build an inventory of all visual styles and website elements that are in production.
- Not sure what to audit? Use my design system checklist for a comprehensive list.
- Not sure how to capture this information? I typically take screengrabs of representative pages within a platform and put them in a Figma file.
- Identify the inconsistencies.
- Clearly understand the challenges that these inconsistencies create. Specifically, look for:
- Operational inefficiencies. Not having a design system can have a negative impact on design and development processes.
- User experience issues. Inconsistent, fragmented channels and visual styles create a poor user experience, can impact usability, and can influence how customers feel about the company, brand, or products.
GET ORGANIZATIONAL BUY-IN FOR THE DESIGN SYSTEM
Once you have clearly defined the nature and scope of the problems and have determined that having a design system will create value for your organization, it’s time to get buy-in from leadership and team members.
The conversation should include the following:
- Overview of how you completed your study and description of findings.
- Analysis of the impact. Describe how the issues and inconsistencies that you found are negatively impacting the team’s efficiency and/or the user’s experience, quantifying costs if possible.
- Present the design system as the answer. “Building a design system will help the company deliver a better experience to the market faster.” Quantify the benefits, if possible.
- Get clear agreement and alignment from the team.
- Get funding and resource commitments.
SETUP YOUR PROCESS, TEAM, AND PRINCIPLES
With funding and resource commitments, it’s time to shift into action. Before you can get started, though, you need a plan of action and a team that can execute. Here are steps to setup your process, team, and principles.
Determine Your Approach
- Determine your starting point – Will you build from scratch or use an existing product as a foundation?
- Define your distribution model – Will you distribute the design system to all teams at once or one team at a time?
- Determine the type of system you’re building – Will it be graphic-only or live code?
Build a Project Plan
- Run the creation of your design system through your existing design process, following the same stages (discovery, design, develop) and rituals (planning, reviews/demos, retros, etc.).
- Regularly communicate progress to sponsors and stakeholders.
Build Your Project Team
- Identify the necessary skills, including fixing identified issues and ongoing maintenance and governance.
- Assemble your team by identifying members, determining capacity, and assigning roles.
- Ensure that internal team members assigned to this project have sufficient availability.
Establish Rules and Principles
- Establish rules for the design system to ensure consistency over time and establish rules for how to evolve it.
- Establish rules for how the team will work to prevent multiple people from updating and ensure efficient maintenance of the system.
BUILD THE DESIGN SYSTEM
Build the Visual Style Guide
The first step in building a design system is creating a visual style guide. This guide lays the foundation for all your design efforts and sets the tone for the rest of the system. The visual style guide includes standards for all style properties, including colors, typography, icons, and grid systems.
To build your visual style guide, follow these steps:
- Build the ideal style and attributes: This involves creating the ideal style for each property and eliminating unnecessary styles, colors, icons, types, etc. Pay special attention to accessibility, including color contrast ratios.
- Test the style against the existing system: It’s important to test your new style against the current state to understand how it will translate.
- Get acceptance from designers and developers: Once you have a style that works, get feedback from designers and developers and update the style accordingly.
- Document best practices and standards: Finally, document the best practices and standards for each style property.
Create Your Pattern Library
Once you have your visual style guide in place, it’s time to focus on building your pattern library. A pattern library is a collection of reusable design elements that are used consistently throughout your design system.
When building your pattern library, start by adjusting patterns based on what is currently in your system. Ensure that your patterns find a balance between the current state and the desired state, and document each part of the library as you go.
Test the System
Testing is a crucial step in building a design system. Review your system with others to identify gaps and update the system accordingly. This step ensures that your system is effective and efficient and that it meets the needs of everyone involved in the design process.
IMPLEMENT AND SOCIALIZE YOUR DESIGN SYSTEM
Once your design system is in place, it’s time to implement and socialize it. This involves educating everyone on how to use the system, its purpose, and its benefits. Your design system is meant to be used by designers, developers, outside agencies, and leadership, so make sure everyone is familiar with it.
CONDUCTING ONGOING UDPATES AND MAINTENANCE
Finally, it’s important to conduct ongoing updates and maintenance to ensure that your design system stays relevant and effective. Add new items as needed, update existing items as changes occur, and keep up with best practice and trend updates.
Challenges of Implementing a Design System
Design systems are a powerful tool for ensuring design consistency and efficiency in product development. However, implementing them can be challenging. Here are some common challenges and ways to overcome them.
STARTING TOO BIG
Design systems should be started small and then gradually expanded over time. Identify the most important elements to include first and then expand as needed. To determine what elements should be included, consider who will be using the design system and what information they need. For larger products or systems, spend more time upfront thinking through the elements and how others will use them. It’s also important to have a designated owner for the design system and clear rules for when it gets updated.
LACK OF VISION
Leadership may not understand what a design system is, why it’s important, and how it transforms operations. Explaining the vision of the design system can be challenging but is necessary for successful implementation.
INSUFFICIENT RESOURCES
Design systems require time, money, and people to create and maintain over time. Unfortunately, resources are often allocated to projects or products, but not to design system efforts. Teams may try to build design systems within each project, resulting in incomplete or siloed systems.
LIMTED KNOWLEDGE OF IMPLEMENTATION
Despite the abundance of information about design systems, each organization has unique needs. There is no single resource that provides guidance on where to start, how to overcome roadblocks, and how to integrate a design system into operations. Legacy products may also have well-defined code that makes it difficult to implement design changes required by the new system.
MINDSET AND CULTURE
Finally, the mindset and culture of an organization may not be ready for a design system. Some team members may resist change or not understand the benefits of a design system. To overcome this, it’s important to communicate the benefits of the design system and involve all stakeholders in the process. Change may take time, but the benefits of a design system are well worth the effort.
Additional Reading
GENERAL ARTICLES
- Atomic Design
- Pattern Lab (Based on Atomic Design)
- How Creating A Design Language Can Streamline Your UX Design Process
- Creating a Design System Language
- Promoting a Design System Across Your Products
- Researching Design Systems
- Styleguides + Design Languages
- All about creating design style guides
- Block/Element/Modifier
- https://www.uxpin.com/create-design-system-guide/establish-rules-and-principles-for-design-system
- https://www.invisionapp.com/inside-design/guide-to-design-systems/
PRACTICAL TIPS
