Shipment Tracking App Design Concepts Challenge

Challenge Summary:

Welcome to the Panalpina Shipment Tracking App Design Concepts Challenge!
This challenge is focused on creating an application to allow Panalpina’s customers to keep track of shipments. You will be designing this as a responsive application for both mobile and desktop devices.

The Panalpina Group is one of the world's leading providers of supply chain solutions. The company combines its core products – Air Freight, Ocean Freight, and Logistics and Manufacturing – to deliver globally integrated, tailor-made end-to-end solutions for twelve core industries. Drawing on in-depth industry know-how and customized IT systems, Panalpina manages the needs of its customers' supply chains, no matter how demanding they might be. The Panalpina Group operates a global shipping network with some 500 facilities in around 70 countries, and it works with partner companies in another 100 countries.

This should be a FUN challenge. Take a look and lets discuss in the forums any questions you may have! We are very excited to see your designs for this challenge.

 

Round 1

Submit your initial design for a Checkpoint Feedback

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 the comments while uploading your submission
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates

As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please include the MarvelApp URL in the comments while uploading your submission
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Purpose of this Application:
This challenge asks our gifted crowd of designers to craft a UI design prototype for our client, Panalpina. Panalpina’s customers use tracking numbers to trace the location of their shipments across the globe.
The current systems only display tabular information including the ETA and event history for the shipment. Panalpina wishes to have an interface with realtime airline and ship tracking to display the current location of packages, and at the same time modernize the look and feel of the interface, making it more engaging for their customers.
As a user, customers want to enter a tracking number they have been provided so that they can see detailed shipping information with visual mapping and charts.

Design Considerations:

- Come up with a modern and intuitive design!
- Come up with designs for these screen sizes:
- - - Desktop: 1366px as width and height as required.
- - - Mobile: 750px as width and height as required.
Required Screens:
We want to give you an idea on the screens and functionalities:

01 Tracking Page:
- This is not the primary screen users will use to enter tracking numbers (they will mostly be using the Panalpina homepage), however we do need tracking number search functionality on this page. A tracking number can be in any one of these formats:

• House AWB
• Direct AWB
• House Bill of Landing
• Overland
• Customer Reference
• Container Number

The user should be able to enter any of these types of numbers into a universal search and get the necessary tracking information.

- The search results should be extensive, and show all of the relevant data.  Please see the example pop-up screen and use it for sample data.  Do not copy it, we do not want the results to be shown in a pop-up screen.  We are looking for your creative ideas on how the results should be displayed.:  

• Shipping number
• Status
• Customer reference
• Last update
• Issue Date
• Issue Place
• From
• To
• Flight
• MAWB
• Estimated Time of Departure
• Estimated Time of Arrival
• Carrier
• Incoterms
• Delivery Terms
• File No.
• Pieces
• Weight
• C.Weight (Chargeable Weight)
• Volume
• Include a summary of the shipment up to the current point with Dates/Times and the Events that took place

- Allow for the ability to enter multiple tracking numbers and get the multiple search results on the same screen.  Results should be sorted by delivery date.

02 Mapping View of the Results:

- Origins and destinations should be marked

• There should be a way to differentiate the portion of the route that has already been completed and the remaining route.
• The approximate routes can use straight lines connecting the related cities on the map
• There should be a way to determine the current location of the tracked order
• Default route colors:
  • Blue for displayed airline shipments
  • Green for ocean freight.
  • Orange should be used for shipments that are behind schedule/delayed
  • Red for shipments that are halted at a certain point
• The user can click on the route of the tracked shipment on the map and get more details, for example:
  • Dates on each city on the route
  • Estimate on finishing the remaining shipping path
  • Time spent on shipping between chosen points on the route
  • Warnings and details on each part of the route (for example, announcements of  inclement weather)
• The user should be able to see all current shipments and toggle between viewing individual shipments or all shipments if they’ve searched for multiple shipments simultaneously.
• The departure dates will be shown for the shipments that originated from that city
• Similarly, the customer can select the destination city/port and get the highlighted routes with the details regarding arrival.

03 Progress View for Searched Shipments:
It is suggested to use Gantt Chart to display the progress of shipment, however any visual progress tracker would be accepted. The current shipment order should be split by phases/milestones of its life cycle and displayed on the progress tracker. Each part of the life cycle represents an important part of processing the shipment (like pickup, loading, port release, shipping, customs, etc.).

Example of Gantt View visualization


Branding Guidelines:
- Use the Panalpina website  and these resources for guidance on branding.

Stock Artwork & Icons
-  Stock photo and icons are allowed in this challenge. Remember to read our policy about te allowed site and declare them accordingly: https://help.topcoder.com/hc/en-us/sections/203967808-Design-Copyright-Font-and-Icon-Policies

~
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Focus on User Experience / how user interacts within the dashboard and other pages

MarvelApp Prototype
- We need you to upload your screens to Marvel App.
- Please send your Marvel app request to ksmacleod99@gmail.com
- You MUST include your Marvel app URL in notes /comments while uploading (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).

Target Users:
- Users tracking shipments, either as sender or consignee (receiver)

Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Overall design, UI and user experience.
- Consistency across the UX/UI
- How well you interpret the example screens (business relevance) and show us new ideas and concepts.

Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File:
- Submit JPG/PNG for your submission files
- Submit Marvelapp as part of your submission.

Source Files:
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file, Sketch or Adobe XD!

Final Fixes:
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.