Disability Rights Education & Defense Fund

Overhauling a WordPress Multisite to Promote Inclusion

The Challenge

The Disability Rights Education and Defense Fund’s (DREDF) former website had become unwieldy, often requiring manual updates by staff members. After nearly a decade, this process led to a lack of consistency in design and disorganization in the site's content. They sought a partner to redesign their website to adhere to the Web Content Accessibility Guidelines (WCAG) 2.1 and present DREDF as a trusted, respected, and prominent disability organization with fierce advocates and influence.

Our Approach

We worked with stakeholders to define the different types of content on the site and categorize it accordingly. This collaboration allowed us to hone in on the organization’s core audience groups and the available resources for each of them. It also solved the problem of irrelevant information on internal website pages.

The Results

We migrated DREDF from a WordPress multisite to a single WordPress site that dynamically updates content. With this new setup, editors can publish and edit content in one central location, and these changes will automatically apply across the entire website. Additionally, we built a highly accessible, filterable search page that organizes posts into collections tailored to the users' preferences, making it easy to find exactly what they need.

Roadblocks due to a manual process

DREDF’s old website was antiquated, and updating it required their team members to manually input content, often in several areas of the site, to ensure consistency. Moreover, the website's design didn’t represent the organization’s impact and authority.

Their team wanted their new site to become a central hub where DREDF staff, partner organizations, and the public could register for training, access educational materials, gain insights into legal cases and initiatives, and engage in policy advocacy. As experts in crafting highly accessible digital solutions, DREDF entrusted us with redesigning their website.

Reworking an outdated system

The initial phase of this project entailed engaging with stakeholders to identify existing challenges and establish objectives and priorities. We learned that the previous site contained many different types of content, covering a range of topics related to disability rights. The site's varying page structures revealed that it had evolved over an extended period, with new components and content being added as time went on. For example, some would have videos stacked on top of one another, while others provided short descriptions with links to other pages or documents. This resulted in a cumbersome browsing experience, making it difficult for users to locate the information they needed.

Our approach to addressing the problem at hand was methodical and collaborative. Working with project stakeholders, we began by categorizing the various aspects of disability rights advocacy into distinct "verticals.”

During wireframing, our UX strategists introduced dynamically fed content sections for the vertical pages to help maintain structural consistency and efficiency across the site. This innovative feature allows DREDF editors to select the vertical and the type of content they wish to highlight in these sections. Therefore, any content added to the site is automatically sorted and displayed on the appropriate pages, ensuring timely and relevant information dissemination across each specialized advocacy area.

Designing for accessibility

A significant focus of the design process was finding ways to increase the execution of the organization’s brand while upholding its existing accessibility standards. Our designers paid close attention to detail, carefully incorporating specific elements to strengthen visual cues, such as underlining links. We went a step further in our commitment to accessible design by selecting Atkinson Hyperlegible as the primary typeface for the site. This typeface breaks away from traditional design by incorporating unique and clear elements, sometimes in unexpected forms, to enhance character recognition and ease of reading.

Additionally, we structured the site by grouping headlines and content areas within clearly defined boundaries, ensuring aesthetic appeal and functional accessibility.

Hero section for the verticals page template

The value of search

We migrated DREDF’s WordPress multisite and legacy content into a single WordPress site, which offers more efficient development and content management. The nature of this system allowed for a phased approach to updating content and rebuilding pages with the newly designed components.

We decided to structure the bulk of its content as Posts instead of Pages to support the organization’s future needs for content generation. This framework would allow us to implement a robust search functionality for internal and external users to access large amounts of information more intuitively.

To pull this off, we spent a considerable chunk of our development time on the search functionality. We built an accessible, filterable search page for DREDF’s content editors to curate collections of posts based on a user’s interests. However, popular WordPress search and filter plugins do not meet WCAG AA standards (or even WCAG A), so we built this from scratch using Ajax.

Image of the search functionality on the DREDF website

Accessibility for an accessibility-minded client

Our team is proud to have been chosen to design and develop DREDF’s new website, ensuring its vital resources are easily accessible to the disability community. Most importantly, we look forward to supporting their vision of fostering a just world where all people can experience full and independent lives free from discrimination.