The Mentally Healthy Workplaces platform was our inaugural Drupal 10 project. The result is a site that provides a single credible avenue to contributed and curated information, resources and learning facilitated by lightning-fast natural language search. It enables and informs, encouraging organisations and individuals to create a mentally healthy workplace utilising trusted information.
This project won the Education category of the DrupalSouth Splash Awards.
Highlights
- React component library
- Decoupled React application blocks
- GraphQL APIs
- OpenSearch API
- Learning progression system
- MyHub user accounts
- User management
- Content contribution
Deliverables
- A user-friendly interface
- Compliance with accessibility requirements
- A scalable cloud solution, browser and device agnostic
- Responsive design for all screen sizes
- An authenticated user experience for saving and sharing content
- The ability to track progress in learning modules
- Filtered search, topic summaries and third-party resource aggregation
Context
The Mentally Healthy Workplaces platform is the centrepiece of the National Workplace Initiative. The Mentally Healthy Workplace Alliance began this initiative and comprises national organisations from the business, union, government, workplace health and mental health sectors.
Responding to increased mental health issues following the COVID-19 pandemic, the platform aims to improve how businesses support mental health in the workplace during these challenges.
About the Client
The National Mental Health Commission provides evidence and advice on continuously improving Australia’s mental health and suicide prevention system and act as a catalyst for change to achieve those improvements.
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.