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.
2. Heuristic review
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
3. 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.
4. 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.
5. Design exploration
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.
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.
6. 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.
I created a base library of components to get the developers started.