| Client: | MAN Truck & Bus |
| Agency: | Capturemedia |
| Sector: | Commercial vehicles |
| Services: | Technical design, system architecture, backend, REST API, frontend |
| Technologies: | TYPO3 REST/JSON Vue.js PWA |
An interactive brand and product experience was created for the world premiere of the new MAN Truck Generation in Bilbao. Through various exhibits, visitors were able to explore the features, services and innovations of the new vehicles for themselves.
As the technical partner for the overall project, we were commissioned to develop a central content and translation system, several web-based touch applications, and a portal for the global reuse of the applications. The design of the overall presentation and other exhibits were not part of our scope of work.
The content for numerous trade fair applications had to be managed centrally, made available in many languages and reliably delivered to various technical systems. In addition to our web-based applications, installations developed in Unity3D also needed to be integrated. Not only did the data structures of the applications differ – the text formatting in Unity3D was also incompatible with the HTML markup used in the CMS.
Based on TYPO3, we developed our own content and translation system. Texts, media and configurations were managed centrally within this system and delivered to the respective applications as JSON via a secure REST interface.
In addition, we programmed four progressive web apps for large touchscreens. For subsequent local events, we also created a toolbox portal through which available application variants and languages could be downloaded and further translations requested.
The custom-developed TYPO3 extension q3i_mantranslation mapped applications, content areas, texts and media within a translatable structure. A roles and permissions system separated the tasks of administration, development, editing and approval.
The DRAFT and LIVE workspaces enabled content to be prepared and checked by the editorial team first. Only after approval was the content delivered to the installations at the exhibition. To facilitate collaboration with external translators, content could be exported in a structured format and re-imported into the CMS once processed. The system was designed to support up to 20 languages.
Each application was granted secure access to only the content, languages and runtime configurations intended for it. For the Unity3D installations, we developed a customised processing method for the JSON data: HTML formatting, colours, lists and line breaks were automatically converted into a format compatible with Unity or TextMeshPro.
Using Vue.js, we built four multilingual PWAs covering the topics ‘Industries’, ‘Solution Space’, ‘Strong Partner’ and ‘Great Efficiency’. Visitors navigated through sections, product information and image and video content using swipes, menus and interactive hotspots.
The apps dynamically retrieved text and media from the CMS, offered a language selection option and automatically switched to an eye-catching screensaver after a period of inactivity. Service worker caching and pre-stored fallback content ensured that the applications remained operational even in the event of connection issues.
To ensure that the applications could continue to be used for regional launch events following the premiere, we developed a complementary Toolbox portal. Here, those responsible were provided with an overview of software variants for touchscreens and tablets, as well as physical exhibits.
Language versions that were already available were made available for download via the MAN Brand Portal. Any missing translations could be ordered via the Toolbox portal using a structured shopping basket and enquiry process.
1
centralised content and translation system
4
Interactive Progressive Web Apps
20
Languages available in the CMS
The central CMS enabled content and translations for technically diverse trade fair applications to be managed in one place and published in a controlled manner. The bespoke interfaces connected TYPO3 with Unity3D and our web-based touch applications. Thanks to the offline-capable PWAs and the Event Toolbox, the solution was not limited to the world premiere in Bilbao: content and applications were subsequently adapted and reused for subsequent international events.
“For the past ten years, Q3i has been our reliable partner for the technical implementation of complex projects. Q3i works independently, is solution-oriented and always thinks proactively. This builds trust and makes working with them particularly straightforward for us.”
Marko Kosczowsky
Senior Producer at Capture Media GmbH
Let’s get to know each other. We’d be happy to take the time to discuss your project. Naturally, this is non-binding and free of charge.
