GIS Washington D.C. ReDesign
Die Deutsche Internationale Schule Washington D.C. (GISW) ist eine private Schule, an der über 500 Jungen und Mädchen gemeinsam vom Kindergarten bis zur 12. Klasse unterrichtet werden. Als bereits langjähriger Kunde, haben wir den Onlineauftritt technisch und optisch von Grund auf neu gestaltet und überarbeitet.
www.giswashington.org
Projektbeschreibung
Ein Redesign ist immer eine Herausforderung. Bevor das neue Schuljahr startet sollte das neue Design stehen. Zusätzlich zur Neugestaltung der Webseite haben wir auch das technische Fundament der Seite komplett neu aufgestellt. Das Content Management System hat sich mit Contao sehr bewährt und wurde auch für das Redesign weiter verwendet, allerdings haben wir den technologischen Aufbau komplett modernisiert und neu aufgebaut und ein komplettes Design System geplant und umgesetzt.
Gemeinsam mit unserem Kunden erarbeiteten wir ein Zeitplan mit dem wichtigsten Meilensteinen um den gewünschten Termin auch zu halten. Gerade die Meilensteine für Abnahmen und Testzeitpunkte waren hier sehr hilfreich und halfen bei der Orientierung.
Navigationskonzept
Eine Besondere Herausforderung ist die sehr umfangreiche Navigationsstruktur der Webseite. In einem Prozess haben wir den Aufbau der Navigation in Abstimmung mit unserem Kunden vereinfacht und neu strukturiert. Wir wollten Themen besser bündeln und dem User ermöglich Inhalte einfacher zu finden. Der Prozess der Verschlankung der Navigation ist aber erst am Anfang und wollen gerne noch weiter vereinfachen. Allerdings wollten den Besuchern eine nicht all zu Große Hürde der Umgewöhnung zusätzlich zum neuem Design aufbürden.
Die Navigationsstruktur im ersten Schritt war daher allerdings trotzdem zum Teil auf 4 Unterebenen verteilt. Wir haben uns entschlossen um die Nutzerführung zu erleichtern mehrere Bedienelemente zu verwenden. Zusätzlich zur großen Hauptnavigation, die ein bestimmten Teilbereich mit Bild besonders hervorheben kann, gibt es auf allen Unterseiten eine Breadcrumb (Pfad zur aktuellen Seitenposition), eine Unternavigation (eigene Erweiterung in Contao) mit den jeweiligen Unterseite der aktuellen Seite und eine Möglichkeit eine Aufklappnavigation auf Seite die komplette Struktur zu navigieren. Auf Tablet und mobilen Größe haben wir eine klassische Burger Navigation verwendet.
Homepage
Besondere Aufmerksamkeit haben wir natürlich auf die Startseite gesetzt. Sie ist hier besonders Anlaufpunkt für Schüler, Eltern oder auch Interessierte. Wir entwickelten für die unterschiedlichen Themen auf der Startseite eigenständige Blöcke, die sich in das Gesamtkonzept eingliedern. Alle Elemente haben wir direkt so entwickelt, dass diese auf allen Unterseiten wiederverwendet werden könnten.
GISW - Design System
Die Webseite soll auch in Zukunft lebendig und flexibel bleiben, um sich je nach Situation und Bedarf sinnvoll anpassen zu können. Das neu entwickelte Designsystem unterstützt uns dabei mit einer Vielzahl von vordefinierten Elementen, wie z.B. Teaserformaten, Blöcken und Slidern. Diese Elemente wurden bereits im Vorfeld sowohl in Bezug auf das Design als auch die Technik vorbereitet, um die schnelle und problemlose Umsetzung neuer Inhalte und Funktionen zu erleichtern.
Im Designsystem haben wir auch die grundlegenden Styling-Informationen definiert, wie z.B. Schriftarten, Schriftgrößen, Abstände, Farben und viele weitere Basisinformationen. Dadurch konnten wir während der Umsetzung und auch im Anschluss schnell neue Elemente und Formate entwickeln, ohne das Erscheinungsbild der Webseite zu beeinträchtigen.
Das Design System haben wir mit unserem Designtool „Figma“ optisch umgesetzt und alle Informationen dazu in die technischen SCSS Strukturen überführt.
Eigene Contao Extension für die Unternavigation
Wie bei beim Navigationskonzept erwähnt war die Navigationsstruktur eine große Herausforderung. Um die Bedienung trotz vielen Unterpunkten so einfach wie möglich zu gestalten wollten wir eine Unternavigation einbinden, die nur die Unterseite darstellt die zur aktuellen Seite passen. Da die standardmäßige Unternavigation in Contao auch immer die jeweiligen weiteren Ebenen anzeigt haben wir uns im Rahmen des Projektes entschlossen dafür eine eigene Erweiterung zu programmieren.
Diese zeigt nur die jeweiligen Navigationspunkte der aktuellen Seite an. Sehr schlank vom Code und löst genau unser Bedienungsproblem. Hier der Link zu unserer Contao Extension: Contao-Subnavigation-Bundle
Finales Design
Nach einer umfangreichen Test- und Abnahmephase vom Design und auch von der Umsetzung konnten wir das Projekt wie geplant vor Beginn des neuen Schuljahrs an den Start bringen.
