Designsysteem in de slimste haven

Port of Rotterdam

Over

De haven van Rotterdam is de grootste zeehaven van Europa en heeft de beste haveninfrastructuur van de wereld. Om deze positie nu en in de toekomst veilig te stellen speelt digitalisering een sleutelrol. Inzicht in data en het optimaliseren van logistieke processen en diensten op basis van die data leiden tot een duurzamere haven.

Resultaat

Port of Rotterdam zet volop in op de positionering als slimste haven. Om een versnelling van de digitale transformatie te faciliteren ontwikkelde IN10 een design systeem waarmee verschillende design- en developmentteams op een voortvarende manier digitale producten en services kunnen ontwikkelen. Het designsysteem zorgt voor consistentie in visuals, development en motion.

Een design systeem dat de digitale innovatie ondersteunt

Fullscreen image

Producten

Gebaseerd op de huisstijl van Port of Rotterdam creëerden we een visuele stijl voor de digitale diensten. Zo kregen alle digitale producten een 'app icon'.

Font design

Een belangrijk onderdeel van het systeem is het eigen digitale font, welke is ontwikkeld voor visuele onderscheiding en verhoogde leesbaarheid.

split image

Iconen & pictogrammen

Binnen de digitale producten en services wordt er veelvuldig gebruik gemaakt van iconen en pictogrammen. De bestaande set is gerestyled en uitgebreid om in klein en groot formaat toe te passen.

split image
Fullscreen image
De haven moet op deze manier steeds meer gaan functioneren als een app waarmee schippers, verladers, loodsen en terminals makkelijker en efficiënter goederen kunnen vervoeren.

Grid

Het responsive grid biedt consistentie van de UX op alle verschillende devices.

Fullscreen image

Componenten, modules en templates

Binnen het systeem zijn er diverse 'assets' ontwikkeld om het development teams zo gemakkelijk mogelijk te maken. Dit varieert van eenvoudige componenten en modules tot aan complete templates.

Code

Naast visuele uitwerkingen en voorbeelden hebben we ook code geleverd ten behoeve van motion. Hiermee borgen we de usability en consistentie.

split image

Ecosysteem

Alle onderdelen en assets van het design systeem zijn online toegankelijk. Zo is een ecosysteem ontstaan van digitale services dat de eindgebruiker dezelfde User Experience biedt en dat de identiteit van Port of Rotterdam versterkt.

Fullscreen image

Wij plaatsen functionele cookies om deze website naar behoren te laten functioneren, analytische cookies waarmee wij het gebruik van de website kunnen meten, en marketing cookies om jouw ervaring hier nog beter te maken. Deze cookies gebruiken geen persoonsgegevens. Liever geen cookies? Pas dan je cookie-instellingen aan.

Cookie instellingen