/ angular

How we designed the HyperTrack dashboard

(I am making this post on behalf of an awesome designer who chooses to remain anonymous. This person has designed multiple industry leading products used by tens of millions of users. I have the privilege of taking this design to production for our customers. Hope you like it!)

When we started designing Hypertrack we got together with some of our key customers to understand what they needed to see. How can we give them a dashboard which is smart? How can we give them the information they need to see without them having to ask? We got them to sketch solutions to ensure we were building the right feature set.

![drawing](https://i0.wp.com/blog.hypertrack.com/wp-content/uploads/2016/04/drawing.jpeg?fit=696%2C467&ssl=1)Sketches by our users for our users
These are the key numbers an operations manager needs to see to keep an eye on his fleets.
  1. Orders Fulfilled
  2. Orders Pending
  3. Drivers En Route Late & Idle

![key_numbers](https://i0.wp.com/blog.hypertrack.com/wp-content/uploads/2016/04/key_numbers.png?fit=573%2C451&ssl=1)Mobile snapshot of the key numbers
We designed Hypertrack with a mobile-first approach. We distilled the data into bite sized chunks and expanded to the web version after.

When a driver begins his Trip he can be assigned one or multiple Pickups/Deliveries. Our challenge was to design a system which tracks his location and performance for current and past trips. We want to give operations managers a holistic view of all their driver partners to help them answer questions like

  1. Which of my drivers make deliveries on time most often?
  2. Which ones are running late right now and why?
  3. How can I better distribute orders within my fleets?
![driver_card](https://i2.wp.com/blog.hypertrack.com/wp-content/uploads/2016/04/driver_card.png?fit=470%2C104&ssl=1)Mobile view of Driver Card
We use cards as our basic unit of information. A progress bar at the top of each card shows current trip status. We use red and green to indicate on time / late throughout the app.
![expanded_card](https://i1.wp.com/blog.hypertrack.com/wp-content/uploads/2016/04/expanded_card.png?fit=696%2C76&ssl=1)Expanded Card for the web
We’re able to show more details on the web like average tasks per trip and data usage. The colored dots indicate the last five on time/ late deliveries.

Further drivers are grouped into fleets. We defined two key metrics we want to assess them on:

  1. On Time Performance : How often do they deliver on time?
  2. Utilization : How efficiently do they utilize their drivers?
![fleet_card](https://i0.wp.com/blog.hypertrack.com/wp-content/uploads/2016/04/fleet_card.png?fit=482%2C128&ssl=1)Fleet card
Once you dive into trip details we want to let you see the completed portion of the trip as well as the expected deliveries. We overlay all information on a black and white unsaturated map so as to not drown it with unnecessary details.
![trip_details](https://i1.wp.com/blog.hypertrack.com/wp-content/uploads/2016/04/trip_details.png?fit=454%2C833&ssl=1)Trip Details View
A detailed trip timelines lets you view all trip information at a glance. These two views combined suffice to give our users all the information they need without having to dig too deep.
![trip_timeline](https://i0.wp.com/blog.hypertrack.com/wp-content/uploads/2016/04/trip_timeline.png?fit=374%2C739&ssl=1)Trip Timeline
We also designed a Trip Replay feature which lets you rewind a drivers trip and look at his exact location at specific times. This helps spot recurring issues which cause delays.
Advanced analytics and heat maps let users track historic performance and compare neighbourhoods to identify busiest regions and most loyal customers.
![advanced_analytics](https://i0.wp.com/blog.hypertrack.com/wp-content/uploads/2016/04/advanced_analytics.jpeg?fit=696%2C594&ssl=1)Advanced Analytics and heat maps

I am excited to roll out these designs to production over the next few weeks. Get started with your integration with HyperTrack so you can start seeing your data in it.