Design Systems
A unified approach to digital product design.
Design systems provide the elements and guidelines to ensure consistent and scalable experiences.
“Today, there are nearly 30,000 U.S federal websites with almost no consistency between them.”
18f on Building a large-scale design system: How we created a design system for the U.S. government
Insights + Recommendations
Identify common patterns
Build trust through consistency
Define use cases
Prioritize scalable navigation
Guide content creation
Consider multi-site branding
Establish the foundation
Prepare to iterate
Test your system
Onboard team members
Make it sustainable
How to create a design system
- Begin by understanding the range of users as deeply as possible. Conduct user research to understand their diverse needs.
- Gather information from stakeholders and internal teams about business requirements, pain points, and administrative workflows.
- Audit all existing sites, content, components, and transaction points to identify patterns.
- Understand the range of edge use cases across device types, languages, and accessibility needs.
- Map the various customer journeys and user stories that the new design system should accommodate.
- Define the set of templates that will meet the needs of the project requirements.
- Define a visual language that effectively represents and conveys the brand identity.
- Design flexible, modular components such as buttons, forms, and navigation elements that can be reused and scaled across different parts of the product.
- Test and iterate on the design system by mocking up real content pages, navigation menus, and flows utilizing the libraries developed and gathering user feedback.
Methods
Product strategy and planning
User research and testing
Human-centered UX/UI/CX
Components audits and analysis
Scalable information architecture and navigation
Consistent interaction patterns
Accessible UX / UI patterns
Visual design and branding schemas
Comprehensive template and component libraries
Mobile-friendly, responsive design
Multilingual interface
Documentation and usage guidelines
Creating content for a new design system
Talk with your content creators about any anticipated changes.
Use content gathering tools to establish a template for formatting different types of content.
Conduct a GAP Analysis to understand how the site(s) and page(s) are changing.
Define your tone of voice, audience, and reading levels.
Practice by populating pages and testing them with real users.
Ask your designers to mock up examples of pages using real content. Use this to demonstrate the new approach to content creation teams.
Bring content creators and designers together throughout the design process to collaborate on new solutions.
