Healix

I designed a web-based product for managing insurance claims. (2016)

Background

Healix is a global healthcare and risk management company.
They wanted to replace an ageing system used by its team to view and edit medical insurance claims for their client’s customers.

The existing system was complicated, hard to use and required substantial training and support which was costly.

Goals:

  • Identify the current system’s usability issues.
  • Create a new product that would increase productivity whilst reducing support costs.

Constraints:

  • A short timeframe to deliver the project.
  • Limited budget requiring a focus on creating an MVP which could be iterated upon.

My role:

  • I led the product design phases of the project.
  • I worked alongside a UX researcher, the client's Product Manager and an Engineer responsible for front-end and back-end development.

Audience & research

Our users were:

  • Healix employees.
  • Office-based, working normal hours.
  • Use desktop computers, no mobile access required.

In order to develop a solution quickly, we limited ourselves to a desktop design system.

Usability testing

Existing system had no analytics setup to give quantitative insight.
We conducted five in-person usability and customer development interviews to provide qualitative insight.

Issues discovered:
People struggled to find individual claims (users could only search a limited data field).
It was hard to see the progress of an individual’s claim.
Information was presented in an unstructured way, which led to users having to click between sections or have multiple windows of a patient’s records to get the whole picture.

User needs

With this initial research phase completed, I created a Job Story using the Jobs-to-be-Done methodology.

The core, prioritised list of Jobs-to-be-Done stories

UX Design

Ideation

I led internal workshops to brainstorm concepts and features for our product.

Concepts we considered and sketched for the product included:

  • A powerful search UI.
  • A modular, configurable dashboard.
  • A location-based UI.

Ideas we chose for our first MVP:

  • A modular dashboard that gave an easy-to-scan overview of a claim, allowing users to expand on details.
  • A simple keyword search that allowed users to quickly find results.

User flow diagram

I created a high-level user flow diagram that mapped out the different screens that we would need to develop to deliver our MVP product.

High-level user flow diagram

Prototype sketching

I sketched a dashboard concept that allowed for filtering of results and easy to find claim data.

Dashboard with prominent filtering search
Modular claim detail page
Modular claim detail page with modal windows

Wireframe prototype

I created a wireframe prototype, to be used for a round of user testing, which was carried out by a colleague.

Dashboard search
Claim detail page
Treatment bar page

Wireframe user testing

We carried out a round of user testing with our wireframe to see if our proposed solution met our user needs.

This testing revealed:

  • Tabbed navigation on the claim detail page took people away from information they needed to reference.
  • People wanted an easier way to understand the progress of a claim.
  • People wanted to view a patient’s key details (biographic information, contact details) in an easy to find way.

Wireframe iteration

Changes made following user testing:

  • Made the patient detail one page with modal detail panes that appeared over the dashboard.
  • Created an anchored link bar at the top of the page, helping users to quickly navigate around.
  • Created a permanent sidebar on the detailed view of the claim which held the patient's key biographical details.
  • Designed a progress bar, which at a glance allowed users to view the status of a claim.
Consolidated, single page for claim detail view

UI Design

Visual design

I designed a modular component system using the Atomic design methodology, allowing the client's development team to produce screens, modules and system components.

  • I followed the brand guidelines.
  • I introduced an accent blue, giving contrast to the brand green, which allowed me to highlight page features.
  • I introduced a gradient device for headings, making it easier to identify different modules and adding personality to an otherwise muted colour palette.
The modular component system using the Atomic Design methodology

Layout

I experimented with different page layouts:

  • A fixed left-hand bar: took up too much space and didn’t allow for extensibility.
  • A fixed left-hand sidebar with a modal window for filtering: wasted space with the left-hand bar and also relegated the filtering options which in the early days of the product wouldn’t be such a problem, but when the data set grew filtering would become vital.
  • A top bar which didn’t take up too much screen real estate but still left room for extensibility. The permanent left-hand filters would help familiarise people with searching and filtering results as the product evolved.
Page layout exploration: Fixed left-hand bar, Fixed left-hand-bar with modal filtering, Top bar layout

Typography

The Healix brand guidelines used VAG Rounded and Arial. My observations on these choices:

  • VAG Rounded has legibility problems at smaller font sizes; its characters tend to blend together.
  • Arial didn’t have the variety of weights that I wanted to use to give hierarchy to the page without making font sizes dramatically big.
  • I suggested replacing the two typefaces to improve legibility whilst retaining information density
Brand typefaces of VAG Rounded and Arial weren't easy to read at small sizes or flexible to use at different weights

After testing several typefaces, I chose Helvetica Neue. It offered:

  • A variety of different font weights.
  • Legibility at smaller type size.
  • A similarity to Arial, referencing back to the current brand guidelines.
I introduced Helvetica Neue as the typeface

Interaction Design

I explored using modal windows for displaying content but concluded that they would obscure the sidebar, which provided useful data about the patient.

Pop-up modal detail windows
Detail pages. I chose this version because it didn't obscure vital data

I included an anchored nav bar that would allow people to quickly scroll back between sections.

Fixed anchor bar on page detail page allowing easy navigation
Anchor bar floating above content

I experimented with different designs for marking a claim’s progress.

Exploration of different progress styles
Chosen progress style clearly showing steps completed

I experimented with different designs for sidebars showing a patient’s details.

Patient detail sidebar development

Final designs

Here are the visuals supplied to the client's engineering team for implementation (interactive prototype available on request).

Product dashboard
Patient claim detail screen
Patient claim document view

Results

  • We reduced the average time spent on the dashboard indicating people were finding claims quicker.
  • We reduced the time taken to find and update claim details.
  • Employee satisfaction surveys revealed the product was well received with ease of use noted as a key factor.

Next project

Choose