Skip to main content

An Upgraded Experience with Drupal 10

Description
We upgraded 8 sites to Drupal 10 for the Centers for Medicare and Medicaid Services (CMS) ahead of deadline.
Teaser Image
Image
Photo of hands typing on a laptop beside a toy ambulance and stethoscope.
Body

CivicActions, along with our partner Fearless, facilitated Drupal 10 upgrades across the Centers for Medicare and Medicaid Services (CMS) suite of websites, bringing improvements for editors, better security and accessibility, and community contributions to streamline upgrades for large- scale Drupal. The new Claro administration theme is cleaner, clearer, and more accessible.

The new rich text editor CKEditor 5 provides many UI enhancements and an improved user experience. The most significant change from previous versions of CKEditor is that editors must now use a predefined set of elements to configure the content, which leads to fewer instances of invalid markup patterns making their way into the published site. Since invalid or non-semantic markup is often the cause of accessibility issues, this is a major upgrade. In addition, the improved Layout Builder experience makes it easier for content editors to control more complex layouts, while still keeping consistent with CMS Design System standards.

The 8 sites included in the upgrade, which occurred ahead of schedule, were: CMS.gov; Medicare.gov; Openpaymentsdata.cms.gov; Data.medicaid.gov; Data.healthcare.gov; SDIS.medicaid.gov (internal CMS site); PFS.data.cms.gov (internal CMS site); QIC.cms.gov (internal CMS site); and Provider Data Catalog (data.cms.gov/provider-data).

Outcomes

More Accessible Experience

The new Claro administration theme is cleaner, clearer, and more accessible. In addition, the shift to CKEditor5 decreases accessibility errors from invalid markup.


 

Better User Interface for Editors

The improved Layout Builder experience makes it easier for content editors to control more complex layouts, while still keeping consistent with CMS Design System standards.


 

Improved Human-Centered Design

Drupal 10’s new rich text editor CKEditor 5 provides many UI enhancements and an improved user experience.


 

Better than On Time

This work was completed before the deadline and included upgrades on eight websites for CMS, meaning more improvements sooner.


 

Improved Security

Drupal 10’s upgraded Symfony 6 allows for increased security, so site users can feel secure that their data is private.


 

Seamless Transition

With zero downtime during upgrades, this work was swiftly executed with a seamless transition to Drupal 10.


 

Proof points
Value
600
Description

CMS.gov editors

Value
0
Description

Downtime during upgrades

Value
8
Description

Sites upgraded

Modernizing and Streamlining Cybersecurity Information

Description
We worked alongside ISPG customers and stakeholders to design and build a searchable, user-friendly portal for cybersecurity information – making it easier for security personnel to keep CMS data and systems safe.
Teaser Image
Image
Glowing cyan circuit board schematic on a futuristic digital display.
Team members
Body

The challenge

The CMS Information Security and Privacy Group (ISPG) is in charge of the policies and programs that ensure the security and privacy of data that is handled by CMS information systems. ISPG staff and contractors work to maintain policies, distribute guidance, communicate with customers, support security programs, and promote new initiatives.

While doing this important work over the years, they amassed a large collection of documents and resources that were spread across various locations and formats. This led to issues with version control and made it hard for people to find the information needed to do their security-related tasks.

Without a single, trusted location for cybersecurity information – and with many of the documents being in static PDFs that were full of jargon and hard to understand – finding essential information from ISPG could be onerous, negatively impacting CMS’ overall security posture.

Client goal

To improve their customer service and promote better security across CMS systems, ISPG engaged our team to develop a user-friendly website (informally known as “CyberGeek”) at security.cms.gov that is recognized as the authoritative home for CMS security and privacy information. With this project, ISPG aims to:

  • Improve customer service through modern information delivery
  • Support CMS security personnel with the resources needed for their critical work
  • Make security topics and policies more approachable and human-centered
  • Build user-friendly processes to help ISPG staff maintain their content
  • Establish a platform where customers can find news and updates from ISPG

Our Approach

Together with our partner Affix Digital, we worked closely with ISPG stakeholders and customers to understand the cybersecurity ecosystem at CMS. We built relationships across ISPG and partnered with their leadership and program teams to streamline their content into a single, trusted platform that makes cybersecurity information approachable and human-centered.

First, listen and learn

We started by interviewing ISPG customers to make sure we built the site’s information architecture in a way that made sense to the people using it. Card sorting – a process that involves users in the design of the site navigation – helped solidify the menus and categories that would be the foundation of a user’s journey through the site.

Open source and accessible

We built a decoupled site using Drupal and React to give the client flexibility for technology changes in the future. Utilizing the U.S. Web Design System (USWDS), we created a component library that ensures the site meets government requirements for things like accessibility and mobile responsiveness. We used Storybook to build components in isolation before deployment to the site, catching errors in real-time so they could be fixed on the spot.

Search at the core

One of the main problems ISPG wanted to solve for their customers was the headache of searching for security documents, templates, and program information – which had been difficult to find in various internal repositories. We implemented a powerful search feature using Algolia, with filter options to help people find information specific to their needs. Improvements to search are ongoing as we learn more about how people use it.

Outcomes

Improved customer experience

From Information System Security Officers (ISSOs) to Business and System Owners, the new website provides a better experience for people who need to interact with ISPG as part of the security compliance process at CMS.


 

Searchable and intuitive site

User and stakeholder interviews revealed that ISPG customers are loving the website’s powerful search feature, intuitive navigation, and clean design. Cybersecurity staff can focus on their work without wasting time hunting for information.


 

Accessible & approachable policy guidance

Complex security policies and processes are easier to understand now that ISPG’s guidance documents are written in plain language, with user needs and accessibility best practices at the forefront.


 

Simple content management

ISPG staff can access the pages they are responsible for managing through a user-friendly content management interface in Drupal. The workflows are designed to support busy staff and reduce content publishing bottlenecks.


 

Trusted communication channel

ISPG staff had struggled to communicate critical program updates effectively across many different platforms. The blog on their new website streamlines messaging into one trusted channel.


 

Ongoing partnership

To ensure the ongoing success of the ISPG website, we engaged deeply with ISPG teams all along the way, helping them evolve their organizational processes and sharing best practices for modern web content management.


 

Proof points
Value
95%
Description

of ISPG’s static PDF documents converted to accessible HTML content

Value
240+
Description

CMS systems protected by ISPG’s security policies & programs

Value
1
Description

trusted source for CMS security and privacy information

Building an MVP for Medicare.gov with human-centered design

Description
We did a fast-paced collaboration to submit deliverables in just 8 days, winning the design challenge to help CMS improve the customer experience of their websites.
Teaser Image
Image
Smiling older couple sitting together and looking at a laptop.
Body

The challenge

The Centers for Medicare & Medicaid Services (CMS) help millions of people every year find and enroll in health care programs. Planning a large-scale web and content management project to improve the customer experience of their multiple websites, the agency launched a design challenge for the vendors that were finalists for the contract.

We did a fast-paced collaboration with our partners Fearless and KPMG to submit deliverables in just 8 business days (including page designs, content recommendations, an API, and a clickable prototype with a smart chatbot). Our team won the challenge because the agency saw we could help them achieve their goal to better serve Medicare beneficiaries.

Client goal

The task was to redesign the Medicare Part D section of the medicare.gov website, which helps people understand insurance options for their medication needs. For all their digital platforms, CMS needs to:

  • Meet public expectation for easily navigable online services
  • Securely manage personal info and transactions for millions of beneficiaries
  • Provide friendly online experience for people facing stressful health situations
  • Serve diverse groups of users with competing wants and priorities
  • Support agency staff in publishing clear and accurate public-facing content

Our approach

Within the time constraint for this compressed agile design sprint, we conducted lean versions of the activities we would normally do to make sure the site was effective for Medicare recipients. Daily collaboration among all team members, from Design to DevOps to Developers, allowed us to quickly test and iterate on every step.

We used Drupal as our preferred open source platform and the CMS design system, which builds on the U.S. Web Design System. Together, these tools provide a solid foundation for accessible government websites — a key goal for agencies like CMS that serve diverse and aging populations.

Human Centered Design played a critical role in our process of building a site that would be intuitive and useful to older Americans seeking information about their drug coverage options.

Understand the needs

We talked to real Medicare beneficiaries to understand the challenges they faced in navigating the site. Based on what they said, we created a key persona to drive our scenario-based approach — ensuring that our work solved real problems and created value for users. We also evaluated the existing site to see how well it met standards for usability.

Offer customized guidance

To help visitors feel comfortable navigating complex information about benefits coverage, we created several experience options for them to choose from. They could explore the site on their own, use the guidance wizard, or ask questions of the interactive chat bot. We also improved the Search function to deliver more relevant results.

Clear the path to success

We focused on removing obstacles to help more people successfully find the information they needed. This was done through intuitive navigation and labels, scannable and actionable content, and a refreshed, accessible design. We tested our solutions with users and iterated based on their feedback.

Outcomes

Research-based solution

Because we spoke to Medicare recipients and validated our proposed solutions with them, CMS knows that real user needs will be met with the redesigned site, helping people access benefits more easily.


 

Consistent online experience

Medicare.gov visitors deserve a consistent experience across all parts of the site, on any device. Our design uses a mobile-first approach and a color palette that provides smooth transitions between pages.


 

Accessible healthcare services

The prototype is compliant with Section 508, using intuitive design and clear language to make complex medical insurance information easily accessible by the broadest possible representation of the public.


 

Data to help others

Doctors, app developers, health information curators, and others can pull valuable Medicare data for their own use through the API integration we created using the JSON:API that is part of Drupal core.


 

Simplified content management

The prototype showed how CMS staff can more easily get the right information to the right people using templates and workflows in Drupal, customized for the agency’s various departments and content needs.


 

Efficient and reliable technology

We built the prototype using the same Agile and DevOps practices that we would on a larger scale — with streamlined workflows that allow us to build, test, and deploy new code quickly and securely.

 


 

Proof points
Value
45 M
Description

Americans using this Medicare service

Value
8
Description

days to complete MVP redesign

Value
4
Description

steps in simplified application process

Building a modern web experience for FCC customers

Description
In a fast-paced, comprehensive content migration, we applied Agile development and DevSecOps to modernize a legacy federal website.
Teaser Image
Image
Smartphone displaying a "Submit a Filing" form beside a laptop keyboard.
Body

The challenge

The Federal Communications Commission (FCC) relies on its website to provide regulatory guidance to millions of visitors across various industries. But the old site was hard for users to navigate and frustrating for employees to manage.

In this rapid engagement, CivicActions worked hand-in-hand with the FCC to build a modern, mobile-friendly Drupal website that was more accessible and easier to update.

Client goal

The FCC’s cumbersome, outdated site was not doing its users or internal content managers justice. On top of antiquated technology, the Commission's waterfall processes made it harder for content managers to keep the site updated and relevant for its diverse audiences. The policies and the product needed a refresh.

  • Transition from waterfall to Agile methodology
  • Migrate legacy content from various systems to a modern Drupal Content Management System (CMS)
  • Ease public access to regulatory information through a mobile-friendly web experience
  • Save FCC administrators time and money with more efficient content management
  • Provide reliability and stability by implementing Quality Assurance (QA) testing

Our approach

We had to work fast and our deployment options were limited by security considerations, so we rolled up our sleeves and turned up the collaboration. By implementing a modern Drupal CMS and Agile practices, we helped the FCC modernize its approach to content while avoiding disruptions for users and maintaining a secure environment.

Seamless content migration and management

FCC has a very active user community, so we had to move quickly and avoid disruptions. We performed a massive content migration from Drupal 6 to Drupal 7 and consolidated content from various legacy systems into one CMS. To make the content creation and editing more pleasant and efficient, we added a robust text editor and new access controls. This allowed FCC’s many content creators to manage their own content without compromising the integrity of the site’s design.

The modernized FCC.gov is clean, simple, and easy to use for visitors and agency staff.

Accessible content

The FCC is responsible for the accessibility of 21st Century communications, so there was no room for accessibility errors on its website. We scanned the site for compliance issues and quickly resolved them. The current website serves as a model for Web Content Accessibility Guidelines and complies with Section 508 requirements.

The mobile-optimized user experience lets people do business with FCC from anywhere.

Automatic testing for quality code

Knowing that government websites can be subject to degradation over time as new code is added, we also wanted to help FCC achieve sustainability for their site. We used Behat—a behavior-driven development testing framework that can double as user acceptance test criteria—to make sure all new code worked properly. We configured Behat tests to run automatically whenever new code was merged, ensuring a quality codebase for years to come.

Improved practices for better staff experience

The content editors at FCC were drowning in waterfall processes that didn’t let them respond quickly to evolving needs at the agency. To ease content management and improve the employee experience, we worked with key stakeholders to implement Agile practices. Together we curated priorities, made sure the end result met real user needs, and helped the FCC transition to ways of working better suited to the digital age.

Outcomes

Smooth transition

We performed a massive content migration and consolidation with no disruption to the FCC user community.

Designed for usability

The improved site search and intuitive navigation help visitors quickly find information and resources published by the Commission.

Simplified content management

FCC content creators are equipped with a powerful text editor to update and manage their content without compromising the integrity of the site design.

Accessible for all people

We scanned for compliance issues and made sure the FCC site is usable for people of varying abilities, including those using assistive or mobile technology.

Sustainable, quality code

By implementing automated testing software that scans all new code merges, we set the FCC up for long-term success with code quality baked-in.

Turn-key deployment

Deployment was complicated due to security, so we developed turn-key processes to deploy to production so the IT folks at FCC could do it themselves.

Proof points
Value
69,706
Description

pieces of migrated content

Value
15
Description

minutes for daily agile scrum meetings

Value
19
Description

bureaus and offices housed within FCC

Quote
Quote text
This work will make it easier for both content owners to keep pages updated and for website users to navigate the website and find information.
Quote by

Dr. David Bray | FCC Chief Information Officer (public news release from FCC)