Through smart API integrations and a clear user focus, G2 Ocean’s new website builds trust, value and a strong brand.
Since the start in 2017, Bergen-based G2 Ocean has grown to become the world’s largest shipping company in the open hatch segment.
In addition to growing in the market, they had outgrown their websites and needed new ones.
Insight
We delved into all available insights from the customer, user data for the existing sites, competitor analyses 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. Strong sunshine and fluctuating networks were often factors that we considered when designing and developing the new sites.
- Users were largely trying 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.
- The users preferred 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 research 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 the way ahead.
Design, UX, UI
This is why we decided that the website should have:
- Good contrast, clearly separated elements and clear size hierarchy of the elements.
- Limited use of all-white surfaces, and light-coloured backgrounds are tinted slightly darker.
- Clear graphics that spins when pages load. The graphics are also inspired by cargo and containers.
- The new website is designed to be easily used from a mobile phone at docks with varying grids in bright sunlight, without draining the battery.
See the new G2 Ocean website here.
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 not found) page, where you’ll find a recognisable easter egg.
G2 Ocean stands out from many of its competitors in that all its vessels have mounted cranes. This is accentuated in the use of images.
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 their competitors.
Structure
The first thing users see on the site 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 achieve their goals:
- Cargo, Our fleet, Our trades and Track cargo have been moved to the top menu. This makes it easy for users to 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, it’s 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.
Tech
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 fulfil their tasks.
We have also developed solutions that utilize 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 underpin G2 Ocean’s ability to 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 is a map feature where users can explore the most common shipping routes G2 Ocean offers and which ports they call at.
Our Trades is a map feature that allows users to view G2 Ocean’s most common routes, with ports of call. The solution is linked to the company’s internal system through a proprietary API integration.
Conclusion
The new website provides users with easy access to the information they need, wherever they are and whatever platform they are using. This creates trust. The sites also help to strengthen the G2 Ocean brand, anchor the company in the industry and differentiate them from the competition. And ultimately: increase usage – and revenue.
