Risk Reporting Redesign
At my current job, I was lucky to work on the redesign of one of our products that is used for Risk Management and Reporting. The product was quite dated and old and the end goal was to create a newer version of it that would bring a better UI, better usability for our clients and some enhancement to the already existing features that the clients loved so much. All this with accessibility in mind.
This is the page that I got to work on. It houses different types of events that employees report on, and each icon / event is tied to a specific form that you fill out while reporting. As you can see, the design of the tiles was quite dated, and because the product offered users the ability to upload their custom icons, this part of the product got quite chaotic and messy for some of our bigger clients. That is because clients wouldn't always use high quality PNGs or SVGs and there was a loss in consistency when it came to how the product looked.
Redesign Requests
After a survey with some of our clients, we narrowed it down to a couple requests that multiple clients had that would improve their day-to-day tasks and make for more efficient reporting. There needed to be a way to pin forms that a user used more often so that they're always at the top of their screen. Additionally, some clients found it useful to have a description of the form in the Icon tile itself so that they could see what the form is used for, before actually opening it.
We started off with defining some default colors for the tiles based on the original ones and then added some more additional ones. The tile is now composed of the parts with the inner middle part housing a 24x24 pixel icon on a background with enough contrast to meet the level AA of WCAG.
Color & Shape
After testing the colors for contrast and colorblindness, I finalized the design of the tile after trying out several shapes and layouts.
Final Design
The final design features tiles that are more compact in order to make better use of the screen real estate. There is clear visual hierarchy between the file title and description with the ability to expand on the description and view it all, using a tooltip.
The navigation now resides at the top making the forms the central focus of the screen while maintaining the ease of findability for the other parts of the product. The ability to upload custom icons has been removed and we've replaced it with an icon pack of 85+ icons from our very own Icon Library which our clients can choose from when creating a new form. Additionally, the description of the forms can be toggled on and off and below is how that looks.
Thank you.
This project has been redesigned as part of my work with RLDatix.
