The picture shows two men looking intently at a screen. You can't see the screen, but you can see that one of the men is working with the mouse and gesticulating with his left hand.

SBB: «People and their needs were at the heart of the SBB website»

Cléa FierzJune 2018

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.

kompetenzen-responsive-design

Our Service

Responsive Web Design – consistent Web presence on all devices

With Responsive Web Design, we will provide you with future-oriented solutions that operate independently from the screen size.

Responsive Web Design – consistent Web presence on all devices

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.

Lorenzo MuttiJune 2017

From Call to Action to Next Best Click

The next best click on your website has great potential for optimisation, which goes far beyond the «Call to Action»: The «Next Best Click» (NBC) unites aspects of target group- and context-relevant content delivery and can be wonderfully integrated in the conversion path of a user journey.

From Call to Action to 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.

More about the project

casestudy_sbb_responsive

SBB AG

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

Book an appointment

Are you keen to talk about your next project? We will be happy exchange ideas with you.

Melanie Klühe
Melanie Klühe
Stefanie Berger
Stefanie Berger
Philippe Surber
Philippe Surber
Stephan Handschin
Stephan Handschin

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
Gerrit Taaks
Gerrit Taaks