Berufswahl-Portal für Jugendliche, Eltern und Unternehmen
Unser Team hat für den Kanton Zürich ein benutzerfreundliches Berufswahl-Portal entwickelt, das junge Menschen gezielt bei der Berufsorientierung unterstützt. Die Plattform kombiniert interaktive Elemente, personalisierte Inhalte und eine moderne Headless-Architektur zu einer zukunftsfähigen Lösung.
Schüler:innen, Eltern, Lehrpersonen und Berufsberater:innen erhalten über die Web-Applikation einen einfachen, strukturierten Zugang zu relevanten Informationen und digitalen Tools, abgestimmt auf ihre jeweiligen Bedürfnisse im Berufswahlprozess.
Projekt
Ein innovatives Berufswahl-Portal für alle
Gemeinsam mit der Bildungsdirektion des Kantons Zürich haben wir ein zentrales Berufswahlportal konzipiert und umgesetzt. Die Plattform richtet sich nicht mehr nur an Schulen, sondern ist bewusst auch ausserhalb des Unterrichtskontexts zugänglich – für Jugendliche, Eltern, Lehrpersonen sowie Berufsberater:innen.
Technisch basiert das Portal auf einer Headless-Architektur. Inhalte werden über verschiedene Schnittstellen aus unterschiedlichen Datenquellen bezogen, zentral aufbereitet und im Frontend nutzerfreundlich ausgespielt. Das sorgt für stets aktuelle Inhalte, hohe Skalierbarkeit und eine deutlich vereinfachte Pflege.
Firmen im Fokus
In einer späteren Projektphase wurde das Portal um einen eigenen Bereich für Unternehmen erweitert. Firmen können sich dort präsentieren und ihre Lehrstellen sichtbar machen – direkt dort, wo sich täglich tausende Jugendliche über Berufe und Ausbildungsmöglichkeiten informieren.
Neben Lehrstellen werden auch Schnupperlehren angezeigt. Interessierte Jugendliche können sich mit ihrem Login direkt über das entsprechende Profil für eine Schnupperlehre anmelden, was den Prozess für beide Seiten deutlich vereinfacht.
Berufswahl-Blog und Radar
Ergänzend zum Kernangebot bietet das Portal einen Berufswahl-Blog mit Tipps, Orientierungshilfen und Vorlagen rund um Berufswahl, Schnupperlehre und Lehrstellensuche.
Mit dem interaktiven Berufe-Radar können Jugendliche ihre Interessen spielerisch erkunden und passende Berufsfelder entdecken. Zusätzlich haben wir Übersichten und Entscheidungshilfen entwickelt, unter anderem zur Wahl der passenden Maturitätsschule. Abgerundet wird das Angebot durch gezielte Optimierungen in der Benutzerführung, die eine klare Orientierung und einfache Nutzung sicherstellen.
Ausgangslage
Seit rund fünf Jahren unterstützt eine Berufswahl-App Jugendliche im Kanton Zürich bei der Berufsorientierung. Die Anwendung war ursprünglich ausschliesslich als native Mobile-App im Apple App Store und im Google Play Store verfügbar und konnte auf Smartphones oder Tablets genutzt werden.
Schüler:innen der 2. Sekundarstufe erhielten darin grundlegende Informationen zu Berufen und Schnupperlehren, während Jugendliche ab der 3. Oberstufe zusätzlich Betriebe mit offenen Lehrstellen entdecken konnten. Die App bildete damit über mehrere Jahre eine solide Grundlage für die digitale Unterstützung im Berufswahlprozess.
Mit der Zeit haben sich jedoch die Anforderungen deutlich weiterentwickelt. Lehrpersonen wollten Inhalte der App aktiv im Unterricht «Berufswahl» einsetzen. Gleichzeitig gilt in vielen Klassenzimmern ein generelles Handyverbot, wodurch eine mobile Lösung allein nicht mehr ausreichend war.
Gesucht war deshalb eine Desktop-Version, die auf Schulcomputern genutzt werden kann. Zusätzlich sollten die Inhalte für weitere Zielgruppen geöffnet werden: Lehrpersonen, Unterstützungspersonen wie Eltern sowie Berufsberater:innen und Mentor:innen sollten ebenfalls Zugriff erhalten, um Jugendliche ganzheitlich im Berufswahlprozess zu begleiten.
Vor diesem Hintergrund beauftragte die Bildungsdirektion des Kantons Zürich uns damit, die bestehende Berufswahl-App strategisch und technisch weiterzuentwickeln.
Web-App Entwicklung
Progressive Web-App für Desktop und Mobile
Das Berufswahl-Portal wurde als Progressive Web-App (PWA) umgesetzt und ist öffentlich über berufswahl.zh.ch zugänglich. Die Anwendung ist sowohl für Desktop-Computer als auch für mobile Geräte optimiert und kann flexibel im Schulkontext, zu Hause oder unterwegs genutzt werden.
Als Web-Applikation vereint die PWA die Vorteile einer klassischen Website mit der Performance und Nutzererfahrung einer App. Sie bietet eine klare, leicht verständliche Benutzeroberfläche und ermöglicht Jugendlichen, Eltern, Lehrpersonen sowie Berufsberater:innen einen einfachen Zugang zu Informationen rund um Berufe, Lehrstellen und Schnupperlehren.
React.js Development
Für das Frontend des Berufswahl-Portals setzten wir auf React.js. Die komponentenbasierte Architektur ermöglicht eine klare Struktur, hohe Wiederverwendbarkeit und eine konsistente Benutzeroberfläche über alle Bereiche hinweg.
React.js bietet eine sehr schnelle Darstellung und eignet sich besonders für interaktive Anwendungen mit dynamischen Inhalten. In Kombination mit der Headless-Architektur konnten wir eine performante, gut skalierbare Web-Applikation umsetzen, die auch bei wachsendem Funktionsumfang stabil und wartbar bleibt. Die breite Community und das ausgereifte Ökosystem stellen zudem eine langfristige Weiterentwicklung sicher.
Single-Page-Applications
Das Berufswahl-Portal wurde als Single Page Application umgesetzt. Dadurch bleiben Seitenwechsel für die Nutzer:innen praktisch unsichtbar, Inhalte werden dynamisch nachgeladen und die Anwendung fühlt sich schnell und flüssig an.
Gerade für Jugendliche, die sich durch viele Inhalte, Filter und interaktive Elemente bewegen, ist diese Form der Navigation entscheidend. Die optimierten Ladezeiten und die konsistente Darstellung unterstützen eine intuitive Nutzung und tragen wesentlich zu einer positiven User Experience bei.
Progressive-Web-Apps
Die Umsetzung als Progressive Web App ermöglicht eine plattformübergreifende Nutzung ohne separate App-Store-Veröffentlichungen. Das Portal kann direkt im Browser genutzt und bei Bedarf auf dem Gerät installiert werden – unabhängig von Betriebssystem oder Gerätetyp.
Dank schneller Ladezeiten, geringem Speicherbedarf und automatischen Updates bleibt die Anwendung jederzeit aktuell und wartungsarm. Die PWA eignet sich damit ideal für den Einsatz im Schulumfeld sowie für den öffentlichen Zugang und stellt sicher, dass alle Nutzer:innen stets mit der gleichen, aktuellen Version arbeiten.
Highlights
Neues Konzept für Benutzerführung und Informationsarchitektur
Für das Berufswahlportal wurde ein neues Konzept für Benutzerführung und Informationsarchitektur entwickelt. Ziel war es, die unterschiedlichen Bedürfnisse der Zielgruppen – Jugendliche, Eltern, Lehrpersonen und Berufsberater:innen – gezielt zu berücksichtigen und Inhalte entsprechend zu priorisieren.
Jede Nutzergruppe erhält genau jene Informationen, die für sie im jeweiligen Kontext am relevantesten sind. Die überarbeitete Informationsarchitektur sorgt für eine klare Struktur, kurze Wege und eine intuitive Navigation. So finden Nutzer:innen schneller die gewünschten Inhalte und können sich effizient im Portal orientieren.
Cleveres Registrierungs- und Anmeldekonzept
Für Jugendliche und Lehrpersonen wurde ein durchdachtes Registrierungs- und Anmeldekonzept entwickelt, das den Einstieg ins Portal vereinfacht und gleichzeitig die Basis für personalisierte Inhalte schafft.
Nach der Anmeldung erhalten registrierte Nutzer:innen Inhalte, die auf ihre Interessen und Testergebnisse abgestimmt sind. Dazu gehören passende Berufe, Betriebe für Schnupperlehren sowie relevante Informationsveranstaltungen. Ergänzend wird die zuständige Berufsberatungsperson des jeweiligen Schulhauses angezeigt, um eine direkte und niederschwellige Kontaktaufnahme zu ermöglichen.
Personalisierte Inhalte
Nach der Registrierung erhalten Jugendliche personalisierte Inhalte, die sie gezielt im Berufswahlprozess unterstützen. Dazu gehört unter anderem die Anzeige der für das jeweilige Schulhaus zuständigen Berufsberatungsperson. Die Kontaktaufnahme für ein Beratungsgespräch ist direkt und niederschwellig per Klick möglich.
Basierend auf den Ergebnissen des Interessenstests werden zudem passende Berufe, Betriebe für Schnupperlehren sowie relevante Informationsveranstaltungen angezeigt. Die Inhalte orientieren sich an den identifizierten Interessen und Berufsfeldern und helfen den Jugendlichen, fundierte nächste Schritte zu planen.
Firmenprofile
Unternehmen haben die Möglichkeit, sich kostenlos mit einem eigenen Firmenprofil auf dem Berufswahl-Portal zu präsentieren und gezielt Lehrstellenmarketing zu betreiben. Damit werden sie genau dort sichtbar, wo sich täglich tausende Jugendliche über Berufe, Lehrstellen und Ausbildungsmöglichkeiten informieren.
Über ihr Firmenprofil können Unternehmen:
- ein individuelles Profil mit relevanten Informationen erstellen
- offene Lehrstellen und Schnupperlehren ausschreiben
- eigene Informations- und Berufsveranstaltungen publizieren
So entsteht eine direkte Verbindung zwischen Jugendlichen auf Lehrstellensuche und Unternehmen, die Nachwuchs ausbilden möchten.
Schnuppern leicht gemacht
Im Bereich «Schnuppern» werden verfügbare Schnupperlehren übersichtlich dargestellt, inklusive der aktuellen Anzahl offener Schnupperstellen. So erhalten Jugendliche auf einen Blick eine klare Orientierung.
Dank ihres Logins können Schüler:innen direkt mit den Unternehmen in Kontakt treten und unkompliziert eine Schnupperlehre anfragen oder vereinbaren. Der vereinfachte Prozess senkt Hürden und unterstützt Jugendliche dabei, frühzeitig praktische Einblicke in ihre Wunschberufe zu gewinnen.
Berufe spielerisch entdecken
Der Berufe-Radar ist mehr als eine reine Informationsquelle. Er begleitet Jugendliche spielerisch bei der Entdeckung ihrer beruflichen Interessen und unterstützt sie dabei, erste Präferenzen zu entwickeln.
Durch interaktive Elemente können verschiedene Berufsfelder auf unterhaltsame Weise erkundet werden. Jede Interaktion wird im persönlichen Profil gespeichert und fliesst in ein individuelles Ranking ein.
Persönliches Interessen-Ranking
Aus den gesammelten Interaktionen entsteht ein persönliches Ranking der Top-3-Berufsfelder. Dieses hilft Jugendlichen, sich gezielt auf jene Bereiche zu fokussieren, die ihren Interessen besonders entsprechen, und bildet eine fundierte Grundlage für weitere Schritte im Berufswahlprozess.
Tipps und Orientierung im Berufswahl-Blog
Ergänzend zum Berufe-Radar bietet der Berufswahl-Blog praxisnahe Inhalte und Orientierungshilfen rund um die Berufswahl. Jugendliche finden dort inspirierende Einblicke, konkrete Tipps und hilfreiche Vorlagen.
Das Angebot reicht von Bewerbungstipps und Interviewstrategien bis hin zu Checklisten und Lebenslauf-Vorlagen. So unterstützt der Blog Jugendliche dabei, sich strukturiert und selbstständig auf den Einstieg in die Berufswelt vorzubereiten.
Headless-Architektur
Automatische Anbindung über Schnittstellen
Das Berufswahl-Portal bündelt eine Vielzahl von Informationen zu Berufen, Betrieben, Schnupper- und Lehrstellen sowie Informationsveranstaltungen mit Anmeldemöglichkeiten. Diese Daten liegen bereits in unterschiedlichen bestehenden Datenbanken vor.
Die Applikation wurde deshalb so konzipiert, dass sie relevante Inhalte periodisch über mehrere Schnittstellen abruft und zentral in einem eigenen Backend (WordPress) speichert. Dadurch müssen nur wenige ergänzende Inhalte manuell im CMS gepflegt werden.
Externe Daten bleiben automatisch aktuell und erfordern keine zusätzliche Bewirtschaftung. Das reduziert den Pflegeaufwand erheblich und stellt gleichzeitig eine hohe Datenqualität sicher.
Nachhaltig, skalierbar und zukunftssicher
Dank der gewählten Headless-Architektur ist der Inhalt konsequent von der Darstellung im Frontend entkoppelt. Das Backend kann unabhängig weiterentwickelt werden, während das Frontend flexibel auf unterschiedliche Anforderungen oder Designs reagieren kann – aktuell abgestimmt auf das Corporate Design des Kantons Zürich.
Diese Architektur schafft die Grundlage für einen langfristigen Ausbau des Portals und die einfache Integration weiterer Themen und Funktionen rund um die Berufswahl.
Mehr zur technischen Umsetzung in diesem Artikel:
Headless, aber nicht kopflos – mit WordPress zur modularen Web App
Technologien
WordPress Development
Für das Backend des Berufswahl-Portals setzten wir auf WordPress als Headless-CMS. Die Plattform dient als zentrale Content- und Datenbasis und ermöglicht eine effiziente Pflege redaktioneller Inhalte sowie die Verwaltung der über Schnittstellen angebundenen Daten.
Durch die massgeschneiderte WordPress-Entwicklung konnten individuelle Anforderungen abgebildet, Prozesse automatisiert und gleichzeitig eine benutzerfreundliche Redaktionsumgebung geschaffen werden. WordPress bietet dabei eine stabile, erweiterbare Grundlage und stellt die langfristige Wartbarkeit und Weiterentwicklung des Portals sicher.
Schnittstellen & Migrationen
Für den Betrieb des Berufswahl-Portals wurden verschiedene bestehende Datenquellen über Schnittstellen angebunden. So können Informationen zu Berufen, Betrieben, Schnupper- und Lehrstellen sowie Veranstaltungen automatisiert übernommen und aktuell gehalten werden.
Die Migration relevanter Inhalte und die Integration externer Systeme erfolgten schrittweise und ohne Unterbruch des laufenden Betriebs. Dadurch konnten bestehende Daten weiterverwendet, manuelle Pflege reduziert und ein konsistenter Datenstand über alle Systeme hinweg sichergestellt werden.
Headless WordPress
Im Berufswahl-Portal kommt WordPress als Headless-CMS zum Einsatz. Das Backend ist vollständig von der Darstellung im Frontend entkoppelt und dient als zentrale Daten- und Content-Plattform.
Diese Trennung ermöglicht eine hohe Flexibilität in der Weiterentwicklung, bessere Performance im Frontend sowie individuelle Gestaltungsmöglichkeiten – unabhängig von Design- oder Technologieentscheidungen. Headless WordPress bildet damit eine robuste und zukunftssichere Grundlage für den langfristigen Betrieb und Ausbau des Portals.
Responsive Design & Mobile-First-Ansatz
Das Berufswahl-Portal wurde konsequent nach dem Mobile-First-Prinzip entwickelt und anschliessend für grössere Bildschirmformate optimiert. Damit ist sichergestellt, dass Inhalte auf Smartphones, Tablets und Desktop-Computern gleichermassen verständlich, zugänglich und einfach nutzbar sind.
Gerade im schulischen Umfeld und im privaten Gebrauch wechseln Nutzer:innen häufig zwischen verschiedenen Geräten. Das responsive Design stellt sicher, dass sich Layout, Navigation und Interaktionen flexibel an unterschiedliche Bildschirmgrössen anpassen und eine konsistente User Experience über alle Plattformen hinweg gewährleistet ist.
Neue User Journey
Die neue User Journey begleitet Jugendliche durch den gesamten Berufswahlprozess und passt sich flexibel an unterschiedliche Nutzungskontexte an – im Unterricht, zu Hause und unterwegs.
Im Unterricht
Im Unterricht werden die Jugendlichen durch ihre Lehrperson mit dem Berufswahl-Portal vertraut gemacht. Im Klassenzimmer, jeweils an einem Desktop-Computer, erhalten sie eine Einführung in den Berufswahl-Fahrplan.
Bereits im Schulzimmer können die Jugendlichen den Interessenstest durchführen. Damit wird der erste Schritt zur Personalisierung früh im Prozess gesetzt und bildet die Grundlage für individuelle Inhalte.
Zu Hause
Auf Basis der Testergebnisse können sich die Jugendlichen zu Hause vertieft mit passenden Berufsfeldern auseinandersetzen. Die vorgeschlagenen Berufe lassen sich gemeinsam mit Eltern oder Mentor:innen besprechen und weiter eingrenzen.
Unterwegs
Das Portal ist unabhängig vom Gerät und jederzeit über den Browser zugänglich. So können sich Jugendliche auch unterwegs über Berufe, anstehende Veranstaltungen sowie Schnupper– und Lehrstellen informieren und sich direkt anmelden.
Sicheres und flexibles Login-Konzept
Für den Zugriff auf personalisierte Inhalte verfügt das Berufswahl-Portal über ein sicheres und benutzerfreundliches Login-System. Die Authentifizierung ist so konzipiert, dass sie unterschiedliche Sicherheitsanforderungen und organisatorische Vorgaben berücksichtigen kann.
Je nach Einsatzkontext und kantonalen Vorgaben lassen sich verschiedene Authentifizierungsverfahren umsetzen – von klassischen Benutzerkonten mit Passwort bis hin zu erweiterten Sicherheitsmechanismen wie Zwei-Faktor-Authentifizierung (2FA). Damit bleibt das Portal flexibel und zukunftsfähig, ohne Kompromisse bei der Sicherheit einzugehen.
Neu für Lehrpersonen
Seit Beginn des Schuljahres im Sommer 2019 steht das Berufswahl-Portal Lehrpersonen im Kanton Zürich als ergänzendes digitales Werkzeug für den Berufswahlunterricht zur Verfügung. Es unterstützt den Unterricht strukturiert und praxisnah und wird seither aktiv eingesetzt.
Das Portal wurde von Lehrpersonen sehr positiv aufgenommen – insbesondere hinsichtlich Benutzerführung, Inhalt und didaktischer Einbindung in den Unterricht.
«Das Portal für die Klassen ist echt genial! Optisch, inhaltlich und strukturell einfach super!»
Lehrperson biz Urdorf
Zusammenarbeit auf Augenhöhe
Die enge und partnerschaftliche Zusammenarbeit mit der Bildungsdirektion des Kantons Zürich war ein zentraler Erfolgsfaktor des Projekts. Transparenz, klare Kommunikation und ein gemeinsames Verständnis für Qualität und Nachhaltigkeit prägten den gesamten Projektverlauf.
Bildungsdirektion AJB
Kanton Zürich
Transparent & Fair
«Ich schätze die transparente und faire Arbeitsweise von required enorm!»
Nächste Case Study
Ringier Advertising Website + Webapp
Mit 73 Brands, über 100 Werbeformaten und Millionen von Nutzer:innen bietet Ringier Advertising eine beeindruckende Vielfalt für Werbekund:innen.
Unser Ziel war es, eine benutzerfreundliche Lösung für die Vermarktung von Medientiteln und Marktplätzen zu schaffen. In enger Zusammenarbeit mit dem Ringier Advertising Team entstand eine innovative, auf WordPress basierende Website.
Weitere Projekte
Hier noch ein paar weitere Kundenprojekte.
-
Weiterlesen: Online Magazin für KulturschaffendeOnline Magazin für Kulturschaffende
Ein einzigartiges Online Magazin mit zahlreichen Animationen und aufwändigen Styles. Das brandneue Pro Helvetia Magazin – V/A – Various Artists – ist ein wahres Erlebnis.
-
Weiterlesen: NZZ: Neues Startseiten – KonzeptNZZ: Neues Startseiten – Konzept
-
Weiterlesen: Onboarding und Support-Website für HINOnboarding und Support-Website für HIN
-
Weiterlesen: Branding, Design und Entwicklung einer Job-PlattformBranding, Design und Entwicklung einer Job-Plattform
-
Weiterlesen: Online-Bibliothek für Ringier AdvertisingOnline-Bibliothek für Ringier Advertising
-
Weiterlesen: Design & Entwicklung der how.fm Landing PagesDesign & Entwicklung der how.fm Landing Pages
-
Weiterlesen: Neue Websites mit frischem Design für autotechnikNeue Websites mit frischem Design für autotechnik