Berufswahl-Portal für Jugendliche, Eltern und Unternehmen
Unser Team revolutioniert die Berufswahl im Kanton Zürich durch die Entwicklung eines benutzerfreundlichen Portals mit interaktiven Elementen, personalisierten Inhalten und „Headless“-Architektur.
Die Web-Applikation ermöglicht Schüler:innen, Eltern, Lehrer:innen und Berufsberater:innen einen einfachen Zugang zu Informationen und unterstützt so optimal bei der Berufswahl.
Projekt
Ein innovatives Berufswahl-Portal für Alle
Phase 1 + 2
Zusammen mit der Bildungsdirektion Kanton Zürich, haben wir ein Portal zum Thema Berufswahl konzipiert und umgesetzt, welches neu auch ausserhalb der Schule für ein breiteres Publikum wie Jugendliche, Eltern, Lehrpersonen sowie Berufsberater:innen zugänglich ist. Das Portal läuft technisch über ein sogenanntes „Headless“-CMS, das sich Daten aus unterschiedlichen Quellen über verschiedene Schnittstellen einholt, sodass die Inhalte stets aktuell und erst noch einfacher zu pflegen sind.
Firmen im Fokus
Phase 3
In der dritten Phase wurde ein Bereich für Firmen hinzugefügt, wo sie sich präsentieren können. Tausende Jugendliche informieren sich auf dem Berufswahl-Portal über Berufe und suchen nach Lehrstellen.
Zusätzlich werden Schnupper- und Lehrstellen angezeigt und Interessent:innen können mit ihrem Login direkt auf dem Schnupperlehre-Profil eine Anfrage stellen.
Berufswahl-Blog und Radar
Phase 4
Im Blog findet man Tipps und Vorlagen für die Berufswahl, Schnupperlehre und Lehrstelle. Zudem können Schnuppernde im Berufe-Radar ihren Traumberuf spielerisch herausfinden. Weiter erstellten wir eine Übersicht mit Informationen für Jugendliche um herauszufinden welche Maturitätsschule zu ihnen passt. Mehr dazu. Schlussendlich machten wir diverse Optimierungen für eine noch bessere Benutzerführung.
Ausgangslage
Seit 5 Jahren existiert die Berufswahl-App für Jugendliche auf Berufssuche im Kanton Zürich. Die App konnte bis anhin ausschliesslich im Apple App Store sowie im Google Play Store auf ein Mobile oder Tablet Device heruntergeladen werden.
Schüler der 2. Sekundarstufe erhielten über die Mobile-App jegliche Informationen zu Berufen bis hin zur Schnupperlehre und Schüler ab der 3. Oberstufe konnten sich darin über Betriebe mit Lehrstellen informieren.
Diese jeweils native Mobile-App war in den letzten Jahren eine gute Grundlage, um die Jugendlichen zu informieren. Jedoch sind die Anforderungen an die App in der Zwischenzeit gewachsen – unter anderem wollen Lehrpersonen Informationen daraus im Unterricht „Berufswahl“ einbauen.
Da im Klassenzimmer jedoch generelles „Handy-Verbot“ gilt, wurde eine Desktop Version der App gewünscht, die auf den Schulcomputern aufgerufen werden kann.
Weiter sollten die Informationen einem breiteren Publikum zugänglich gemacht werden: Die Zielgruppen Lehrpersonen, Eltern sowie Berufsberater bzw. Mentoren sollten ebenfalls Zugriff auf die Informationen haben, um die Jugendlichen im Berufswahl-Prozess möglichst gut unterstützen zu können.
Die Bildungsdirektion des Kanton Zürich hat uns daher beauftragt, die bestehende Berufswahl-App den neuen Bedürfnissen entsprechend auszubauen.
Web-App Entwicklung
Eine PWA und Web-Anwendung für Desktop, öffentlich zugänglich via berufswahl.zh.ch.
Das entwickelte Berufsorientierungsportal ist eine Progressive Web App (PWA), die sowohl als Webanwendung für Desktop-Computer als auch für mobile Geräte optimiert ist. Die PWA kann über die Website berufswahl.zh.ch aufgerufen werden und bietet eine benutzerfreundliche, leicht verständliche Oberfläche für Jugendliche, Eltern, Lehrer und Berufsberater, um Informationen über Berufe, Lehrstellen und Schnupperlehren zu finden und diese optimal zu nutzen.
React.js Development
React.js bietet schnelle Darstellung, modularen Code, Wiederverwendbarkeit von Komponenten, effiziente Leistung, einfache Skalierbarkeit und große Community-Unterstützung.
Single-Page-Applications
Single Page Applications sind schnell, nutzerfreundlich und interaktiv. Sie ermöglichen eine nahtlose Benutzererfahrung bei optimierten Ladezeiten und ansprechendem Design.
Progressive-Web-Apps
Progressive Web Apps bieten plattformübergreifende Kompatibilität, schnelle Ladezeiten, Offline-Funktionalität, geringen Speicherbedarf, automatische Updates und bequeme Installation.
Highlights
Neues Konzept für Benutzerführung und Informationsarchitektur
Das neue Benutzerführungskonzept sorgt dafür, dass jeder Zielgruppe (Jugendliche, Eltern, Lehrer, Berufsberater) die Informationen präsentiert werden, die für sie am relevantesten sind.
Die Informationsarchitektur wurde überarbeitet, um den Zugriff auf Inhalte zu erleichtern, die Benutzern hilft, schnell die gewünschten Informationen zu finden und eine bessere Navigationserfahrung zu bieten.
Cleveres Registrierungs- und Anmeldekonzept für Jugendliche und Lehrer
Registrierte Benutzer:innen erhalten personalisierte Inhalte basierend auf ihren Interessen und Testergebnissen.
Diese umfassen passende Berufe, Betriebe zum Schnuppern und die zugehörigen Info-Veranstaltungen. Zudem wird die zuständige Berufsberatungsperson für das jeweilige Schulhaus angezeigt, um eine direkte Kontaktaufnahme zu ermöglichen.
Personalisierte Inhalte
Sobald sich die Jugendlichen registriert haben, zeigt das Portal die im entsprechenden Schulhaus zuständige Person für Berufsberatung an. Kontakt für ein Beratungsgespräch kann direkt durch einen Klick aufgenommen werden.
Sollten die Jugendlichen den Interessenstest bereits ausgefüllt haben, werden passende Berufe, Betriebe zum Schnuppern und die zugehörigen Info-Veranstaltungen gemäss den identifizierten Interessen beziehungsweise Berufsfeldern angezeigt.
Firmenprofile
Im Bereich für Firmen können sich Unternehmen kostenlos auf dem Berufswahl-Portal präsentieren und so Lehrstellenmarketing betreiben.
Tausende Jugendliche informieren sich auf dem Berufswahl-Portal über Berufe und suchen nach Lehrstellen.
Firmen können:
- Ihr individuelles Firmenprofil erstellen
- Lehrstellen und Schnupperlehren ausschreiben
- Veranstaltungen Ihrer Firma publizieren
Schnuppern leicht gemacht
Im Bereich Schnuppern, werden direkt die Anzahl Schnupperstellen angezeigt. Schüler:innen können sich dank ihrem Login leicht mit den Firmen in Verbindung setzten und eine Schnupperlehre vereinbaren.
Berufe spielerisch entdecken
Der Berufe-Radar ist mehr als nur eine Informationsquelle. Er ist ein spielerischer Begleiter für Jugendliche auf ihrer Reise zur Entdeckung ihrer beruflichen Interessen. Jede Interaktion wird im persönlichen Profil gespeichert, wodurch ein individuelles Ranking der Top 3 Berufsfelder entsteht.
Berufe-Radar
Durch interaktive Elemente können Jugendliche Berufsfelder auf unterhaltsame Weise erkunden und ihre Interessen auf spielerische Weise herausfinden.
Persönliches Ranking
Das kontinuierliche Spielen führt zu einem individuellen Ranking der Top 3 Berufsfelder, was eine gezielte Fokussierung auf besonders interessante Karrierewege ermöglicht.
Tipps
Der Berufswahl-Blog ist die Quelle für inspirierende Einblicke und wertvolle Tipps auf dem Weg zu einer fundierten Berufswahl. Angebunden an eine dynamische Plattform, die Jugendlichen dabei hilft, ihre berufliche Zukunft zu gestalten.
Von Bewerbungstipps über erfolgreiche Interviewstrategien bis hin zu Checklisten und Vorlagen für einen Lebenslauf – der Blog bietet praxisnahe Tipps, um dich bestmöglich auf den Einstieg in die Berufswelt vorzubereiten.
«Headless»-Architektur
Automatische Anbindung von Inhalten über diverse Schnittstellen.
Inhalte aus verschiedenen Datenquellen
Das Portal enthält zahlreiche Informationen zu Berufen und Betrieben, die Schnupper- und Lehrstellen anbieten, sowie zu verschiedenen Info-Veranstaltungen, inklusive Anmeldemöglichkeiten. All diese Daten sind bereits in verschiedenen Datenbanken gespeichert und stehen dort zur Verfügung.
Daher haben wir die Applikation so konzipiert, dass sie sich die entsprechenden Inhalte periodisch über mehrere Schnittstellen abholt und in einem eigenen Backend (WordPress) speichert. Dadurch müssen nur wenige zusätzliche Inhalte manuell im CMS gepflegt werden.
Die Inhalte, die über die Schnittstellen aus anderen Datenbanken angezeigt werden, sind automatisch immer aktuell und müssen nicht weiter bewirtschaftet werden – eine grosse Vereinfachung.
Nachhaltig und ausbaubar
Das Portal ist für die Zukunft gerüstet und lässt einen künftigen Ausbau und weitere Themen im Zusammenhang mit der Berufswahl problemlos zu. Dies unter anderem, weil wir eine «Headless»-Architektur für die Umsetzung gewählt haben. Das heisst, der Inhalt ist losgelöst von der Darstellung des Portals (Frontend) und kann somit eigenständig funktionieren – aktuell auf das Corporate Design des Kantons Zürich zugeschnitten.
Mehr zur technischen Umsetzung in diesem Artikel: „CMS – Traditionell oder Headless?„
Technologien
WordPress Development
Massgeschneiderte WordPress-Entwicklung für benutzerfreundliche Websites, individuelle Funktionen und ansprechendes Design.
Schnittstellen & Migrationen
Schnittstellen & Migrationen ermöglichen reibungslose Datenübertragungen und Systemintegrationen für effiziente Geschäftsprozesse und verbesserte Zusammenarbeit.
Headless WordPress
Headless WordPress trennt Frontend und Backend für mehr Flexibilität, bessere Performance und individuelle Gestaltungsmöglichkeiten in der Webentwicklung.
Ein Responsive Design und Mobile First-Ansatz in der Webentwicklung
In der heutigen digitalen Welt haben die meisten Benutzer:innen Zugriff auf Inhalte über verschiedene Geräte, Bildschirmgrössen und Plattformen. Um eine optimierte Benutzererfahrung zu schaffen und sicherzustellen, dass Websites und Anwendungen auf allen Geräten korrekt dargestellt werden, ist der Einsatz von Responsive Design und Mobile First-Ansatz in der Webentwicklung unerlässlich.
Neue User Journey
Die User Journey der Zielgruppe Jugendliche sieht neu wie folgt aus:
Im Unterricht
Die Jugendlichen werden durch ihre Lehrperson mit dem Berufswahl-Portal vertraut gemacht. Im Klassenzimmer, jeweils auf einem Desktop-Computer, werden die Schüler über den Berufswahl-Fahrplan instruiert. Jeder Jugendliche kann den Interessenstest durchklicken, womit der erste Schritt zur Personalisierung bereits im Schulzimmer gemacht wird.
Zu Hause
Die Jugendlichen können sich über die aufgrund des Testergebnisses vorgeschlagenen Berufsfelder informieren und sie allenfalls zusammen mit den Eltern oder Mentoren besprechen.
Unterwegs
Das Portal ist auf allen Geräten und Bildschirmgrössen über einen Browser zugänglich. So können sich Jugendliche jederzeit über Berufe, nächste Veranstaltungen oder Schnupper-/Lehrstellen informieren und entsprechend anmelden.
Login via Magic-Link
Anmeldung ohne Passwort
Damit sich die Jugendlichen kein Passwort merken müssen, sendet die Web-Applikation einen Link zur Anmeldung auf die hinterlegte E-Mail-Adresse. So können sich registrierte Benutzer:innen sicher, schnell und einfach einloggen.
Neu für Lehrpersonen
Lehrpersonen freuen sich
Für die Lehrpersonen im Kanton Zürich steht das Portal seit dem Start des Schuljahres im Sommer 2019 ergänzend für den Berufswahlunterricht zur Verfügung und kam bislang sehr gut an.
«Das Portal für die Klassen ist echt genial! Optisch, inhaltlich und strukturell einfach super!»
Lehrperson biz Urdorf
«Ich schätze die transparente und faire Arbeitsweise von required enorm!»
Marc Gander Odermatt
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: Onboarding und Support-Website für HINOnboarding und Support-Website für HIN
Wir unterstützen HIN laufend als Digitalagentur mit User Experience, User Interface Design und Programmierungsarbeiten.
-
Weiterlesen: Relaunch mit neuem Design-SystemRelaunch mit neuem Design-System
-
Weiterlesen: Berufswahl-Portal für Jugendliche, Eltern und UnternehmenBerufswahl-Portal für Jugendliche, Eltern und Unternehmen
-
Weiterlesen: Migration und Website Design für Steiger LegalMigration und Website Design für Steiger Legal
-
Weiterlesen: Website für Mica InsuranceWebsite für Mica Insurance
-
Weiterlesen: Onboarding und Support-Website für HIN
Onboarding und Support-Website für HIN
-
Weiterlesen: Online-Rechner für die Werbe-BrancheOnline-Rechner für die Werbe-Branche