N8

Enterprise Solution for Marine Logistics

Type

Marine Logistics

Scope

Web & Mobile Design

Year

2020-2022

Problem Space

The legacy system operated in isolation, hindering effective collaboration and communication among departments. The application's user interface was outdated, system performance was suboptimal, and the team encountered challenges in managing the increasing workload over time.

Roles & Challenges

I was responsible for overseeing the complete product design process, from ideation to launch. This involved translating requirement specifications into functional prototypes and collaborating closely with engineers to transform these prototypes into a fully operational product.

One of the challenges I encountered was persuading some users to transition from their long-standing legacy system to the newly developed system, which was still undergoing improvements and experiencing some instability. Additionally, we had to engage in extensive communication, as we needed to liaise with new stakeholders for nearly every module.

Solution

To support ongoing development and delivery for each of the modules, we have implemented an agile methodology in our design process. This approach enables us to execute a phased rollout of modules, providing timely enhancements while ensuring system stability. In the initial phase, our design system was created to be flexible and adaptive to evolving requirements, with an emphasis on scalability to accommodate the long-term growth of the system.

Brainstorming the UI Framework

Immediate solutions to address some of the key pain points

Tabbed
Layout

Tabbed Layout

Customize the tabs to align with your work requirements, enabling smooth navigation between modules to enhance your daily tasks.

Customize the tabs to align with your work requirements, enabling smooth navigation between modules to enhance your daily tasks.

Real-time
Collaboration

Inline editing features, similar to those found in online shared spreadsheets, enable users to view and make real-time modifications. An audit trail is maintained to log the history of changes, ensuring data integrity.

Inline editing features, similar to those found in online shared spreadsheets, enable users to view and make real-time modifications. An audit trail is maintained to log the history of changes, ensuring data integrity.

Workspace Personalisation

Workspace
Personalisation

Customise the tabs to suit your work requirements, allowing for seamless navigation between each module to enhance your daily tasks.

Customise the tabs to suit your work requirements, allowing for seamless navigation between each module to enhance your daily tasks.

A flexible layout to cater all the modules

UI Design

Bringing the Idea to Reality

UI Design

Tabular Workspace with real-time in-line editing

The tabular workspace allows users to manage data in a table format with real-time, in-line editing, enabling quick changes without opening separate windows. Edits are instantly updated across the system, streamlining data management and improving efficiency.

The tabular workspace allows users to manage data in a table format with real-time, in-line editing, enabling quick changes without opening separate windows. Edits are instantly updated across the system, streamlining data management and improving efficiency.

Sectioned workspaces with
varying details

Sectioned workspaces are divided into different areas, each displaying varying levels of detail based on the user's needs. This layout allows for organised navigation and quick access to specific information within each section, enhancing productivity and clarity.

Sectioned workspaces are divided into different areas, each displaying varying levels of detail based on the user's needs. This layout allows for organised navigation and quick access to specific information within each section, enhancing productivity and clarity.

Mailbox layout

A mailbox layout organizes content in a familiar, email-like interface with a list of messages or items on one side and the detailed view of the selected item on the other. This design allows users to efficiently browse, manage, and view individual entries in a streamlined manner.

A mailbox layout organizes content in a familiar, email-like interface with a list of messages or items on one side and the detailed view of the selected item on the other. This design allows users to efficiently browse, manage, and view individual entries in a streamlined manner.

Design System

A preview of the evolving design system that provides a range of reusable components for on-demand use.

Iconography

We adopt a modern, crisp design direction for our icons so they look sharp and easy to understand.

Colors

We adopt a modern, crisp design direction for our icons so they look sharp and easy to understand

We adopt a modern, crisp design direction for our icons so they look sharp and easy to understand.

Outcome

Through effective collaboration with designers, engineers, business analysts and stakeholders, the application was able to rolled out in time and received well by the users. The application has since revolutionised the internal operation and business process, leading to substantially increased efficiency and business outcome.

Through effective collaboration with engineers, business analysts and stakeholders, the application was able to rolled out in time and well received by the users. The application has since revolutionised the internal operation and business process, leading to substantially increased efficiency and business outcome.

Thank you