Digital Experience beim VCI

Entwicklung des User-Experience-Konzepts

Der VCI beauftragte Materna zunächst damit, ein User-Experience-Konzept für den Online-Auftritt zu entwickeln, das als Leitfaden für kommende Entwicklungsstufen des Relaunches dienen sollte. Das entwickelte Konzept vermittelt die Attribute Zuverlässigkeit, Vertrauen, Glaubwürdigkeit, Innovation, Flexibilität und Dynamik.

Materna setzte das User-Experience-Konzept in mehreren Arbeitspaketen um, darunter die Informationsarchitektur sowie Konzept und Design. In einem Design-Benchmarking wurden themen- und nichtthemenverwandte Seiten analysiert und Design-Eigenschaften und Anmutungen identifiziert, die auch für den VCI in Frage kamen. Verglichen wurden zahlreiche Aspekte, die einen Einfluss auf die Ausgestaltung einer Webseite haben. Dazu gehörten der Einsatz von Schriftarten, Farbflächen, interaktiven Elementen, Bildgrößen, wiederkehrende Formsprachen, Farbwahl und Farbkontraste, typografische Elemente, Transparenzen, Weißraum, Dynamik in der Darstellung von Modulen, Hintergrundbilder und die Nutzung der Bildschirmbreite.

Die aufwendige Analyse mündete letztlich unter anderem in rund 70 neuen Seiten-, Absatz-, Format- und Linkvorlagen für die Ansichten Desktop, Tablet und Smartphone.

Auch der Content stand auf dem Prüfstand. Das neue User-Experience-Konzept sah vor, die Inhalte nach dem zu erwartenden Nutzerverhalten der Zielgruppen neu zu clustern und zum Teil auch zu überarbeiten. Hierbei war vor allem die Online-Redaktion des VCI gefordert, die Inhalte darauf auszurichten.

Des Weiteren sollten die Themen- und Navigationsstruktur vereinfacht und Einstiegs- bzw. Verteilseiten neu gestaltet werden. Zudem wurde die bisherige Marginal-Spalte aufgelöst, und deren Informationen wurden an anderen relevanten Stellen verortet. Textlängen und -struktur wurden optimiert und vielfach gekürzt, dafür mehr multimediale Inhalte und interaktive Elemente eingeführt. Linkfarben wurden vereinheitlicht, Farbkontraste und Schriftgrößen erhöht. Insgesamt gibt es jetzt mehr Icons und Bilder. Schließlich erhielt auch der mit einem Login geschützte Mitgliederbereich einen nutzerfreundlichen Umbau. Die mobile Ansicht stellt sich nun einspaltig dar.

Funktionaler Prototyp des Designs

Der Webauftritt des VCI basiert auf dem Content-Management-System FirstSpirit. Das Projektteam stand also vor der Aufgabe, das vorhandene Design und die bestehenden Funktionen an das neue User-Experience-Konzept anzupassen. Auch diese Aufgabe übertrug der VCI an Materna, deren Expert:innen die technische Realisierung des Frontend-Relaunchs übernahmen.

Das Materna-Team entwickelte einen funktionalen Prototyp, der das Design in allen Ansichten (Desktop, Tablet, Smartphone) mithilfe von HTML, CSS und JavaScript abbildet. Für die Umsetzung des neuen Designs wurden mehr als 240 technische Vorlagen im Content-Management-System angepasst bzw. neu erstellt. Schließlich implementierte Materna den Prototyp in FirstSpirit-Templates, sodass bei der Erstellung von neuen Seiten automatisch das neue Design angewendet wird. Mit dem neuen Design verbunden waren auch Anpassungen und Erweiterungen im CMS an redaktionellen Eingabemasken und Suchabfragen.

Eine Herausforderung im Projekt war, keine Inhalte zu migrieren, sondern den Content direkt nach dem Relaunch im neuen Design anzuzeigen. Dem Team gelang es, den Anteil redaktioneller Nacharbeit dabei so gering wie möglich zu halten. Nur bei komplett neu entwickelten Vorlagen ließ sich leichtes Korrigieren nicht ganz vermeiden. Da das neue UX-Design auf die bisherige Marginalspalte verzichtet, wird dieser Content jetzt im Hauptinhalts-Bereich unten ausgespielt. Hier können die Redakteure die Positionierung beeinflussen, falls es für eine bessere Nutzerführung hilfreich ist.

„Da sich der VCI parallel ein neues Corporate Design gegeben hatte, wollten wir auch online so schnell wie möglich auf das neue Look & Feel umstellen. Das haben wir im Realisierungsprojekt in nur knapp sechs Monaten gemeinsam mit Materna geschafft. Heute präsentieren wir unseren Webseiten-Besucherinnen und -Besuchern einen tollen und frischen Internet-Auftritt“,

freut sich Jenni Glaser.

Agiles Vorgehen

Materna und VCI haben den Relaunch agil in diversen Sprints umgesetzt. In jedem Sprint hat das Team ein bestimmtes Set an Vorlagen und funktionalen Anpassungen umgesetzt, abgenommen und in mehreren Iterationen live geschaltet. Einige Aufgaben wurden parallel realisiert, sodass das Projektteam während der Abnahmephase bestimmter Vorlagen bereits die Umsetzung anderer Vorlagen erarbeitete. Insgesamt erfolgte der technische Relaunch bis zum Live-Gang im Juli 2021 in den Schritten Setup und technische Konzeption, Implementierung des Design-Grundgerüsts sowie iterative Sprints.

Neben der „Haupt“-Webseite betreut der Verband weitere eigenständige Portale zu Spezialthemen, die das CMS FirstSpirit ebenfalls verwaltet. Zudem nutzen zwei Landesverbände des VCI das gemeinsame Redaktionssystem. Folglich erhielten auch diese Portale einen Frontend-Relaunch auf Basis des neuen Konzepts. Im nächsten Schritt planen Materna und VCI nun den Relaunch der kompletten technischen Infrastruktur, der bis zum Frühjahr 2022 abgeschlossen sein wird.

Mehr zu Digital Experience Zum VCI