Corporate Website and Intranet for RUAG Switzerland
Nominee
Case summary
When RUAG Switzerland got a new identity and IT infrastructure, we overhauled their online presence with multiple Drupal installations and one shared theme.
Case description
In 2019, RUAG’s business was split into two legal entities: One primarily targets Swiss, the other one international markets. RUAG Switzerland is owned by the Federal Government and provides maintenance, repair and operation services to the Swiss military and emergency services.Caused by the split, the corporate identity and IT infrastructure were replaced. We built the website and intranet with Drupal 8. Both embrace and share the new corporate design and are the face of RUAG for customers, stakeholders and employees.
Case goals and results
Goals:1. Communicate the new brand identity to customers, employees and stakeholders
2. Provide the relevant information and functions to the target groups
3. Ensure the expandability of the web architecture for future requirements
Solutions:
1. The website was the first adaption of the new corporate design and is the main channel to communicate the brand identity. RUAG’s brand qualities were defined as «precise progress» and «agile dynamic». The website puts the former across with a clean and stern white-gray-red design and technical images while it communicates the latter with soft and smooth animations and page transitions.
2. The target groups of RUAG are very broad: Swiss military, Swiss and foreign emergency services, employees, government, media, industry partners and the public. The site’s functions are correspondingly numerous: Job search, real estate marketplace with export to real estate platforms, location finder, brand portal etc. With the new website, we eliminated a complex subdomain landscape and, at the same time, reduced the navigation levels from five to three. The menu and front site revolve around the user and provide it with a quick and easy entry into the wanted functions and topics. A large variety of patterns (paragraphs) allow for a humane content creation where stories (quotation pattern) and faces (contact pattern) take center stage and contrast with RUAG’s technical focus and government involvement.
3. In the midst of the website’s development, RUAG requested a new intranet. While it should use the same technologies and design language as the website, it had to provide a completely different set of functions (market place, widgets, status monitor, news etc.). We decided to separate the theme from the website, create a generic template library and use it for both projects – as well as others that would follow over time (e.g. job platform). The website and intranet now use two different Drupal installations, while they share a common frontend.
Results:
1. As the web design transports both core values («precise progress» and «agile dynamic») visually and subliminally, the site’s content can focus on hard facts: RUAG’s core services and products.
2. The website provides an entry and navigation for all types of users – interactions and time on site have grown accordingly.
3. A streamlined and contemporary digital appearance for all current and upcoming web based products of RUAG.
Challenges
In the middle of the development of a complex software project, the customer calls and lets you know that the project’s scope has just been tripled – your frontend will not only be used for the website, but also for a Drupal-based intranet and a foreign provider’s job search platform.We decided to use the same theme – which was luckily BEM-based – for both Drupal instances, to prefix all classes and to export the (compiled) stylesheets to a dedicated repository. Even though a Drupal theme served as the base of this style library, the resulting export is independent from any backend technology or template rendering engine. It today serves as the frontend toolkit for the RUAG website, the RUAG intranet and the job search site, while multiple additional uses are planned in the near future.
Community contributions
In order to enhance the frontend functionality and interactivity in a vendor and backend technology agnostic manner, starting with RUAG, we created a simple but growing library of UI components. They are open source, use ES2020 and are based on W3C’s custom elements standard: https://www.npmjs.com/package/@joinbox/ui-components. It currently contains components for overlays, an audio player, a YouTube video player, a slider and a table of contents.Hosting
Aspectra for the website and FUB (government-owned and run hosting provider) for the intranet.