sbb.ch is the most visited online platform in Switzerland. In a 20-month lasting process it has undergone a complete redesign. Besides being fully responsive, the big novelties can be found in the optimized connection form as well as the revamped leisure and vacations and stations sections.
With a website that has to meet so many different needs, we followed two simple principles: flexibility and consistency. We created six main page types and 70+ modules. They allow a flexible approach for the publishing team when creating content, while achieving a consistent user experience throughout the numerous pages in the SBB online universe.
General structure and navigation
When starting the conceptual process, we defined universal patterns, that help the user navigate within and through the thousands of content pages of sbb.ch. We encourage users to navigate through content-teasers, but the mega-dropdown, which gives access to the first three levels, still plays a major role when it comes to directly accessing specific pages.
Navigating within the pages
When defining the user-flows, our main goal was to get the user to the desired information with as few clicks as possible. We analyzed existing click paths and optimized them by limiting the hierarchical levels and creating added values for jump pages that formerly had the sole purpose of guiding users to deeper levels.
As we could not avoid getting into more than three levels, we decided to use functional breadcrumbs as means of navigation. Such that the user can conveniently navigate to all parent and sibling pages while having a clear understanding of his or her whereabouts.
Collapsable, sticky next best click module
One important feature for content pages are the next best click (nbc) modules. All relevant information that leads to transaction, contact, downloads or alike is gathered in the right column. On long pages we wanted to make sure that the user always has the relevant nbcs at hand. So when scrolling, we make the modules collapse one after another and stay sticky on the top right area of the viewport. On mobile the nbcs are always accessible bottom right and open as a contextual layer.
Information Architecture, UX Design, Interaction Design, Visual Design
Master – Best of Swiss Web, 2018
Gold – Usability, Best of Swiss Web, 2018
Silver – Mobile, Best of Swiss Web, 2018
3x Bronze – Business / Marketing / Public Affairs, Best of Swiss Web, 2018
Silver – Annual Multimedia, 2018