30-Mar-21 Entry: WIP for WPOC

Today, I worked on creating a interative walkthrough in Figma for the users to have a better field of the Add Job flow and Job Single Page tabs.

I first converted all of the togglable fields such as radio buttons and checkbox buttons into interactive components:

And replaced as many sections by components that previously weren't so they could be interactive now on.

It now looks more like a powerpoint slide, but one that's interactive and one that you may scroll down and up to view the entire page:

2nd half of the day, I worked on the revising one of the Job Single Page's tab: Bunkering Info, due to new information from user.

There are several structural details of the vessel such as freeboard height, manifold sizes and locations, and receiving rates, etc..., which needs to be entered for each job.

Initially, we presumed they were meant for the bunker vessels, but it seems like they were meant for the receiving vessel.

They usually won't change, unless when the users were updated by the vessel's personnel of the changes. Thus, the users need a way to see those information and have the ability to change them as and when is necessary.

Initially, we planned for it to look similarly to the rest of the components: item title on the left and value on the right. But we realised it makes the whole card look cramped and long due to the amount of details to be displayed.

Thus we were thinking to have it in 2 columns instead, and then make the values larger. It makes them easier to read in a glance:

When user clicks on the Edit icon on the top right corner, they will be able to update the details.

The layout will change to be how it looks like for entering into the input fields.

When saved, system will apply those changes to that receiving vessel's details in the database as well.