Goal: Redesign the HSI platform to be more user friendly
Timeline: 3 months
Deliverables: Heuristics evaluation, Lo-fi mockups, Hi-fi prototype
Tools: Figma
Role: Me and another designer led the UX and UI for this project
Overview
HSI helps make the workplace smarter and safer by offering safety training and employee development for companies of all types and sizes. Their platform includes a multitude of software solutions for compliance and safety. I worked with them to help redesign their Learning Management, Safety Management, and Chemical Management Systems and make workflows more user friendly. The image below shows what the HSI platform looked like beforehand.
Research
When starting this project, I wanted to take a look at the current platform to examine the interface and judge its compliance with usability principles. I started by using the platform freely, focusing on completing basic tasks that the majority of users would be completing – such as logging in, updating their account, accessing different training modules, and viewing safety data sheets. I then identified specific elements that I wanted to evaluate.
Once identified, I applied Jakob Nielsen’s heuristic principles to these elements to identify any problems users might face. This looked like taking screenshots of different pages and annotating them with my evaluation notes in Figma.
It became clear that HSI’s interface had many moving parts to it, and it was difficult to navigate within their platform. There were also a multitude of complicated workflows that had the potential to be simplified – most notably the member dashboard and column designer.
Design Process
Navigation
I started building out the platform’s navigation, focusing on ways to connect the Learning, Safety, and Chemical Management Systems to be more cohesive so that the user could easily move between them.
Member Dashboard
One of the challenges users faced was being able to access their required trainings and assignments on the Learning Management System. The original platform had assignments located sporadically throughout the site, and users were not able to filter through their trainings. This proved challenging for users as many can have dozens of trainings they need to complete.
We solved for this by adding all of the trainings a user is assigned to in a table on the member dashboard that can be filtered through by due date. Clicking on each assignment opens a drawer that shows additional information associated with that training, including the due date, completion requirements, and teams assigned to it. We also included a section at the top of the page with the status’ of all the assignments so users can easily see what they have left to complete.
Column Designer
Many of the systems contained a multitude of data, most of which was used for displaying chemicals, learning modules, and employment information. While it was important for the shareholders to present this information in a table format, it was challenging to navigate and filter through.
We proposed a solution called the Column Designer, which is a feature that allows users to manage the type of information being shown on the tables, as well as the way it’s formated. This customization helps reduce some of the complexity surrounding these tables, and hopefully reduces some of the confusion.
Style Guide
Hi-Fidelity Prototype
The Impact
After finalizing the hi-fi prototype and style guide, we handed the design files over to the HSI team to develop. Since developing the platform, HSI has seen:
- A 30% increase in site traffic
- A 42% decrease in help tickets
- A 27% increase in training completions