Ulhas Mandrawadkar
HyperTrack
Published in
4 min readApr 19, 2016

--

HyperTrack’s tracking experience

HyperTrack’s tracking experience for the end-user is a core part of our tracking-as-a-service offering. SDKs are available for iOS, Android and Web so you can integrate it with your product experience. In this post, I dive deeper into the tracking experience and settings.

The experience

Tracking experience on iOS
Tracking experience on Android

Live tracking

In the videos, you can see the in-app tracking view for iOS and Android (the tracking view for Web is available in the How it works section of our homepage). The tracking view shows the driver moving in realtime on the map. The driver marker denotes the type of vehicle — bike, car, van or walk. The marker on the destination location displays ETA for the current trip. The top bar shows the trip meter and status with destination address/location. The overlay bar at the bottom shows the driver identity and contact.

Behind the scenes, the Driver SDK integrated into the driver app sends a location stream to our servers. The location stream is then cleaned and filtered resulting in a smooth animation. Based on location, speed and extrinsic factors, an accurate ETA is computed. All of this is rendered cleanly into a tracking view. In-app and web SDKs let you integrate this tracking view into your end-user experience with settings to switch the key elements on or off.

Trip Status

Trip Status

At the top of the tracking view, trip status shows ON THE WAY when the driver has left the start location and is in motion. The status changes to ARRIVING when the driver is a couple of minutes away from the destination. It transitions to ARRIVED when we detect that the motion has stopped, suggesting that the vehicle is parked and the driver is checking in to complete the task. Once the order is marked delivered, the status displays DELIVERED. In case of delays, there are granular statuses conveying the reason for delay. For a complete list of statuses, request access to our documentation.

Trip meter

Trip meter

Trip meter shows duration and distance along with the date for that trip. Under the meter, you can see the start address with the actual time of departure and destination address with the current ETA. The trip meter transitions to a trip summary once the trip has ended. If we fail to resolve the start and end locations to an address, we fall back to latitude and longitude of the locations.

Driver identity and contact

Driver identity and contact

The overlay bar at the bottom shows the driver identity and contact, and a short cut for order lookup. To the left is the driver’s photo followed by name to put the end-user at ease about who to expect. To the right is the call button followed by a shortcut to look up the order so the end-user can prepare to receive the order. The call button and order lookup buttons give callbacks to the host application. You can choose to handle these callbacks as appropriate for your application.

Order lookup

Order lookup

The order lookup button shows an overlay with details for the current order. This visual experience and content can be designed by you in a way that is consistent with your app experience. This feature comes in handy to get the end-user ready to receive the order, thus making it efficient for the driver and them.

Trip summary

Trip summary

Once the trip has ended, the map transitions to a summary view. Live tracking is stopped, driver and destination markers disappear, and trip meter is expanded to a detailed version. Map plots a polyline with the actual path that the driver took for the trip. The color code of source and destination locations is consistent with the trip meter.

Settings

The out-of-the-box tracking view is available to integrate within your product experience. Settings to switch key UI elements on or off have been provided through the APIs. Here is a list of settings available:

  • Toggle visibility of driver identity and contact
  • Toggle visibility of trip meter
  • Toggle visibility of order lookup button
  • Custom markers for driver and destination
Customizations

Integration

HyperTrack’s tracking experience is packaged as an SDK that you can just drop into your app with a few lines of code. Since all the information is rendered into one tracking view, you can integrate it within the order flow of your app. Further, the tracking view does not need to consume the entire screen. It is a pluggable component which you can easily embed into the real estate you provide within your app.

We’ve worked hard to make it easy for developers to integrate HyperTrack’s tracking experience into your product experience. We would love for you to try it out and give us your feedback.

Originally published at blog.hypertrack.io on April 19, 2016.

--

--

Ulhas Mandrawadkar
HyperTrack

Co-Founder @the_procedure. Ex @hypertrack. previously built @justchalo. Curious.