Mobile-friendly UI/UX built to withstand desert sun and poor connectivity

Insight

We delved into all available insights from the customer, user data for the existing sites, competitor analysis and best practices.

Down in the depths, we made a number of important discoveries:

• Many of the users stood on docks around the world and used their mobile phones to check the status of their freight shipment. This was often due to strong sunshine and fluctuating networks.
• Users largely tried to find information about the fleet, routes and cargo carried by G2 Ocean, as well as contact details for local port agents and G2 Ocean contacts. However, they spent a lot of time navigating back and forth on the pages, indicating that they struggled to find what they were looking for.
• Users prefer written communication.
• The existing pages didn't build the brand, and they didn't reinforce G2 Ocean as a transparent and innovative company that pushes its segment forward in technology and sustainability. This was despite the fact that user surveys showed that customers saw them as sustainable, innovative, safe and flexible.

These findings, together with the customer's wishes and needs, provided clear guidelines for further work.

Design, UX, UI

That's why the pages:

• Good contrast, clearly separated elements and clear size hierarchy of the elements.
• Limited use of all-white surfaces, and light backgrounds are tinted slightly darker.
• Clear graphics that spin when pages load. The graphics are also inspired by cargo and containers.
• The new websites are designed to be easily used from a mobile phone at docks with varying grids in bright sunlight, without draining the battery.

The graphic expression is inspired by how cargo is stacked in open hatch bulk and container ships, with a clear block pattern. This is continued in the loading animation and on the 404 page, where you will find a recognizable easter egg.

G2 Ocean stands out from many of its competitors in that all its vessels have mounted cranes. This is highlighted in the imagery.

The graphic design underpins and strengthens the brand, while at the same time clearly anchoring G2 Ocean in the industry and setting them apart from the competition.

Technology

The website is built in WordPress. On the back-end, we have set up a clear user interface that makes it easy for those who will be handling the pages to solve their tasks.

We have also developed API integrations with G2 Ocean's fleet list and shipping routes. This makes it much easier to get an overview of G2 Ocean's freight routes, which ships they have and what they can carry. Together, these solutions mean that G2 Ocean can ship anything, anywhere.

Based on the integrations, we have built three solutions that make users' lives much easier:

• Our Fleet provides a quick overview of all vessels. It also has a simple sorting function where users can find the right vessel for their needs by sorting on the parameters deadweight, length and crane type. Highlighting the crane type is very important, as G2 Ocean differs from its competitors by having cranes on all its vessels.
• Track Cargo provides users with reliable information about their shipment, when it arrives at which ports and which port agents to contact.
• Our Trades: A mapping solution where users can explore the most common shipping routes G2 Ocean offers and the ports they call at.

structure

The first thing that greets users on the pages is a clear explanation of what G2 Ocean delivers: reliable, sustainable, custom, safe, flexible shipping solutions.

At the same time, we have taken several steps to ensure that the pages help users and achieve their goals:

• Cargo, Our fleet, Our trades and Track cargo have been elevated to the top menu. This allows users to easily find what they are most likely to do.
• The pages have an easily accessible search field and a comprehensive footer. Combined with a clear and easy-to-understand page structure, this makes it easy for users to find the information they need.
• We have added a sticky CTA with Book cargo space, where it is easy and intuitive to book via a written form.