OVERVIEW
LeadsSHIP
Low Emission Advanced Design platform of Vessels
Requested by a ship design business, I created a proposal for the creation of a platform that offers fluid design/analyses: a 3-Dimensional model-based website.
ROLE
UI Designer
DURATION
2 Months
PROGRAM
Adobe XD, Photoshop
BACKGROUND
Why is this platform important?
With stricter regulations on CO2 reduction, several international regulations for the protection of the environment have been created over the past recent years. Thus, vessel design businesses needed a software to design ships with minimal environmental pollution in line with the regulations. In response to this concern, our team created UI design mockups that distribute the tools of ship designs to enhance the functionality of the software and make them more easily accessible to designers with web-based SW UI.
Then, what were we requested to do?
Due to the various features in the complex system of the software UI, the company requested us to eliminate the unnecessary components and improve accessibility of the tools. Through our several team meetings, we concluded that we can maximize simplicity of the format by setting black as the main color. Moreover, we established the overall mood of the homepage by inserting ship-related images and icons.
PROJECT FLOW
First-time business client... How did the project go?
Before proceeding the project forward, our team requested the clients for a RFP and held several meetings with them to ensure that their requests were properly understood. Then, my other teammates worked on the BX design and GUI system, including the logo, typeface, and colors. In the final stage, my teammates and I cooperatively worked on the UI design.
APP FEATURES
Introducing LeadsSHIP
Login
Login Page of LeadsSHIP
Landing Page: Overall
This is the landing page that all users will see as soon as they log into the web server. When the users hover over each box, the particular box changes the background photo to one that relates to the selected page.
Landing Page: Menu
Propeller, Database, Hull, CFD, ESD, AI
(From left to right)
When the users hover over each box, they see the following images.
Master Page: Overall
When the users click on the box in the landing page, the master page comes up and becomes the default page for LeadsSHIP SW.
This page consists of the following tools: Database Window, High/Low Application Window, Viewport, Console Window, and Navigation.
Master Page: Components
Nagivation
By clicking on the Navigation tabs, the users are guided to the selected pages/functions.
Drop-Down Menu
When the users hover over the menu, they are able to see the sub-menus.
Database Window
In this window, the users are able to check the database of the selected model shown on the current viewport.
Viewport
This is the main window that shows the current work that the users are working on.
Console Window
The users can check the user's traffic.
High/Low Application Window
There are two windows where users can adjust specific components of the design.
Powering, Mother Ships, Global Variation, Local Variation, Resistance CFD
Master Page in Chrome
The preceding images demonstrate the mockups when the application is run on Chrome (Mac).
Master Page: High/Low Application Window
Powering: speed power calculator/prediction
Mother Ships: ships owned by the company
Global Variation: inputting geographical data
Local Variation: parameters / running cases
Resistance CFD: resistance calculator (Condition, Surface, Speed Range, etc)
REFLECTION
Learning about everything new
When I was first requested to join this project, I was thrilled but greatly worried if I could successfully create an application that I have never done before. Unlike other team members, I had no knowledge about ship businesses, and it was difficult to follow up the discussions at first. Therefore, I spent nearly a month holding meetings with the clients and teammates, analyzing the clients' needs, and identifying the tools that are crucially needed for the application. Moreover, though the terms used in the industry were entirely new to me at the start, with the goal of decreasing the knowledge gap between the other teammates and me, I delve deeper into the field to learn about the process of ship designs and how the designers utilize the application. I am still unsure if I 100% grasp the content of the application, but I became more confident with my new knowledge that I gained from my diverse experiences.
