Große Informationsarchitekturen für barrierearme Webseiten: TU Dortmund Relaunch

Von Pitch bis Launch:
Relaunch für die Technische Universität Dortmund

Die TU Dortmund hat beschlossen, ihre Webseiten komplett zu erneuern. Nachdem wir den Pitch gewonnen haben, haben wir ein barrierefreies und modernes Portal für Studierende, Mitarbeiter und Interessierte der TU Dortmund entwickelt.

www.tu-dortmund.de

Kunde
Technische Hochschule Dortmund

Agentur
mehrwert intermediale Agentur GmbH

Jahr
2018-2019

Aufgaben
User Experience Design
User Research
Workshop-Facilitating

Briefing

Die Technische Universität Dortmund (TU Dortmund) beauftragte ein Relaunch ihrer Webseite, um dem Anspruch einer modernen Hochschule gerecht zu werden und gleichzeitig eine barrierefreie Plattform zu schaffen.

Meine Rolle und Aufgaben

Vom Pitch bis zum Launch war ich maßgeblich an dem Projekt beteiligt und trug die Verantwortung für das UX-Design.
Dabei arbeitete ich eigenständig mit den Stakeholdern zusammen und führte Feldstudien und Interviews an der Hochschule durch. Aus den Ergebnissen der Interviews und Recherchen entwickelte ich Personas, die wir zur Entwicklung verschiedener Seitenbereiche nutzten.
Bereits zu Beginn führte ich ein umfassendes Audit der Inhalte durch, um eine neue, leichter verständliche Informationsarchitektur zu entwickeln.

Neben den User Flows, Wireframes und der Architektur entwickelte ich auch das Basisdesign, auf dessen Grundlage die Visual Designer*innen das finale Design erstellten.

    • Konzeption Pitch bis Launch
    • Facilitating von Workshops
    • Research und Feldstudien
    • Erstellung von Personas
    • Informationsarchitektur
    • Wireframes und Clickdummies
    • Designanmutungen
    • Erarbeitung von Barrierefreiheits-Anforderungen und Lösungen mit Dev und Design Team

Umfang

Als UX-Designerin war ich von Anfang an in das Projekt involviert und entwickelte das Grobkonzept für den Pitch.
Ein wichtiger Bestandteil des Projekts war die Zusammenarbeit mit den zahlreichen Stakeholdern und die Organisation von großen Workshops. Um die Bedürfnisse der verschiedenen Nutzergruppen zu berücksichtigen, wandten wir Design Thinking an und arbeiteten eng mit dem Development-Team zusammen, um die Umsetzung der Webseite zu gewährleisten.

Herausforderungen

Eine große Herausforderung war die Neustrukturierung der Webseite und die Schaffung einer barrierefreien Plattform. Durch meinen engen Kontakt mit den Stakeholdern konnte ich sicherstellen, dass die Bedürfnisse aller Nutzer berücksichtigt wurden. Ich habe Barrierefreiheits-Regeln aufgestellt, das Corporate Design überarbeitet und eng mit dem Development-Team zusammengearbeitet.
Es gab viele Altlasten in den Inhalten, die neu sortiert und zusammengefasst werden mussten.

Zielgruppen, Research und Analysen

Ich führte Feldstudien an der Hochschule durch, arbeitete mich durch Statistiken zur Generation der Schulabschließenden, interviewte Menschen an der Hochschule und entwickelte auf Basis der Ergebnisse Personas, die zur Entwicklung verschiedener Seitenbereiche genutzt wurden.

Wir unterteilten unsere Nutzerinnen in die Gruppe der Schülerinnen und Schüler, Studierenden, Ausländischen Studieninteressierten, Menschen die an der Hochschule arbeiten und externen Personen (Presse, Bewerber*innen).

Die Erstellung der Personas war ein wichtiger Bestandteil unseres Workflows, um die Bedürfnisse der verschiedenen Nutzergruppen zu berücksichtigen.
Diese Clusterung findet sich auch in der Navigation der neuen Hochschulseite wieder.

Zielgruppen

  • Schüler*innen
  • Studierende
  • Mitarbeiter*innen
  • interessierte Öffentlichkeit
  • Projektpartner*innen
  • Presse, internationales Publikum… 

Konzeption und Design Pattern für eine heterogene Zielgruppe und große Inhaltsmengen

Mit dem Projekt wurde ein Seitentsystem entwickelt, mit der die große Zahl an Websites (Ziel: 350+) administriert werden kann und dabei so viel Funktionen wie möglich in die Hand der jeweiligen Website-Verantwortlichen legt.
Trotz der großen Anzahl an Seiten muss auf jeder Unterseite und in jedem Bereich die Orientierung der Nutzer*innen und die Wiedererkennbarkeit gegeben sein.

Design- und Interaktionspattern geben Platz, Konsistenz und Wiedererkennbarkeit für verschiedenartige Inhalte

Ich habe skalierbare und anpassbare Seitentypen sowie Muster entwickelt, um verschiedene Inhalte abzubilden.
Die Seitentypen müssen eine Vielzahl von Inhalten fassen können, wie zum Beispiel Studiengangs- und Personenlisten, Textinhalte, Videos, Bilder und verschiedene Kombinationen.
Um die Breite des Materials zu berücksichtigen, habe ich mit dem Design- und Development-Team flexible Muster entwickelt. Diese können vom Content-Team wiederverwendet und angepasst werden.

Große Startseiten
Listenseiten, für Studiengänge etc
Landingspages einzelner Bereiche

Zugänge in Inhalte nach Zielgruppe und Use Case – hier finden alle, was sie suchen

Wir haben verschiedene Zugänge in die Inhalte entwickelt, die für Nutzer*innen mit unterschiedlichen Bedürfnissen und mentalen Modellen geschaffen wurden. Dazu gehören Zugänge nach Use Cases, prominente Darstellung aktueller und häufig besuchter Inhalte sowie eine schnelle Navigation zu häufig genutzten Funktionen.

Listen mit Filterung und Suchfunktionen für Studiengänge und andere komplexer Inhalte

Die ursprüngliche Liste der Studiengänge ist unübersichtlich und bereitet nicht viel Freude auf das Studium an der TU Dortmund. Anpassungen passieren nicht global und müssen somit immer an verschiedenen Stellen händisch gemacht werden.
Die Liste der Studiengänge nach der Überarbeitung ist filterbar, übersichtlich und kann vorgeeilter in anderen Bereichen eingebettet werden.

Vorher

Barrierearmut durch Implementierung in Design und Code von Anfang des Prozesses.

Eine Herausforderung bestand darin, die Barrierefreiheit der Webseite sicherzustellen. Wir haben dies von Anfang an in den Design- und Entwicklungsprozess integriert, um sicherzustellen, dass die Webseite für alle Nutzer zugänglich ist.

  • Umsetzung von WCAG-Standards
  • Implementierung von barrierearmen Design-Standards wie einer angemessenen Schriftgröße und starken Kontrasten
  • Barrierearme Funktionen wie klarem Feedback auf Nutzerinteraktionen und Aufbereitung für die Verwendung mit Screenreadern und Tastatur
  • Anbieten von Alternativtexten für Bilder und andere Medieninhalte
  • Testen durch entsprechende Mitglieder der Zielgruppe in enger Zusammenarbeit mit der TU Dortmund

Durch unsere Arbeit konnten wir sicherstellen, dass die neue Webseite der TU Dortmund modern und barrierefrei ist und den Bedürfnissen aller Nutzerinnen und Nutzer gerecht wird.

Die neue TU- Seite:
Responsive, mit auffindbaren Inhalten, filterbaren Studiengängen, neuem Content Management System und modernen Look.