The iTraq Butterfly is a powerful tracking and monitoring solution designed to track all your shipments with ease and precision.

iTraq Butterfly is a tracking and monitoring solution that allows its users to trace goods throughout the shipping lifecycle.

The service provided by that device lets users obtain vital information about parcels whereabouts and gain comprehensive reports with set frequency and key metrics, for instance, temperature log, light, and motion sensors.

PRODUCT

PROJECT OVERVIEW

This is how we created a website for iTraq Butterfly — a cutting-edge tracking technology that covers the globe.

The iTraq Butterfly is a powerful but not expensive tracking and monitoring solution designed to track all your shipments and high-value assets with ease and precision.

We started with the design first, shifting focus to frontend development right after. Also, we had to include a small piece of the backend development to connect the site with an already existing system that the client provided.

We worked as a team of 7 professionals — Project Manager, UI/UX designer, Tech Lead, 3 developers, and QA engineer.

The whole development process took us a little less than a month.

Backend

Amcharts

React-virtualized

Node.js Express

Frontend

React

Redux

Design

Figma

Adobe Illustrator

Other

Bitbucket

Jira

Roman Isakov

We needed a UX oriented frontend team so we turned to Asynchon Labs because we worked with them before. Our communication was clear and fast and 12 hours time difference was not so big of a problem as we expected. We could be in touch with any team member at any time and got what we wanted to for the price and time we expected.

Co-founder of iTraq

MOCKUPS AND DETAILS

We made a main product page, where users could put in their tracker ID to start monitoring the device. Also we provided a simple, however, comprehensive FAQ page with a link to Livechat.

Owing to the need to show everything that's been going on with a tracker on a map, we have created a special page, where users could see all of the tracker's logs. It includes tracker's whereabouts and details in temperature log and wherever or not light and motion sensors were triggered. We used a customizable version of Google maps for that page so it would be a better fit for clients' products. We implemented special markers with different colors and icons for each to fulfill user's needs.

Tracker data could be set for transmission every 15/30/60 minutes. Therefore, we needed to display all of the received information on the map without lag and long loading time. Thus, we went with the combination of infinite scroll and virtual scroll.

This mix provided incremental render of the data. Tracking information would be loaded gradually with the infinite scroll. And the virtual scroll would render only visible rows of the information in case there was a data overload.

The most time consuming feature we have created is a temperature log. Moreover, it is one of the main features of the tracker. Also, we made a dedicated dynamic chart. Thus, each tracking info on the graph works if the user hovers over it and is displayed on the map through the smooth transition animation.