Apophis - Bunker Desk Tool Kit Design Concepts Challenge

Challenge Objectives

• To design the best User Interface, that is user friendly, modern, and professional. They should improve efficiency, highlight optimization opportunities and reduce errors to deliver a more efficient and dynamic way of working.
• Design concepts for a Responsive Web Application. But for this challenge, lets focus only on the Desktop view

 

Round 1

Checkpoint Round
Please include the following screens and features for Checkpoint Feedback. Submit as many screens as needed, with proper click-flow for your Initial “Apophis - Bunker Desk Tool Kit Concept Design” solution.

A. Scheduler Flow
2. Dashboard screen
3. Terminal Tanks and Barges view
4. Blending Optimization Calculator view

Round 2

Final Round
Submit all Final “Apophis - Bunker Desk Tool Kit Concept Design” with Checkpoint Updates that represents all these features:

1. Login screen

A. Scheduler Flow
2. Dashboard screen
3. Terminal Tanks and Barges view  
4. Forecast Availability of Products view  
5. Current & Historical Specs view  
6. Blending Optimization Calculator view

B. Marketing Flow
Dashboard screen
Project Goal
The intent of this project is to create a MVP web application - Bunker Desk Tool Kit - to manage the activities currently done with a combination of excel tools and manual tasks. Using the new web application, users will be able to:

• Schedule bunker deliveries and resupply movements
• Report and communicate effectively with third-party terminals, barges and agents
• Provide optimal blend opportunities
• Update Marketers and Traders of the status of inventories and deliveries

Project Background
Apophis currently uses a cumbersome combination of excel tools, manually generated reports, routine emails, calls and meetings to manage the bunker fuel operations for terminals and barges across 4 geographies.

Bunkering is the supplying of fuel for use by ships, and includes the shipboard logistics of loading fuel and distributing it among available bunker tanks. In many maritime contracts, such as charter parties, contracts for carriage of goods by sea, and marine insurance policies, the shipowner or ship operator is required to ensure that the ship is "seaworthy". Seaworthiness requires not only that the ship is sound and properly crewed, but also that it is fully fueled (or "bunkered") at the start of the voyage.

Excel tools currently help the scheduler to

• Optimize cost-effective blends,
• Track movements into and out of the terminal and barges,
• Manage inventory and schedule deliveries based on various ports and report information to marketers and traders while managing physical, quality and logistical constraints.
• Nomination documents for each movement formalize the instructions to Terminals and Barge Companies.
• Daily logistics coordination with ships, port agents, terminals and barge owners occur via email and calls to respond to the rapidly changing operating environment.
• Updates on scheduled deliveries, available inventory, and barge availability are shared with Marketers and Traders via manual reports generated periodically throughout the day.
• Throughout the day Marketers and Traders will communicate orders for new bunker deliveries through Bunker Delivery Notifications based on available inventories and barge availability

Users/Roles
Please make sure your design supports the roles listed below.

• Scheduler User
• Marketing User

Workflow
Below are the expected workflow scenarios for the 2 different users that we will address in this challenge. Please make sure your design solution supports following workflows with the tasks listed for each. These tasks are described in more detail in the Screens/Features section and in the supporting data documents.

Check complete “Life Scenarios By User Personas” on the attached file in challenge forum:

1. Scheduler  

• Step 1: Login to the Web Application
• Step 2: Views Dashboard Data for Scheduler User
• Step 3: Completes Task:
  • Upload Pre-nominated & Spot Quotes
  • Capture Load and Delivery for Confirmed Movements
  • Send emails to Marketers or Barge Companies or Agents
  • See Inventory Rundown in Tank and Barge
  • Use Blend Optimization Calculator

2. Marketing

• Step 1: Login to the Web Application
• Step 2: Views Dashboard Data for Marketing User
• Step 3: Completes Task:
• Filters Dashboard data by Port
• See Traffic Signal view
• Quick Search on Confirmed Movements by IMO
• View Inventory On Board
• View what is Available to Quote

General Requirements

• This is a design concepts challenge, wireframe is one of many ideas/solutions for this experience.
• Feel free to propose new solutions in an interesting way to represent data in your design submission.
• Please use wireframe only for reference. Do not copy it. We encourage you to suggest user-friendly, intuitive best practice design
• Check attached documents and files in the challenge forum for detailed information for all features.
• As possible we need you to create separate screens to explain click-flow for all interactions as web applications for guidelines in the next development phase.
• Your design must support a Responsive Design Solution when creating another version for tablet and mobile in the future.

Screens/Features
For this challenge submission, you will need to create 2 different application flows based on the users listed and the functionality described below.

1. General Login

• There will be different user roles that use the application, differing by geographic location:
• Login form with username/id, password, login button, forgot password
• Create validation success/errors too
• Also need support Single Sign on

A. Scheduler Flow
2. Dashboard Screen
Reference : Dashboard wireframe
Please use wireframe only for reference. Do not copy it.

• Need allow user to change the Port Location that placed on the header for all user roles
• The wireframe shows the grid style layout, but we do not want you to confine your ideas to just the grid layout. Suggest ways to simplify and focus on daily activities.
• Ability to sort and filter Orders
• Schedulers must be able to upload from confirmation bunker nomination the following sample data:
  • Vessel name, e.g: Baker River
  • Ref #, e.g: PACAC20TS0005
  • ID# e.g: 9284269
  • Agent, e.g: Agent 1
  • Location, e.g: Cristobal, Panama
  • Delivery Period, e.g: Apr 21, 2020 to Apr 21, 2020
  • Product, e.g: LSMGO (DMA) 0.1% Sulfur
  • Quantity & e.g: 250 MT
  • Comments. e.g: AGENT: ILG LOGISTICS
• Schedulers need to be able to download the sample template file with fields explained above.    
• Inventory transactions: (Check the attached file Business_Process)
• Each transaction is added to a new row. Here are all the transaction (operation) types that are used:
  • D: When the barge is delivering product to a ship
  • L (new code, not present in the spreadsheet): When the barge is getting loaded.
  • PQ (new code, not present in the spreadsheet): Pre-nominated quotes for delivery.
  • SQ(new code, not present in the spreadsheet): Spot quotes for delivery.
  • R: Resupply Load means buy from refinery.
  • S: Resupply discharge means discharging the resupply load into tanks.
  • C: Terminal Constraint means a constraint which has been caused at the terminal due to bad weather or due to congestion at terminal.
  • P: Pipeline means if product is getting loaded into tanks via pipelines
  • T: Tank Transfer means when the product is getting moved between tanks.
• Once the transactions are created the user can do a few things:
  • Create nominations - essentially add the selected transactions details to a template file
  • Create daily emails - send emails with transaction info to marketing and Barge companies and external agents departments
  • Test nominations - similar to create nominations
  • Create a schedule and email it (Schedule sheet)
  • Create and configure emails (Email sheet)
• Email Marketers (Refer Section 2.1.7 in APOPHIS_Requirements.docx)
  • Schedulers need the ability to send emails to local agents (Agents are the people who work with other companies. Agent information needs to be captured, so the confirmation emails can be sent to the agents instead of Barge companies when an agent is involved.)
  • Confirmation to local agent that the ship will be supplied by Apophis
  • Bunker Follow up:
    • Daily summary of what was discussed with the agent about the ETA change,
    • if the ship arrives within the delivery window,
    • waiting time,
    • delivery port,
    • barge assigned, etc.
• Email Barge Companies (Refer Section 2.1.8 in APOPHIS_Requirements.docx)
  • Scheduler need to send daily bunker schedule directly to the barges
• Create a Schedule View and email to schedulers, agents, barges and terminals
  • Reference: Wireframe Link or (Refer Section 2.1.9 in APOPHIS_Requirements.docx)
  • You need put “Create Email” button that will send schedulers, agents, barges and terminals
• Business Alerts on Creation of Nomination
  • Alert in case proposed plan is creating a violation for operational spec guideline. Example:
    • If the barge is taking out RMG 380 whose specification does not meet the standard acceptable specification criteria.
  • Alert in case proposed plan is creating conflict in schedule. Examples:
    • If the same barge has been proposed in 2 nominations at the same time
    • If a barge has been nominated which coincides with a constraint.
• Generate Nominations: (Refer APOPHIS_nominations.xlsx)
  • Nominations are different types of notifications that are sent out to external third parties which has a specific format for different types of actions.
  • Users should be able to generate the following different types of Nominations:
    • Bunker Loads
    • Resupply Load
    • Resupply Discharge
    • Pipeline Nomination
    • Tank Transfer
  • Users should be able select the nomination records and based on the record type the nomination should be exported as PDF.
  • Before PDF creation, users should be able to add or modify the documents such as Inspector Instructions or Special Instructions, users should be able to type in as free text.
• Export Data:
  • Ability to download/export data to Excel for sharing with external parties
  • This should export the view that the scheduler is seeing.
  • Export data need able to implement the sort and filters as explained above

3. Terminal Tanks and Barges view
Reference : Wireframe link or (Refer Section 2.1.11 in APOPHIS_Requirements.docx)

• Terminal Tanks are facilities where petroleum products, chemicals, gases and other liquid products – i.e. liquid or gaseous substances – can be stored and handled.
• From spreadsheet, you can see some different tanks with the products:
  • Tank 1 (RMG 380)
  • Tank 2 (MGO)    
  • Tank 3 (RMK 500)
  • Tank 4 (LSFO)    
  • Tank 5 (RMG 380)        
  • Tank 6 (Cutter)
  • Tank 7 (MGO)
  • Tank 11 (Cutter)    
  • Tank 12 (MGO)    
  • Tank 13 (LSCBO)    
  • Tank 14 (Slurry)        
  • Tank 15 (LSVGO)        
  • Tank 16 (LSFO)        
  • Tank 17 (LSVGO)
• Barges  is a shallow-draft flat-bottomed boat, built mainly for river and canal transport of bulk goods.
• From spreadsheet, you can see some different Barge Company with their terminal tanks:
  • Barge Co 1
    • Tank 1 to Tank 6
  • Barge Co 2
    • Tank 7
  • Barge Co 3
    • Tank 11 to Tank 17
• Users should see Inventory Rundown view and be able to toggle between Tank and Barge for a given date range.

4. Forecast Availability of Products view
Reference : Section 2.1.14 in APOPHIS_Requirements.docx

• Show forecasted availability of products using blend components

5. Current & Historical Specs view
Reference : Section 2.1.15 in APOPHIS_Requirements.docx

• Inventory tank will change over time due to blending and will be getting inspected in a periodic manner
• View the current and historical specs of the tank

6. Blending Optimization Calculator view
Reference : Wireframe link

• Calculator could be integrated as a tool in this webapp.
• Schedulers should be able to use the blending optimization calculator as described below.
• User Inputs:
  • Users should be able to select the tanks to be used for blending. Based on the tanks selected corresponding reference data should be loaded with the product and the specifications.
  • Users should be allowed to override the specifications if needed.
  • Define Max and Min Range.
  • Provide the cost for each product which needs to be considered for blending.
  • Provide the Target Blend specifications along with Min and Max. volume.
• Calculator Output:
  • Optimized Volume of each product to be taken for blending considering the specifications constraints with the aim of minimizing the cost of blending.
  • Users should also be allowed to override the optimized output such as volume of the product to make minor adjustments.
• Refer to this file attached file Bunker Tool Blender.xlsm

B. Marketing Flow
2. Dashboard Screen
Reference: Marketing dashboard wireframe

• Need allow user to change the Port Location that placed on the header for all user roles
• View the Dashboard data by port/geographic location
  • Drop down menu should allow you to select a port such as SF (San Francisco), LA (Los Angeles) etc.
• Quick Search
  • Quick Search on confirmed orders by Ship/IMO
  • Search results should search on the scheduler sheet (for current date + 30 days) and return the potential Stem Date Window and corresponding Delivery dates.
  • Marketers can select one and view the order details. For e.g. marketer can search for Ship X and select the Stem Date and Delivery date to view the order which is requesting 1500 MT of VLSFO and 250 MT of MGO.
• Traffic Signal
  • Marketers can provide a date range for the selected port to get a Sale summary view for the port on each day.
  • Using the show/hide open quotes, marketer can overlay the quotes received from the market for e.g. Ship name: YM Maturity needs 1500 MT LSFO on delivery dates ranging from 10th -11th Feb.
  • Red signifies that no sale can be made. Reason could be some constraint like sufficient inventory not available or barge not available.
  • Yellow signifies maybe the sale can be made but with some consultation.
  • Green signifies inventory available for the marketer to sell in the market.
• View Inventory on Board
  • Marketers can select a date such as 14th Feb (or can click a red/yellow/green cell to drill down to see inventory on board) to view the inventory on board.
  • Once the date is selected all the barges should get listed with their capacity and the current inventory details as shown below. For e.g. Barge 1 has a capacity of 4000MT FO and 815 MT MG0. But current inventory value is 4000 and 50 MT respectively.
  • For that date if COA’s are available then those should be viewable on demand.
• View Available to Quote
  • On a current date, what is available to quote and at what price. This will allow marketers to ensure they are marketing products at competitive prices.
  • Standard unit of measure can be used to convert MT to BBL or vice versa.
  • To do so, we will be building a screen to allow the users to input the prices per location and date range. The structure of the price data will be as follows:
    • Port Location
    • Product Type
    • Unit of Measure
    • Price
    • Start Date
    • End Date
    • Active

Form Factors
Please make sure your design supports these form factors:

• In-scope
  • Desktop: 1366px(w) x Height up to your design
• Out of scope for this challenge
  • Tablet
  • Mobile

Branding Guidelines
Follow Client Color Palette: https://drive.google.com/open?id=1iaLKNAO6MRaHVgoPXd7QMSL3f4mlv-4W
Fonts: Gotham: https://drive.google.com/open?id=1y4q9-kuJk3-5fzpZWOB_6vL8dC0L1WI6

Design Assets
All challenge assets are attached in the challenge forums.

Final Deliverables

• All original source files.
• Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or as a layered AI file, Adobe XD, or Sketch
• Marvel Prototype
• Upload your screens to Marvel App for client review.
• Please send your marvel app request to lunarkid@copilots.topcoder.com
• You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link)