Digitale Lösung für die Berufliche Orientierung von 5,1 Millionen Schülern: berufswahlapp vereint Barrierefreiheit und attraktives Design

Drei Jugendliche lachen gemeinsam und wirken entspannt – Symbol für positive Nutzererfahrungen mit der berufswahlapp. Links im Bild das Logo des German Brand Award 2022 in Gold.

Das Projekt: Vom analogen Berufswahlpass zur digitalen berufswahlapp

Welchen Karriereweg wir nach dem Schulabschluss einschlagen, gehört ohne Zweifel zu den ganz großen Lebensentscheidungen. Um Schülerinnen und Schüler dabei zu unterstützen, wurde 2003 der Berufswahlpass eingeführt – ein Instrument zur Beruflichen Orientierung, mit dem junge Menschen ihre Stärken und Interessen entdecken, sich über Berufe informieren und ihre berufliche Zukunft gezielt planen können.

Den Berufswahlpass gab es lange Zeit nur analog, als Ordner mit umfangreichen Unterlagen in Papierform. Dieses Format entsprach nicht mehr den Erwartungen der Zielgruppe. Bund und Länder starteten daher ein Gemeinschaftsprojekt, das den in die Jahre gekommenen Berufswahlpass in eine mobile App transformieren sollte – die berufswahlapp. SUNZINET begleitete das Projekt als Digitalisierungspartner.

Bettina Stark-Watzinger, 2021 bis 2024 Bundesministerin für Bildung und Forschung, zur berufswahlapp:

 

  • Technologie

    Go/Golang

    Vue.js 

    MinIO

    Keycloak

  • KPI

    Entwickelt für 5,1 Millionen Nutzerinnen und Nutzer

  • year-icon
    Projektbeteiligte

    Projektkonsortium aus acht Bundesländern, Bundes­agentur für Arbeit, Bundesinstitut für Berufsbildung, Bun­desarbeitsgemeinschaft Berufswahlpass, G.I.B. GmbH

Anforderungen an die berufswahlapp: Die App soll inklusiv, kultursensibel, klischeefrei und ganzheitlich sein,

Das Ziel: Eine inklusive App, die motiviert und Spaß macht

Mit der berufswahlapp sollten Schülerinnen und Schülern ein modernes, digitales Tool an die Hand bekommen, das ihnen die Berufswahl erleichtert. Die Vision: Eine klischeefreie, inklusive und kultursensible Plattform, die den unterschiedlichen Bedürfnissen junger Menschen schulformübergreifend in ganz Deutschland gerecht wird.

Dabei standen vier Dinge im Fokus:

  • Motivation und Markenidentität: Es galt, eine attraktive, inspirierende Marke zu schaffen, die sowohl Schülerinnen und Schüler als auch Lehrer und Entscheider anspricht.
  • Skalierbarkeit und Performance: Die Zielgruppe umfasste potenziell bis zu 5,1 Millionen (Schülerinnen und Schüler sowie Lehrkräfte) – folglich musste die App stabil laufen und skalierbar sein.
  • Zusammenarbeit von Stakeholdern: Es war wichtig, die Anforderungen von Bildungseinrichtungen, Politik und Forschung unter einen Hut zu bringen.
  • Digitale Barrierefreiheit: Die App sollte niemanden ausschließen. Damit auch Menschen mit Beeinträchtigung sie nutzen können, war eine barrierefreie Gestaltung nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) erforderlich.

Lösung & Strategie: Umfangreiche Tests für das beste Ergebnis

Um diese Ziele zu erreichen, wählten wir einen nutzerzentrierten Ansatz. Die App wurde in drei Phasen mit über 6.000 Schülerinnen und Schüler und Lehrkräften getestet und optimiert. Wir konzentrierten uns auf folgende Aspekte:

  • Gamification & Engagement: Wir setzten auf spielerische Elemente, um die Nutzererfahrung interaktiv und motivierend zu gestalten, zum Beispiel durch die Freischaltung von Erfolgen oder klasseninterne Rankings.
  • Inklusives Design: Für einen barrierefreien Zugriff auf die App testeten wir sie intensiv mit verschiedenen Nutzergruppen, z. B. mit sehbeeinträchtigten Schülern.
  • Skalierbare Technologie: Eine leistungsfähige, zukunftssichere Architektur auf Basis von Go/Golang, Vue.js, MinIO und Keycloak sollte sicherstellen, dass die App auch bei einer hohen Nutzerzahl zuverlässig funktioniert.
  • Datenschutz: Damit alle Schüler die App bedenkenlos nutzen können, hatten Sicherheit und Datenschutz bei der Entwicklung höchste Priorität.
Die berufswahlapp ist auf einem Iphone geöffnet und die Anzeige zeigt die gesamte Website während des scrollen.

Design & User Experience: Digitale Barrierefreiheit im Fokus

Eine besondere Herausforderung war es, die berufswahlapp so zu gestalten, dass auch Schülerinnen und Schüler mit Beeinträchtigung sie problemlos nutzen können. Digitale Barrierefreiheit war nicht nur Anspruch des Projekts, sondern gesetzlich vorgeschrieben – insgesamt gab es über 100 Prüfpunkte zu beachten. Einige Beispiele:

  • Ein Smartphone und ein Laptop zeigen die Benutzeroberfläche der „berufswahlapp“ auf einem hellen Hintergrund. Die App ist auf beiden Geräten geöffnet und bietet Funktionen zur Berufsorientierung. Daneben befindet sich ein großes, rundes Element mit einem Farbverlauf in Blau und Pink, auf dem „Kompatibilität mit Screenreadern“ steht. Ein Lautsprechersymbol daneben verdeutlicht, dass die App barrierefrei und für Screenreader optimiert ist.

    Alle interaktiven Elemente sind so gestaltet, dass sie von Screenreadern erfasst werden können – insbesondere für sehbehinderte Nutzerinnen und Nutzer ein wichtiges Kriterium.

  • Zwei App-Screens zeigen interaktive Elemente der „berufswahlapp“. Links ist eine Lückentext-Aufgabe mit mehreren Drop-Down-Menüs zu sehen, die eine Auswahl ohne Wischgesten ermöglichen. Rechts wird eine Berufsorientierungsaufgabe dargestellt, bei der Nutzer*innen mit Pfeiltasten durch Bilder von Berufen navigieren und diese mit „Like“ oder „Dislike“ bewerten können. Ein großes, farblich verlaufendes Element mit der Aufschrift „Navigation mit Pfeiltasten & Drop-Down-Menü“ hebt hervor, dass die App barrierefrei gestaltet ist und sich auch ohne Touch-Gesten bedienen lässt.

    Für Menschen mit motorischen Beeinträchtigungen ist die typische Touch-Navigation von Apps oft eine Herausforderung. Als Alternative zur Swipe-Bewegung bietet die berufswahlapp daher Pfeiltasten, die sich auch per Tastatur oder Sprachsteuerung betätigen lassen. Drag-and-Drop-Funktionalitäten wurden zudem durch Dropdown-Menüs ersetzt.

  • Ein Screenshot der „berufswahlapp“ im Kontrastmodus mit einer schwarz-gelben Farbgestaltung. Die Benutzeroberfläche zeigt eine gut lesbare, kontrastreiche Darstellung mit gelben Texten und Symbolen auf schwarzem Hintergrund. Links befindet sich ein Menü mit verschiedenen Navigationspunkten, während der Hauptbereich zentrale Funktionen wie „Mein Weg“, „Reflexion“ und „Dateien“ enthält. Unten links hebt ein großer gelber Kreis mit der Aufschrift „Kontrastmodus in Schwarz-Gelb“ die barrierefreie Anpassungsmöglichkeit der App hervor.
    Serifenlose Schriften und ein spezieller Kontrastmodus verbessern die Lesbarkeit von Texten. In Tests stellte sich heraus, dass die Farbkombination Schwarz-Gelb im Kontrastmodus als angenehmer empfunden wird als die herkömmliche Schwarz-Weiß-Kombination.
  • Zwei Videovorschauen zeigen barrierefreie Erklärvideos der „berufswahlapp“. In der oberen Vorschau erklärt eine Frau in schwarzer Kleidung die App in Gebärdensprache. Daneben ist ein Symbol für Barrierefreiheit abgebildet. Die untere Vorschau zeigt eine App-Demonstration mit englischen Untertiteln. Ein großes, farblich verlaufendes Element mit der Aufschrift „Videos mit Untertiteln, in Gebärdensprache & in Leichter Sprache“ betont die barrierefreien Videooptionen. Ein Play-Symbol signalisiert, dass die Inhalte als Videos abrufbar sind.
    Wichtige Erklärvideos rund um die berufswahlapp werden barrierefrei zur Verfügung gestellt. So gibt es Versionen mit Untertiteln, in Gebärdensprache und in Leichter Sprache sowie für Sehbeeinträchtigte.
  • Das Logo der „berufswahlapp“ wird zentral dargestellt. Es besteht aus einem stilisierten, neutral gehaltenen Personen-Icon mit Farbverlauf in Blau und Pink. Darunter steht der App-Name „berufswahlapp“ in einer modernen Schrift, gefolgt vom Slogan „Dein Weg. Deine Chance.“. Im Hintergrund befinden sich quadratische Farbflächen in Blau- und Pinktönen. Ein rundes, farblich verlaufendes Element mit der Aufschrift „Neutral gestaltetes Logo und Farbwahl“ hebt hervor, dass das Design bewusst inklusiv und diversitätsfreundlich gestaltet wurde.

    Neben möglichen Beeinträchtigungen galt es auch, unterschiedliche soziale und kulturelle Hintergründe der Schüler zu beachten – beispielsweise mit einem genderneutralen Design sowie einem neutral gestalteten Logo.

Ein Smartphone und ein Laptop zeigen die Benutzeroberfläche der „berufswahlapp“ auf einem hellen Hintergrund. Die App ist auf beiden Geräten geöffnet und bietet Funktionen zur Berufsorientierung. Daneben befindet sich ein großes, rundes Element mit einem Farbverlauf in Blau und Pink, auf dem „Kompatibilität mit Screenreadern“ steht. Ein Lautsprechersymbol daneben verdeutlicht, dass die App barrierefrei und für Screenreader optimiert ist.
Zwei App-Screens zeigen interaktive Elemente der „berufswahlapp“. Links ist eine Lückentext-Aufgabe mit mehreren Drop-Down-Menüs zu sehen, die eine Auswahl ohne Wischgesten ermöglichen. Rechts wird eine Berufsorientierungsaufgabe dargestellt, bei der Nutzer*innen mit Pfeiltasten durch Bilder von Berufen navigieren und diese mit „Like“ oder „Dislike“ bewerten können. Ein großes, farblich verlaufendes Element mit der Aufschrift „Navigation mit Pfeiltasten & Drop-Down-Menü“ hebt hervor, dass die App barrierefrei gestaltet ist und sich auch ohne Touch-Gesten bedienen lässt.
Ein Screenshot der „berufswahlapp“ im Kontrastmodus mit einer schwarz-gelben Farbgestaltung. Die Benutzeroberfläche zeigt eine gut lesbare, kontrastreiche Darstellung mit gelben Texten und Symbolen auf schwarzem Hintergrund. Links befindet sich ein Menü mit verschiedenen Navigationspunkten, während der Hauptbereich zentrale Funktionen wie „Mein Weg“, „Reflexion“ und „Dateien“ enthält. Unten links hebt ein großer gelber Kreis mit der Aufschrift „Kontrastmodus in Schwarz-Gelb“ die barrierefreie Anpassungsmöglichkeit der App hervor.
Zwei Videovorschauen zeigen barrierefreie Erklärvideos der „berufswahlapp“. In der oberen Vorschau erklärt eine Frau in schwarzer Kleidung die App in Gebärdensprache. Daneben ist ein Symbol für Barrierefreiheit abgebildet. Die untere Vorschau zeigt eine App-Demonstration mit englischen Untertiteln. Ein großes, farblich verlaufendes Element mit der Aufschrift „Videos mit Untertiteln, in Gebärdensprache & in Leichter Sprache“ betont die barrierefreien Videooptionen. Ein Play-Symbol signalisiert, dass die Inhalte als Videos abrufbar sind.
Das Logo der „berufswahlapp“ wird zentral dargestellt. Es besteht aus einem stilisierten, neutral gehaltenen Personen-Icon mit Farbverlauf in Blau und Pink. Darunter steht der App-Name „berufswahlapp“ in einer modernen Schrift, gefolgt vom Slogan „Dein Weg. Deine Chance.“. Im Hintergrund befinden sich quadratische Farbflächen in Blau- und Pinktönen. Ein rundes, farblich verlaufendes Element mit der Aufschrift „Neutral gestaltetes Logo und Farbwahl“ hebt hervor, dass das Design bewusst inklusiv und diversitätsfreundlich gestaltet wurde.

Rollout & Erfolge: App holt German Brand Award und BITV-Zertifizierung

Die berufswahlapp ging 2022 in den Live-Betrieb und wird inzwischen in sechs Bundesländern (Baden-Württemberg, Berlin, Hamburg, Hessen, Niedersachsen und Nordrhein-Westfalen) genutzt – zwei planen eine Einführung in den kommenden Monaten. 

Die Lösung entspricht den Erwartungen junger Menschen, erfüllt höchste Anforderungen an Sicherheit und Datenschutz, und berücksichtigt die große Diversität in der Zielgruppe.

Zwei besondere Erfolge, welche die App feiern durfte, sind:

  • Auszeichnung mit dem German Brand Award: Die berufswahlapp holte Gold in der Kategorie „Excellence in Brand Strategy and Creation / Brand Communication – Web and Mobile". Die Jury lobte insbesondere das moderne, zielgruppengerechte Design und die klare, motivierende sowie barrierefreie Nutzererfahrung.
  • Zertifizierung nach BITV 2.0: Die App geht speziell auf die Bedürfnisse von Nutzern mit körperlichen und kognitiven Beeinträchtigungen ein. Sie erfüllt über 100 Prüfpunkte für digitale Barrierefreiheit und wurde entsprechend nach BITV 2.0 zertifiziert.
Drei Smartphones mit geöffneter Benutzeroberfläche der „berufswahlapp“ auf hellem Hintergrund. Die Bildschirme zeigen verschiedene Funktionen der App: „Meine Potenziale“ mit Statements und Suchfunktion, „Reflexion“ mit einer Pinnwand und der Möglichkeit, Statements zu erstellen, sowie den Bereich „Story erstellen“, in dem Nutzende Text, Fotos, Videos oder Audiodateien hinzufügen können. Um die Smartphones herum sind pinkfarbene Icons mit Begriffen wie „Mein Weg“, „Aufgaben“, „Reflexion“, „Statement“, „Pinnwand“ und „Story“ platziert.


Begründung der Jury des German Brand Awards:

"Die »berufswahlapp« ist mehr als nur eine berufliche Orientierungshilfe für Schüler/-innen – sie ist eine ganzheitliche Marke, die aus der Lebenswelt der jungen Menschen heraus konsequent entwickelt wurde und ein hohes Identifikationspotenzial hat. Die pädagogisch wertvolle App überzeugt mit einem modernen und zielgruppengerechten Design sowie einem ansprechenden und nachvollziehbaren Storytelling durch Illustrationen und Gamification. Sie verspricht eine klare, motivierende und barrierefreie User Experience. Ein toll gemachtes, hilfreiches Marken-Tool mit hohem Sympathiefaktor."  (german-brand-award.com)

UX-Designerin & Creative Consultant Linnea Erlich nimmt German Brand Award Gold für die berufswahlapp entgegen und lächelt in die Kamera.

Sie möchten mit uns eine barrierefreie Lösung umsetzen?

Lassen Sie uns persönlich zu Ihrem Digitalisierungsprojekt sprechen!
Einfach das Formular ausfüllen und wir melden uns werktags innerhalb von 24 Stunden bei Ihnen.