BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to the "APOPHIS - Bunker Tool Kit Mobile Design Challenge Part 2". In this challenge, we need your help to create a mobile web version 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. You will need to determine the best practices for some features in the desktop app to be fit into the mobile version. This is the second challenge of two parallel design challenges planned to launch at the same time, you can see the 1st 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!

Round 1

Submit your initial designs for checkpoint feedback

01) Barge Schedule
02) Bunker Dashboard 
  • 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 implemented

01) Barge Schedule
02) Bunker Dashboard 
03) Traffic Signal
  • 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 3 unique screens 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 occurs 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
  • 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 using a responsive web approach.


PROJECT GOAL

  • Create an 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 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 and Marketing User


PERSONA

  • Name: Dony Vegas
  • Occupation: Operation Scheduler Staff at West Coast Region. Dony job desc/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, effectively, and efficiently.


DESIGN CONSIDERATIONS

  • Focus on best practices for mobile web design. 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

 

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) Barge Schedule
02) Bunker Dashboard 
03) Traffic Signal


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:
    • Stock Photos Name and Links from allowed sources
    • Stock Art/Icons Name and Links from allowed sources
    • Fonts Name and Links source from allowed sources

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2021 Topcoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Sketch
  • XD
  • Figma

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30162385