Headless, aber nicht kopflos – mit WordPress zur modularen Web App
Was willst du werden?
Das ist wohl die grösste Frage, die Jugendliche in der 2. oder 3. Sekundarschule beschäftigt. Denn genau dann beginnt die Berufswahl – und mit ihr eine Zeit voller Unsicherheiten, Hoffnungen und Entscheidungen.
Ich wusste schon mit zwölf Jahren, was ich werden wollte: Etwas Kreatives mit Computern – das war mein Ziel. Obwohl meine Stärke eindeutig im Sport lag, kam niemand auf die Idee, mir einen Weg in diese Richtung aufzuzeigen. Auch mein Sportlehrer nicht – obwohl er wusste, wie leidenschaftlich ich im Sport war.
So suchte ich fokussiert nach einer Lehrstelle als Typografin, oder genauer gesagt: Polygrafin. Dabei entging mir völlig, dass es noch weitere Berufe gab, die meinem Wunsch, kreativ zu sein, näher gekommen wären – etwa Grafikerin. Weder Lehrpersonen noch die Berufsberatung machten mich darauf aufmerksam. Vielleicht, weil ich so klar kommunizierte, was ich wollte. Vielleicht aber auch, weil es schlicht zu wenig Struktur und Orientierung gab.
Ich absolvierte ein 10. Schuljahr, nur um weiter nach einer Polygrafin-Lehrstelle zu suchen – erfolglos. Kurz vor Schulschluss ergatterte ich dann durch Vitamin B eine KV-Lehrstelle bei der ABB. Ein Beruf, den ich nur aus Filmen als „Sekretärin“ kannte. Ich trat eine Ausbildung an, mit der ich mich nie richtig auseinandergesetzt hatte.
Nach ein paar Jahren als Kauffrau, vielen Weiterbildungen und einigen beruflichen Umwegen landete ich schliesslich dort, wo ich immer hinwollte: im Design mit dem Computer. Zuerst als Frontend-Designer und später als UX-Designer. Heute bin ich Geschäftsführerin bei required gmbh – und tue genau das, was ich immer wollte – ich kombiniere Design und Tech, um digitale Produkte zu erschaffen, die einen Impact haben.
Die Berufswahl App (PWA) des Kantons Zürich
Hätte ich damals Zugang zu mehr Informationen gehabt – zu einem Portal, das mir verschiedene Berufe zeigt, vergleicht und erklärt – wäre mein Weg wohl viel geradliniger verlaufen. Genau deshalb freut es mich umso mehr, dass ich seit über sechs Jahren mit dem Amt für Jugend und Berufsberatung des Kantons Zürich an der Berufswahlplattform mitarbeiten darf. Eine Plattform, die genau das bietet, was mir damals gefehlt hat: Orientierung, Inspiration und Unterstützung bei der Berufswahl.
WordCamp Europe 2025
Dieser Beitrag ist im Kontext des Talks am WordCamp Europe 2025 «How to Keep Your Head While Going Headless with WordPress» von Karin Christen entstanden.
UX Design
Wie gutes UX Jugendliche, Eltern und Lehrpersonen bei der Berufswahl unterstützt
Unsere Ansätze für Orientierung, Motivation und barrierearme Nutzerführung im komplexen Umfeld
Die Herausforderung der Berufsorientierung
Berufsorientierung ist komplex – nicht nur für Jugendliche, sondern auch für alle, die sie begleiten. Entsprechend vielfältig ist die Zielgruppe der Plattform: Jugendliche, Eltern, Lehrpersonen, Berufsberater:innen und Lehrbetriebe. Unser Anspruch war es, ein digitales Werkzeug zu schaffen, das inspiriert, begleitet und Orientierung bietet – ohne zu bevormunden.
Die Herausforderung: Jede Zielgruppe hat andere Bedürfnisse, Ziele und Nutzungskontexte.
- Lehrpersonen aus über 350 Schulen setzen die Plattform aktiv im Unterricht ein – etwa zur Begleitung des Interessen-Tests oder als Ausgangspunkt für die Projektarbeit zur Berufswahl.
- Berufsberater:innen aus über 390 Informationszentren (BIZ) nutzen die Plattform, um sich gezielt auf Gespräche vorzubereiten und mit den Jugendlichen passende Berufsbilder zu besprechen.
- Über 6000 Lehrbetriebe verwalten ihre offenen Lehrstellen und Schnupperangebote direkt über die Plattform.
- Eltern erhalten Zugang zu Informationen rund um die Berufswahl und können – mit Einverständnis ihres Kindes – dessen Fortschritt einsehen und gezielt unterstützen.
- Jugendliche entdecken über interaktive Tools, Gamification und personalisierte Empfehlungen Berufe, die zu ihren Interessen und Stärken passen – und oft ganz neue Perspektiven eröffnen.
Im Zentrum steht dabei immer die Überzeugung: Niemand sollte seine berufliche Zukunft alleine gestalten müssen.
Deshalb verstehen wir die Plattform nicht als reines Informationsangebot, sondern als begleitendes Instrument auf dem Weg zur Entscheidung. Sie soll motivieren, ermutigen – und im richtigen Moment die richtigen Impulse geben.
Motivation statt Überforderung: UX für die Berufswahl
Die Vielfalt an Möglichkeiten ist Fluch und Segen zugleich:
In der Schweiz gibt es über 300 anerkannte Berufe, mehr als 6000 Lehrstellen und zehntausende potenzielle Ausbildungsbetriebe. Für viele Jugendliche bedeutet das: Orientierungslosigkeit.
Unser Ziel war deshalb, die Plattform so zu gestalten, dass sie spielerisch Neugierde weckt, ohne die Nutzer:innen zu überfordern.
Schule oder Beruf? Ein Tool zur Selbstreflexion
Ein wichtiger Entscheid im Berufswahlprozess ist die Frage:
Soll ich weiter zur Schule gehen – oder lieber einen Beruf erlernen?
Auch hier unterstützt die Plattform mit einem eigens entwickelten Reflexionstool: dem Maturitätsschul-Check.
Jugendliche klicken sich durch einfache, alltagsnahe Fragen und erhalten als Ergebnis eine erste Orientierung, ob ein schulischer Weg wie:
- Gymnasium
- Handelsmittelschule
- Informatikmittelschule
- Fachmittelschule
- oder Berufsmaturitätsschule
für sie sinnvoll sein könnte – oder ob der direkte Einstieg in eine Lehre besser passt.
Der Maturitätsschulen-Check versteht sich nicht als Entscheidungshilfe im klassischen Sinn, sondern als Impuls zur Reflexion: Er hilft Jugendlichen, sich mit ihren Zielen, Interessen und Lernmotivation auseinanderzusetzen – und mögliche nächste Schritte bewusster zu wählen.
Berufserkundung über Intuition
Ein zentrales Element ist der „Berufe-Explorer“:
Anstatt sich durch eine alphabetische Liste von Berufstiteln zu scrollen, sehen Jugendliche Fotos von beruflichen Tätigkeiten – ohne Titel oder Vorurteile. Mit einem einfachen Klick entscheiden sie, ob die Tätigkeit interessant wirkt oder nicht – ganz intuitiv.
Erst im zweiten Schritt erfahren sie, in welchem Berufsfeld sich ihre Interessen verdichten. So entstehen erste, unvoreingenommene Annäherungen an Berufsfelder.
Der Interessen-Test im Berufswahlunterricht
Für eine strukturierte Auseinandersetzung steht ein umfangreicher Interessen-Test zur Verfügung. Lehrpersonen nutzen diesen Test im Berufswahlunterricht, um ihre Schüler:innen an die Plattform und den gesamten Berufswahlprozess heranzuführen.
Mit 9 Schritten und je 10 Fragen ist der Test bewusst tiefgehend – und entsprechend zeitintensiv. Um die Motivation der Jugendlichen hochzuhalten, haben wir gezielt UX-Prinzipien wie Fortschrittsanzeige (Progress Feedback) und kleine Belohnungen (Micro-Rewards) eingebaut:
- Der Fortschritt ist jederzeit sichtbar.
- Auch ohne Login wird der aktuelle Stand automatisch gespeichert.
- Der Test ist strukturiert gestaltet, mobil optimiert und barrierearm.
So wird aus einem potenziell anstrengenden Fragebogen ein unterstützender Reflexionsprozess.
Das Resultat wird in einem Spider Chart visualisiert und direkt mit Berufsgruppen verknüpft. So entsteht eine kontinuierliche Verbindung zwischen Selbstbild und konkreten Optionen.
Personalisierung statt Filterblase
Je mehr Jugendliche die Plattform nutzen, desto gezielter werden Inhalte auf sie abgestimmt, z. B. auf dem persönlichen Dashboard mit empfohlenen Berufen oder offenen Schnupperplätzen.
Doch wichtig ist:
Die Plattform ist ein Kompass, kein Tunnel.
Sie schlägt auch gezielt Berufe ausserhalb des bisherigen Interessenspektrums vor, um Horizonte zu erweitern und Zufallsentdeckungen zu ermöglichen. Denn manchmal liegt der passende Weg genau dort, wo man ihn nicht gesucht hätte.
React.js Development
React.js bietet schnelle Darstellung, modularen Code, Wiederverwendbarkeit von Komponenten, effiziente Leistung, einfache Skalierbarkeit und grosse 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.
Technische Architektur
Headless WordPress trifft PWA
So haben wir ein modernes Setup geschaffen, das für mehrere Kantone funktioniert
Headless mit WordPress: Modular, skalierbar und zukunftsfähig
Von Beginn an war klar: Die Plattform für den Kanton Zürich sollte nicht als Insellösung entstehen, sondern so aufgebaut sein, dass sie auch in anderen Kantonen wiederverwendet und angepasst werden kann. Entsprechend lauteten die Anforderungen:
- Modular: damit einzelne Features unabhängig weiterentwickelt werden können
- Flexibel: um unterschiedliche Corporate Designs und Zielgruppen zu unterstützen
- Zukunftsfähig: auch für zukünftige technische Anforderungen
Gleichzeitig sollte die Plattform offline fähig funktionieren – ähnlich wie eine native App, aber ohne Installation auf Geräten. Unsere Lösung:
Wir entwickelten eine Progressive Web App (PWA) mit einem Headless-Setup, also einer Frontend-Architektur, die vollständig vom Backend entkoppelt ist.
Warum Headless?
In einem klassischen Content-Management-System wie WordPress sind Frontend und Backend eng miteinander verknüpft. Inhalte werden direkt im WordPress-Theme dargestellt, ergänzt mit Plugins und PHP-Templates. Das funktioniert gut, hat aber Grenzen, wenn es um moderne, dynamische Anwendungen geht.
Im Gegensatz dazu trennt ein Headless-System die Darstellung vom Inhalt vollständig:
- WordPress wird nur noch für das Content- und User-Management verwendet.
- Das Frontend basiert auf einer eigenständigen React-Anwendung, die per REST API mit den Inhalten aus WordPress versorgt wird.
- Die Inhalte werden im Backend strukturiert gepflegt – die Darstellung übernimmt eine moderne, app-ähnliche Weboberfläche.
Besonders spannend: Durch dieses Setup können wir mehrere Frontends für verschiedene Kantone ausrollen – mit jeweils eigenem Design, aber auf derselben Codebasis. Aktuell läuft die Plattform erfolgreich im Kanton Zürich – weitere Kantone befinden sich in der Umsetzung oder Planung.
Datenarchitektur: WordPress als strukturierter Daten-Hub
Hinter der Plattform steckt ein komplexes System aus internen und externen Datenquellen. Die wichtigsten Inhalte stammen aus:
Externe APIs
- Berufe
- Praktika (über 45’000 Einträge)
- Lehrstellen
- Unternehmen (über 30’000)
- Veranstaltungen
Direkt gepflegte Inhalte in WordPress
- Benutzer:innen (30’000+ und wachsend)
- Schulen (350+)
- Berufsberater:innen (rund 400)
- BIZ-Standorte (Informationszentren)
- Unternehmens-Events
All diese Daten fliessen in WordPress zusammen, das als strukturierter Daten-Hub fungiert. Die PWA verarbeitet die Daten für die Darstellung und sorgt für ein flüssiges, responsives Nutzererlebnis.
Rollen & Redaktionsfreiheit
Zugriffssteuerung, Custom Endpoints und Empowerment für Content-Teams
Warum ein gutes CMS nicht vom Code, sondern von der redaktionellen Freiheit lebt
Redaktionsfreundlich, ohne Kompromisse bei der Struktur
Ein besonderer Fokus lag auf der Balance zwischen Struktur und redaktioneller Freiheit:
- Die Berufsseiten sind über die API angebunden und in ihrer Grundstruktur fix. Dadurch ist gewährleistet, dass zentrale Informationen immer aktuell und konsistent bleiben.
- Gleichzeitig können Content-Manager:innen über Custom Fields in der WordPress-Seitenleiste eigene Inhalte ergänzen, z. B. Videos, Podcasts, Bilder, weiterführende Links oder schulische Anforderungen.
- Die Bearbeitung erfolgt im Block Editor, wobei API-Daten als schreibgeschützte Inhalte dargestellt werden, um Datenkonsistenz zu gewährleisten.
So entsteht ein System, das technisch stabil und redaktionell flexibel ist.
Benutzerrollen, Rechte & Redaktionsfreiheit im Headless-Setup
Nicht alle Inhalte auf der Plattform sind für alle sichtbar, und das soll auch so sein. Deshalb steuern wir Zugriffe und Sichtbarkeit über klar definierte Rollen und Berechtigungen, die serverseitig über die WordPress-REST-API geprüft werden.
Rollenbasierter Zugriff auf Inhalte
Beim Login sendet die API die Benutzerrolle zurück, das Frontend weiss dadurch genau, welche Inhalte angezeigt werden dürfen:
- Jugendliche sehen ihr eigenes Profil, Aktivitäten und persönliche Empfehlungen.
- Lehrpersonen haben Zugriff auf ihre Klassenübersicht.
- Unternehmen verwalten nur ihre eigenen Lehrstellen und Schnupperangebote.
Das Resultat ist ein relevantes, sicheres und personalisiertes Nutzungserlebnis.
Warum wir auf eigene Endpoints setzen
WordPress stellt zwar eine standardisierte REST-API zur Verfügung – für unser Setup aber reichte das nicht aus. Um mehr Kontrolle, Flexibilität und Performance zu erreichen, haben wir über 40 Custom Endpoints entwickelt.
Diese ermöglichen uns unter anderem:
- Vorschau-Funktion für Inhalte im decoupled Setup
(z. B. Vorschau eines Blogposts, bevor er veröffentlicht wird) - Pflege der Navigation durch Redakteur:innen
(z. B. Hauptmenü oder Footer-Struktur – ohne Agentur-Support) - Nutzung nativer WordPress-Funktionen, z. B. für Bild-Optimierung bei Berufs-Thumbnails
Kurz gesagt: Wir wollten, dass Redakteur:innen ihre Inhalte unabhängig pflegen können, ohne bei jedem Menüpunkt auf uns als Agentur angewiesen zu sein.
Denn das ist der eigentliche Zweck eines guten CMS:
Redakteur:innen befähigen – nicht Entwickler:innen binden.
Technischer Aufwand vs. Nutzererlebnis
Natürlich stellt ein Headless-Setup höhere Anforderungen an Konzeption, Umsetzung und Wartung. Es gibt keine Vorschau-Funktion „out of the box“, keine native Menü-Integration, und viele Standardfunktionen müssen eigens entwickelt werden.
Aber: Der Aufwand lohnt sich – und zahlt sich in der User-Experience aus.
Vorteile, die nur Headless ermöglichen
- Der Interessen-Test funktioniert offline, dank Service Worker.
Ideal für Schulen mit instabiler Internetverbindung. - Die Plattform merkt sich den Testfortschritt automatisch,
sogar ohne Login. - Die Live-Filterung aller Berufe funktioniert blitzschnell und ohne Seiten-Reload. Eine Performance, die mit einem klassischen WordPress-Theme kaum umsetzbar wäre.
Das sind nur einige Beispiele, wie wir die Möglichkeiten einer modernen PWA voll ausschöpfen konnten, zugunsten der Zielgruppe.
Lessons Learned & Empfehlungen
Was du wissen solltest, bevor du dein eigenes Headless-Projekt startest
Echte Erfahrungen, klare Learnings und praktische Tipps aus fünf Jahren Weiterentwicklung:
Headless ist mächtig – aber kein Selbstläufer
Der Aufbau einer Headless-Plattform mit WordPress als Content-Hub und einem eigenentwickelten Frontend hat uns in den letzten Jahren viel gelehrt. Headless eröffnet grossartige Möglichkeiten, aber es bringt auch einige Herausforderungen mit sich.
Was du wissen solltest, bevor du startest
Zwei Codebasen bedeuten doppelte Verantwortung
Du verwaltest nicht mehr nur WordPress, sondern auch ein voll entkoppeltes Frontend. Das bedeutet: doppelte Architektur, doppelte Build-Pipelines, doppelter Wartungsaufwand.
WordPress ist stabil, das Frontend ist ein bewegliches Ziel
Wir begannen 2019 mit Create React App, die heute veraltet ist.
Aktuell migrieren wir auf ein modernes Setup mit Vite und React Router 7.
Headless braucht mehr Zeit
Eine PWA bringt Offline-Fähigkeit, Performance und modernes UX, aber auch rund 30 % mehr Aufwand in Konzeption, Entwicklung und Wartung verglichen mit klassischen WordPress-Websites.
Nicht jede Hosting-Umgebung ist geeignet
Für Headless brauchst du oft eine dedizierte Infrastruktur, gerade wenn Node.js oder ein Build-System (z. B. Vite) im Einsatz ist.
Nicht alle Plugins sind kompatibel
Viele WordPress-Plugins wurden für PHP-Themes gebaut, sie funktionieren nicht automatisch in Headless-Setups. Prüfe frühzeitig die API-Kompatibilität.
Diese Plugins sind Headless-kompatibel (in der Regel):
Tipps
Für einen guten Start ins Headless-Abenteuer
Falls du ein eigenes Headless-Projekt planst, hier unsere Empfehlungen aus der Praxis:
Nutze ein Boilerplate
Wenn wir heute nochmals starten würden, kämen wir nicht ohne aus. Empfehlung: HeadstartWP als solide Basis
REST API oder GraphQL?
Beide funktionieren, je nach Projektanforderung. Für GraphQL: WPGraphQL Plugin
Entwickle Custom Endpoints
Für Vorschau, Menüs oder komplexe Elemente lohnt es sich, eigene APIs zu schreiben. Das gibt Redakteur:innen volle Kontrolle.
Setze auf ein modernes Frontend-Setup
Aktive Wartung und Zukunftssicherheit sind entscheidend, wir setzen inzwischen auf Vite + React Router 7.
Für PWAs: Nutze Workbox
Das Tool von Google erleichtert dir Caching, Offline-Funktionalität und den Umgang mit Service Workern.
Für React: Nutze Dev-Tools
Installiere React DevTools und React Scan, um besser zu debuggen und um während der Entwicklung nicht den Kopf zu verlieren. 😉
Warum das alles?
Wir sind „Headless“ gegangen – damit junge Menschen nicht kopflos in ihre Berufswahl starten müssen.
Und hoffentlich fühlst du dich jetzt auch besser gerüstet für dein eigenes Headless-Projekt.
Werde Teil unseres Teams
Du möchtest mit uns an digitalen Lösungen arbeiten, die wirklich etwas bewegen?
Erfahre mehr darüber, wie wir arbeiten, und wenn du eine Idee hast, wie dein Fachwissen unser Team bereichern könnte: Melde dich einfach.
Was unser Kunde zur Zusammenarbeit sagt:
Bildungsdirektion AJB
Kanton Zürich
Transparent & Fair
«Ich schätze die transparente und faire Arbeitsweise von required enorm!»
Mehr über unsere Webentwicklung
Du planst ein eigenes Headless-Projekt oder suchst ein erfahrenes Team für UX und Webentwicklung?
