SBB Ticket Machines Are Ready for the Future

Nicole Buri1

Nicole BuriOctober 2019

On the Direct Way to the Desired Product

Yves, we’ve often read that the current ticket machines are difficult to use and place too many demands on their users. What is different about the ticket machines of the future?

Yves Tscherry: The overall goal was to make the ticket machines similar to the user experience travelers have on and in the SBB mobile app. What has worked well on personal devices should also be possible at a vending machine: Find the product you’re looking for easily and quickly. To achieve this, we consistently questioned and redesigned processes, features and the look and feel of the machine. With their new ticket machines, SBB has created a consistent experience for travelers, regardless of the device they’re using. Having similar user interfaces across devices helps users find what they’re looking for more easily and allows them to transfer learned patterns from one device to the next. Another key element is the SwissPass, which will play a more prominent role as a medium for tickets and travel passes.

The SwissPass as a carrier medium is to be positioned more prominently for tickets and subscriptions.
The SwissPass as a carrier medium is to be positioned more prominently for tickets and subscriptions.

What’s special about the app from a user experience point of view?

Today’s generation of ticket machines guides the traveler through a linear step-by-step or touch-by-touch process to find the product. This sequential approach is not always transparent or predictable for the user. Often, a user does not know what will happen in the next step or how a certain configuration will change the final rate. The new user interface aims to guide users to the right product with as few interactions as possible. All processes in the web application were set up to meet that target – from selection and configuration to payment and delivery. With personal identification using the SwissPass, travelers can access past trips and travel passes purchased.

The feedback on Digital Day at Zurich main station was more than positive. Most users praised the simplicity of the new user interface. How did you achieve this level of user-friendliness?

Early on in the project, SBB had first drafts compete against current ticket machines in A/B tests. During development, we conducted three usability tests and a tree test. The findings from those were fed into the iterations.

The ticket machine of the future guides users to the right product with little interaction.
The ticket machine of the future guides users to the right product with little interaction.

Strategic decision for Web Components

What are the key technical aspects in the web application?

Being able to reuse the individual elements seemed to make sense for this project, which is why we made the strategic decision to implement the web application with Web Components. The modular structure of the components allows us to adapt individual elements with very little effort, or just replace them completely. Once completed, the individual features can be used in different contexts. The great advantage of Web Components is that they’re technology agnostic, i.e. React, Angular or Vue projects can also use and integrate the components very easily. Another advantage is the encapsulation: The technical properties of Web Components ensure that they can not be manipulated with third-party JavaScript or CSS – whether deliberately or not.

Web Components are all the rage in the community at the moment. What is it about them that fascinates you?

What we have implemented with Web Components over the past four months clearly shows their potential. We have created a web application that functions in an entirely client-side way, and its components can be reused within SBB regardless of the surrounding technology. We used Stencil to build the Web Components. While we’re aware of the disadvantages of Web Components, we’re more than happy to accept these for the easy integration into other technology stacks alone. This is also the property that fascinates me in a business environment: SBB implements many exciting, but also complex projects. It is essential to reuse as many resources as possible to avoid several teams developing the same feature in parallel. On the one hand, it’s all about being ecologically efficient and cost-effective, but on the other hand, it’s also about the user experience. If modules come from a single source and get used in different channels, it becomes much easier to create a consistent user experience across the various channels.

The great advantage of Web Components is that they’re technology agnostic. Developed modules can be reused flexibly in a variety of contexts.

Yves Tscherry
Senior Frontend Engineer, Unic

What were the hardware-specific challenges?

It was clear right from the start that the web-based application would have to run on two technologically distinct devices: the existing ticket machines and a new touch tablet prototype. The limitation to these two screen sizes gave us several degrees of freedom you don’t get elsewhere when applications have to run on all common browsers and devices. We also had the liberty to determine what browser the application was to run in – so we decided to use Chromium. The 10-year-old ticket machines, however, presented us with some very special challenges. Not much RAM, weak processors – lots of restrictions the new web application would have to handle. The touch options on the old ticket machine are very limited; for instance, you can only tap. Scrolling or swiping is not possible. The new touch tablet has all these options. Doing justice to both devices with one app was a real challenge in terms of technology, but also from a UX/UI point of view. For instance, we needed an interactive element for the ticket machine that would allow users to scroll by tapping on it. This element is obsolete for the new tablet since it supports common touch interactions such as touch scrolling.

Nicole BuriMarch 2018

The objective was an attractive, robust and accessible Frontend for

Marius Bleuer and Yves Tscherry, Frontend Engineers at Unic, have had their share in the relaunch of They are talking about the Frontend-specific objectives and challenges of the Project.

Learn more

And when will we see the new machines at train stations?

SBB is going to be showcasing the new web application at a number of internal and external events over the coming months. Digital Day was the kick-off event, if you will, to give the public a sneak peek at the application. We will be using the feedback from these roadshows to further enhance and improve the product. The rollout to selected machines at larger train stations as a production preview for travelers is scheduled for mid-2020.

More about the project



A Free Ride into a Digital World

Mobile into the future. With the website relaunch in responsive design, the SBB meets the demands of modern travelers. Unic was responsible for conception, design and frontend development.

A Free Ride into a Digital World

Contact for your Digital Solution with Unic

Book an appointment

Are you keen too discuss your digital tasks with us? We would be happy to exchange ideas with you: Jörg Nölke and Gerrit Taaks (from left to right).

Gerrit Taaks

Contact for your Digital Solution

Book an appointment

Are you keen to talk about your next project? We will be happy exchange ideas with you: Melanie Klühe, Stefanie Berger, Stephan Handschin and Philippe Surber (clockwise).

Melanie Kluhe
Stefanie Berger
Philippe Surber
Stephan Handschin