Netzwerkkarte 2.0

Die Welt des Schienengüterverkehrs

Die letzten acht Monate hat uns die Neuentwicklung der DB Cargo Netzwerkkarte begleitet. Ein Projekt mit unumstößlicher Deadline: transport logistic 2019. Auf der Messe in München Anfang Juni war die Netzwerkkarte auf einem sehr großen, an der Wand befestigten Touchscreen zu sehen. Zusätzlich waren mehre Tablets mit der Anwendung auf dem Messestand von DB Cargo im Einsatz. So hatten die Vertriebsmitarbeiter*innen ein Tool zur Hand, an dem sie sämtliche Kernprodukte anschaulich erklären konnten – dynamischer und beeindruckender als Broschüren.

Im Zentrum der Netzwerkkarte steht eine Karte, die das Schienennetz von DB Cargo zeigt. Die verschiedenen Lösungen und Landesgesellschaften wählt man über eine Navigationsbox aus, und schon sind sie auf der Karte zu sehen. Je nach Zoomstufe erfährt man, was für Schienenzugänge sich an den einzelnen Orten befinden. Eine separate Content-Box vertieft die jeweilige Lösung nochmal über ein Bild und Text mit den Produktvorteilen und dem Kontaktlink. Neben den Netzwerken bietet die Karte eine praktische Verbindungssuche und Stories mit Beispielcases.

DESIGN/UX

Wichtig war uns ein übersichtliches und sauberes Design, das die unterschiedlichen Funktionen gut erkennen lässt. Bei der bewährten Grau-Blau-Optik, die über der Google Map liegt, sind wir geblieben, die Linien und Kartensymbole sind deutlicher hervorgehoben. Auch neu ist, dass die zoombare Karte über den ganzen Bildschirm geht und die anderen Boxen/Buttons darauf liegen. Die Content-Box rechts gibt den Blick auf die Karte frei, wenn man sie nicht braucht, und kommt nur durch die Mausbewegung zurück.

 

Die sieben Stories verfügen über großzügige Bilder, flächige Module, ein interaktives Kartenmodul und bereiten die Cases durch Bilder, Faktenboxen, Links und Texte auf. Das aufklappbare Kontaktsymbol und die drei Links, die beim Scrollen wechseln, laufen als Sticky Elements mit, so dass die relevanten Klicks auch bei langen, magazinigen Scrollstrecken immer präsent sind.

scroll it 

PROGRAMMIERUNG

Diesmal haben wir alles, auch die Programmierung, selbst übernommen. Die Netzwerkkarte läuft als  Single-page Application (SPA) auf Basis des JavaScript Frameworks Vue.js.  Die SPA hat den Vorteil, das Inhalte dynamisch und nach Bedarf nachgeladen werden. So ähnelt die Nutzerführung einer App, bei der die User unmittelbares Feedback auf ihre Eingaben bekommen. Ladezeiten beschränken sich auf das Notwendigste, was wichtig ist, wenn sich Kund*innen viele Strecken, Branchenlösungen oder Verbindungen anschauen wollen. Trotzdem haben einzelne Leistungen und die einzelnen Stories jeweils eine eigene URL, damit beispielsweise einzelne Vertriebsbereiche den direkten Link zu ihren Themen weitergeben können.


Ansonsten ist die API zu Google wesentliche Grundlage für die Mapdarstellung genau wie die Geodaten zu den einzelnen Strecken, Ladestellen, Railports usw., die aus einem anderen Online-Tool von DB Cargo kamen. 

REDAKTION/TEXT



Aus redaktioneller Sicht gab das Projekt ebenfalls einiges her: viele Textbausteine, Bilder, Icons, Navigationspunkte, Infos-Snippets, Links und nachzubearbeitende Geodaten. Und auch die Stories haben wir entworfen, nachrecherchiert, getextet sowie die Übersetzung organisiert.

Die Messe ist erfolgreich zu Ende gegangen und die Karte ist weiter auf der Website von DB Cargo eingebunden sowie über die eigene URL direkt als Online-Tool nutzbar. Sie wird sogar noch um das ein oder andere Feature ergänzt werden – auf jeden Fall eines der Projekte, die wir besonders gerne zeigen.

Auch interessant

CLOSE
close