Makes you mobile faster - the accessible SWB Bus und Bahn appearance

New digital offer from the Bonn mobile makers

Stadtwerke Bonn is active in the three fields of energy supply, local transport and waste recycling. SWB Bus und Bahn operates 214 public buses and 100 streetcars on more than 48 routes in the Bonn region, partly in association with other transport companies in the Cologne and Rhein-Sieg districts. SWB Bus und Bahn moves around 92 million passengers a year at around 800 stops.

The requirements elicitation

In addition to the optimization of the information and service offering, an improved user experience and brand experience were at the top of the list of key requirements for the SWB Bus und Bahn relaunch. The design was based on the new group-wide SWB digital styleguide, which was rolled out for the first time with the relaunch of SWB Energie und Wasser.

In addition to the main target group of public transport users, the prominent addressing of potential employees was an additional task in the redesign.

The design

The web design for the responsive appearance of SWB Bus und Bahn is based on the new, clearly structured, large-scale and colorful corporate look, which is now being consistently implemented for all corporate divisions. The header area, for example, offers an easy way to change pages within the digital SWB world. The previously rather granular appearance has been replaced in favor of a much clearer structure whose design elements are taken from a pattern library adapted for buses and trains. A special requirement for the web design in this case was the barrier-free presentation, i.e. the perceptibility, comprehensibility and usability of the website for people with physical or mental disabilities.





The conception

How do I get from Bonn Central Station to the Haus der Geschichte? Where is the nearest stop at the Beethovenhalle? Which line brings me to Tannenbusch?

These questions and many other use cases concerning connections, stops, and lines are now solved quickly and easily via the start page.

The new features at a glance:

  • New easy-to-use timetable query with direct connection to the VRS data interface and central element on the start page for convenient quick access
  • Profile pages for stops and lines - with everything that is important at one central point (e.g. download files)
  • New performant full-text search function
  • More access to timetable topics with a stronger focus on the target groups and their needs
  • Large topic stage on the homepage for current and long-term important contents

The profile pages for stops and lines provide information about any disruptions, planned construction sites and current departure times. The line overview can be filtered by means of transport, the line plans can be viewed interactively or downloaded in PDF format. In short: all the information the bus or train driver needs is exactly where he needs it.

Our joint route plan

1. Joint kick-off workshop

2. Conception of exemplary page types, contents and click paths

3. Presentation in a joint appointment

4. Fine conception phase with further interim presentations: Playing through various use cases

Interface development and modern web technology

A special requirement for the developers was the interface programming for the integration of external local traffic data as well as the corporate communication system (UKS) of the municipal utility communication department. A proxy was developed for fast loading of the timetable data, which forms an interface to the data provided by the Rhein-Sieg Transport Association (VRS). This allows the transport of reduced data packages that only display the content actually required.

The timetable information is integrated via Vue.js technology, so that without page reload on the TYPO3 site, a Vue.js delivery takes place. This dynamic switch between TYPO3 CMS and Vue.js ensures a high-performance and uninterrupted browsing experience.

The journey continues - iterative web design

The live walk, timed to coincide with the timetable change, does not mean the end of the journey. So a further expansion of the website with service functions and language versions is already being planned. As with all PPW projects, the main focus here is on the best possible user experience and continuous improvement based on the interaction data collected through web analysis or user research.


Title picture: © Martin Magunia, Stadtwerke Bonn 2018.

No (travel) plan yet? Please board here.

Give us a call.
We are happy to advise you!
+49 221 277 2898 0

Katrin Bottmeyer-Wahmes
User Experience Designer