The landing page for Design standard website

Dispatch Dashboard

for lastmile dispatches

Why Dispatch Dashboard

To have a DSP level dashboard as the landing page for LM ODx which provides dispatch level information to the CM for all the DSP with Dispatched date is current date. Dashboard should have below information:

  1. DSP count [Dispatched date is current date]

  2. Number of AWB [Dispatched date is current date]

  3. Number of Delivered/Picked Up/Collected AWB’s

  4. Number of Returned/Cancelled AWB’s

  5. Pending/Schedule AWB’s

  6. Not Attempted [in dispatched status]

  7. Expected Amount

  8. Closure %

Few of the Layout iterations

Once the requirements were finalised, the first step was to finalise the structure of the page.  Since we are following the 12 column bootstrap grid, had to arrange the major focus area in the most visible corner of the screen. After few iterations and internal discussions in the team, we finalised it to fit the best needs by prioritising the content by the actions required to be taken by the centre manager.

Final Layout

  • The main focus was given to the shipment module, as this is the most frequently used action item by the CM ( used to check the shipment statuses multiple times to make sure the shipments are delivered properly ). 


  • Based on the shipment statuses, the CM has to monitor the performance of the FE.


  • All the panels were arranged in such a way that it is been accommodated in the first fold itself, removing the need for scroll.


Wireframe 1: No colour

The detailed wireframe was used to test the design with the user to check for readability and acceptance

Tried colouring :)

Further colours were used to depict the content for better contextual understanding. Initial iterations were based on taking the traffic light as the metaphor. Red for "Danger", Green for "Good to go" and yellow for "Warning".  

In the process of reducing the number of colours and optimising it for better understanding and reducing the cognitive load, we chose to move forward with the following approach.

Shades of RED

The shades of red colour are used to depict the items which require immediate attention/ are critical for the proper functioning.

Shades of BLUE

The blue shades represent pieces of information which are not critical.


Black for packages that are cancelled by the customers

Final Design

Copyright © AnulalVS 2015, Mumbai,Maharashtra, India.