David Hall logo David Hall

Redesigning Mighty’s interface to make usable and good to use

Mighty

Claim management software

Name has been changed for NDA reasons

Mighty is an enterprise claim management platform. Mighty asked to redesign the platform’s current look and feel with an eye to modernising it and also making it more usable.

1. The challenge

Fixing usability and performance issues

The Mighty team wanted an overhaul of their basic system.

They were getting a lot of feedback from users about many issues such as

  • Difficulty in navigating through the platform
  • Difficulty in finding sections
  • Misunderstanding icons and labels
  • Missing essential feedback on completing tasks or interactions
  • Frustration at the slow performance of certain pages

It had the feel of an out of the box design. They were using React components, but these has not been tweaked. Even though Mighty had branding for their website, this was not reflected in the system.

2. The goal

Less complex

I met with Mighty team, and discussed where they wanted to take the platform. The number one aim was to make the platform more usable and less complex to use.

3. Research

Understanding the data

I was lucky to have tons of preliminary research already. The Mighty team gave me all the research they had done up to that point, including analytics about current users. I had this data to base my design on. They had done extensive user analysis with the current version, so there were many insights available.

Since the content was the core if this type of platform, I became familiar with the help of Mighty’s team with how it was structured.

4. Heuristic review

Finding issues

I began by creating a heuristic review of the current system to find usability and performance issues. It was important to fix any issues before even thinking about a redesign. Once I completed a thorough review, I prepared a report for the dev team to work on.

Example pages from review

5. Architecture review

Re-organising the content architecture

The “why” is the website’s focus. In order to find the focus, look to the architecture of the existing structure.

Goals for re-architecting

  • Reduce the amount of entry points to the same view
  • Combine sections that hold similar content and reduce duplication
  • Re-organise pages into more logical groups

The current architecture

I captured each existing screen to show both layout structure and build up a list of components types.

The new proposed architecture

Much like a building, a design needs to have a strong foundation and coherent flow that allows the user to find their way around  easily. I proposed a simplified and unified architecture.

6. design principles

A simple plan to follow

The most important goal in the redesign was to allow the user to get their jobs done as quickly and efficiently as impossible. This meant focusing on the most important actions for each user flow. If I was going to do this, without getting lost in the system's complexity, I needed a plan to begin with. I created these principles to keep me focused during the project.

7. Design exploration

Layout varations

Creating a sound structure was important and getting the right layout was critical. Based on current feedback, users preferred having access to navigation on the side.

Vertical navigation

Horizontal navigation

Mobile layout

Example of claim creation

I began creating user flows. The create claim flow was a good example of the interactions I created.

The challenge was to make sure the user entered their 'policy reference number' before they continued to fill in the rest of the fields.

Since the claim data was populated from this policy reference number, the first action needed to be on the same screen, constraining the user before they could continue. Yet it had to be intuitive and clear enough so that the user know what the next step was.

8. Design solution

Bringing it all together

Choosing the perfect typeface

Choosing the right typeface that is both flexible and readable was critical, and so I choose IBM Plex.

Tweaking the palette

The marketing team had already defined a colour palette, so I needed to tweak it so it would work for the redesign. It is one thing using over saturated colours in a marketing website, but these needed to be toned down to be useable in a critical work context.

Components library

I created a base library of components to get the developers started.

Screens

Claims inbox

Create claim

Claim view