Website Relaunch für das Leibniz-Institut für Wissensmedien
Etablierung nutzenden-zentrierter Perspektiven und gemeinsame Prozessgestaltung für einen erfolgreichen Relaunch.
Zeitraum
2023, 6 Monate
Rahmen
Novamondo GmbH
Skills
Pitch-Entwurf und -Präsentation
Workshop-Konzeption und -Moderation
Informationsarchitektur
Visuelles Design
Software
AdobeXD
Miro
Intro
Über das Projekt
Das Leibniz-Institut für Wissensmedien befasst sich in seiner Forschung mit dem Wissenserwerb und -austausch über digitale Medien. Das zentrale Kommunikationsmedium des Instituts ist deren Website, welche den letzten Relaunch 2015 hatte und im Rahmen dieses Projektes überarbeitet werden sollte.
Als Lead UX/UI-Designerin arbeitete ich zentral an an allen Prozessen des Projektverlaufs mit: vom Pitch und der anfänglichen Recherchephase, über die Konzeption und Strukturierung der neuen Website hinweg, bis hin zum visuellen Redesign und der Zusammenarbeit mit der Entwicklung.
Ziel
Anforderungen an den Relaunch und den Pitch
Das Projekt wurde klassisch über einen Pitch vergeben. Die formulierten Anforderungen an das Projekt waren folgende:
🟧 Visuell Überarbeitung
Modernisierung des Designs im Rahmen des bestehenden Corporate Designs.
🙂 Nutzendenzentrierung
Neustrukturierung der Inhalte anhand der zentralen Zielgruppen und barrierearme Umsetzung.
💻 Technische Umsetzung
Ablösung des bisherigen Systems und mehr Flexibilität in der Nutzung der Website-Elemente.
Zusammen mit meiner Kollegin aus der Programmierung entwickelte ich den Pitch-Entwurf. Das Ergebnis stellte ich zusammen mit dem Project Owner bei der erfolgreichen Pitch-Präsentation im Institut vor.
Entwicklung des Entwurfs für die Pitch-Präsentation.
Recherche und Analyse
Websitestruktur und Inhalte des Institutes verstehen
Zum Einstieg in das Projekt startete ich mit einer Bestandaufnahme des bestehenden Webiste: Mit Hilfe eines Crawling-Tools erstellte eine Sitemap, um den aktuellen Aufbau des Website abzubilden. Eine visuelle Sammlung der vorhandenen Design-Elemente und Seitentypen, half mir dabei die Inhalte der Website sowie die Anforderungen an das zukünftige System von Design-Elementen zu verstehen. Zusätzlich führte ich eine Benchmarking-Recherche durch, um mich mit anderen Websites aus der Branche und deren Best Practices vertraut zu machen.
Sitemap der Website vor dem Relaunch und ausschnitte aus den Recherche-Dokumenten.
Workshop - Anforderungen der Nutzer:innen identifizieren
Ein gemeinsames Verständnis für die Nutzenden-Perspektive
Dem IWM-Team war es wichtig, bei dem Relaunch trotz eng bemessenem Budget immer die Perspektive der Nutzenden einzubeziehen. Da dieser Rahmen nicht die Möglichkeit zur Arbeit mit externen Personen bot, konzipierte ich einen zweitägigen Workshop mit diesen zwei Zielen:
👥 Durch eine interdisziplinäre Gruppe an Teilnehmenden möglichst viele Perspektiven einbeziehen. Dazu waren Wissenschaftler:innen, Stundentische Hilfskräfte und Personen aus der Verwaltung und der technischen Umsetzung anwesend.
💡Unsere Projektpartner:innen für die Perspektive der Nutzenden zu sensibilisieren, um im weiteren Projektverlauf ein gemeinsames Verständnis davon zu haben, warum welche Entscheidungen getroffen wurden.
Ergebnisse einer Warm-Up-Übung (links), die Teilnehmenden arbeiten an der User Story Map (rechts).
-
In dem Workshop durchliefen wir die folgenden Schritte:
_ Personas für die zentralen Zielgruppen entwickeln
_ User Stories zu den Personas formulieren
_ User Story Mapping
_ Anforderungen des Instituts sammeln
_ Anforderungen der User und des Instituts zusammenführen
_ Sitemap entwickeln
Der Workshop war ein voller Erfolg; durch den gemeinsamen Prozess mit viel Diskussion und Knobel-Arbeit waren sich die Teilnehmenden mit den Ergebnissen der Workshops einig. Die am Ende entwicklte Sitemap blieb, bis auf Detail-Anpassungen, so stehen.
--
Von der User Story Map zur Sitemap
Prototyping
Low fidelity Wireframes
Gemeinsam mit dem Instituts-Team bestimmten wir die Seiten, die als Wireframes angelegt werden sollten. Tabellarisch hielten wir fest, welche Inhalte auf den jeweiligen Seiten untergebracht werden sollten.
Prototyping
Eine übersichtliche Navigation
Ganz zentral für den Relaunch war eine neue Navigation für die Website, da das alte Menü keine Übersicht über die Inhalte der Website bot.
Die sichtbaren Menüpunkte bei der Desktop-Ansicht zeigen Besucher:innen sofort, dass es sich um ein Forschungsinstitut handelt. Das geräumige Drop-Down-Menü gibt Platz für weitere Seiten und Teaser zu zentralen Inhalten.
Design
Überarbeitung des Interface Designs
Zum Website Relaunch gehörte neben einer neuen Informationsarchitektur auch eine Überarbeitung des Corporate Designs. Hierbei sollten die zentralen Merkmal, wie Farbe, Schrift, Logo und Stilmittel bestehen bleiben und moderner interpretiert werden.
Ausblick
Zusammenarbeit mit der Entwicklung
Während des Prototypung-Prozesses stand ich stets im Austausch mit den umsetzenden Entwicklern. In kurzen Meetings besprachen wir beispielsweise, wie sich bestimmte Elemente responsiv verhalten oder wie die Interaktion mit dem Menü und der Suche funktioniert.
Ausblick
Umsetzungsstand und Implementierung
Die Website befindet sich aktuell in der technischen Umsetzung und wird vor dem Live-Gang noch in Hinblick auf Design und Interaktion geprüft und überarbeitet.
Rückblick
Takeaways und Learnings
🤝 Gemeinsam schneller zum Ziel
Im Rahmen des Workshops verständigten wir uns auf die Art unserer Zusammenarbeit. Das möchte ich hier hervorheben, da die gemeinsame Prozessgestaltung ein zentrales Mittel zum Erfolg dieses Projektes war.
Wir verständigten uns auf ein gemeinsam genutztes Kommunikationstool, die Art der Lieferung von Ergebnissen und des Feedbacks, die (Un-)Regelmäßigkeit von Meetings und dem Ablauf, sowie Zuständigkeiten im Allgemeinen.
So arbeiteten das Team aus dem Institut und wir von Agenturseite uns stetig zu und konnten das Projekt im angesetzten Zeitrahmen und mit Zufriedenheit auf Kund:innen- und Agentur-Seite durchführen.
