I designed a web-based product for managing insurance claims.
2016 · Web
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.
- Identify the current system’s usability issues.
- Create a new product that would increase productivity whilst reducing support costs.
- A short timeframe to deliver the project.
- Limited budget requiring a focus on creating an MVP which could be iterated upon.
- 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.
Existing system had no analytics setup to give quantitative insight.
We conducted five in-person usability and customer development interviews to provide qualitative insight.
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.
With this initial research phase completed, I created a Job Story using the Jobs-to-be-Done methodology.
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.
I sketched a dashboard concept that allowed for filtering of results and easy to find claim data.
I created a wireframe prototype, to be used for a round of user testing, which was carried out by a colleague.
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.
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.
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.
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.
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
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 explored using modal windows for displaying content but concluded that they would obscure the sidebar, which provided useful data about the patient.
I included an anchored nav bar that would allow people to quickly scroll back between sections.
I experimented with different designs for marking a claim’s progress.
I experimented with different designs for sidebars showing a patient’s details.
Here are the visuals supplied to the client's engineering team for implementation (interactive prototype available on request).
- 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.