Windows Application

ABS Containership Assessment

bACKGROUND

Did you know that 80% of the global goods trade is transported oversea?

baCKGROUND

Every ship before manufacturing, the design must be approved by IACS

baCKGROUND

Application Users

The users of this application:
1) ABS Ship Assessment Engineers (~100 people);
2) Containership Company Engineers (~200 people)

What's the urgent problem of this application?

problem

Information Mayhem

Unsorted Functions
Functions are difficult to find. Functions are located to everywhere without following any pattern.
Inconsistent Experience
Similar experiences such as libraries have not been unified.
‍
Unexplained Dialogue
Functions are difficult to use. For example, user need to pick up line using its unique ID, but the ID is invisible to user and not exist in the software.
Design Strategy

By understanding how users conceptualize and organize information, we can design intuitive information architecture

Mental Model 
Describe the cognitive framework or understanding that a user employs when evaluating a ship in order to enhance navigation.
Information Architecture
Structure the information hierarchy in a way that improves the ease of locating and anticipating information.
Design Challenge 1

What does the entire process of assessing ship look like?

Research

Expert Opinion

We invited two lead ship engineers to document their workflow. The workflow was then approved by the six-member principal ship engineers committee and incorporated into the software requirements document.

Research INsights

Process of Assessing a Containership

Ideation

Divide Scenes into Build, Assess, and Generate

As building, assessing, and reporting do not share common functions, and users often use these three functions in distinct scenarios, I developed separate graphical user interfaces (GUI) for each process. This allows users to easily identify which process they are in and navigate each one more efficiently

Before - Problem

The Building, Assessing, and Reporting functions are nested in different areas which is confused to use.

Landing Page for Different Scenes

We’re iterating!

We've gone through several versions

V 1 Design: Step by Step

Step by Step

I proposed the step-by-step style to allow users to follow the step to complete assessment.
However, no competitors are using this style, so we don't want to take a high risk, when we could find another way to guide users.
Dashboard mockup

V 2 Design: Select phase from landing page

Enter into "Building", "Assessing", and "Reporting" from landing page.

After ideating, we agreed to have a landing page for user to enter into different work phase, and locate software settings in here.
Research INsight

Process of building the ship model

Ideation

Further Divide Scenes

Similar to the building, assessing, and reporting functions, the processes involved in building a ship model also differ significantly depending on the task. For instance, engineers may enter data to create the coordination, whereas selecting specific materials from the library may be a crucial task for other engineers.

BUILD THE COORDINATION

The main functions in building the coordination was entering large amount of data. In the first phase, I designed the example image to refer the data, and planned to include interactive data.

sETUP lIBRARY

This product had 4 default libraries, and users are able to add more libraries. I used the same layout for all the library to keep the experience consistent.

Adjust the External World - Loads

Loads is special part before building the ship model. I designed the interactive tables to help engineer adjust the data to see the load trends.

Design Challenge 2

In generating ship model, what does the ship model information look like?

Problem 01: Unclear information structure of ship element (aka, in figma, how to design the relationship components, pages, frame);
Problem 02: Limited place to put 40+ functions;

Problem 01

Unclear information structure of ship element (aka, in figma, how to design the relationship between components, pages, and frame)

cOMMUNICATION Strategy

Tree without Branch

Ship Engineers were focusing on individual modeling functions experience, and I tried to use metaphor to communicate how important and urgent for the application to organize the ship structure.

Transform tree structure into design
⬇️

Problem 02

The software currently offers over 40 functions, with more being added over time. However, due to the increasing number of functions, there is insufficient space to display them all in the navigation area.

Design Strategy

Information Archieture

In accordance with business requirements, I structured the information architecture (IA) and tested it with our two principal engineers.

Transform the IA into design
⬇️

Design System

Fresh the Interface

Other part of this project is to rebrand the software

reflection

UX Education and Communication

After this project, I realized that had been in UX team in my previous company for 3 years, I have not realized the work my design manager and senior had done which is fundamental and incredibly important. It is difficult to implement UX design successfully without first educating your teammates on UX basics, particularly in traditional industries that still rely on recording tutorial videos.
‍
After discussing with other senior designers and managers, I realized that if I could go back in time, I would have spent more time educating my colleagues on UX principles and tried to hire more UX experts to provide backup support. If this was not possible, then we should have started by using UX strategies to plan our work first.

It is crucial to communicate work process, advocate for UX principles, and build up the team. This is even more important than simply finding clever solutions to design problems.


‍

‍

Next Work
Web Application

Pre-meeting Tool

AI-assisted meeting preparation too

mollysong@outlook.com