Technology:
MySQL
Craft CMS
Scroll Magic
SVG Animation
Greensock
Fullpage JS
Javascript / HTML5 / SCSS
Guzzle
Microsoft SQL Server
Bodymovin
Project:
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.
MySQL
Craft CMS
Scroll Magic
SVG Animation
Greensock
Fullpage JS
Javascript / HTML5 / SCSS
Guzzle
Microsoft SQL Server
Bodymovin
Technical Direction
Frontend Development
Backend Development
DevOps
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.
For all animations used across the site, we leveraged animated SVGs to allow for quick page load times and optimized performance.
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.
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.
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.
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.