Beschreibung
Für Siemens ARTIFICIAL INTELLIGENCE @ CORPORATE TECHNOLOGY haben wir eine neue Intranetseite entwickelt. Sie dient der internen Kommunikation von Dienstleistungen und gibt den Bearbeitern der Website die Möglichkeit eigenständig und individuell Inhalte und Strukturen zu ändern.
Leistungen
- Development
Technologien
- Gatsby
- GraphQL
- Bootstrap
- Markdown
Die Challenge
Die alte Seite von Siemens AI@CT basiert auf einer überholten Web-Architektur, die verschiedene Probleme mit sich bringt:
- Langsame Ladezeiten der einzelnen Seiten
- Kein responsives Verhalten bei unterschiedlichen Screen-Größen
- Umständliches Ändern von Website-Inhalten
- Gestaltungseinschränkungen durch Technologielimitierungen
Um Trainings, Wissen und Prozesse von Siemens AI@CT intern darzustellen und zu verkaufen soll die aktuelle Seite neu entwickelt werden. Ein neues high-speed Web-Framework soll die Ladezeit der Seite perfektionieren und Editoren der Seite außerdem die Möglichkeit geben Inhalte einfach und schnell einzupflegen und anzupassen. Dafür soll ein indivduell angepasstes CMS in die Seite integriert werden.
Die Umsetzung
Blitzschnelle Ladezeiten
Die neue Website haben wir mit dem komponenten-basierten Javascript Framework Gatsby gebaut. Dies ermöglichte uns die Erstellung von Seiten mit schnellstmöglicher Ladezeit. Lange unübersichtliche Seiten konnten dadurch auf mehrere kürzere Unterseiten gesplittet werden.
Gleiches Design, aber besser
Um die Corporate Identity von Siemens beizubehalten, haben wir das siemens-interne Design-Theme, in die neue Website integriert. Designelemente und Funktionen, welche mit der alten Technologie nicht umsetzbar waren, haben wir CI gerecht neu überdacht, designed und animiert.
Die neue Statusleiste führt Besucher nun übersichtlich durch die auf der Seite dargestellten Prozesse. Sie zeigt die aktuelle Scrollposition des Users und bietet jetzt, anders als vorher, auch auf mobilen Geräte eine nahtlose Experience.
Mit der Maus übers Phone zum Animieren
Maßgeschneidertes Content Management System
Die von uns eingebauten Markdown-Dateien bilden ein individualisiertes und funktionsspezifisches Content Management System. Texte, Bilder, Icons, Seiten und Verlinkungen können damit ganz einfach bearbeitet und hinzugefügt werden. Dazu braucht es keinen technischen Hintergrund und die Funktion der Seite kann nicht ungewollt beeinträchtigt werden.
Inhalte wie z.B diese Texte über ein angebotenes Training (rot markiert) können sehr intuitiv über Markdown-Dateien geändert werden. Textformatierungen, Metadaten und das Einfügen von Komponenten können über einfache Codierungen vorgenommen werden.
Filtern von Projekten
Über den „Use Case Explorer“ können Projekte nach mehreren Kriterien intelligent gefiltert und angezeigt werden. Mit einem Klick auf das jeweilige Projekt werden weitere Detailinformationen angezeigt. Die Seite greift dabei auf eine bereits bestehende interne API zurück, in der die Projekte hinterlegt sind.
