Designing the new MarineTraffic App

The MarineTraffic App is the standard in maritime tracking, serving over 5 million unique users each month, tracking more than 400,000 vessels worldwide. Since the acquisition by Kpler, we have invested time and effort to understand our user interactions, highlighting a need for enhanced search functionalities, improved navigation, and a modernised aesthetic. 

‍

Our decade-old design required a significant overhaul to meet the contemporary needs of our users. The result is a rebranding and complete redesign of the MarineTraffic web app.

‍

New design

‍

The updated web app now features a map-centric interface aligning seamlessly with current best practices in map and navigation applications. The search bar is now prominently placed at the top and centre, ensuring easy access for searching vessels, ports, and other assets. The menu and data navigation bar has been repositioned to the left side of the screen, providing a more logical flow to exploration features such as the vessels, port and other data pages. The map filters have been moved to the right side of the screen, in line with common conventions in map applications. The colour palette has evolved from bright blue to a more subdued grey, utilising blue as an accent colour to indicate user selections.

‍

User experience: our focus

‍

The primary objective of the redesign was to enhance the user experience. It took us 4 months to achieve this from inception to delivery. The process was marked by in-depth research, user interviews, and data analysis. Our skilled team at Kpler, consisting of top-notch designers, product managers, and developers, worked diligently to create a web app that meets the needs of our 5 million+ monthly users. We've painstakingly crafted the app to ensure you can effortlessly access the maritime information you need. 

‍

Alignment with the Kpler vision

‍

The fresh design and branding seamlessly align with the Kpler aesthetics, from the logo and font to the presentation of maps and assets. This alignment underscores our collective vision at Kpler to build one comprehensive platform that provides global trade intelligence, fosters collaboration, and delivers unmatched support to our customers. Designed with various user scenarios in mind and infused with the Kpler design language, the revamp brings a consistent and unified look and feel to all our platforms.

‍

Technical innovations

‍

We did not stop at just the design and user experience. We fundamentally changed the way MarineTraffic was built. The transition from a monolithic structure to a flexible, modern architecture posed significant technical challenges. Our engineering team successfully navigated these challenges, breaking down the monolithic structures and paving the way for a more adaptable, clear and intuitive application.

‍

Our team employed a micro frontend architecture, segmenting the app into modular components. This approach enables individual teams to independently develop specific features, resulting in accelerated development and release cycles. We also implemented reusable components and thoughtful abstractions to ensure a cohesive, reliable, and precise application.

‍

Set sail into a new era

‍

The initial feedback from users who previewed the new web app has been overwhelmingly positive, inspiring us to continue innovating and improving your experience with MarineTraffic. We are eager for all our users to experience the improved MarineTraffic web app. We're dedicated to making MarineTraffic your go-to platform for all things maritime. The best is yet to come. Stay tuned!

‍