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

UI/UX and front-end development for a global tracking device

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

TASK

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, UX/UI designer, Tech Leed, 3 developers and QA engineer.

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

OUR ROLES

Research
UX design
UI design
Development
Testing

Tech stack

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

Let's view some 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.

The Product Page and Support

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.

The Tracking

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 Scroll

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.

The Temperature log

Try one of user's scenarios!
Click this link for opening the prototype in the new tab
Thank you for your attention!
If you want something similar or have
an amazing idea
Just drop us a line
and we will be happy to work with you!