HDI website re-design

Enhancing the website experience for visitors, clients, and doctors.

Psychological care for cancer website • www.hdi.nl
Overview
The Helen Dowling Institute in the Netherlands is a mental health institute offering psychological care to cancer patients and their loved ones. In our communication, they expressed concerns regarding the user experience of their current website and requested a UX advisory report and a website redesign.
Project details
Duration: 6 months (November 2020 - April 2021)
My role: UX Researcher, UX Designer
Collaborated with: 1 product manager, 2 business analysts, 1 developer

At first glance

At first glance, the HDI's website was aesthetically well-rounded. After a thorough look and with the UX principles and patterns in mind, some areas for improvement became evident:

To validate these assumptions and see what their clients thought, I knew I had to proceed with usability testing. The results were revealing of the points in question.
Jump to proposed solutions

Research

Competitive benchmarking

With the collaboration of the institute's employees, I conducted online research on similar organizations' websites offering psychological support to people with cancer. We narrowed our search to three websites in the Netherlands; The Netherlands Cancer Institute, the Trimbos Institute, and the official guide/dummy website for healthcare providers in the Netherlands. These websites put the discoverability of information, services, and options first and had a well-thought-out IA.

Competitive benchmarking
Competitive benchmarking. Click to enlarge and see more images

Remote usability tests

Tools used: Zoom

The institute recruited current and previous clients as well as doctors interested in participating in usability tests. The tests validated my initial assumptions regarding their website and uncovered issues I hadn't considered too. You can watch some clips below.

Remarks relevant to the IA and navigation of the website
I like to have less text and go to a menu so I can choose what I like. When I am upset, I don't want to read; I am a click person, give me something easy to click and I’ll do it!
— Ex-cancer patient
Remarks relevant to the IA and navigation of the website
Downloading the referral letter is not logical; You have to print it, fill it in, give it to the patient, or send it by mail. Takes a lot of time.
— Doctor
Findings
  • There is too much text on the website.
  • The waiting list is the first piece of information clients, doctors, and visitors look for and notice.
  • It took the participants more than 3 minutes to find the types of therapies offered.
  • The separation of main website and donation website confused the visitors; no one found their way back to the main website.
  • The IA is not organized in a comprehensive for the users order.
  • The participants felt they could not relate to the images of the people on the main website.
  • The search function does not show relevant results.

Design

Improved IA - Sitemap

Tool used: Miro

The research and analysis phases brought to light informational architecture issues on the website. To improve them, I proceeded to reorganize the information with an IA diagram. The new structure would be applied in the redesign.

Improved IA for the HDI website

Sketches

Tools used: Ipad and Good Notes app.

After redesigning the IA of the website, I started sketching the new website's screens. I collected all the analysis findings and poured them into my sketches in an effort to solve the issues we uncovered.

Click to see the sketch in full

Prototype

High-fidelity prototype

Tools used: Figma, Invision app

The IA diagram, customer journey map, and sketches helped me define much of the solution to the problem. My next step was to create a high fidelity prototype and see how my ideas would work towards improving people's experience on the institute's website.

See the prototype ✨

Proposed solutions

New drop-down menu with pieces of information presented in one place and in a logical order. The decision to create a menu was made to help users navigate quicker and easier without feeling lost.
A new highlighted section showing waiting times for all of the institute's locations. The importance of the waiting list was repeatedly stressed by the participants in the usability tests.
A stepper offering a concise visual of the sign up process for new clients. Right below, the new design is giving referrers (doctors and medical professionals) the option to refer their patients directly with a CTA. Next, the workshops and training section is highlighting otherwise less known services the institute is offering.
Another feature I proposed was a support chat for visitors, clients, or doctors who wish to request immediate help. Additionally, a chatbot could also offer a quick way to find topics the visitors are interested in.
Following the new IA, I suggested merging the external donations website with the main one. This would help end the confusion of the users while navigating. The donation form a visitor would see after clicking on the CTA "Donate now" has also been redesigned according to UX best practices and the latest eye-tracking studies (fields are best to be placed vertically, the same way the user scans a form).

The footer has been redesigned as well to guide the users to the topics they mostly look for on the website. I also added the option to change the language to English.

Conclusion

This project was challenging for me as the website needed targeted changes in its UX to offer a better experience to its visitors. At the same time, it was greatly rewarding work.

The usability tests I conducted with a cancer patient, an ex-cancer patient, a doctor, and a patient's loved one offered me invaluable insights. The redesign proposal I presented to the institute was based almost solely on their input and experience during the tests.

The results after testing the new prototype were fortunately positive as it now seems to offer more clarity and a frictionless flow to the institute's visitors.

Back to top ↑