22-03-21 Entry: Vessel & Bunkering Details for New Jobs

At the 2nd step of the add job flow, the user is able to enter the timing details of the Receiving Vessel's (RV) port call and the bunkering details.

The input fields for the timing details are pretty straightforward with usual fields such as the estimated time of arrival (ETA), location, contact details of the point-of -contact (POC), etc...

More time was spent on the bunkering section. Through the interviews with the stakeholders, we learnt that the RVs may be receiving one or more types of fuels, and for each fuel type, the RVs may be reciving it in one or more parcel units for recording purposes.

With that, we break them down into 4 main scenarios:

1. Single fuel type / Single parcel;
2. Single fuel type / Multiple parcels;
3. Multiple fuel types / Single parcel each;
4. Multiple fuel types / Multiple parcels.

Quantities and Parcels

We spent quite some time on designing the input section for the quantities and parcels.

Each parcel can belong to either the Charterer or Owner, and we need to represent that as an option for the user to select.

The initial idea was to have a unchecked radio button on the left of the input field:

The user will check if that parcel belongs to the owner.

It was a bad design and will cause unwanted outcomes: As it's a radio button, if the user accidentally checks on it when there's only 1 parcel, you can't uncheck it anymore. User has to either close this modal and restart all over again. Very painful experience, I would say.

The "Owner Account" title is too long for the radio button to be placed on either left align or right align.

My teammate Jonathan also commented that just by having the field title as Quantity isn't clear enough for user to know that each row is actually a parcel.

Next iteration

He came up with the following idea:

Now each quantity row is called Parcels, and instead of having the radio title on the top, it's now on the right. By selecting the relevant radio button, the title will update to reflect parcel's account.

This is much better than my original idea, but it still doesn't solve the single parcel's issue where the user accidentally clicks on the radio button.

3rd iteration

From his idea, I realised that we've forgotten that we could use toggle instead of radio button.

So I converted the radio button to toggle button, and moved up the word "Account" to be the title of the toggle. Now by toggling the switch, the account owner title will be reflected.

And it solved our challenge of selecting the owner of the bunker when it's single parcel.

Frankly, I would not have come up this 3rd design by my own if it was not for the team's feedback on the very 1st one. So it truly helps to sharing the designs early to the team and get their feedback.

The next thing is that the team might raise up questions about the fields and flow which I might have missed initially.