LR Dashboard Interface Optimization

July 1, 2021

PROJECT SUMMARY

Lloyd's Register All Assets Software is an online software application that allows a user to view and manage the data, reports, and analysis across all your assets. I designed, improved, and implemented web app services for engineers and maintenance staff to evaluate critical assets, develop plans, and execute tasks to increase reliability and uptime.

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

Engineer, inspectors, managers, & maintenance staff.


THE WHAT

I was the sole UI designer for this project. I performed UI 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.

CoreUI Template
LR's original design on top of Core UI template

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.

THE DESIGN PROCESS

My approach is a three-step process to determine the best course of action. I analyzed the existing platform and identified the difficulties. Once I classified the issues, I created a design proposal that identified and addressed the common problems. I then applied the new enhancements in the front-end development source code.

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

Analyzed Existing Platform

Identified Issues & Proposed Solutions

Identified Issues & Proposed Solutions

Implemented New Enhancements

Implemented New Enhancements


UI ANALYSIS & SOLUTION

I identified three key issues: UI components did not present an ideal solution to optimally support human tasks. The original colors and visual patterns were inconsistent and provided no clear indicator on what action to perform. Structure of information made it harder to distinguish from another - lacked visual hierarchy and separation.

Analyzed Existing Platform

Inconsistent UI Elements

Analyzed Existing Platform

Miscues & False Signifiers

Analyzed Existing Platform

Visual Hierarchy & Organizations

Visual Elements

I highlighted various design elements that helped improve the user interface by allowing users to evaluate and process information without overloading their visual senses.

Lines

Lines

Typography

Typography

Shapes

Shapes

Form

Form

Color Pallet

Color Pallet

Texture

Texture

LR Sidebar Menu
Sidebar Menu

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


FINAL UI DESIGN

I completed both design and implementation on-time and kept the budget at $10k. Managers, developers, and their customers were happy with the results.

I created a user interface language that allowed my client to evolve with users and their technology experience.

Before Image After Image
Data Uploads Before & After
Before Image After Image
Mitigations Before & After
Before Image After Image
RBMI Matrix Before & After

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