Freight Consolidators | Website design case study by Parentheses Studio for an international logistics and shipping company

Client

Freight Consolidators

Industry

Logistics

Duration

3 months

Year

2021

Scope of Work

Digital Design

Effective, easy-to-use, stunning

Building the website for a global logistics and freight company that was visually appealing, easy for customers and prospects to use, and conducive to meeting business objectives.

A comprehensive process

This sounded like a simple website project on the face of it but was extremely intensive. It needed a comprehensive process including discovery, research, conceptualising, wireframing, and testing. There were also several other challenges that the team had to overcome, including creating a beautiful design while being mindful of diverse user needs. Let’s dive into it.

Diagram of Freight Consol website information architecture showing main navigation: Home, Company, Services, Branches, Contact, Request a Quote, Social Link, and 25 Year Banner with detailed subcategories under each.

One of our earlier wireframes.

Fairly technical information and processes were conveyed in simple and straightforward ways to appeal to potential clients.

First, we wrapped our heads around the technicalities of the client’s business and got familiar with the target audience, specific terminology used for international commerce (Incoterms), and the various supply chain services on offer.

Blue icon of a checklist and pen above the text 'Customs Brokerage' on a dark blue background.

Blue umbrella icon above the word 'Insurance' on a dark background.

Blue line icon of a house shape above the word Packaging on dark background.

Blue outline icon of stacked boxes representing warehousing on a dark background with the text 'Warehousing' below.

Text on dark water background reading 'Giving emphasis to supply chain services the firm provided'.

Blue line icon of a delivery truck carrying a box above the text 'Road Freight' on a dark blue background.

Blue line drawing of an airplane icon with the text Air Freight below on dark blue background.

Blue outline icon of a cargo ship with stacked containers above the text 'Ocean Freight' on a dark blue background.

Icon of an open box with a globe above it, representing multimodal transport.

Tablet displaying Freight Consolidators website homepage with logistics and supply chain service categories.

Smartphone displaying a shipping container tracking app with text highlighting real-time tracking, transparent pricing, easy payments, and fast delivery.

Understanding the business was crucial in understanding the specific vision, needs, and goals of the client and in developing a design strategy that would effectively meet them.

Tablet displaying a shipping logistics infographic with a cargo ship image in the center and text describing services like warehouse storage, real-time tracking, easy payment methods, personalized solutions, transparent pricing, security for cargo, fast delivery, and 24/7 support.

Creating a story

While designing the homepage, we wanted to explore how to incorporate transportation elements like cargo planes, ships, and road transportation in a memorable and beautiful manner. To accomplish this, we came up with a story based on Incoterms beginning with a package traveling on a plane, then moving onto a ship, going to a port, and eventually arriving at its final destination by truck.

A very basic story told through frames on the website.

Blue line icon of a delivery truck with a cargo container and a document symbol above it.

Blue outlined icon of a cargo ship with stacked containers on a black background.

Blue line icon of an airplane in flight angled upward.

We storyboarded this and converted it into two different types of visuals, one based on real images and another based on illustrations. The option with realistic imagery was chosen, and we worked with a motion design studio to bring this story to life in the form of a cohesive video and incorporated it as a smooth animation on the homepage.

Around the world

For the remaining pages, we wanted to continue the story of going around the world through multiple modes while keeping the visuals as beautiful as the homepage using striking imagery and subtle backgrounds that depicted the open ocean and blue skies.

White semi truck driving on a highway with forested mountains in the background, alongside text promoting shipping speed and savings.

Aerial view of a large container ship loaded with colorful shipping containers being assisted by two tugboats on calm water near a port.

Representing company branches

When it came to displaying the branches of the company, we wanted to use maps to do it but had to consider the technical limitations of displaying a large number of locations on a single map.

We experimented with different map styles, markers, and other visual elements in order to create a design that effectively conveyed our locations and we were able to create a design that met our goals and provided a user-friendly experience for visitors.

Mobile screen showing a worldwide locations list with expanded details for the China branch including address, phone numbers, and email.

On mobile, we simplified the layout to an expandable accordion section.

The inside look

EDUCATING OURSELVES

We now know that when it comes to international commerce projects, understanding and accurately conveying Incoterms and services is crucial. If it needs our team to study the basics of international commerce… so be it.

EXPERIMENTATION AND EXPLORATION

There’s no better teacher than experimentation. We learned this lesson, especially while playing with different map styles and scroll animations.

Person holding a smartphone displaying a 'Request Quote' form with tabs for Air Freight and Ocean Freight, showing location and package details fields.

TESTING OUR DESIGNS

These were testing times. When it came to tasks like designing a multi-step quote request form that gathered all necessary information from potential clients to provide an accurate quote, we had to ensure intuitiveness & accuracy. This was accomplished, but not before hours and hours of testing.