www.lowcodeapp.de - Beschleunigung der digitalen Transformation mit Open Source Low-Code Development.

Konzeption und UI/UX Design für das Europass-Infoportal

Die Nationale Agentur Bildung für Europa beim Bundesinstitut für Berufsbildung (NaBIBB) besteht seit dem Jahr 2000 und ist für das EU-Programm Erasmus+ im Bereich Berufsbildung und Erwachsenenbildung in Deutschland zuständig. Mit der finanziellen Unterstützung des Bundesministeriums für Bildung und Forschung arbeitet sie im Auftrag dieser ebenfalls an zahlreichen europabezogenen und internationalen Aufgaben. Ein wichtiger Service der angeboten wird, ist der Europass. Dieser ist eines der bedeutendsten europäischen Instrumente für mehr Transparenz von Qualifikationen und Kompetenzen. Mit dessen Hilfe wird das grenzüberschreitende Lernen und Arbeiten in Europa gefördert. Bürgerinnen und Bürger können mit Hilfe des Europasses ihre Qualifikationen und Kompetenzen transparent darstellen und sich damit besser auf dem nationalen und europäischen Arbeitsmarkt präsentieren. Das neue Europass-Portal www.europass.eu bietet seit Juli 2020 viele Funktionen und und Services rund um Bewerbung und Jobsuche. Das Nationale Europass Center in der NA beim BIBB informiert mit der Website www.europass-info.de zum Europass-Portal und den Europass-Dokumenten.

Leistungen

  • Konzeption und Strategie, 
  • UI/UX-Design, 
  • CMS Entwicklung, 
  • Barrierefreies Webdesign, 
  • Responsive Webdesign, 
  • Systembetrieb & Support

Projektdauer

11/2020-04/2022

Projektergebnis

EU-Bürger:innen, die sich innerhalb der EU länderübergreifend bewerben oder weiterbilden wollen sowie Personalverantwortliche, Bildungs- und Berufsberater:innen wie auch Lehrkräfte und Bildungseinrichtungen profitieren mit dem Livegang die neue Website des Nationalen Europass Centers www.europass-info.de von einer umfangreichen Informations-Plattform auf TYPO3-Basis. Dabei waren wir von Anfang an, von CMS Consulting, über Konzeption und UI/UX-Design-Erstellung bis hin zur CMS Entwicklung mit TYPO3 in das Projekt integriert. Durch die Orientierung am Corporate Design sowie an gängigen Printmaterialien zu Europass kann dieser medienübergreifend mit einem einheitlichen Look & Feel auftreten. Sowohl ein Barrierefreies Webdesign als auch Responsivität wurden bereits in den ersten Schritten des Design-Prozesses mitgedacht und auch später bei der technischen Realisierung berücksichtigt. Als Partner für Systembetrieb & Support betreuen und begleiten wir auch zukünftig die Wartung und Weiterentwicklung des Webangebots.

Website der EUROPASS NaBIBB Website in verschiedenen Bildschirmgrößen

Ziel des Projektes

Der Auftrag gliederte sich in zwei Teilprojekte. Ziel war es zum einen, im Rahmen einer Kreativkonzeption zum Redesign für die Website des Nationalen Europass Centers Deutschland www.europass-info.de ein neues UI/UX-Design zu entwickeln. Zum anderen galt es, das konzipierte Design in das bestehende TYPO3-System zu implementieren. Als konzeptionelle Herausforderung galt es zudem, neben der optischen Überarbeitung, die historisch gewachsene Seite einer strukturellen Neuausrichtung zu unterziehen, um den Nutzer:Innen eine einfachere Navigation zu ermöglichen. Weiteres Ziel war, die Barrierefreiheit des Webangebots zu verbessern und damit von Beginn an gestalterisch und technisch zu berücksichtigen. 

Projektvorgehen

Zunächst war es unsere Aufgabe, ein erstes Grobkonzept für das neue UI/UX-Design zu erstellen, welches im späteren Verlauf gemeinsam mit dem Kunden weiter verfeinert werden sollte. Dies geschah auf Basis eines von einer externen Agentur neu erstellten Corporate Designs sowie unter Bezugnahme auf bestehende Kommunikationsmittel, was insbesondere verschiedene Printprodukte zum Europass-Portal sowie der EU-Plattform für Bewerbung und Jobsuche www.europass.eu beinhaltete. Dabei wurden die Anforderungen an ein barrierefreies Webdesign und Responsive Design bereits in der Konzeption berücksichtigt. Innerhalb mehrerer gemeinsamer Workshops fand zusammen mit dem Auftraggeber ein intensiver Austausch zum erstellten Grobkonzept statt, in dem weitere Wünsche und Ideen des Kunden eingebracht wurden. 

Auf Grundlage der gemeinsamen Workshop-Ergebnisse erstellten wir erste Wireframes, welche die gewünschten Strukturen und Funktionalitäten visualisierten. Während eines iterativen Prozesses aus Feedback und Weiterentwicklung wurden diese sukzessive an die spezifischen Kundenwünsche angepasst und um zusätzliche Funktionalitäten und Elemente ergänzt. Damit gingen Vorschläge zur Überarbeitung der Seitenarchitektur und Navigationsstruktur einher, die bestehende inhaltlich-strukturelle Herausforderungen adressierten. Neue Gestaltungselemente sowie die überarbeitete Seiten- und Navigationsstruktur wurden innerhalb verschiedener Seitentypen angewendet. Wichtige Seitentypen waren dabei u. a. die Startseite, der News-Bereich, FAQs sowie die sogenannten Passgeschichten, in welchem Erfahrungsberichte von Nutzer:innen des Europass-Services vorgestellt werden. Schließlich wurde auch das bestehende Shop-System visuell überarbeitet, in welchem Publikationen rund um den Europass bestellt, aber auch sofort heruntergeladen werden können.

Nach Fertigstellung der finalen Wireframes arbeiteten wir das User Interface gestalterisch aus. Auch hier dienten weiterhin die Designelemente aus dem Corporate Design sowie den bestehenden Printmaterialien als Vorlage. Gerade Letzteres brachte einige Herausforderungen mit sich, da die Anforderungen für Print und Web sich naturgemäß erheblich unterscheiden. So sollten unkonventionelle Shapes für Bilder und Textboxen realisiert werden, welche insbesondere in Hinblick auf die Notwendigkeit eines Responsive Designs für verschiedene Bildschirmgrößen funktionieren und gleichzeitig flexibel genug für unterschiedlich ausgeprägte Inhalte sein mussten. Um den Anforderungen an ein barrierefreies Webdesign gerecht zu werden, wurden in diesem Schritt finale Festlegungen für Farbverläufe und Farbkontraste getroffen. Alle erarbeiteten Elemente und Seitentypen dokumentierten wir in sämtlichen Ausprägungen sowie mit allen Möglichkeiten des Interaktionsverhaltens in einem Web-Styleguide.

Anschließend fertigten wir valide und semantisch korrekte HTML5- und CSS3-Prototypen für die wichtigsten Seitentypen und Elemente an.  Diese integrierten wir in die bestehende TYPO3-Portallandschaft der NaBIBB, welche wir als technischer Dienstleister bereits seit mehreren Jahren begleiten. Im Zuge dieser Integration führten wir eine entwicklungsbegleitende BITV-Selbstbewertung durch, um die digitale Barrierefreiheit auch auf technischer Ebene sicherzustellen. 

Wir unterstützen ihre Projekte

Schreiben Sie uns, wir rufen sie zurück!

Rückrufwunsch

Hiermit gebe ich mein Einverständnis für die Verarbeitung meiner persönlichen Daten. Die Datenschutzerklärung habe ich gelesen.

Mit * gekennzeichnete Felder sind Pflichtfelder