OnPoint Web Tracker
OnPoint is the tracking service for Watchpoint Logistics. Watchpoint serves large companies globally over land, air, and sea. The San Francisco based company needed a web tracker to compete with their hi-tech peers.
The web tracker has two main tracking views: one for the public and one for registered users. The public tracker displays a summary of the tracking data to anyone with a tracking number. The logged in tracker gives registered users a high resolution view of the all the data for their shipment. Registered users can also create and manage shipments from this site.
Role
Designer & Front-End Developer
Date
2020
Client
Watchpoint Logistics
Background
Problem
Watchpoint Logistics needed a place where users of all kinds can track their shipments. Clients come to Watchpoint for personalized logistics service, so it was important to provide as much information as possible to the users. The main challenge was to provide all this complex information in a way that is easy to read and comprehend.
In addition, users needed to input all of this complex information to create their own shipments.
The client needed an easy to use form that would make shipment creation painless for both users and Watchpoint employees.
Users frequently complained that the original shipment creation page was difficult to use and they frequently made mistakes that Watchpoint employees had to fix.
Goals
Create an easy to use shipment summary for anyone with a tracking number.
Provide registered users detailed but easy to understand shipment information.
Capture detailed shipment information for order creation.
Incorporate new branding guidelines into design
Watchpoint’s old shipment creation page
The Project
The project includes three main parts: the Public Tracker, the Registered User Tracker, & the Shipment Creation Form. I served as the sole designer on the project and as a front-end developer. I used tools like Adobe XD for the prototypes and eventually turned to coding the site with html, css, php, and javascript. Throughout, we integrated client and user feedback into the design as we learned more.
It was also important to incorporate Watchpoint’s new branding guidelines as they had recently rebranded. The simple color scheme helped make for a high-contrast and highly legible UI. The minimalist brand helped inform the simple design.
Public Tracker
This view provides the user with a quick summary of the shipment’s progress. The summary table gives an overview of all shipments the user input with a link to a more detailed summary and visualization further down the page.
Each shipment has a progress bar along with a way to setup notifications for when the shipment reaches a certain milestone. There are over a dozen milestones, so the user can choose from a drop down tag input, so they can easily select multiple milestones if desired.
Registered User Tracker
Once the user logs in, they can view all their shipments and get more detailed tracking information. All shipments are shown in a summary table where the user can select the one they wish to view.
Once they choose a shipment, they will be taken to a view that includes a map and an extended timeline of the shipment’s history. The timeline both logs previous milestones and estimates the upcoming milestones. Further down the page, the user can review the details of the shipment in an easy to read text grid.
Shipment Creation Form
This portion proved to be the most complex and challenging. The users need to input a lot of complex information any shipment. Some parts required unique solutions to meet these needs.
Address
Addresses are stored in the user’s account, so we included a modal to help users pick the origin and destination addresses. Before, users would just type their addresses in, which would often result in errors that were a headache for the Watchpoint team to deal with. The greatly decreases the odds of a human error, and helps the user complete the form quicker.
Items
Here, the user adds items to their shipment. Each item has a few properties of its own, so they are grouped together as a single object. The user can add or delete line items and enter the properties as needed. Below, the totals for all items are automatically calculated so they can be submitted to the database.
Accessorials
There are tons of accessorials that the user can choose from, and some shipments may require multiple. We decided the best way to display these choices on the UI was with a drop down tag picker. This way the user could choose multiple options without being overwhelmed by seeming them all at once.
The Process
One of the unique challenges this project posed was the time constraints. The client needed a fast turn around on this app, so we had to makes changes based on feedback as it came in after launch. User testing happened on the fly, where users would call or email Watchpoint with their feedback and we would update the site accordingly.
The UI went through a few iterations, which can be seen below.
