Panalpina Shipping App Design-to-Prototype

Welcome to the Panalpina Shipment Tracking Frontend Prototype Challenge!
In this challenge, we need our awesome crowd to code the desktop view of our new dashboard based off of the provided Marvelapp prototype.

Final Submission Guidelines

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. 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.

Previously, we ran a Design challenge to explore UI solutions for a new freight tracking dashboard for our client. Out of many terrific designs, our client has chosen the one that best suits their needs. We are also running a backend challenge to build out our API to bring in tracking information.

This challenge will be followed by a First2Finish to create the mobile view, and a final one to integrate the frontend screens to the API. Please name components and their elements appropriately.

Individual Requirements

Desktop: https://marvelapp.com/42a550d/screen/47126613
Branding Guidelines: https://drive.google.com/drive/u/0/folders/1wkS9-XdBtsDtp1vI-uTZpITC7Abhh3Fm

There are only two screens, but they have a lot of interesting features. Everything is in scope, except for the following on the desktop view:

• Provide the grey section immediately under the tracking dashboard on the tracking page (dummy ads or images are unnecessary, but if you would like to add them you may).
• The ‘Contact Us’ Section below this grey section is out of scope, as are any parts that might be below it.

Menu/Masthead

(all screens)

• Menu links can be dummy links

Tracking Page
(01-00_Tracking Page, 01-01_Tracking Page, 01-02_Tracking page, 01-03_Tracking Page)

• ‘Clear all’ button should be functional
• ‘x ‘ buttons in the shipment number field should be functional
• The ‘Track’ button should take you to the next page...

Tracking Result
(02-00_Tracking Result)

• Tracking/shipping number input box should display the input on desktop
• The tracking result input should drop down on mobile (see M02-01Tracking Result-Input Number)
• We will be using the Google Maps API for the map
• Red ‘x’ button on the individual shipment cards should work
• Labels on the shipment cards (‘From’, ‘To’, ‘Status’, ‘Last Update’, etc.) will be static. The information under those cards will be provided by the API, but for this challenge, can be mocked.
• Quick Start row should be clickable tabs, but can be dummy links (desktop)
• Filter button should be functional
• Location Result Pin info should be functional on click

Tracking Result with filter
(02-01_Tracking Result-Open filter, 02-02_Tracking Result-Filtered)

• Sort by options:
  • Time of arrival
  • Shipment type
  • Status
• Tracking numbers should be removed when the ‘x’ is clicked
• Filters should be functional

Tracking Result with Result Pin info
(02-03_Tracking Result - Pin Info, 02-04_Tracking Result - Pin Info)

• Labels on the shipment cards (‘From’, ‘To’, ‘Status’, ‘Last Update’, etc.) will be static. The information under those cards will be provided by the API, but for this challenge, can be mocked.

• Include an example instance of the Delay Result Pin on both mobile and desktop

• Clicking off of the pop-up should close it on desktop

Shipment (one selected)
(02-05_Tracking Result - Shipment on desktop)

• Single route should be highlighted on map

• View/Hide Details and View/Hide Shipment Timeline toggle links should be functional

Shipment Details
(02-06_Tracking Results - Shipment Detail)

• View/Hide Details and View/Hide Shipment Timeline toggle links should be functional

• Labels on the details will be static as well. The information under those cards will be provided by the API, but for this challenge, can be mocked.

• You can use the milestone data from the attached CSV file for these features

 

Shipment Timeline

(02-07_Tracking Result - Shipment Progress, 02-08_Tracking Result - Shipment Progress)

• You may use Google Gantt Chart, D3.js, or other data visualization tool to help you build this feature.  

• You may create dummy data for this within reason

 

Tech Stack

• Angular 6
• Kendo UI - you should be able to accomplish this challenge using the free trial

Note: The backend stack is not listed here as it is not required for this challenge.

Submission Requirements

• You must include a README.md file with instructions on how to install/run your code
• You must include a video (annotated or narrated) demo of your code