Design Systems

Scalable template, branding, and component libraries

Design systems provide all of the parts and pieces you need to create a cohesive, branded service delivery platform.

“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 a range of common patterns

Patterns orient users as they move through an experience while streamlining the design process.

Create cohesion through design elements

Defining a cohesive experience across many pages or sites allows your customers to stay focused on their tasks, rather than wondering if they are in the right place.

Define templates and use cases

Define the full range of templates and use cases required to meet your needs. This will give you an idea of the depth your design system must account for.

Prioritize navigation and scalability

Create scalable navigation systems to facilitate all use cases and device types. Plan for edge cases. Try to break the system by asking as many ‘what if’s as possible.

Give your content creators real guidance

Living into a new design system often means creating and structuring content in new ways. Provide clear guidance around reading levels, tone of voice, and character limits for content creators.

Strategize for multi-site branding

Define the types of elements across the system that can shift with individual branding while still maintaining overall cohesion across the system, such as colors or logos. As a rule, avoid changing font systems and UI elements across properties.

New design system, old content. Tips + Tricks.

Your new design system is only as good as the content that populates it. Here are a few tips to prepare your content and teams internally.

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.

Methods

Creating a fully scalable design system to meet your unique set of use cases require an intentional design process.

Requirements Gathering

Content / Components Audits

Qualitative and Quantitative Data Gathering

Audience Personas and Customer Journey Mapping

Mobile-friendly, Accessible Design Systems

Templates and Component Libraries

Branding, Logo, Palette, and Typography Libraries

How to Create a Design System

  1. Begin by understanding the range of users as deeply as possible. Conduct user research to understand their unique barriers to entry.
  2. Gather information from stakeholders and internal teams about business requirements, pain points, and administrative workflows.
  3. Audit all existing sites, content, components, and transaction points to identify patterns.
  4. Understand the range of edge use cases across device types, languages, and accessibility needs.
  5. Map the various customer journeys and user stories that the new design system should accommodate.
  6. Create templates, modules, and components to meet the needs of stakeholders and end-users.
  7. Define a branding language that works across the use cases defined at the start of the project.
  8. 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.