Relaunch of luks.ch & spital-nidwalden.ch

Case summary

Decoupling of an existing multi-site Drupal project. Static frontend with dynamic elements.

Case description

In 2021, Luzerner Kantonsspital and Spital Nidwalden merged to form the new LUKS Group. As a leading hospital group, LUKS employs new digital technologies to increase efficiency and meet the major challenges in healthcare. The project relaunched the two independent sites, and the frontends underwent a redesign.
The websites of the Luzerner Kantonsspital and Spital Nidwalden are mainly used for communication with patients, their families, general practitioners, specialists, as well as job seekers. Providing access to relevant information for a range of target groups with different levels of knowledge poses a major challenge.
The originally launched websites could no longer meet the changing user needs and visual requirements. Particularly, mobile usage had significantly increased, and the performance was no longer sufficient.
The preparation of content for mobile devices by the approximately 200 decentralized web editors needed to be simplified.

Case goals and results

GOAL 1: Merge the existing luks.ch & spital-nidwalden.ch websites
SOLUTION: Migration of spital-nidwalden.ch into a Multi-Site Drupal 9 CMS (luks.ch & spital-nidwalden.ch), followed by decoupling in combination with ReactJS and Gatsby, with the aim of providing a high-performance frontend experience.

GOAL 2: Modernise the frontend design to meet the needs of users and improve the user-experience, as well as improve the experience for web editors.
SOLUTION: 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 can preview the edited pages on different device types.

RESULTS:
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%.
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.

Challenges

It was a big project with lots of business logic and Drupal customizations. Many contrib Drupal modules were used. Content had complex structure, including nested blocks and embedded listings.
Embedded listings were the hardest part. We had to create a universal resolver for listing's GraphQL API which supports listing options (set by content authors) and filters (configured in Drupal UI).

Community contributions

As per our usual workflow, whenever we encounter a bug in a contrib code, we provide a path. If we require a solution for a new feature that is not available we create our own open source solution.

Drupal:
- https://github.com/drupal-graphql/graphql/issues/1195
- Collaboration with the open-source community for existing patches - i.e. reviews and testing

Other:
- https://github.com/gatsbyjs/gatsby/pull/36349
- https://github.com/yarnpkg/berry/pull/4243

Extensive use of open source code in https://github.com/AmazeeLabs/silverback-mono

Hosting

The static frontend is hosted on Netlify. Gatsby build happens in Lagoon Cloud. The CMS is hosted on Lagoon On Premises (customer requirement is to keep data on their own infrastructure).
A push to a Git branch triggers a Lagoon deployment on a respective environment on both Lagoon instances. Once the frontend deployment is done, an initial Gatsby build starts. Once Gatsby build is done, the files are deployed to Netlify.
An incremental Gatsby build is triggered every hour to update frontend with new CMS changes.

Why should this case win the splash awards?

The multi-site relaunch is a superb example of how Drupal excels when it comes to enterprise-level sites which require large amounts of content to be manageable by various roles and permissions. The use of a central backend for editing and publishing content enables simple and cross-site synergy on different frontends, which results in immense resource savings for the LUKS group.

The redesign of the site has made a decisive impact on users, patients, and staff within the LUKS Group, ensuring that accessing vital information is made simpler regardless of which device you are using.