Lucerne Cantonal Hospital and Nidwalden Hospital: Multi-Site Design Refresh

The websites needed a comprehensive relaunch to meet the changing needs of the diverse target groups through better navigation and presentation of existing content.

Furthermore, the content editing needed simplification to meet the needs of approximately 200 decentralized web editors, particularly content for mobile devices.

Key Features

Modernize the frontend design to meet the needs of users and improve the user experience

Visually, the elements of the existing websites were analyzed and reimagined. The implementation of new design elements can convey more positive emotions - specifically aiming to reduce anxiety and build trust in the medical context. By analyzing usage data, the main navigation was restructured and provided with a hierarchical design. This makes it easier for users to see which topics/page sections are related in terms of content. The old "boxed" layout was replaced with a modern "full-width" layout. The goal was to play with different widths of individual content elements to create visual variety. This allows the content to be displayed optimally on both smartphones and desktops. 

To facilitate content preparation for web editors using the mobile-first approach, a preview mode was provided so that they could preview the edited pages on different device types. 

Despite being a fundamental and essential requirement, a few obstacles need to be addressed: guaranteeing that when a user generates or modifies content, the frontend is updated to reflect the changes, and offering a user-friendly method to preview the frontend, akin to the straightforward approach in a conventional Drupal configuration.

To maintain real-time synchronization between the frontend website and content updates, a customized module serves the purpose of notifying our Gatsby site whenever a new entity is created or an existing one is updated. This notification triggers an incremental rebuild, ensuring that only the altered elements are updated. Additionally, the entity pages' View tab showcases a representation of the frontend, preserving the familiarity of the standard Drupal workflow of editing and instantly previewing the changes.

The synergies from the relaunch have resulted in cost savings. Thanks to the more intuitive navigation, the required clicks have been reduced by 65%, and the average visit duration has been decreased by 24%. 

This saves the population approximately 810 days of "lost navigation time" per year. Since 2017, the LUKS Group has conducted a satisfaction survey using the Net Promoter Score (NPS) every November. The survey in November 2022 revealed a 97% increase in satisfaction among users accessing the website via smartphones. For desktop usage, the satisfaction increase was 14%. 
 

Multi-site setup with the Domain module

As part of the solution, the proposal utilized a shared Drupal instance among the two websites, www.luks.ch and www.spital-nidwalden.ch. This implementation aimed to facilitate seamless content and media sharing, thereby enhancing the editorial workflow and ensuring uniformity of content across distinct sites.

The realization of this concept involved the installation and configuration of the Domain module. This module introduced a checkbox field within content items, enabling their association with the appropriate websites. Furthermore, editors were assigned specific websites to their user accounts, allowing them to access pertinent content and granting website-specific publishing privileges.

On the user-facing side, two distinct websites were developed, each utilizing unique user roles with tailored permissions to retrieve content as needed. This multi-site approach significantly streamlined the process of generating content for both sites. Notably, this setup led to improved maintainability by effectively consolidating the technical aspects into a single website entity.

Additionally, the multi-site architecture empowered administrative and high-level editors to oversee the execution of the communication strategy effortlessly. Moreover, it fostered a unified process for editorial onboarding and training, contributing to a cohesive and efficient content management framework.

Decoupled Drupal with GraphQL

ReactJS and Gatsby were employed to construct high-performing, sustainable, and interactive websites, complemented by valuable tools such as Storybook, Prettier, and ESLint, which facilitated the development process. Opting for a segregated static frontend delivers enhanced security advantages by limiting the main domain to HTML, JavaScript, CSS, and media files solely from the Gatsby build, thereby mitigating the risk of potential vulnerabilities targeted at Drupal.

In the event of backend disruptions, the frontend remains resilient as it resides on a distinct hosting platform, minimizing potential pitfalls, given its composition of static HTML and related assets. Embracing a decoupled architecture also affords the flexibility of swapping out the backend for an alternate CMS, offering clients the prospect of retaining the frontend while adapting to changing backend requisites. This rationale underpinned the adoption of a decoupled architecture for the LUKS Group websites.

In the context of utilizing Drupal as a decoupled CMS, a pivotal decision involves determining the method of content exposure through an API to enable the frontend website to seamlessly retrieve all necessary elements. With a fondness for GraphQL, Amazee Labs naturally gravitated toward the GraphQL Drupal module, co-maintained by our very own Philipp Melab. A bespoke GraphQL schema was tailored to align with the specifications, fostering close collaboration between the backend and frontend teams to ensure harmonious integration of retrieved data within React components.

The headless Drupal configuration has proven to be exceptionally effective for the system, with the internal segregation significantly enhancing the developer workflow.

The decoupled architecture ensures greater reliability, making the frontends more resilient and the websites accessible around the clock. By renewing the technical infrastructure of luks.ch and spital-nidwalden.ch, the page load time has been reduced by over half.

Webform usage

Within the scope of the project's stipulations, a need arose for a manageable form solution for the LUKS Group editors. The preferred choice in the realm of Drupal is the Webform module, renowned for its exceptional flexibility and extensibility. Nevertheless, when working within a decoupled architecture, the challenge emerged that webform configuration data couldn't be readily consumed to generate forms on the frontend without incurring substantial development complexities.

To leverage the inherent advantages of the Webform module, a strategic approach was taken. Drupal webforms were seamlessly integrated into the frontend via iframes, all adorned with a tailor-made theme. This clever adaptation allowed for the graceful incorporation of webforms into the frontend, eliminating the need for the arduous task of implementing an independent form builder on the frontend.