Doctors' Health Fund

Built on Drupal 8, this monumental user experience (UX), user interface (UI) design, and integration development project has delivered a cutting-edge new experience for one of Australia's private health insurers and their members.

An epic project

Our development of the new Doctors’ Health Fund (DHF) project is, without exception, the largest, most complex website we have ever created. This vast integration project was created by six developers, three UX & UI designers and one project manager through it all. It was also a large undertaking for our client, with a project manager, business analysts, membership experience and marketing team involved in its development.

The end product is a stunning visual and user experience, worlds apart from this private health insurer’s previous website iteration. We have never learnt or grown more from a single project we have ever developed. All the successes as well as any missteps have helped inform and evolve the way we estimate, plan and execute projects. It’s been an invaluable experience for all involved. The outcome of the project - a solution that rivals some of Australia’s biggest names in the private health insurance (PHI) sector - is testament to the dedication and determination both of Digital Garden and all involved client-side at Doctors’ Health Fund.

Acquisitions vs. membership

When Digital Garden were engaged for the project, we carried-out a rigorous analysis of DHF’s competitors and the PHI landscape in Australia. A common requirement of all is the balancing of the needs of the acquisitions side of a PHI business and that of the existing membership base. Some of the sites we researched had struck a good balance between acquiring new policy applicants and serving the existing members, others had the membership experience - or even the ability to login - woefully hidden or relegated to a distant second place of importance. A main aim for both DHF and Digital Garden was to make the members feel as important and getting value-for-money as the day they first joined.

Membership experience on the homepage

Prominent member services login

Smack-bang in an unmissable position in the site’s main menu is the Member Login button in DHF orange. It calls out to a paying membership to login and make the most of their policy and the tools within the Online Members Services (OMS) area. All too many competitors had the Member Login button blended-in, or relegated-out-of, the main site navigation. The orange Member Login button of DHF’s site is ever-present throughout the user’s journey through the public-facing side of the site.

For Members calls-to-action

Beneath the main homepage banner, which will primarily be used for acquisitions-based messaging, is a panel of calls-to-action (CTAs) that drive members to some of the key actions and tools within the OMS area. Once clicked - and the member logs in, if they aren’t already - the user will be able to instantly be redirected to a tool such as Make a Claim, or editing their Contact Details.

Quote and application (acquisitions) experience on the homepage

Get a Quote button

A bold, DHF blue button encouraging users to Get a Quote for a policy jumps out from the clean and crisp design of the homepage. That is the first opportunity for curious would-be customers to see what DHF has to offer with their health coverage. Pressing the button transitions the user directly to the Quick Quote selection form.

Finding the right cover for you

The big, screen-wide display of status buttons - Single, Couple, Family, Single Parent - jumpstarts the quotation process for users, funneling them into the ideal type of coverage for them or their loved ones.

Popular health insurance covers

These tiles towards the footer of the homepage highlight some of the product options available to prospective members. By choosing to view more details, the user lands on the respective product detail page for that health cover product to understand all of the inclusions, exclusions, and conditions of each product. From these pages, the user can also proceed to the Quick Quote for that product.

Quick Quote

About You quote entry screen

A simple single-screen selection of criteria about you starts the quotation process for an application. The user simply selects their Status, Region, Date of Birth and Rebate (Income) Tier, and they are served with a recommended combination of products to suits their age and stage. The collapsible steps on the one-screen allow for a compact and easily navigable experience on both mobile and desktop.

Quick Quote results screen

A fun and challenging piece of this massive UX project was the Quick Quote results screen - the UX pièce de résistance of the public acquisitions side of the site, with many moving parts and lots of information being presented to the user. The Quick Quote result screen’s key challenge was to create a hierarchy of information on the screen and decide on how best to prioritise and present it for the user. As we do with all our UX and user interface (UI) design work, we approached our thinking from a mobile-first perspective when creating the Quick Quote results screen. This part of the site was developed utilising Angular 2 frontend framework, allowing for a beautiful, dynamic display of all the moving parts.

Key components we had to factor into the UX of this screen included:

Product selection summary

At the top of the results screen displays the summary of the chosen or recommended policy products, with the total cost, any applicable rebate percentage, and a payment frequency selector. You’re able to revise your input personal details, such as Region or Status by pressing Change My Selection.

Apply Now

The big, blue Apply Now button at the top-right of the results screen is the penultimate acquisitions goal - that the user likes what they see and is ready to start the process of becoming a member.

Email me this quote

For those shopping around and not quite ready to commit, the Email Me This Quote button expands a form with email, name and phone fields - allowing the user to save their current quote and have it emailed to themselves for reference. The send of the email uses email delivery service SendGrid.

Hospital Cover & Extras Cover split screen

DHF offers two distinct types of PHI products: hospital and extras covers. It was important to balance the display of these ranges of products and not give greater weight to one over the other.

Application Form

Users who select to Apply Now for policy products chosen in the Quick Quote proceed through to the detailed, five-step Application Form. The form was an incredibly in-depth piece of development work that was inextricably linked to the Hospital and Medical Benefits System (HAMBS) application that powers DHF and two-thirds of the private health funds across Australia.

Product selection summary panel

The summary of the users product selection and high-level details are ever-present in each step of the users progression through the Application Form. The summary dynamically updates should the user update choices in the form, such as whether or not they would like to receive the Medicare rebate or the payment frequency that they want to pay for their coverage ongoing.

Your application progress

Having visual markers as guide to your current place in the form is an important feature of any such highly detailed application journey. The steps of the form can be stepped-back to, having completed them previously, which allows for review and modification of personal details or choices made.

Your Eligibility and Personal Details steps

The Personal Details step contains conditional logic relating to any previous PHI membership and your continuity of membership since age 31. The contact details’ address fields utilises the Google Places API for address lookups, reducing human error or varying address input conventions.

Rebate Form step

This step in the Application Form was a meticulous piece of UX, development and content creation. The Australian Government’s Medicare must formally approve the wording for the rebate form on any PHI’s website, therefore the options, wording and policy data being passed through had to be perfect to pass all necessary checks.

Payment Details step

For those looking to pay for their coverage via credit card, the Application Form needed to incorporate the site’s NAB Transact payment gateway integration we implemented. Behind the scenes, we had to develop a complex working relationship between the Drupal-based Application Form, the HAMBS system where the membership is created and details stored, and NAB, where the tokenised credit card details are transmitted to - yet must be associated with the membership being simultaneously created.

Review and Submit step

The final stage of the form allows the user to review all of their input details and go back to edit any of these at the respective prior steps. Upon making all of the declarations required at the end of the form, the user submits and becomes a member of DHF.

Online Member Services (OMS)

It was important to both DHF and Digital Garden to significantly improve the member experience on the site. The old DHF website had a very plain, text-based, same-same screen for tools and resources within the OMS. These are some of the key features and functions of the OMS, which were backend integrated with the HAMBS application. Many of these features are within the secure login area for members, however the screenshots provided and details below give an idea of what we designed and developed.


Upon login the member lands on their Dashboard which displays information about their membership, including the name of their Cover’s products, the status of their two most Recent Claims, their recent Tax Statements, and the date their cover is currently paid to as well as their next Payment date.

Claims History

Filterable by the time period, patient name (useful if a couple, single parent or family policy), claim type and claim status, the Claims History screen was another UX and UI design activity to tackle before the equally complex development and integration.

Make a Claim

Members can upload photos of receipts using the Make a Claim section of the OMS. Able to submit up to 10 receipts in the one submission, the claims are received and processed by DHF.

Make a Payment & Manage Payment Method

The NAB Transact payment gateway was integrated into these sections of the OMS, giving members the ability to make one-off payments of suggested periods of time, of their own $ value amount (with to-date calculation), or until a chosen date (with $ amount calculation).

Members can also update payment details for ongoing automatic payments charged to their chosen payment method.

My Usage & Limits

A way for members to have an overview of the benefits available to them and how much of their allowed claim limit they have utilised within the current calendar year. The aim was to make the display of this screen as uncluttered and understandable as possible. In the UI, the benefits/procedures were grouped under their parent category, for example Crowns & Bridges nested beneath Dental - with a countdown bar graph showing the remaining portion of the limit still available for the member to utilise.

My Profile

Members can edit the personal details of those covered under their policy as well as contact and correspondence details.

Technology used

Here’s just some of the technology and tools we utilised in this project:

  • Drupal 8 as the new website’s content management system framework

  • REST API integration with Hospital and Medical Benefits System (HAMBS)

  • Angular 2 to facilitate a beautiful, dynamic frontend experience on the Quick Quote

  • Axure to prototype an incredibly detailed user experience, serving as a development blueprint