Yves Tscherry, Senior Frontend Engineer at Unic, helped drive and shape the development of the “ticket machine of the future”. In his interview he explains what’s so special about the ticket machines of the future and why a strategic decision was made to implement the web application with Web Components.
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 sbb.ch 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.
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.
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.
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.
Contact for your Digital Solution with Unic
Book an appointmentAre 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).
Contact for your Digital Solution
Book an appointmentAre 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).
