Der Auftrag

Dataport AöR ist der IT-Dienstleister der öffentlichen Verwaltung für Hamburg, Schleswig-Holstein, Bremen und Sachsen-Anhalt. Wir haben die Unternehmenswebsite von Dataport strukturell, gestalterisch und technisch neu entwickelt. Wichtig beim Relaunch: die Anforderungen an die Barrierefreiheit nach WCAG und BITV 2.0.

Die Tat-Sachen

  • Content-Marketing-Strategie
  • Konzeption, UX-Design
  • Prototyping
  • Text
  • Infografiken
  • Frontend
  • TYPO3-Backend, CMS
  • Barrierefreiheit

Der Lösungsweg

Den Auftakt bildeten vier Workshops mit Teilnehmer*innen aus unterschiedlichen Fachabteilungen. Gemeinsam entwickelten wir Ziele und Anforderungen an Gestaltung und Funktionen, typische Zielgruppenvertreter*innen und deren Informationsbedürfnisse.

Wir führten parallel eine Umfrage auf der Website durch, um direktes Nutzer*innen-Feedback zu sammeln. Zusätzlich erstellten wir eine Wettbewerbs-Analyse und SEO-Analyse der aktuellen Website durch.

Das Ziel der Website war es, Dataports fachliche Expertise, die eigenen innovativen Lösungen und den damit verbundenen Mehrwert für die Gesellschaft zu transportieren. 

Ein Resultat der Workshops: Personas mit unterschiedlichen Informationsbedürfnissen

bunte User Story Map

Die Informationsbedürfnisse wurden in User-Stories überführt (Ausschnitt).

Gestaltung und Barrierefreiheit

Die Ergebnisse aus den Workshops, dem Feedback und der SEO-Analyse bündelten wir in einem umfassenden Konzept. Die Barrierefreiheit stand dabei besonders im Fokus. Das hatte zum Beispiel Auswirkungen auf die Farbgestaltung – kontrastreiche Designs mussten her.

So überarbeiteten wir ganz nebenbei das Corporate Design, das nicht nur barrierefrei ist und auch im Print-Bereich so funktioniert, sondern auch ein neues Farbspektrum, Formensprache als auch Illustrationsstil umfasst und definiert.

Mann in rotem Pullover erklärt etwas
9 verscheidene
Mann mit Bart trinkt Kaffee und ließt etwas
ein Ringdiagramm, eine Mindmap und drei Icons

Vom Wireframe zum Screendesign

Wireframes in grün
dataport Website mit Bildern

Das angepasste CD beweist vor allem, dass barrierefreies Design auf keinen Fall „langweilig“ oder statisch sein muss. Videoloops, animierte Hover-Effekte und Parallax-Elemente sorgen neben den neuen Design-Elementen für ein frisches, modernes Design, das so inklusiv wie möglich ist.

Auch die Interaktionen entwickelten wir unter dem Grundsatz der Barrierefreiheit. In mehreren Iterationsrunden perfektionierten wir die Anforderungen der WCAG und BITV 2.0. Dazu zählte die Umsetzung von Gebärdensprache-Videos, die ein spezialisierter Dienstleister für uns umsetzte.

Die Barrierefreiheit wurde geprüft: wir haben eine „gute Zugänglichkeit“ erreicht.

Text und Inhalte

Die Texte sollten zur neuen Website und der Struktur passen. Darum widmeten wir uns auch dem gesamten Text-Content aller Dataport Angebote und Produkte. Verständlich, informativ und auf den Punkt formuliert.

Gleichzeitig wird die Website aber auch umfangreicher – neuer Content und damit auch neue Texte mussten erstellt werden. Wir koordinierten ein Fotoshooting und recherchierten nach weiterem Bildmaterial für die Contentpflege.

Zu dem neuen Content gehören auch Infografiken, die natürlich ebenfalls den Anforderungen der Barrierefreiheit entsprechen mussten.

Zeitschrift mit zwei Seiten Text und Bildern
Grafik mit Personen, Bildschirm und rotem Kasten

Das breite Angebotsportfolio unterteilten wir gemäß des Konzepts in Performance- und Imageziele. Über Themenwelten („Digitale Verwaltung“, „Digitale Gesellschaft“, „Digitale Kommune“ und „Digitale Sicherheit“) gelangen Nutzer*innen zu den Inhalten, die für sie relevant sind.

Schulportal SH Grafik
Grafik zum Thema Email-Schutz
3 Baumstämme mit einer gemeinsamen Krone

Umsetzung der Website

Schon vor der Freigabe des Screendesigns prüften wir die technische Umsetzbarkeit des Designs und erstellten ein technisches Konzept, um die diversen neuen Funktionen optimal umsetzen zu können. Zu diesen Features zählten unter anderem eine plattformübergreifende Suche, diverse Schnittstellen für eine reibungslose Integration in interne Dataport-Prozesse, Produktseiten, ein Service-Flap und der Schnellzugriff auf relevante Inhalte.

Die plattformübergreifende Suche setzten wir mit Solr um und machen so auch Inhalte externer Dataport-Portale auffindbar. Die Schnittstellen sorgen zudem dafür, dass auf der Website erhobene Daten DSGVO-konform für die automatisierte Weiterverarbeitung aufbereitet werden und so beispielsweise Veranstaltungsanmeldungen effizient verwaltet werden.

Neue Produkte können auf OnePagern beworben werden. Diese OnePager können innerhalb des Systems durch Redakteur*innen aufgebaut werden.

Kurz vor Livegang führten wir Schulungen für diverse Redakteur*innen durch, die wiederum unterschiedliche Berechtigungen im System haben. Parallel bauten wir gemeinsam mit dem Kunden im eigenen Rechenzentrum die Produktiv- und Staging-Umgebung auf.

Suche auf einer Website
ein Mann sitzt vor einem Laptop am Strand

Weiter geht’s!

Beendet ist das Projekt jedoch noch nicht. Trotz Livegang führen wir jährlich Evaluations-Workshops durch, in denen Verbesserungspotentiale ausgelotet und Optimierungen beschlossen werden.

Das nötige Feedback für diese Workshops erhalten wir auch durch Befragungen, sowohl internen als auch externen direkt auf der Website. Aufwändige Analysen diverser Kennzahlen liefern weitere Anhaltspunkte für mögliche Optimierungen.

Evaluation mit vielen bunten Feldern
ein ausgeschalteter Computer Bildschirm und ein ausgeschaltetes Handy
dataport Website
Nachhaltigkeitsbaum bei dataport
Dataport Website
Website dataport mit Textfeldern und Grafiken
Website mit vielen Bildern
Die Webseite dataport.de war unser erstes Projekt mit New Communication. Neben der hohen Professionalität in der Projektsteuerung und allen anderen Aspekten hat mich beeindruckt, in welcher Tiefe es New Communication gelungen ist, ein Verständnis für Dataport zu gewinnen. Dieses Verständnis hat im Ergebnis zu einer hervorragenden Webseite geführt, die passgenau auf unsere Zielgruppen zugeschnitten ist.
Britta Heinrich, Pressesprecherin / Marketing und Public Relations Dataport AöR

Der Effekt

New Communication ist aktuell für die laufende Wartung und Pflege zuständig. Außerdem unterstützen wir Dataport bei der Einrichtung der Staging- und Produktivumgebung im kundeneigenen Rechenzentrum. Zugleich kann die Website nun auch als Plattform für gezielte Marketingkampagnen dienen.

Ich weiß mehr über dieses Projekt

Profilbild von Mandy Stegmann