GIS Washington D.C. ReDesign

Ausgangssituation und Herausforderung

Die Deutsche Internationale Schule Washington D.C. (GISW) ist eine private Schule, die über 500 Schülerinnen und Schüler vom Kindergarten bis zur 12. Klasse betreut. Unser Ziel war es, den Onlineauftritt der Schule sowohl technisch als auch visuell umfassend neu zu gestalten und zu optimieren.

Ein Redesign ist stets eine anspruchsvolle Aufgabe. Unser Ziel war es, das neue Design vor Beginn des neuen Schuljahres fertigzustellen. Neben der visuellen Neugestaltung der Website haben wir auch das technische Fundament vollständig überarbeitet. Das bewährte Content Management System Contao kam weiterhin zum Einsatz, jedoch haben wir den technologischen Aufbau komplett modernisiert und ein umfassendes Design System entwickelt und implementiert.

Lösung

In enger Zusammenarbeit mit der Deutschen Schule haben wir einen umfassenden Lösungsansatz entwickelt, um die veraltete Website technisch und visuell zu modernisieren. Wir erstellten einen detaillierten Zeitplan mit klar definierten Meilensteinen für Abnahmen und Testphasen, um sicherzustellen, dass das neue Design rechtzeitig vor Beginn des neuen Schuljahres fertiggestellt wird.

Navigationskonzept

Eine besondere Herausforderung stellte die umfangreiche Navigationsstruktur der Webseite dar. In enger Abstimmung mit unserem Kunden haben wir zunächst ein Konzept für eine neue Navigationsstruktur entwickelt, um die Inhalte besser zu bündeln und den Benutzern eine einfachere Orientierung zu ermöglichen. Danach haben wir den Aufbau der Navigation vereinfacht und neu strukturiert. Der Prozess der Verschlankung der Navigation befindet sich jedoch noch im Anfangsstadium, da wir den Nutzern neben dem neuen Design nicht zu viele Umstellungen auf einmal zumuten wollten.

Im ersten Schritt war die Navigationsstruktur weiterhin in bis zu vier Unterebenen unterteilt. Um die Nutzerführung zu erleichtern, haben wir mehrere Bedienelemente integriert. Zusätzlich zur Hauptnavigation, die bestimmte Bereiche mit Bildern hervorheben kann, haben wir auf allen Unterseiten eine Breadcrumb-Navigation eingeführt, die den Pfad zur aktuellen Seitenposition anzeigt. Eine Unternavigation (entwickelt als eigene Erweiterung in Contao) bietet direkten Zugriff auf die jeweiligen Unterseiten der aktuellen Seite, und eine Aufklappnavigation ermöglicht es den Nutzern, die gesamte Struktur der Webseite zu durchsuchen.

Für die Tablet- und Mobilansicht haben wir eine klassische Burger-Navigation implementiert, um eine benutzerfreundliche Bedienung auf allen Geräten sicherzustellen.

Homepage

Die Startseite der GISW wurde mit besonderer Aufmerksamkeit gestaltet, da sie der zentrale Anlaufpunkt für Schüler, Eltern und Interessierte ist. Wir entwickelten eigenständige Themenblöcke, die sich nahtlos in das Gesamtkonzept einfügen und die wichtigsten Informationen übersichtlich präsentieren.

Diese modularen Elemente wurden so gestaltet, dass sie auch auf den Unterseiten flexibel wiederverwendet werden können. Diese Element sind Teil unseres umfassenden Design Systems.

GISW - Design System

Das Designsystem der GISW-Webseite wurde entwickelt, um langfristig lebendig und flexibel zu bleiben, und ermöglicht eine sinnvolle Anpassung je nach Situation und Bedarf. Es umfasst eine Vielzahl von vordefinierten Elementen wie Teaserformaten, Blöcken und Slidern. Diese Elemente wurden im Vorfeld sowohl in Design als auch Technik vorbereitet, um eine schnelle und reibungslose Umsetzung neuer Inhalte und Funktionen zu gewährleisten.

Im Rahmen des Designsystems haben wir die grundlegenden Styling-Informationen definiert, darunter Schriftarten, Schriftgrößen, Abstände, Farben und weitere Basisinformationen. Diese Grundlagen ermöglichten es uns, während der Umsetzung sowie in der Zukunft schnell neue Elemente und Formate zu entwickeln, ohne das konsistente Erscheinungsbild der Webseite zu gefährden.

Das Design wurde mit unserem Designtool Figma visuell umgesetzt. Alle festgelegten Designregeln wurden in die technischen SCSS-Dateien integriert, um sicherzustellen, dass Design und Funktionalität gut miteinander harmonieren und konsistent umgesetzt werden können.

Performance

Schnelle Ladezeiten sind entscheidend für ein optimales Nutzererlebnis und tragen maßgeblich zur Zufriedenheit der Besucher bei. Wir haben daher umfangreiche technische Optimierungen durchgeführt, um die Ladegeschwindigkeit zu maximieren und die Web Vitals zu optimieren.

Unser Fokus lag auf der Reduzierung der Ladezeiten durch Komprimierung von Bildern, Minimierung von CSS und JavaScript sowie der Implementierung von Browser-Caching und Lazy-Loading-Techniken. Diese Maßnahmen stellen sicher, dass Inhalte schnell geladen werden und die Website reibungslos funktioniert.

Die Einhaltung der Web Vitals, wie z.B. Core Web Vitals (LCP, FID, CLS), war ein zentraler Bestandteil unserer Optimierungsstrategie. Unser Ziel bei der Performance-Optimierung war es, sicherzustellen, dass die Website nicht nur schnell und effizient lädt, sondern auch eine großartige Benutzererfahrung bietet, die den aktuellen Standards entspricht.

Eigene Contao Extension

Aufgrund der komplexen Navigationsstruktur war die Entwicklung einer effizienten Lösung eine wesentliche Herausforderung. Um die Benutzerfreundlichkeit trotz der Vielzahl von Unterpunkten zu verbessern, entschieden wir uns für die Implementierung einer speziellen Unternavigation in Contao. Diese zeigt nur die direkten Unterseiten der aktuellen Seite an, was die Navigation intuitiver gestaltet.

Die Standard-Unternavigation in Contao zeigt normalerweise alle weiteren Ebenen an, was in unserem Fall zu unübersichtlich gewesen wäre. Daher haben wir im Rahmen dieses Projekts eine eigene Contao-Erweiterung entwickelt.

Diese maßgeschneiderte Lösung zeigt nur die jeweiligen Navigationspunkte der aktuellen Seite an. Sie ist leicht im Code und genau auf unsere Bedürfnisse zugeschnitten. Hier der Link zu unserer Contao Extension:
Contao-Subnavigation-Bundle