The Mentally Healthy Workplaces Platform

The Solutions

Step one in the project was running Discovery in collaboration with design agency Pollen, which focused on developing the UX for the site. 

Next, our developers worked on Drupal-based solutions to achieve the National Mental Health Commission’s goals.

Front-end components were implemented in React using Storybook, an open-source design system management tool.

Many of these components were ported over to Twig and used in the Drupal theming system, while others remained as pure React components used in the decoupled applications.

The React component library is intended to be reusable and is available to any team or project.

Drupal Islands 

Using Layout Builder, we placed decoupled React applications as blocks called “islands”, including navigation, the footer and search applications. The result was a faster developer experience, which meant complex user interfaces could be delivered in single sprints.

To establish these “islands”, we looked to Tanstack Query instead of using a framework such as Remix or Next. We chose this as Tanstack Query offers a powerful data fetching and caching library.

We used Redux for shared state management, enabling the “islands” to talk to each other and store settings in the browser.

GraphQL APIs

The GraphQL 4 module was a good option for creating numerous APIs. These push and pull data to and from Drupal, allowing us to use React to create fully decoupled user interfaces. 

The final product was a series of single-page applications that updated data in Drupal without refreshing the page.

OpenSearch Backend

To create search interfaces, we used OpenSearch (a fork of ElasticSearch) as an API.

Content types were stored in their indexes, whilst faceted search interfaces were built using React. Synonym, aggregated fields and full-text searches were used to provide relevant results.

The outcome is that a read-only endpoint is exposed via a proxy for secure and lightning-fast search via the React applications.

Learning progression system

In the learning progression system, learning modules are broken down into chapters. Each chapter uses GraphQL to record a read status as users scroll down the page.

At the end of each module, a visual reward encourages users to continue learning. This clear signposting of progression drives the value proposition of signing up for an account.

“MyHub” user accounts

The Mentally Healthy Workplaces platform allows users to create " MyHub" accounts using Drupal User Account Management. The project took a highly customised UX approach to create accounts for the different types of users targeted by the platform.

Third-party organisations, such as BeyondBlue, can become content contributors. They can assign users who can create and edit Resources, Case Studies and Events on behalf of the organisation. These contributors can access their MyHub dashboard to submit, view and track their progress.

Members of the public can also create accounts, which allow them to save resources, create collections or track their Learning Series progress via their MyHub dashboard.

Content collections are created by saving them to users’ nominated lists. The collections functionality utilised custom Drupal entities. GraphQL endpoints create, edit and view these entities, while multiple React app front-ends are implemented to view, save content and manage collections. The result is a modern interface made easy for users.

Testing

We first conducted testing during the private beta phase of this project. In the current beta public stage, we are implementing the latest testing outcomes, improving user experience based on testing, and completing A11Y testing.

Drupal contributions

• Fixing CKEditor 5 display in Layout builder https://www.drupal.org/project/drupal/issues/3341737 
• Drupal 10 Compatibility for https://www.drupal.org/project/node_edit_protection
• Drupal 10 Compatibility for https://www.drupal.org/project/account_field_split
• Drupal 10 Compatibility for https://www.drupal.org/project/mimemail
• PHP 8.1 Compatibility for https://www.drupal.org/project/search_api

The Results:

The Mentally Healthy Workplaces platform provides an evidence-based framework, showcases successful approaches and connects organisations with a range of resources provided by not-for-profit and government sources. 

Resources created by third-party organisations and hosted externally to the platform are also included, while programs and interventions already underway are strengthened by this unified approach.

The Drupal 10 site allows the National Mental Health Commission to gather and share third-party resources securely and confidently. Users are empowered to follow their personalised learning pathways, create collections or contribute their knowledge–and supported to become advocates for creating mentally healthy workplaces. 

This project won the Education category at the DrupalSouth Splash Awards.