Case study

Overhauling the digital landscape of ADA with Drupal 10 & multisite architecture

Overhauling the digital landscape of ADA with Drupal 10 & multisite architecture

Industry

Non-Profit

Location

Arlington, VA

American Diabetes Association

Focus

Drupal Migration

Services

Drupal 10 Development

Drupal 10 Migration

Design Consultation

Component-Driven Development using Storybook

The American Diabetes Association (ADA) is a non-profit organization that aims to educate the public about diabetes and provide support to those affected. The ADA contributes to the fight against diabetes by funding research, improving treatment options, and offering care services.

In line with their commitment to staying at the forefront of technology to better serve their users, our clients wanted to improve their online presence by migrating their websites from different versions of Drupal to a unified platform on Drupal 10. This involved consolidating different codebases into one system while meeting diverse database needs through a multi-site architecture.

With the upgrade to Drupal 10 and the development of new components following their original brand guidelines, the ADA can now educate, support, and empower individuals affected by diabetes more efficiently. This allows them to reach a larger audience and have a positive impact on the lives of many people affected by diabetes.

Live website
people learning
children playing with toy
a group of people running
people hugging
No items found.

Challenges

One of the main issues shared by the client was the presence of inconsistencies in design and platform management across their various sites. These inconsistencies not only resulted in a lack of cohesive user experiences but also led to inefficiencies in their operations.

It was clear that a significant challenge lay in finding a solution to unify ADA's website and content authoring processes, ensuring a seamless and streamlined approach that would enhance their overall performance and effectiveness.

Approach

We collaborated with ADA's design team to develop a new component library and execute a strong content strategy. By conducting thorough design reviews and maintaining open lines of communication, we ensured that the redesign seamlessly aligned with ADA's brand identity and effectively met the needs of its users.

Our objective was to create a comprehensive solution that consolidated ADA's online presence, empowered them with full control, enhanced their digital assets, and established a modern, user-focused platform.

Solutions

ADA Website redesign

Drupal 10 migration

ADA's websites were running on different versions of Drupal, including Drupal 7, 8, 9, and custom CMS platforms. To improve their online presence and stay updated with the latest Drupal features, the team developed a new Drupal 10 platform from scratch. It carefully migrated all the essential features from the old sites to the new setup.

The goal of this migration was to consolidate the multiple websites into a single platform, taking advantage of the advancements in Drupal technology. We ensured a smooth transition, addressing security vulnerabilities and improving overall performance to create an intuitive, efficient, and meaningful user experience.

Our team of Drupal developers worked diligently to ensure that the new platform not only fulfilled the current requirements but also provided flexibility for future expansion and scalability.

the migration process diagram

The Drupal multi-site approach

Addressing the challenges our clients faced in the past and providing a cohesive user experience, we decided to leverage the superpowers that come with Drupal 10's multisite architecture. This allowed us to build three unique sites using a single codebase while maintaining separate databases for each site. This approach streamlined the development process and ensured effective website management.

To fine-tune every aspect of the ADA websites, we took advantage of Drupal's config split module. This module enabled us to easily manage and enable specific configuration customizations for each site, ensuring smooth adaptation and optimization based on ADA's distinct requirements.

Dynamic building experience

We used the powerful tools provided by the layout builder and paragraphs for dynamic page-building capabilities. These tools allowed us to create flexible and customizable layouts.

We implemented Apache Solr, a robust search engine, to enhance the search functionality of the websites, enabling users to easily find the information they need.

We integrated third-party authentication, content moderation, and workflow features. This integration allows ADA to authenticate users using their preferred authentication providers, while also providing a streamlined process for content creation, review, and approval.

ADA Website mockups

Redesign consultancy, branding & component creation

Consistency in branding was a key focus for ADA. To achieve this, we implemented a unified theme and component library across all of their brand websites. This ensured that the design elements and visual identity remained consistent across different websites, while still providing room for creativity and variety in the design of each site. This simplified approach also made it easy for ADA to create and manage different designs and layouts.

Working closely with ADA's design agency, our team collaborated on a thorough redesign. This involved integrating a new component library and refining the content strategy. Through design reviews and open communication, we ensured a unified redesign that reflected ADA's brand identity and catered to its users' unique requirements.

We used Storybook to build and test individual components separately, ensuring their functionality and uniformity. Integration was simplified through the UI patterns module ecosystem, which allowed us to effortlessly incorporate and reuse common design patterns and components across the websites.

To streamline the development process and ensure smooth integration, we chose Acquia Cloud Next as our reliable and scalable hosting platform for the websites.

Testing

The research validation and feedback phase played a critical role in improving the platform based on user needs. We carried out different testing methods, including functional testing, pixel perfect UI testing, usability testing, and cross-browser testing.

The results of user testing and feedback were carefully analyzed and incorporated into the development process. This iterative approach ensured that the platform not only met ADA's requirements but also seamlessly aligned with user expectations. Visual representations, data visualizations, and findings were included to provide a comprehensive understanding of the testing and feedback results.

Outcome

Using the multisite capabilities and capitalizing, we discovered the ideal solutions for our client. Our team successfully developed cohesive and intuitive platforms for ADA and its users, incorporating cutting-edge technologies and adhering to industry-leading practices in Drupal development.

Visit all websites

Diabetes.org

Diabetes Professionals

Clinical Update Conference

No items found.
No items found.
Next case study