GRF - Relaunch Multisite graubuenden.ch

Winner
Nominee
Winner Of The Year

Case summary

Discover graubuenden.ch, home to Gian & Giachen, the beloved ibexes. The new website is considered a flagship for digitization in tourism, with innovation, charm, and user-friendliness at its core.

Case description

The graubuenden.ch platform forms the heart of tourism in Graubünden. It is the hub of numerous campaigns, services and information sources. We developed a multisite platform capable of further expansion to be the new home for the iconic ibexes, Gian & Giachen. This platform is able to meet the diverse needs of visitors, Graubünden Tourism and their market partners.

We took Drupal 9 as a basis to develop a digital experience platform that inspires users. The website focuses on providing information, inspiring visitors and simplifying the booking process. The multisite setup and progressive decoupling approach provides Graubünden Tourism with an efficient content management system.

_Multisite Setup Meets Individual Needs_
The umbrella brand’s platform, graubunden.ch, hosts another 20+ websites operated by partners and destinations in the tourism sector. How these tenants are linked to the platform and the content they provide is highly individual. While keeping to the same design specifications, the tenants manage their content completely independently. The multisite setup makes it possible to run several websites from one server and provide several domains.
Every tenant is built using the same technical basis and the same design. Every website benefits equally from new developments and optimisation. For two examples of these tenants, please see Ferienregion Chur (https://www.chur.graubuenden.ch/en) and Sport- und Eventanlagen (https://www.sportanlagenchur.ch/en).

_Service Architecture Provides a Wide Range of Services_
Graubünden Tourism now obtains numerous services and assets from the discover.swiss (https://discover.swiss/) tourism platform. The service architecture uses an interface to connect to discover.swiss’s central data pool. Graubünden Tourism can use this data pool to add data and assets for a wide range of tourist activities and services to its websites: tours and sights, events and webcams, weather, map data and more – a digital gateway to the Graubünden region and all it has to offer tourists.

_Moving Towards a Personalised Holiday Profile_
This approach of storing data centrally combined with machine learning will make it possible to generate a personalised user experience in the future. By strategically designing the architecture and intelligently coupling service platforms to Drupal, the content has already been fully categorised and tagged. This means that we will soon be able to seamlessly integrate the first personalisation projects into the platform.

_A Website That Feels Like an App_
To ensure optimum usability, we have decoupled important frontend features from the backend. For example, the map integrations (https://www.graubuenden.ch/en/guide) has been decoupled and directly communicates with the data provider discover.swiss. Technically, this enables progressive decoupling of the frontend from the Drupal backend. Users can interact with the website as if it were a native app: they don’t need to refresh the webpage and don’t experience latency.
Additionally, we've implemented a proof of concept for a progressive web app which focuses on the map functionality called "Travel Guide". This solution (https://www.app.graubuenden.ch/de) is set up as an additional tenant and focuses on mobile usage.

_User Conceptualization_
The target audience primarily consists of Swiss individuals, but also includes people from around the world who are planning day trips or vacations in the canton of Graubünden. It also caters to local residents who want to explore their home canton in greater detail. Graubünden offers breathtaking mountain scenery, fresh mountain air, and over 40 ski resorts. It's a place where one can gradually distance themselves from everyday life, if desired.
More than half of the users of graubuenden.ch are over 50 years old. To ensure good accessibility, we have implemented the following measures:
- For our older target audience, we use a font size one point larger than typically recommended.
- The information architecture has been revised based on user tests to ensure that the website is easy to navigate and understand.
- The website can also be safely operated by athletes on the go, as it can be fully controlled from the lower half of the screen.

_A True Holiday Feeling_
Users are always shown the most important information, regardless of what device they use to access the website. The content is always displayed in a way that is optimised for the device they use. The impressive images of Graubünden and the two charming iconic ibexes, Gian & Giachen, highlight what makes the Graubünden region so special. Subtle and thoughtful frontend animations guide users through the site, conveying a true holiday feeling.

_A User Experience for the Editorial Team_
Need to create new pages in the blink of an eye while always meeting high design standards? Our backend solutions make this possible. Editors, as well as users, also enjoy high usability in the Drupal CMS. Authorisations and workflows have been fine-tuned so that editors only see the information that they are supposed to (and allowed to) modify. One highlight is the intuitive website-building system, which offers a realistic preview of components. Individual modules can be combined in almost any conceivable way and easily arranged using drag and drop. When taking this kind of multisite approach, which involves a large editorial team and a lot of administrators, it is particularly important that the content can be managed easily and efficiently.

_Combining Sustainability and Performance_
The sky is the limit, and nothing can stop the new platform from growing. Both the Drupal platform and the interfaces to discover.swiss can be easily expanded. We can integrate additional destinations with minimal extra work required. The hosting services we provide optimise the way applications interact with the infrastructure, clearly shifting the focus to performance.
During development, we placed great value on ensuring the modules were flexible and opted for innovative open-source components. Thanks to this and our years of experience, we have come up with a solution that performs well but can also grow with Graubünden’s partners and customers in the long term.

_Traffic & Conversion Analysis_
graubuenden.ch is a central tool of the marketing organization to attract more guests to the tourism region of Graubünden. Thanks to a sophisticated and structured analytics setup, the website's contribution to achieving goals can be measured in detail. The analysis includes all potentially converting pages such as tours, POIs, guides, and WISPO. All signals for a stay in Graubünden are hidden in CTAs (Call to Actions). Combined with effective bookings, the marketing team can finally systematically evaluate its measures and derive corresponding optimization actions. Thanks to the revamped and well-thought-out user journey, conversions can already be achieved from the homepage with three clicks on desktop and four clicks on mobile. The conversion rate is an impressive 1.6% for the period from August 1, 2021, to December 16, 2021.

Case goals and results

- Future-proof solution: With the project, GRF focused on replacing the existing Drupal solution. The new implementation should have been based on Drupal 9 and be future-proof.

- Efficiency: The project's goal was to not only create one website, but to implement a multi-site functionality for more than 20 tenants. All these tenants run on the same infrastructure and make use of the same code base to increase the efficiency and cost of the solution for GRF.

- Centralized data source: As a new central and open data source for touristic information in Switzerland, discover.swiss should be integrated into the solution. The implementation heavily relies on data from discover.swiss and is deeply integrated into the offered services.

- Flexibility for editors: Based on the high number of tenants, there are also many editors working with the solution. The daily work of the editors should be as simple as possible. The implementation offers intuitive site building and does not require long training sessions for the editors.

- Emotional design and content presentation: Based on a design created by Namics, we implemented the Frontend. The design as well as media and content used on the website focuses on an emotional "holiday feeling" to engage the user and finally resulting in a conversion.

Challenges

- Multi-Site: We've implemented a multi-site solution on infrastructure level. By doing so, the different tenants are separated on database and data level, but utilize the same code base and are operated on the same hosting environment. By doing so, the solution is scalable by remaining cost-efficient for the client.

- discover.swiss: We've integrated discover.swiss as the central data source for the website on various levels: Using scheduled imports, we create different content types in Drupal to store the data received from discover.swiss. Hereby, we transform the data as needed and enrich it with additional information provided by the editors. To handle updates in the data sources, we've implemented a queue which listens to change events provided by discover.swiss. To perform search requests on the website, we use a search API provided by discover.swiss which also queries content created on the website by the editors. For the map integration, we implemented a decoupled communication between discover.swiss and the frontend to create a fast and interactive user experience.

- Editor Experience: The Drupal backend uses Layouts and Paragraphs which offer an intuitive way of creating content for the editors. We also use the Gin modules to optimize the backend experience further.

- Frontend: To meet the requirements from the design, we've created a flexible component based frontend implementation in vue.js. The solution is well prepared for all devices and offers an optimal experience on different screen sizes. A vivid media usage enriched with varius micro animations support the holiday feeling which the customer wants to communicate on the website.

Community contributions

As part of developing the solution, we created patches and contributed to modules such as gin, graphql_responsive_image, layout_paragraphs_restriction, paragraphs_modal_edit, entity_hierarchy, graphql_entity_by_object. Especially, the development on gin (https://www.drupal.org/project/gin) was greatly contributed by the work on this project and also provided a real project to optimize the functionality.

Additionally, we presented insights from the project on the local Drupal meet-up of the Zurich Drupal User Group Meetup (https://www.meetup.com/Zurich-Drupal-Meetup/).

Hosting

Hosted in Unic's private cloud hosting at Equinix data center in Zurich.

Why should this case win the splash awards?

The project showcases Drupal's capability with respect to scalability (multi-site), interoperability (discover.swiss) and editor experience. The technical solution is mixed with impressive and charming content resulting in a unique user experience.

Additionally, the customer is very satisfied with the solution and the work Unic did:
" Unic has proved itself a skilled and invaluable partner during this project, providing years of experience in building digital experience platforms in the tourism sector and bringing a wide range of expertise to the table."
Stephanie Gram, Head of Digital Marketing, Graubünden Tourism

Case video