Challenge Summary
Welcome to the "APOPHIS - Bunker Tool Kit Mobile Design Challenge Part 1". In this challenge, we need your help to create a Web App for the Apophis Bunker Tool Kit application. We already have the Desktop version available and now we need to get the mobile responsive version created for the app (mobile phone version). You will need to determine the best practices for some features in the desktop app to fit into the mobile version. This is the first challenge of two parallel design challenges planned to launch at the same time, you can see the 2nd challenge from this LINK and participate in both challenges.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
01) Scheduler Workspace
01) Scheduler Workspace
In terms of expectations, we would like to measure the concept against the following in the one to ten scales:
The features listed below are the mobile screen features that we would like to have for this challenge:
00) General Requirements
01) Scheduler Workspace
Submission File
Source Files
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial designs for checkpoint feedback01) Scheduler Workspace
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your final designs with all checkpoint feedback implemented01) Scheduler Workspace
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
- If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2
CHALLENGE OBJECTIVES
- To design the best User Interface, that is user friendly, modern, and professional. The UI MUST be able to improve efficiency, highlight optimization opportunities, and reduce errors to deliver a more efficient and dynamic way of working.
- Create the mobile web version for Apophis Bunker Tool Kit application that follow the best practice for mobile web design
- To create 1 unique screen with all interactions for mobile web browser (mobile phone)
BACKGROUND OVERVIEW
- 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 four (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 used to 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
- Communicate orders with Marketers and Traders throughout the day, for new bunker deliveries through Bunker Delivery Notifications. This is based on available inventories and barge availability
- We have moved away from the excel and manual approach and found solutions from the earlier challenges (for desktop version) that are able to help our Scheduler and all related staff to work efficiently. Today, we want to expand the solution so it can fit mobile devices (phone) using a responsive web approach.
PROJECT GOAL
- Create an MVP Mobile 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 on the status of inventories and deliveries
- We’ve created a complete design for the Desktop version and now need to create the mobile web version
- Several mobile screens were attempted, but they do not meet our experience expectations and we want to enhance and improve them
- If you have a better idea for mobile UI, please feel free to create a mobile design from scratch. Be sure that it considers and accommodates all data and features from the desktop version.
TARGET AUDIENCE
- Scheduler User
PERSONA
- Name: Dony Vegas
- Occupation: Operation Scheduler Staff at West Coast Region. Dony job description and responsibility including:
- 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
- Goals: Manage the bunker fuel operations for terminals and barges effectively and efficient
- Frustrations:
- All operations still using manual excel tools
- Reports not accurate, Operation not efficient, lot of errors, and miscommunication between all shareholder
- Wants: To be able to manage the operation and communicate with all staff related to fuel operations instantly, effective, and efficient
DESIGN CONSIDERATIONS
- Focus on best practices for mobile web design (phone). All features and functionality from the desktop version should be available in the mobile version
- Easy to use and intuitive UI. The user should never be left asking "what do I do next?"
- Design Flexibility to accommodate different kinds of tables and complex data displays
- Must follow the design branding guidelines provided (desktop version)
- Use color or visual elements to highlight and compare important information
- Simplify screen views that are too crowded with content
CHALLENGE FORUM
- If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum: LINK
EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales:
- Creativity: 9
- 1: barely new ideas
- 10: a utopic product with features not proven to be able to be fully implemented
- Aesthetics: 8
- 1: low-fidelity design, wireframe or plain sketch
- 10: top-notch finished looking visual design
- Exploration: 7
- 1: strictly follow an existing reference or production guideline
- 10: open to alternative workflows/features not listed here that would help the overall application
- Branding: 9
- 1: don’t care at all about the branding just functionality
- 10: without a properly branded product there is no success
DOCUMENTATION
- Desktop Design (Available in Challenge Forum)
- Marvel References(Available in Challenge Forum)
- Scheduler and Marketing: https://marvelapp.com/prototype/74e6b7d (Base Design)
- Updates for Scheduler and Marketing:
- https://marvelapp.com/prototype/4i5e2d8/ (Scheduler, Marketing)
- https://marvelapp.com/prototype/243aae96/ (Scheduler Only)
- https://marvelapp.com/prototype/ff896ch (Scheduler Only - Latest Updates)
SCREEN REQUIREMENTS
The features listed below are the mobile screen features that we would like to have for this challenge:00) General Requirements
- Use the latest updates design for layout base (top header and navigation)
01) Scheduler Workspace
- View scheduler workspace tank view:
- https://marvelapp.com/prototype/ff896ch/screen/75784715
- https://marvelapp.com/prototype/243aae96/screen/70869463 (most of scheduler workspace interaction available here)
- Ability to select any tank to view (3 max at a time):
- Ability to select the column options that show in the application (limit to 4 columns):
- Ability to double click a transaction on the scheduler workspace and have it open so that the user can edit: Once a transaction is double-clicked and opened, it must be required that the user either Save or Close the transaction before returning to the application - This will avoid multiple windows and half edited transactions:
- View scheduler workspace barge view (1 barge + all compartments at a time):
- https://marvelapp.com/prototype/ff896ch/screen/75784716
- Ability to select any barge to view (1 + compartments at a time)
- Ability to select the column options that show in the application (limit 4 columns)
- Ability to double click a transaction on the scheduler workspace and have it open so that the user can edit: Once a transaction is double-clicked and opened, it must be required that the user either save or close the transaction before returning to the application - This will avoid multiple windows and half edited transactions
- Edit specs on any tank or barge:
- https://marvelapp.com/prototype/ff896ch/screen/76051161
- https://marvelapp.com/prototype/ff896ch/screen/76051167
- https://marvelapp.com/prototype/ff896ch/screen/76051168
- https://marvelapp.com/prototype/ff896ch/screen/76051169
- Spec pop-out box might be needed for entry
- If specs are edited they should update throughout the application just as if they were entered on a computer
- Create and email a nomination from the scheduler workspace:
- https://marvelapp.com/prototype/ff896ch/screen/75784955
- https://marvelapp.com/prototype/ff896ch/screen/75784956
- https://marvelapp.com/prototype/ff896ch/screen/75784957
- Ability to click on a transaction and click create nomination - Can save the nomination as a pdf on the phone and then email
- Once a transaction is selected to create a nomination, it should be a pop-out that the user can then edit.
- Ability to select multiple transactions to put on one nomination
- Ability to edit the nomination from the phone
- Once the nomination window is open, the user must save or cancel in order to go back to the application - This will avoid multiple half edited nominations
BRANDING GUIDELINES
- Follow the Desktop Design
TARGET DEVICES
- Mobile Phone Browser: Width 750px with Height adjusted accordingly
SUBMISSION AND SOURCE FILES
Submission File
- Submit JPG/PNG image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
- Declaration files document contains the following information:
Source Files
- All source files of all graphics created in either Adobe XD, Figma, or Sketch and saved as an editable layer
FINAL FIXES
- As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.