Creating a digital platform for a healthcare organization isn’t simple, especially when you have to work with different stakeholders, outdated systems, and strict accessibility standards.

For this project, we worked alongside our agency partner to build a user-friendly, brand-consistent, Drupal-based website for a healthcare client. Here’s a breakdown of how we approached and successfully executed this complex project.

Header image.png

The Challenge

The healthcare organization needed to combine several websites into one cohesive online platform. The main goals were to improve navigation, ensure the site was accessible to everyone, and create a responsive platform where users could easily interact with various hospital departments, programs, and initiatives. Though much of the design work was already underway when we joined, the project required expert structuring, technical implementation, and senior-level engagement to drive success.

Our Role

We were brought in to help with several key areas:

Provide Senior Design Direction:
We worked closely with the existing team to refine the design, ensuring everything aligned with the brand and met technical accessibility requirements.
Finalize the Design:
We completed the design process, ensuring that the look and functionality matched the project’s objectives.
Optimize Navigation:
We created an intuitive navigation system, including a desktop mega menu and a mobile-friendly hamburger menu, both tested with real users for maximum usability.
Develop the Site in Drupal:
We built the platform using the latest version of Drupal, ensuring it was flexible and scalable to handle the organization’s diverse content needs. This included developing a suite of components, templates, and features to accommodate the organization’s varied content requirements while ensuring a scalable and resilient backend.
Launch and Transition:
We coordinated the site’s launch, working closely with the hospital’s internal teams to ensure a smooth transition to the new platform while prioritizing reliability and performance.
Document the System:
We created thorough documentation, including CMS guides, design system references, and technical training materials to support ongoing maintenance.

Key Accomplishments

Accessibility Compliance: We ensured that the platform followed WCAG 2.2 Level AA guidelines, focusing on ARIA attributes, keyboard navigation, and accessible, user-friendly forms.
User-Friendly Navigation: Based on real user feedback, we designed and tested a navigation system that worked seamlessly on both desktop and mobile devices. We introduced a responsive mega menu for desktop users and a streamlined hamburger menu for mobile devices.
Modular Content Structure: Instead of Layout Builder, we used a flexible Paragraphs-based system to create reusable content blocks, offering both consistency and flexibility for the hospital’s content.
Mass Content Migration: We successfully migrated thousands of pages, news articles, and legacy links using automated tools and APIs, ensuring SEO rankings were maintained.
Crisis Communication Features: We added system-wide and targeted alerts, giving the hospital the ability to configure visual notifications for urgent updates, thus making room for more timely communication. These stylized alert mechanisms could be activated site-wide or targeted to specific pages.
Enhanced Search: We implemented a search system powered by Drupal’s Search API that used indexed nested paragraphs and nodes. This made it much easier for users to quickly find the information they needed.

Tools and Processes

ToolsImage2@2x.png

Figma for prototyping and handoffs to developers.
Maze for user testing with over 125 participants, gathering valuable feedback from various demographics.
As the CMS, Drupal was chosen for its scalability and accessibility features.
As the CDN, Cloudflare was chosen to optimize performance and handle content delivery, ensuring a fast and resilient site no matter how much traffic.
Acquia Cloud for hosting and managing the Drupal environment, ensuring industry-standard hosting.
SiteImprove for ongoing accessibility monitoring and improvements.
Lando is responsible for Docker-based local development, ensuring consistency between local and production environments.

Documentation and Training

We provided comprehensive resources to ensure the hospital’s teams could manage and maintain the site effectively:

Content Guides: Detailed instructions for managing 11 content types in the CMS.
Component Guides: Documentation covering 27 components, explaining everything, from design to functionality.
Image Specifications: Guidelines for maintaining consistent photography and graphics quality.
CMS Training: We ran workshops for over 20 staff members, followed by tailored follow-up resources based on user feedback.
Technical Guides: In-depth documentation for the IT team covering system architecture, development processes, and troubleshooting procedures.

Results

The new website successfully transformed a fragmented online presence into a cohesive, user-friendly platform. With accessibility and scalability built in, the site has become a vital communication tool for the hospital group who now cater confidently to patients, staff, and the wider community.

By collaborating closely with the existing design team and providing senior-level expertise, we ensured the project met and exceeded its goals. Today, the hospital group’s digital presence is stronger than ever, providing a strong digital foundation for future growth and continued success.

Hospital Group Website Digital Transformation