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).

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.

The challenge

Alternative text is a complex topic, as it is difficult to account for every possible scenario or to provide sufficient context for each image. However, in order for web pages to be the most accessible, any contextual images that have been added must include good quality, descriptive alt text. Our team was tasked with updating the image upload editorial interface within Drupal to help editors add better, more useful alt text for the images they were uploading.

We completed a full, cross-disciplinary project with our partners Friends From The City and Agile Six. The project included discovery to determine exactly which areas would be best to focus on, building a functional prototype for user research, and ultimately implementing improvements determined from that research to create a better, more informed user interface for Drupal editors.

Client goal

Our goal was to create a better alt text experience for Veterans visiting VA.gov. To achieve this we had to improve the user interface within Drupal to:

• Streamline and simplify the image upload form
• Clearly identify the alternative text field
• Add client-side validation for common errors seen within existing alt text
• Provide clear and concise error messages for editors to correct mistakes
• Educate editors on how to create descriptive and accurate alt text and why it is important

Building on Drupal, an open-source content management system (CMS), we wanted to improve the image upload editorial interface by implementing guardrails to prevent poor quality alt text through the enforcement of accessibility best practices while also reducing frustrations for CMS editors who are writing the alt text - ultimately resulting in better quality alternative text for people who rely on it to access visual content on VA.gov.

Our team worked cross functionally with our partners to explore solutions that were not only technically feasible, but also solved a variety of user needs by following human centered design practices. Research was a key component to improving the alt text on VA.gov, from gathering and analyzing statistics on current alt text to conducting user research sessions. The final design that was implemented was a direct result of iteration based on user feedback and thought partnership with our team and the product owners at the VA.

Determine which metrics to target

The current alt text for images within Drupal was evaluated based on multiple criteria - did the alt text contain a filename; was the alt text concise; was the alt text redundant; was the alt text accurate. The last criterion is very contextual, however the first three are more subjective and we decided to target those metrics to start focusing our improvements.

Identify Improvements

We created an interactive prototype to test with users. We analyzed the feedback from those research sessions to determine the best way to incorporate validation into the alt text field with the least amount of user disruption. We also determined additional user interface updates that would make the entire image upload experience a simpler and easier task for the editor.

Educate Drupal Editors

We created training articles within the Drupal Knowledge Base to help editors contextualize alt text and more fully understand what it is and why it is important. By helping editors understand the experience a Veteran might have if an image they upload has poor alt text, they will better understand the content they need to provide to improve this experience.

The challenge

The Centers for Medicare and Medicaid Services (CMS) provide healthcare benefits to millions of people every year. But the websites and digital tools that help people find and enroll in these programs were built on a myriad of aging technologies and were confusing to navigate. CMS needed to streamline and update its online platforms to improve the customer experience while establishing more efficient backend workflows for agency staff.

This is an enormous and complex task, involving the modernization of Medicare.gov, CMS.gov, CMS open data portals, and many other public facing apps that serve multiple user groups — including beneficiaries, caregivers, health providers, data professionals, and government stakeholders.

WECMS helps more than 100 million Americans every year apply, find, and enroll in healthcare programs. The information and tools provided are essential components in supporting CMS' goals of creating a truly consumer-focused, streamlined, efficient, and omni-channel experience for beneficiaries and their caregivers. The overall intent for this contract is to ensure continuity of operations for the Americans it serves and the WECMS program, which maintains, designs and implements open source software digital services for CMS’ flagship websites, tools, components and applications on Healthcare.gov, Medicare.gov, CMS.gov, and 7 Open Data catalogs. In addition to engineering and design continuous improvements on these established websites, this contract provides security compliance, devops, system infrastructure, content strategy, information architecture, training, documentation, content editor support, public call center dev support, Section 508 improvements, mobile application development, and tooling and systems expertise.

Client goal

When this multi-year transformation is complete, CMS will be able to deliver on its mission more effectively. CivicActions is providing agile development, DevOps, and human-centered design (HCD) services to help the agency:

• Improve the content editing experience for staff
• Modernize legacy systems and tools
• Replace proprietary technologies with open source
• Support active, informed healthcare consumption

Our approach

Collaboration is the key to success in a project of this scale and complexity. With multiple partner vendors (including our primary partner Fearless) and disparate stakeholders across many organizational layers, we work hard to keep lines of communication open and be up-front about potential problems.

Balancing stakeholder priorities, user needs, technical complexity, and CMS deadlines, we created a roadmap that minimizes risk and maximizes opportunities for success. Then we went to work on “quick wins” — tasks we could complete right away that would make the biggest difference for users.

Address the holistic customer experience

We knew that each CMS application is part of a huge public-facing ecosystem of digital tools, with many touchpoints. To address the entire experience that a person would have in navigating the systems, we drew on the agency’s own knowledge of their beneficiary community, working with them to refine and document how each person interacts with CMS online. The resulting holistic view helped us identify how we could improve that experience iteratively.

Adopt a data-driven strategy

To make sure we built the right solutions, we immersed ourselves in the CMS mission from the operational, technical, and UX perspectives. We dug into existing user research, reviewed analytics reports, conducted stakeholder interviews — then created user personas and journey maps to refine the project scope and goals. All this data is managed in a shared repository of user insights and project knowledge, which we refer to as we prioritize the work to be done.

Replace proprietary software with open source

We are “reverse engineering” multiple custom-built Microsoft.NET applications (such as the Medicare Eligibility and Premium Calculator and the congressionally-funded Physician Fee Schedule (PFS) Lookup Tool with modern, open source solutions. As we recreate all these applications in Drupal, we’re making guides and code documentation that outline the entire system — allowing CMS to maintain control of its own technologies and avoid vendor lock-in. We are also migrating CMS open data platforms from Socrata (proprietary) to an open source solution using DKAN 2.