LR AllAssets

July 1, 2021

PROJECT SUMMARY

Lloyd’s Register AllAssets is a modern asset performance management software allowing users to focus their critical equipment while optimizing inspection and maintenance activities. I designed, improved, and implemented software for engineers and maintenance staff to reduce unplanned downtime and improve safety, equipment availability and reliability, and prioritization.

Lloyd's Register - All Assets
Core Responsibilities

Designed, enhanced user interface, interaction, and implemented using LR front-end software and CSS framework.

Timeline

From start to finish: five months – includes gathering requirements, design, QA, and development.

Additional Context

Contracted part-time while working a full-time job. Budget for $10k and collaborated with a team of 6 across the UK and Houston office.

Targeted Audience

Engineers, inspectors, managers, & maintenance staff.


SITUATION

Before this project, I worked for LR as a UI developer for several years. I possessed a working knowledge of their software – Arivu and RBMI, which rebuilt the software from the ground up, now called Lloyd’s Register AllAssets. When they first reached out, they needed assistance in UI design and front-end development because they were familiar with the past work that I delivered for them.  

There were three specific pages that they wanted to focus on – data uploads, mitigations, and RBMI matrix. Each page provides tools that end-users can upload, assess, run analysis, and execute maintenance to extend the assets’ life cycle. I devised a preliminary proposal and educated the UI principles that would benefit the return on investment by reducing training support, increasing productivity, and the integrity of the software. When presented to the manager, I received approval to proceed with the project with a $10k budget within six months. 

I performed analysis, updated design, and implemented the latest changes through front-end source code. I collaborated with a UX researcher, developers, managers, and quality assurance across UK and Houston offices.


PROCESS

My approach was a three-step process. I analyzed the existing platform by understanding how the platform worked and identified the areas for improvement. I then created a design solution that addressed the problems and applied the new enhancements in the front-end development source code.

LR Matrix UI Before
LR’s All Assets Original UI
Analyzed Existing Platform

Analyze & Identify Issues

Identified Issues & Proposed Solutions

Provide Solutions

Implemented New Enhancements

Implement Enhancements

Core UI Dashboard

The company bought a template from CoreUI, and multiple developers implemented proprietary algorithms, functionalities, and features across all pages without considering or standardizing the brand and visual element.

Analysis

There were significant areas that impacted the way users perceived and processed. The information and interfaces displayed did not help or support humans’ perception and cognitive load. The colors and patterns were inconsistent and provided no clear indicator of what action to perform. The information structure made it harder to distinguish from another – lacking visual hierarchy and separation. Those are the fundamental issues that would cause overall experience when interacting with the platform.

Analyzed Existing Platform

Inconsistent UI Elements

Analyzed Existing Platform

Miscues & False Signifiers

Analyzed Existing Platform

Hierarchy & Organizations

Visual Elements

I highlighted essential design elements that would aid the graphical interface by allowing users to quickly evaluate and process information without guessing and overloading their visual senses.

Lines

Lines

Typography

Typography

Shapes

Shapes

Form

Form

Color Pallet

Color Pallet

Texture

Texture

Design Principles

I applied design principles to bridge the communication between software language and human interaction to allow users to understand and perform an action.

Unity

Unity

Hierarchy

Hierarchy

Scale

Scale

Gestalt

Gestalt

Balance

Balance

Focus

Focus

Space

Space

Contrast

Contrast

Similarity

Similarity


DESIGN

Below are the results of the before and after designs. These optimizations addressed the underlying user interaction and experience of how end-users perceived and processed information by providing a clear hierarchy and indicator of actions to take.

LR Sidebar Menu
Sidebar Menu
Data Uploads Before & After
Mitigations Before & After
RBMI Matrix Before & After

CONCLUSION

From assessment to design and implementation, education and making recommendations had been the driving force that resulted in this outcome. This project heavily focused on solving the user interface, interaction, and style guide and ensuring end-users experience remained consistent and easy to use with little emphasis on UX research. Although, the design principles and visual aspects played some role in user experience related to input, process, and output. I later discovered that Lloyd’s Register hired a UX researcher when working on the project and did not factor into testing the usability of the new redesign. It was outside the contracted agreement, but I completed the project on time, kept it under the budget of $10k, and created a user interface language that allowed LR to evolve with users in mind. 

Like What you See?
Let's Chat

    crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram