How to create a Digital Design System for one of the largest tourism websites

The Making of MySwitzerland.com for Swiss Tourism

• Pitch presentation in August 2016
• Project kick-off meeting in September 2016
• First frontend commit in January 2017
• Public release 1.0 of the new website in April 2019.

In the following article, I am going to provide some insights into the development process of the new web portal for Switzerland Tourism.

Inspiration in all areas

The original goal for Switzerland Tourism’s new website was to present a breathtaking and diverse world of images including inspiring stories, travel routes, holiday destinations, events, and themes.

Switzerland should be worth a visit for everyone and at any time not only in the real world but also online.

For our visual concept, we established guiding principles that should guide us during the ideation phase.

Principles

1. Reduction of complexity
   Focusing content on one column simplifies the “scanning” and reading flow. Clear and reduced top-level navigation. Consistent reduction of body text, longer text on detail pages is to be actively expanded.
2. Promotion of inspiration
   Users can browse through multi-layered content and thus find inspiration. Special access on the homepage (Inspiration Calendar) provides inspiration and access to a wide range of topics. “Destination Pages” and storytelling pages promote inspiration and a digital experience of various topics & regions.
3. Guaranteed modularity
   Sophisticated grid system. Atomic design. Variable placement of Content modules on each template. Similar structure of different modules. Adaptive rendering for any screen size.

Basic design elements

As a foundation for our layout, we defined a grid based on the brand’s logo to give the web layout an independent look and to support us in creating further page layouts.

Adding a color, fonts and icon library providing various styles and sizes, we had established a basis to build all components upon.

Fundamental design elements as rules for creating layouts.

Modifications applied to the basic elements during the design process were always synchronized with the corresponding styles and components library. Final definitions, especially in the area of typography, were later updated during the frontend implementation.

Final Typography Finetuning always via Browser Inspect.

Typography

The typeface we chose for this project is based on one of the most iconic fonts in Swiss typography: Helvetica. As the web portal is offered in 14 different languages we also had to implement fonts for Cyrillic, Arabic, Japanese, Chinese etc.

Typeface Explorations for foreign languages.

Display of a detail page with Cyrillic, Chinese and Arabic (right to left) characters.

Final css font stack covering all supported languages.

IA and navigation concept

The heart of a solid web portal is certainly a well-thought-out information architecture. During the conception of the navigation concept, a comprehensible navigation structure was developed using tree testings with users.

Where would you look for information about places to go skiing in Switzerland? — Extract from the documentation of the results

Tree testings were performed using pure text versions of a navigation structure. We compared different design approaches of a navigation concept and verified them in additional user tests.

Visual testing of different navigation concepts.

Test environment at the testing agency (ergonomics & technology)

Animation and Prototyping

For workshops and user testings, we prepared multiple animated visual concepts and approaches of components including the navigation. Some of them were rudimentary html prototypes or animated mockups from Principle, Flinto and co.

Early Prototype of Mobile Navigation.

Open and close animation of the navigation on the desktop.

Production Board

As a visual designer, you like to have a visual overview. Besides a well set up project plan and Jira-Tickets it is essential for me as a designer to have a visual overview of the key templates and modules.

Visual Production Board

Such an approach is essential for collaboration, common understanding and provides an overview of all modules and components. Additionally, components have been labeled, further specified and documented using Confluence.

Extract of a component specification.

Inspiration Calendar

The most inspiring feature of the new website is the so-called “Inspiration Calendar”, which aims at conveying the diversity and beauty of Switzerland. The calendar shows 48 interactive and inspirational videos recorded throughout Switzerland during the course of a year.

A few visual milestones in our creation process.

Early stage prototype of the inspirationkalender as a simple image slideshow.

First prototypes with YouTube dummy video material and the concept of placing additional “tags” with a motion tracking effect.

For the final placement of the those “tags” a small web application was built with which the client could visually place the anchor points for the motion tracking.

The result

We are happy with the result. Make sure to check out the website on www.myswitzerland.ch & thank you for reading.

If you would like to read more about the VR part of the project, this article by Tunay Bora might be of interest to you:

How to turn flat videos into VR experiences

If you would like to read more from Hinderling Volkart and our team, give us some claps & follow our publication:

https://medium.com/hinderlingvolkart & 👏🏻