sbb.ch won the Master of Swiss Web 2018. Florian Stürzinger, design pioneer at Unic, talks about the challenges of the design process for the relaunch of sbb.ch. And he explains why the focus of the design was entirely on people and their needs.
Reducation the essential, responsiveness and human-centred design
Florian, in the design concept for the relaunch of sbb.ch you have broken new ground. What were the biggest challenges for you?
sbb.ch is one of the most visited websites in Switzerland. The reduction to the essential user needs on the start page was a central challenge. And it took perseverance to defend this principle again and again during the long project period.
Another challenge was the topic of responsiveness. Responsive websites are well established and are taken for granted by users today. New at sbb.ch was the extension of the breakpoints to 4/5k screens, which we have solved independently and innovatively with a factor calculation. Of course, these viewports were not in the foreground, but there are not many websites that are as balanced and user-friendly in these resolutions. Of course, we have put a lot of heart and soul into the presentation on smartphones. The massive increase in mobile traffic since the relaunch shows that we have set the right focus here.
The new design focuses on the SBB brand. How did you strengthen the brand world of SBB again online?
With the relaunch of sbb.ch, the new brand values were transported into the digital world for the first time. Along the human-centered design process, however, the focus was on services, as the many different needs of a nationwide target group had to be covered. From the very beginning, we have placed people and their needs at the centre of our website. Ultimately, this also reflects the brand values.
To the keyword Services: On the new page you will always find surprising details. For example, the classic SBB watch. How did you come up with such ideas?
We knew from traffic figures that the previous SBB watch was a frequently visited feature. Accordingly, we wanted to present this in a contemporary way. However, the focus was on features relevant to the user experience, such as the Next Best Click or the storytelling in inspiring areas such as leisure & holidays.
How did you implement these service features?
The idea for the Next-Best-Click was born in the design. We knew that the content would differ massively in scope and that we would not have this in our hands. This gave rise to the idea of always placing the call-to-action in the visible area, regardless of whether you are at the beginning or at the end of the content, and regardless of the device you are currently using. This has resulted in the Next-Best-Click.
The timetable itself describes the heart of the SBB website. We have of course benefited from the design of the existing SBB app. But the adaptation to screens of different sizes, taking into account the characteristics of individual devices, was a very demanding task. With the simplified, initial display of the timetable mask on the start page, we have already entered the project proposal and have thus also created space for other entry content.
With the increased awareness of the leisure & holidays sector, we wanted to break the primary focus on the timetable. When you thought of sbb.ch, all you had in mind was the timetable. With the relaunch we also wanted to establish sbb.ch as a travel portal. So we have developed an individual visual language for the many travel offers. This inspiring area can be beautifully staged, but at the same time combined with the informative content.
Some ideas were added much later and were integrated without further ado, such as the touch timetable, which is already familiar from the SBB app.
A modular design system and the challenges of the accessibility
What was special about this project for you personally? What was different from your previous design concepts?
The start of the project was a mixture of gaining trust and picking up as many stakeholders as possible. The first two months we went round in circles with the start page and the navigation. And in the end we came back to the original idea. The HTML prototypes, which were created during this time, were enormously helpful. We already had an impression of how the interactive elements behave, such as the timetable or the header, and were able to carry out A/B tests.
In addition, we demanded everything from the tools "Sketch" and "Invision", especially in terms of quantity. A division of the Sketch files has been inescapable for efficient working. Keeping track of all styles and breakpoints was not always easy. Today Sketch is much further than 2.5 years ago, for example, to build a comprehensive design system.
How did you manage the balancing act between consistent design and different user needs?
We developed a modular design system at an early stage. This has helped us with many decisions. However, we also had to be extremely careful that the consistency did not become the answer to all possible requirements and needs. We have successively developed the design system further, but always on the basis of the basic values.
Were there any technical peculiarities that you had to take into account in the design process?
The visual and technical guarantee of accessibility of such an extensive website was a real challenge for us. It was therefore all the more important to incorporate the accessibility guidelines conceptually from the outset.
How did you feel about the cooperation with SBB and the partners involved?
The close and great cooperation with heimoto, our frontend engineers and the SBB team contributed enormously to the high quality of the result. The exchange with the foundation "Access for all", which promotes accessibility of websites, has also helped us all.
Contact for your Digital Solution
Book an appointmentAre you keen to talk about your next project? We will be happy exchange ideas with you.
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.
