SBB.ch – Relaunch
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 & holidays»- and «Stations»-sections.
With a website that has to meet so many different needs we followed two simple principles: flexibility and consistency. We created 6 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 3 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 little 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 to lead users to deeper levels.
As we could not avoid getting into more than 3 levels, we decided to use functional breadcrumbs as means of navigation. Such the user can conveniently navigate to all parent and sibling-pages while having a clear understanding of her/his 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 are gathered in the right column. On long pages we wanted to make sure, that the user has the relevant NBCs always 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.