05-Apr-21 Entry: WIP for WPOC

While designing the job list page for the WPOC project, we came to a little challenge to display the sequencing of the operations.

Here's how it looks like initially: bunkering ops having its own column, and the other ops at its right. From a glance, you can't really tell which ops is going 1st.

Initial design for the job list page.

Initially we had only 4 operations in all: bunkering, underwater ops, ship supplies and lube oil. To display bunkering in one column and the other 3 ops in the other was still fine.

Then 5 more ops were added to the list, making it a total of 9 ops.

Not all 9 ops would take place for a job, but the bunkering would definitely take place. The user would select the ops that would happen for each job.

9 ops for the user to select the ones required for the job.

I tried added numbers to each of the other ops and because of the width of the column, they will be wrapped to the next column.

It's still not so clear to tell the sequence at a glance due to the wrapping:

Pill components with numbers is still not elegant for displaying sequencing.

And I have another challenge of displaying the bunkering ops in cases where there are multiple fuel grades to supply.

Here's an extreme example of supplying 3 fuel grades: not a very good use of real estate with lots of white space due to 3 ops stacking on top of each other:

Lots of unused whitespace for a job row with 3 fuel grades.

The next iteration is to combine the 2 column into one, with the bunkering at the top and the other ops at the bottom.

I added arrows between each ops in place of numbers to visualize the flow. Now it's easier to see the sequencing for all the ops:

Combining 2 columns into one.

This also solves the challenge of multiple fuel grades: they can be displayed in sequence too from left to right:

Easier to visualize the bunkering sequence too.

While doing this, I've also combined the receiving vessel's and location column together to free up more space for the ops column.

It can display up to 4 ops in sequence. If there are more ops, then the last pill will display the number of the remaining ones.

More space freed up for the operation sequencing column.

I kinda think the divider between the bunkering and the other ops is redundant, so instead I bumped up the font size of the ops pill component.

So now they can be differentiated from the bunker barge above, which are also in pills:

Here's how the latest version looks like: