Home

Case Study: Mental Health Australia

Technical Lead + Website Redesign & Redevelopment

What

A full reorganisation and rebuild of Mental Health Australia's national peak-body website, with clearer information architecture, accessible components and a Drupal-backed publishing workflow.

Why

To help public, mental health sector and member audiences find policy, advocacy, publications and services quickly, without the old structure getting in the way.

Who

The Mark Agency

A full-service creative and digital agency; I freelanced with the team first, then later joined full-time as a senior full-stack engineer, leading projects such as MHA and internal technical overhauls including Astro-based static and headless build foundations.

Mental Health Australia

How

Design

Took the designer-led IA foundations and carried them through the redesign, tightening policy, publications, sector and member content into consistent page patterns, reusable components and Drupal content types.

Development

Led the Astro+TypeScript+Vue.js front-end build using my reusable Astro base as the foundation, proving it on a production client site with typed components and GraphQL-fed Drupal content. The finished site reached 100/100 across all Lighthouse categories while improving Core Web Vitals and time-to-interactive over the previous site.

Provided on-the-job training to a junior developer throughout the build, upskilling them across Astro, Vue.js, headless Drupal content delivery, accessibility, performance and production release practices.

Hosting

Deployed the front end on Netlify so releases stayed fast while the client's editors could keep using Drupal as their familiar publishing workflow, while upgrading to the latest major version and a much more streamlined editing experience.

Integrations

Secured backend access with serverless proxy functions for Drupal data and other required services — isolating the origin and reducing backend load, while improving response times.

Modified the existing reCAPTCHA Drupal module and added custom Paragraph Types so editors could model content clearly without page-level custom code.

Integrated Pagefind for fast, lightweight in-page search across large policy and publication sets, then styled and adapted it so the search experience blended cleanly into the site design.

With

  • Astro
  • Custom CSS
  • Drupal
  • GitLab
  • GraphQL
  • Illustrator
  • JavaScript
  • Linux
  • Netlify
  • Pagefind
  • reCAPTCHA
  • Serverless
  • Stripe
  • TypeScript
  • Vite
  • Vue.js

Final design

mentalhealthaustralia.org.au
Mental Health Australia homepage screenshot
Visit site