myhermes.de Redesign
Wie Hermes mit Bootstrap und CSS die myhermes.de Webseite im Look & Feel optimierte ohne grundlegende Änderungen an den Templates der bestehenden Systeme vornehmen zu müssen.
Die Herausforderung
Im Rahmen eines Update Projekts sollte das visuelle Erscheinungsbild der myhermes.de Webseite optimiert und an das aktuelle Kampagnen Design angepasst werden. Es galt durch eine Reduktion der Elemente, dass Nutzerinterface zu vereinfachen und für eine bessere Lesbarkeit den Inhalten mehr Platz einzuräumen. Die Umsetzung sollte möglichst wenige Entwickler Ressourcen binden und keinen Webseiten Relaunch erfordern.
UNSER ANSATZ
Hermes setzt seit dem letzten Relaunch konsequent auf Atomic Design und führt ein eigenes Patternlab für die Entwicklung der Portale. Ein Patternlab enthält alle Komponenten und Module der Webseite als Bausteine.
Auf Basis des Patternlabs kannten wir den kompletten Umfang der myhermes.de Webseite und konnten so in der Gestaltung unabhängig von der aktuellen Webseite mit den vielen Inhalten, jedes einzelne Modul neu designen, abstimmen und umsetzen.
Bei der Umsetzung legten wir großen Wert zwischen HTML und CSS Änderungen im Gestaltungsprozess zu unterscheiden. Denn jede CSS Änderung konnte einfach übernommen werden, während HTML Änderungen aufwendig in den Templates implementiert werden mussten.
Große Änderungen testete Hermes auf Basis von High-Fidelity Prototypen, die wir erstellt haben, bevor die Änderungen aufwendig implementiert wurden.
Das Ergebnis
Mit Hilfe des Patternlabs konnten wir auf HTML Änderungen in weiten Teilen des Projekts verzichten. So konnten die meisten Layout-Änderungen mit geringen Aufwand durch den Austausch der CSS Dateien in das System eingespielt werden.
Durch die Reduktion der Elemente im Kopfbereich der Seite, lies sich die Benutzerfreundlichkeit deutlich optimieren und ein zeitgemäßes Erscheinungsbild umsetzen.
Besonders die Prototypen haben im Projekt geholfen, größere Änderungen vorab zu validieren und so wertvolle Ressourcen einzusparen.
