With a network of websites mired in old, outdated platforms, the State of Rhode Island was struggling to serve the communication needs of government agencies and their constituents. And then the pandemic hit.

COVID accelerated the demand for better, faster communication and greater efficiency amid the rapidly changing pandemic. It also spotlighted an opportunity to create a new centralized information hub. What the government needed was a single, cohesive design system that would allow departments to quickly publish and manage their own content, leverage a common and accessible design language, and use a central notification system to push shared content across multiple sites. 

With timely, coordinated news and notifications plus a visually unified set of websites, a new design system could turn the state’s fragmented digital network into a trusted resource, especially in a time of crisis.

Why Drupal was chosen: 

Drupal was the platform of choice for a few reasons: 

  • The State Division of Information Technology had previous experience with the platform and enjoyed the workflow required to maintain security and access to its constituents
  • Acquia's Site Factory would give the agency a way to rapidly onboard legacy partners into the new system
  • Acquia's Site Factory also had ways to distribute news across independent agency sites for an improved dissemination of information across all members
  • Drupal's proven track record with the State of RI and other states made it a solid choice to continue working with
Describe the project (goals, requirements and outcome): 

Custom Tools Leveraging Site Factory

A key goal was being able to quickly provision sites to new or existing agencies. Using Drupal 9 and Acquia’s Site Factory, Oomph gave the state the ability to stand up a new site in just minutes. Batch commands create the site and add it to necessary syndication services; authors can then log in and start creating their own content.

Oomph also created a set of custom tools for the state agencies, to facilitate content migration and distribution. An asynchronous hub-and-spoke syndication system allows sites to share content in a hierarchical manner (from parent to child sites), while a migration helper scrapes existing sites to ensure content is properly migrated from a database source.

Introducing Quahog: A RI.gov Design System

For organizations needing agility and efficiency, composable technology makes it easier to quickly adapt digital platforms as needs and conditions change. We focused on building a comprehensive, component-based visual design system using a strategy of common typography, predefined color themes and built-in user preferences to reinforce accessibility and inclusivity.

The Purpose of the Design System

The new, bespoke design system had to support four key factors: accessibility, user preferences, variation within a family of themes, and speedy performance.

Five color themes for the RI.gov system, each with its own dark mode

Multiple color themes

Site authors choose from five color themes, each supporting light and dark mode viewing. Every theme was rigorously tested to conform with WCAG AA (and sometimes AAA), with each theme based on a palette of 27 colors (including grays) and 12 transparent colors.

User preferences are stored per site and include color mode, font size, line height, and word spacing

User preferences

Site visitors can toggle between light or dark mode or use their own system preference, along with adjusting font sizes, line height, word spacing, and default language.

Mobile first

Knowing that many site visitors will be on mobile devices, each design component treats the mobile experience as a first-class counterpart to desktop.

Examples: The section menu sticks to the left side of the viewport for easy access within sections; Downloads are clearly labelled with file type and human-readable file sizes in case someone has an unreliable network connection; galleries appear on mobile with any text labels stacked underneath and support swipe gestures, while the desktop version layers text over images and supports keyboard navigation.

High Accessibility

Every design pattern is accessible for screen readers and mobile devices. Color contrast, keyboard navigation, semantic labelling, and alt text enforcement all contribute to a highly accessible site. Extra labels and help text have been added to add context to actions, while also following best practices for use of ARIA attributes.

A screen shot of the Google Lighthouse scores for one of the sites, showing a 95 for performance, 99 for accessibility, 100 for best practices, and 82 for SEO

Performance aware
Each page is given a performance budget, so design components are built as lightly as possible, using the least amount of code and relying on the smallest visual asset file sizes possible.

Effecient and Effective Paths to Communication

The first sites to launch on the new system, including covid.ri.gov, went live four and a half months after the first line of code was written. A total of 15 new sites were launched within just 8 months, all showing a 3-4x improvement in speed and performance compared with previous versions. 

Every site now meets accessibility guidelines when authors adhere to training and best practices, with Lighthouse accessibility and best practice scores consistently above 95%. This means the content is available to a larger, more diverse audience. In addition, a WAF/CDN provider increases content delivery speeds and prevents downtime or slowdowns due to attacks or event-driven traffic spikes. 

State agencies have been universally pleased with the new system, especially because it provides authors with an improved framework for content creation. By working with a finite set of tested design patterns, authors can visualize, preview, and deploy timely and consistent content more efficiently and effectively.

Technical specifications

Drupal version: 
Drupal 9.x
Organizations involved: 
Project team: 
  • Jordan Caldwell — UX Engineer
  • Ben Hamelin — Senior Backend Engineer
  • Philip Frilling — Senior Backend Engineer
  • Jack Hartman — Project Manager
  • J. Hogue (artinruins) — Director of Design & UX
Sectors: 
Community
Government

Comments

overcoata’s picture

COVID hastened the need for more efficient and effective communication in the face of the ever-evolving epidemic. It also brought to light a chance to establish a new data center.