Rail freight transport as a network map 2.0

With the interactive network map, DB Cargo wants to enable its customers to display the most suitable rail connection for shipping their goods.

At the centre of the page lays the map showing DB Cargo's rail network. Depending on the zoom level, you can find out which rail accesses are located at which individual locations. In addition to the networks, the site offers a practical connection search. Another highlight are the stories with attractively presented customer cases.

Design/UX

It was important to us to have a clear and clean design that allows the different functions to be easily recognised and clearly separated from each other.

We have stuck to the tried and tested grey-blue look that lies over the Google Map, the lines and map symbols are more clearly highlighted. Also new is that the zoomable map goes over the whole screen and the other boxes/buttons are on top of it. The content box on the right gives you a view of the map when you don't need it.

The seven stories have large images and two-dimensional modules. They show the cases through pictures, fact boxes, links, texts and an interactive map module.

Editing/Text

From an editorial point of view, the project had a lot to offer: many text modules and sections, images, icons, navigation points, info snippets, links and geodata to be reworked.

programming

This time we did everything ourselves, including the programming. The network map runs as a single page application (SPA) based on the JavaScript framework Vue.js. The SPA has the advantage that content is loaded dynamically and as needed. In this way, the user guidance is similar to an app, in which users receive immediate feedback on their input. Loading times are limited to the bare minimum, which is important when customers want to view many routes, sector solutions or connections. Nevertheless, individual services and the individual stories each have their own URL so that, for example, individual sales areas can pass on the direct link to their topics.

Otherwise, the API to Google is the essential basis for the map display, just like the geodata for the individual routes, loading points, railports, etc., which came from another online tool from DB Cargo.

After a successful trade fair, the map is permanently integrated on the DB Cargo homepage and can be used directly as an online tool via its own URL.

In the future, it will even be supplemented by one or the other feature - in any case, one of the projects that we particularly like to show.