Siemens MMVS

2022

The challenge

Siemens AG, with whom we have been working for a long time, came to us with the requirement to develop its own content management system (CMS), which could be used to easily create learning and information websites, so-called media systems. All security requirements and CI specifications had to be met. The task was to enrich the pages with content in different languages, including videos, interactive experiences, infographics, videos, accordions and much more.

Backend login
Backend pages overview
Backend page editor
Services: KI & AI Beratung und Entwicklung​

The realization

The content management system (CMS) created for Siemens provides users with an intuitive back-end system that has its own asset management system for managing all images, videos and files. A complex user and rights system was implemented, allowing pages to be created, managed and edited quickly. The built-in intuitive editor allows users to design pages, languages, settings and content according to their preferences directly in the editor.

The result

The system offers a user-friendly and responsive frontend and backend with numerous features and interactive elements that enable exciting learning and information content in several languages. It includes individual subpages, a dark and light mode as well as Lottie animations and an interactive HTML5 chapter know-how video player. In addition, the system can export media content as a self-running offline package. The Simenes learning content can be provided via public URLs, as a ZIP package for other servers or as an executable EXE file with a Chromium runtime environment that is ready to use without installation.

The Content Management System (CMS) consists of three completely separate components: Frontend, Backend and API Server. TypeScript was implemented in a monorepo structure for each project component, allowing the definition and sharing of interfaces between the components. A DBAL (Database Abstraction Layer) was integrated to ensure flexibility when using different databases. In this case, MySQL was used, but PostgreSQL or CouchDB are also available. To simplify the deployment process, a Docker Compose environment was created, which makes the system flexibly reproducible, expandable and mirrorable.

Frontend Hero and page navigation
Front-end testimonial, attachments and quick links
Frontend videoplayer
Frontend gallery

Dark and light mode

A dark mode offers more than just a cool look. It improves the user experience by reducing eye strain and saving energy. A darker color palette reduces the blue glow that prevents people from falling asleep and conserves battery life on devices with OLED displays. With a dark mode, users will also spend longer on the website and may be less distracted. For the content in the MediaSystem (MMVS), this means that users have more time to better engage with the content.

It is possible to switch dark mode on or off for each Siemens learning content. It is also possible to set a specific look in the Content Management System as the default or to set a completely different one.

MMVS_frontend_dark_mode MMVS_frontend_light_mode