Design system for the smartest port

Port of Rotterdam

Ambition

Port of Rotterdam is Europe’s largest sea port. The port owes its leading position to the outstanding accessibility for sea-going vessels, the intermodal connections and the 180,000 people working in and for the port and the surrounding industrial area. The Port has set itself the objective to adopt the guidelines of the Paris Climate Agreement. Digitalisation plays a key role in creating insight and optimising processes that lead to a more sustainable future.

Result

The Port of Rotterdam is fully committed to its positioning as the smartest port. To facilitate an acceleration of the digital transformation, IN10 developed a design system with which various design and development teams can develop digital products and services in a dynamic way. The design system ensures consistency in visuals, development and motion.

Using a Design System to accelerate digital innovation

Fullscreen image

Products

Based on the Port of Rotterdam corporate identity, we created a visual style for the digital services. All the digital products received an 'app icon'.

Font design

An important part of the system is its own digital font, which has been developed for visual distinction and enhanced readability.

split image

Icons and pictograms

Icons and pictograms are frequently used within digital products and services. The existing set has been restyled and expanded to be used in small and large sizes.

split image
Fullscreen image
In this way, the port must increasingly function as an app that makes it easier and more efficient for shippers, loaders, warehouses and terminals to transport goods.”

Grid

The responsive grid offers consistency of the UX on all different devices.

Fullscreen image

Components, modules and templates

Various 'assets' have been developed within the system to make things as easy as possible for the development teams. This varies from simple components and modules to complete templates.

Code

In addition to visual effects and examples, we also supplied code for the purpose of motion. With this we guarantee the usability and consistency.

split image

Ecosystem

All components and assets of the design system are accessible online. This has created an ecosystem of digital services that offers the end user the same User Experience and that reinforces the identity of the Port of Rotterdam.

Fullscreen image
Up next

Making all sports on-demand

We place functional cookies to let this website function properly, analytic cookies to track usage and marketing cookies to improve your experience on this website. These cookies don’t use personal information. If you don’t want cookies you can change your cookie settings.

Cookie settings