Background

Lupin systems provides occupational health and safety software. One of their products is called HazMat, which is used to manage hazardous materials in buildings, primarily asbestos. Asbestos is a harmful substance found in some building materials. Auditors inspect sites and buildings to identify potential asbestos deposits and note the level of risk present.

To bring HazMat up to date and add the required functionality, it was necessary to start the design from scratch. The main aspect of the new product offering would be the addition of a tablet app for auditors to record information during their site visit.

Before I started working on the project, another designer had attempted to design the new product. Although this provided a starting point, the proposed designs did not support a good information architecture, did not offer good UX and did not cover the functionality required. Ultimately, it was my job to rescue the redesign and bring the product back on track.

Approach

Rescue plan

The new HazMat product was to consist of a web app and tablet app. It required a deep information architecture and a range of functionality – including taking pictures of deposits, risk levels calculation, and setting up sites with buildings, floors and rooms. My first task was to understand it all.

The previous designer to work on the project had created some Balsamiq mockups, but left no indication of how they worked together. To tackle this, I printed each wireframe and connected them together into a wireflow.

With the app mapped out, I reviewed the design and made note of areas for improvement. Key areas for improvement included navigation, layering and prioritisation of information (progressive disclosure), and user flow. I wrote user stories for each improvement and new feature with detailed acceptance criteria. I posted the user stories on a Kanban board and prioritised the backlog. With experience as a Product Owner, I was able to manage my own progress on the project.

Wireframes and UI

I created an improved design in Balsamiq mockups. Because part of the app had already been built, it was important to make my handoff to developers extremely clear – developers don’t like playing ‘spot the difference’. I annotated mockups with descriptions and acceptance criteria. This information was also noted on the cards of the developer Trello board, so that they could mark items as completed to the project team.

The project had fallen behind schedule before I was brought on to work on it. To make up for lost time, the project manager insisted that the developers began developing off of the wireframes. Without full UI designs to reference, there was a risk to the design aesthetic of the finished product. To speed up the development while ensuring a consistent look and feel, I created template pages of a fully mocked up UI. This provided the developers with sufficient design direction to build the app.

I used Sketch to design the UI and followed best practices for my design files – making use of symbols and font styles for consistency and efficiency. I also used the Craft plugin by InVision to create an instant style sheet for reference by the developers or future designers.

Continuous improvement

As with many projects, the client had continuous requests for new features. I was comfortable to communicate directly with the client to discuss his requirements. I would investigate to get to the root of the requirement, and was confident to make alternative suggestions or push back in the interest of user experience and scope.

One agreed new feature was a report generation tool. I created hand-drawn sketches of the feature for early feedback to the client. With the sketches agreed and the design system already set up, I could rapidly create UI mockups for the functionality. The back end of the reporting feature required complex logic. I wrote user stories with thorough acceptance criteria and gave developers a walk-through of the UI.

Deliverables

Tablet app

The app enables auditors to complete their audits during a site visit, by capturing information directly onto the system. Auditors can learn about a site and see previous audit information, download the site to the device for offline use and then use it to guide their site visit. I delivered a totally new UI with a consistent design language and an updated look and feel.

I ensured that the user could complete the audit in the app in a way that complimented the site visit process. Content was layered by Site, Building, Deposits and Audits. Progressive disclosure across content layers ensured that auditors had the right amount of information when they needed it.

Users would often be accessing the app from remote locations without an internet connection. I worked with developers to decide exactly how the sync process to the server would work; taking into consideration user needs, edge case scenarios and technical feasibility.

Web app

Facility managers can view deposit information and generate reports using the web app. It also allows them to add new auditor users, configure permissions, and set up sites ready for auditing. This gives a facility manager full control over his or her sites and audits.

The client required special access to the web app to configure Hazmat for different customers. Each customer has different requirements for audit information and logic to calculate risk levels. I designed a way for the client to set up these complex customer configurations with an easy to use interface.

Marketing website

As part of the product refresh, the client wanted to update his marketing website. The client had suggested content and layout provided by a marketing agency. However, after reviewing it, it was clear that it wouldn’t appeal to users based on their needs. I improved the copy and completely redesigned the look and feel of the marketing site. The client strongly preferred my redesign and after a few small iterations, the site was ready to be launched.