Pädagogische Hochschule Heidelberg
UX / UI und redaktioneller Support für den Website-Relaunch

• Zielgruppen & Anforderungen: Basierend auf den Zielgruppen der Hochschule wurden Personas entwickelt, um die Anforderungen der verschiedenen Nutzergruppen zu identifizieren und zu priorisieren.
• Content-Analyse und neue Struktur: Der bestehende Inhalt wurde analysiert und in einem Card-Sorting Prozess neu strukturiert. Die neue Struktur spiegelt die Ausrichtung der Hochschule wider und bietet den Nutzenden eine leicht erfassbare Informationsarchitektur mit vielfältigen Einstiegen zu zentralen Inhalten und Funktionen.
• Intuitive Navigation: Von der neuen Struktur ausgehend entwickelten wir ein barrierefreies Navigationsmodell, das die Schwerpunktthemen der Hochschule betont und direkten Zugang zu sämtlichen Inhalten erlaubt.  
• Seitentypen und Wireframes: Zunächst wurden die Anforderungen an die erforderlichen Seitentypen definiert und priorisiert. Jeder Seitentyp wurde als Wireframe dargestellt und abgestimmt. Die verwendeten Content-und Funktions-Elemente können so direkt in ihrem Zusammenspiel, sowohl in der Desktop-, wie auch in der Smartphone-Ansicht, überprüft und optimiert werden.

• Visuelle Positionierung: Für eine erste Verortung, wo die PHHD sich im Feld ihrer Mitbewerbenden sieht, erstellten wir eine Matrix mit Good Practice Beispielen aus dem Bildungsbereich. Guter Ausgangspunkt für den hochschulinternen Diskurs und für uns eine erste Orientierung zu den Designpräferenzen des Kunden.
• Designlinie: Wir präsentierten eine initiale Designlinie anhand von Styletiles, die im Geiste des Atomic Design Ansatzes Atome, Moleküle und beispielhafte Momente des Designansatzes in Anwendung zeigen. Das Design greift das CD der PHHD auf, spiegelt den Charakter der Hochschule wider und wurde auf Basis des Kundenfeedbacks in einem iterativen Prozess verfeinert.
• Im Zuge des User Interface (UI) Designs wurden die Grundlagen der Gestaltung auf die Wireframes aller Seitentypen und Elemente in beiden viewports angewendet.
• In einer modular aufgebauten „Elemente Bibliothek“ wurden sämtliche Design-Element mit ihren Varianten und Stati übersichtlich für beide viewports dargestellt. Eine praktische Grundlage für die technische Umsetzung und auch eine schnelle Übersicht der Möglichkeiten in der redaktionellen Pflege der Website.
• Die in der Konzeption als Wireframes dargestellten Seitentypen wurden als visueller Proof of Concept in beiden viewports gestaltet und stehen Programmierung und Redaktion als anschauliche Vorlage zur Verfügung.
• Alle Designs wurden nach WCAG-Richtlinien entwickelt und für eine optimale Nutzung auf mobilen Geräten optimiert.
• Sämtliche Assets wurden kommentiert in Figma an den technischen Umsetzer übergeben. Im Zuge der technischen Umsetzung fanden auf kurzem Wegen punktuelle Abstimmungen zwischen Design und Technik statt.

An Hochschulen ist es üblich, einen großen Kreis redaktionsberechtigter Mitarbeitender zu haben. Um dennoch eine gemeinsame Stimme in der Redaktion zu finden, wurden verschiedene Maßnahmen zur Unterstützung der Redaktion vorbereitet:

• Direkt im neuen CMS wurde ein Schreibleitfaden angelegt, der alle Redaktionsberechtigten mit den wichtigsten Guidelines, den Do’s und Don‘ts des neuen Auftritts vertraut macht. Hierzu konnten wir einen Bereich über die SEO gerechte Aufbereitung von Inhalten beisteuern.
• Die im Konzept- und Designprozess angelegten Beispielseiten wurden im CMS umgesetzt und stehen der Redaktion als praktische Copy & Paste Vorlagen zur Verfügung.
• Wichtige Seiten der bisherigen Website wurden von uns im Rahmen einer Content-Analyse betrachtet und Vorschläge zur Optimierung gemacht.
• Im Nachgang der redaktionellen Pflege fand eine punktuelle redaktionelle Qualitätssicherung statt - zentrale Seiten des neuen Auftritts wurden von uns im Hinblick auf Zielgruppenansprache betrachtet und Vorschläge zur Optimierung gemacht. 

…freuen wir uns, dass wir die PHHD sowohl in der Konzeptions- und Designphase, wie auch in der Redaktionsphase dabei unterstützen konnten, ihren eigenen Ausdruck zu finden und ihr Angebot zeitgemäß und nutzerorientiert an die relevanten Zielgruppen zu kommunizieren.

Die Umsetzung in TYPO3 erfolgte durch Innohub.