Case Study: Dissecting the Healthscope resedign process

A UI/Visual Designer knows how to use style and looks to make sure that digital interfaces are easy to use, interesting, consistent, and on brand. Here I will show you the process to redesign a website interface.

The first step is to put myself in the customer’s shoes and think about what they want, how they will get to our landing page, and what information they expect to find on our website.

I made a customer journey in Miro that shows how the process works. The user clicks on an ad to get to the landing page, where they’ll find a form and later get some emails with the information they need.

People with different levels of skill should be able to use a product in different ways. I don’t give up expert users so that new or casual users can have an easy-to-use interface. Instead, I try to design for a wide range of users. In the case of orthopaedics, the main users are people over 50 and injured athletes.

Check out the before and after of the icon design by moving the slider with your mouse or your finger as shown:

I started with the live page and made a mockup that improved the real state and made the page easier to read and navigate.

This is what it looked like before and after. Use the slider to compare the two.

Some of the most important changes:

  1. It’s a middle step where I’m arranging the information in a more natural and easy-to-understand way by putting it in three columns instead of one.
  2. I changed the icons that link to the PDF fact sheets.
  3. I linked the form to MailChimp so that the follow-up emails will be sent later.

Most importantly, we no longer use information from doctors on these pages. Instead, we send people to our specialist website.
I came up with three options for this button and tested each one.

Here are the results of the test, which took two months and 3,197 clicks to complete:

With 86% of clicks, this design proved to be the most effective way to link to the specialist website:

Using what I learned from the last interaction, I added high-quality, consistent, and coherent design artefacts that fit with our Design Strategy and Design System to the wireframes.

The end result is a completely new look with better visual clarity, consistent function, and what users expect.