Project:

Web Development

scroll icon
Integrity Logistics -ninja website animation

A new interface for the next generation

Integrity Logistics wanted their new site to reflect their forward-thinking approach to the industry

Like many websites for the trucking and logistics industry, it had been a while since Integrity Logistics re-worked their online presence. While the industry was being transformed by new systems and technology, Integrity's website was stuck. With the transition to a new generation of leadership, Integrity seized the opportunity to recreate itself, bringing Data Driven Design along to build an entirely new website.

Technology:

MySQL

Craft CMS

Scroll Magic

SVG Animation

Greensock

Fullpage JS

Javascript / HTML5 / SCSS

Guzzle

Microsoft SQL Server

Bodymovin

Roles:

Technical Direction

Frontend Development

Backend Development

DevOps

Keep on Scrollin'

The new design called for a highly animated user interface, a rare style across competitor's sites. Integrity wanted to showcase their position, challenging the status-quo and pushing the boundaries of what a logistics industry veteran could be. Data Driven Design stepped up to the challenge of finding a technical solution to accomplish the vision for this out-of-the-box conceptual website.

The home page was intended as the centerpiece of the experience, with callouts and links to various key parts of the site - information about services, the company's core values, and case studies - displayed prominently with modern style. The new design incorporated sections that changed according to a user's scroll position so that as a user gradually worked down the page, elements faded in and out to reveal the next section's content. Central to the smooth transitions was a single background image with all elements incorporated. Data Driven Design worked to ensure the animation files were created using D.R.Y. (Don't Repeat Yourself) principles, and modified them so that each distinctive portion of the animation could be triggered using Scroll Magic. This approach kept previous and subsequent sections invisible, but ready to be revealed with a quick swipe or touch of a mouse.

A new generation of animated elements

For all animations used across the site, we leveraged animated SVGs to allow for quick page load times and optimized performance.

Integrity Logistics animated homepage

Dude, where's my package?

One of the central features of Integrity's new site was a tracking system. Data Driven Design utilized a custom API written to interact with Microsoft SQL Server logistics data for real-time shipment tracking. This meant we could hook into data Integrity already had to provide a way for customers to retrieve shipment information for themselves. We built out a tracking page that showed each of the check-ins along a shipment's route, with relevant information such as date and time. We made sure that the design would give feedback to a user if they entered an incorrect tracking number, and also provide a confirmation if a shipment had already been delivered. Integrity Logistics helped to test the system to ensure it was working as expected. Transparency and ease of tracking shipments equals happier customers.

Integrity Logistics custom package tracking locator
Integrity Logistics case study page image

Case Studies on Display

Data Driven Design built a page to house success stories.

For an established business such as Integrity Logistics, highlighting accomplishments can act as digital word-of-mouth, helping establish trust with potential customers even before their first interaction. A single page was created to highlight Integrity's case studies collection, with individual case study pages that could be customized to highlight the unique challenges of each job.

Digital Tools: Quote Forms and Calculators

Data Driven design developed several quote forms for Integrity's new website. The goal of these forms was to allow for customers to begin the process of inquiring about shipments and costs on their own. Each of the quote forms (LTL, Partial and Truckload) requires information about the shipment's items, pick up and delivery dates, and any special equipment or accessorials required. This information is collected and then pushed into McLeod's database via a customized integration that Data Driven Design built for Craft CMS. Integrity's customer service teams can then follow-up, providing information for any questions and scheduling shipments.

Integrity Logistics quote form sample image

To assist in answering all of the questions on the quote form Data Driven Design also built a series of calculators housed in an online tools page. We custom-coded measurement, currency and weight converters so users can easily translate from one measurement type to another (inches to feet, dollars to yen, or pounds to tons). We also created cubic feet and density calculators to make it simple to complete complex measurements all in one place without ever having to leave the website.

Integrity Logistics calculatorys at responsive breakpoints - mobile phone, tablet and laptop
Need something
awesome built?
Contact Us