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.
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.
Analyze & Identify Issues
Provide Solutions
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.
Inconsistent UI Elements
Miscues & False Signifiers
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
Typography
Shapes
Form
Color Pallet
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
Hierarchy
Scale
Gestalt
Balance
Focus
Space
Contrast
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.
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.