Control Tower

Control tower is a logistics visibility application designed to give real-time oversight to shipments for multiple carriers in a single location. This product was a standalone evolution of the C-View product that I was also involved with.

Early Designs

One of the main design goals for Control tower was to push the limits of the UI. We wanted to make the app feel less like a logistics application and more like a video game.

On the early versions of the app I used a lot of color to help make the app as visually interesting and dynamic as possible. As the app progressed, the colors simplified to improve contrast and scalability.

Modiant Design System

Once we had most of the basic styles locked down, I created a basic design system to build on as the application grows. The basic foundation was based loosely on the Atomic design principles. I built the design system using Sketch libraries and Abstract for version/source control.

In addition to creating/managing the design files, I also implemented the design system in the app using CSS/SCSS and Bootstrap as the basic grid/column framework.

Feature Design

Control Tower gave us the opportunity to add a huge amount of features and functionality over its predecessor. Two of the most notable additions were the interactive world map and the carrier scorecard.

The world map allowed users to visually see their shipments on a global level instead of a traditional table-based view. This feature provided its fair amount of design challenges, and required huge collaboration between myself and the dev team.

The initial implementation used a basic map style and included basic features like filtering and dynamic clustering and allowed users to drill down to individual shipping lanes. Eventually the map feature and added some really cool features, such as visualizing the actual shipping routes using lat/long coordinates. The map style was also updated to a satellite image style to allow for better route visualization as we added TMS functionality to the application.

The carrier scorecard gave users to compare all the carriers, and provided better insight to how carriers were actually performing against their targets. Users were able to drill down to specific lanes/modes to help make informed business decisions for future shipping needs.

Next
Next

Digital Safe App