Home Blog How to Keep Your Head while Going Headless with WordPress

How to Keep Your Head while Going Headless with WordPress

Karin Christen Avatar
A drawn stick figure without a head

What do you want to become?

It’s the big question that occupies most teenagers in their final years of lower secondary school.
This is when career orientation begins and with it comes a time full of uncertainty, hopes and important decisions.

At twelve, I already knew what I wanted to become: I wanted to do something creative, something with computers as a profession. That was my goal. Even though my strengths clearly lay in sports, no one ever suggested I turn that into a career.

So I focused all my energy on finding an apprenticeship as a typographer – or more precisely, a polygraph. I completely overlooked that there were other creative professions that aligned even better with my interests, like graphic design. Neither my teachers nor the career counselor pointed it out. Maybe it was because I communicated what I wanted so clearly. But perhaps also because there was simply too little structure and guidance.

I completed a 10th year at school only to continue looking for a polygraph apprenticeship – unsuccessfully. Just before graduation, I landed a commercial apprenticeship at ABB, thanks to connections. A job I only knew from movies as a “secretary.” I started an apprenticeship I had never truly considered.
After a few years as a commercial clerk, several further educations, and a few career detours, I finally found my way back to what I truly wanted: design with computers. First as a front-end designer and later as a UX designer. Today, I’m UX Designer and Managing Director at required gmbh, doing exactly what I always dreamed of: combining design and technology to create digital products that make a difference.

The career choice app (PWA) of the Canton of Zurich

If I had had access to more information back then – a portal that presented, compared, and explained different professions – my path might have been far more straightforward.

That’s why I’m especially proud to have been working for over six years with the Office for Youth and Career Guidance of the Canton of Zurich on the career choice platform, a progressive web app (PWA) designed to do exactly what I was missing back then:
Offer guidance, inspiration, and support to young people navigating one of the most important decisions of their lives.

Homepage of Zurich’s career guidance platform showing tools for students, parents, and teachers. Visible on multiple devices: career planning timeline, Matura Check, and support options.

UX Design

How thoughtful UX helps young people, parents, and teachers navigate career choices
Our design strategies for orientation, motivation, and accessible guidance in a complex decision-making environment

The challenge of career guidance

Career guidance is complex, not just for young people, but also for everyone supporting them. The platform’s target audience is equally diverse: students, parents, teachers, career advisors, and training companies.

The goal: a platform that motivates and guides young people — while respecting their autonomy and avoiding a one-size-fits-all approach.

The challenge:
Each target group comes with its own needs, goals, and usage contexts. Designing a unified experience that works for all of them required a careful balance between structure and flexibility, and a profound understanding of their day-to-day realities.

  • Teachers from over 350 schools actively use the platform in the classroom – for example to accompany the interest test or as a starting point for project work on career choices.
  • Careers advisors from over 390 information centers (BIZ) use the platform to prepare specifically for interviews and discuss suitable career profiles with young people.
  • Over 6000 training companies manage their apprenticeship vacancies and trial offers directly via the platform.
  • Parents are given access to information about career choices and – with their child’s consent – can view their child’s progress and provide targeted support.
  • Young people use interactive tools, gamification and personalized recommendations to discover professions that match their interests and strengths – and often open up completely new perspectives.

At the heart of it all lies a simple conviction: No one should have to shape their professional future alone.

That’s why we don’t see the platform as just an information source, but as a companion on the path to decision-making.
It’s designed to motivate, empower, and offer the right impulses at the right time.

Motivation Instead of Overwhelm: UX for Career Choices

The sheer variety of options is both a blessing and a challenge.
In Switzerland, there are over 300 recognized professions, more than 6000 apprenticeships, and tens of thousands of potential training companies.
For many young people, this abundance leads to one thing above all: a lack of orientation.

Our goal was to design the platform in a way that sparks curiosity in a playful, intuitive way, without overwhelming users.

School or Work? A Tool for Self-Reflection

One of the key decisions in the career orientation process is:
Should I continue with school — or would I rather learn a profession?

The platform supports this reflection with a dedicated tool we developed: the Maturitätsschul-Check — a short self-assessment that helps students explore whether a more academic path might suit them, or whether vocational training is the better fit.

Students click through a series of simple, relatable questions and receive an initial indication of whether a school-based path could be right for them. such as:

  • Academic high school (Gymnasium)
  • Business school (Handelsmittelschule)
  • IT-focused middle school (Informatikmittelschule)
  • Specialised middle school (Fachmittelschule)
  • or the Vocational Baccalaureate School (Berufsmaturitätsschule)

It helps them consider whether one of these paths might make sense for them, or whether a direct entry into an apprenticeship would be a better fit.

Two screens from the Matura School Check showing a yes/no question and result bar. Students reflect on whether a school-based path like academic high school might suit them.

The Check isn’t a decision-making tool in the traditional sense. Instead, it’s designed as a prompt for self-reflection: it encourages students to think about their goals, interests, and learning motivation — and to make more conscious choices about their next steps.

Career Exploration Through Intuition

A central feature of the platform is the Profession Explorer.
Instead of scrolling through a long, alphabetical list of job titles, students are shown photos of real professional activities, without labels or bias. With a simple click, they can say whether something looks interesting to them or not — entirely based on instinct.

Only in the second step do they discover which occupational fields their interests align with. This intuitive approach allows for a first, unbiased exploration of career options, free from external expectations or stereotypes.

The Interest Test in Career Choice Lessons

To support more structured guidance, the platform offers a comprehensive interest test.
Teachers use it in career choice lessons to introduce students to both the platform and the broader process of career exploration.

With 9 steps and 10 questions each, the test is intentionally in-depth — and therefore time-consuming. To keep students engaged, we’ve embedded key UX principles:

  • Progress is visible at all times.
  • Current progress is saved automatically, even without logging in
  • The experience is structured, mobile-optimised, and accessible

This transforms a potentially overwhelming questionnaire into a supportive reflection tool, turning the test into an entry point for self-discovery, not judgment.

Two screens of the interest test showing questions and a spider chart result. Students see which occupational fields match their interests.

The results are visualised in a spider chart and directly connected to occupational fields, creating a seamless link between self-perception and tangible career options.

Personalisation Without the Filter Bubble

The more young people engage with the platform, the more personalised the experience becomes — for example, through tailored recommendations on their personal dashboard, such as matching professions or open trial placements.

But the important thing is:

The platform is designed to be a compass — not a tunnel.

It also shows professions outside a user’s usual interests, to open up new perspectives and encourage unexpected discoveries. Sometimes the right path is where you least expect it.

Technical architecture

Headless WordPress meets PWA
We have created a modern setup that works for several cantons

Headless with WordPress: modular, scalable and future-proof

It was clear from the start that the platform for the canton of Zurich should not be an isolated solution, but should be structured in such a way that it can also be reused and adapted in other cantons. The requirements were accordingly:

  • Modular: so that individual features can be developed independently
  • Flexible: to support different corporate designs and target groups
  • Future-proof: for future technical requirements

At the same time, the platform needed to work offline, similar to a native app, but without installation on devices. Our solution:
We developed a progressive web app (PWA) with a headless setup – i.e. a front-end architecture that is completely decoupled from the back-end.

Why headless?

In a classic content management system, the frontend and backend are closely connected. Content is displayed directly in the WordPress theme, supplemented with plugins and PHP templates. This works well, but has its limits when it comes to modern, dynamic applications.

Minimal line drawing of a headless figure holding up a large WordPress logo – symbolising a headless WordPress setup.

In contrast, a headless system completely separates the presentation layer from the content.

  • WordPress is now only used for content and user management.
  • The frontend is based on a standalone React application that is supplied with content from WordPress via REST API.
  • The content is maintained in a structured manner in the backend, a modern, app-like web interface takes care of the content presentation.

What is particularly exciting is that this setup allows us to roll out several front ends for different cantons – each with its own design, but based on the same code. The platform is currently running successfully in the canton of Zurich, other cantons are currently being implemented or planned.

Data architecture: WordPress as a structured data hub

Behind the platform is a complex system of internal and external data sources. The most important content comes from:

External APIs

  • Professions (311)
  • Practicas (over 45’000 items)
  • Apprenticeships (6’000 items)
  • Training Companies (over 30’000)
  • Events

Directly maintained content in WordPress

  • User (30’000+ and growing)
  • Schools (350+)
  • Career Counclers (around 400)
  • Informations centers (BIZ)
  • Company-Events

All this data flows together in WordPress, which acts as a structured data hub. The PWA processes the data for the presentation layer and ensures a smooth, responsive user experience.

Roles & editorial freedom

Access control, custom endpoints and empowerment for content teams
Why a good CMS doesn’t live from code, but from editorial freedom

Editor-friendly, without compromising on structure

A special focus was placed on the balance between structure and editorial freedom:

  • The job pages are connected via the API and their basic structure is fixed. This ensures that central information always remains up-to-date and consistent.
  • At the same time, content managers can add their own content via custom fields in the WordPress sidebar, e.g. videos, podcasts, images, further links or educational requirements.
  • Editing takes place in the Block Editor, whereby API data is displayed as read-only content – to ensure data consistency.

The result is a system that is technically stable and editorially flexible.

User roles, rights & editorial freedom in the headless setup

Not all content on the platform is visible to everyone, and that’s how it should be. That’s why we control access and visibility via clearly defined roles and authorizations, which are checked on the server side via the WordPress REST API.

Role-based access to content

When logging in, the API sends back the user role, the front end therefore knows exactly what content may be displayed:

  • Young people see their own profile, activities and personal recommendations.
  • Teachers have access to their class overview.
  • Companies only manage their own apprenticeships and trial offers.

The result is a relevant, secure and personalized user experience.

Why we rely on our own endpoints

Although WordPress provides a standardized REST API, this was not enough for our setup. To achieve more control, flexibility and performance, we developed over 40 of our own custom endpoints.

Among other things, these enable us to

  • Preview function for content in the decoupled setup
    (e.g. preview of a blog post before it is published)
  • Maintenance of the navigation by editors
    (e.g. main menu or footer structure, without agency support)
  • Use of native WordPress functions, e.g. for image optimization for professional thumbnails

In short, we wanted editors to be able to maintain their content independently without having to rely on us as an agency for every menu item.
Because that is the real purpose of a good CMS:

Empower editors – don’t bind developers.

Technical effort vs. user experience

Of course, a headless setup places higher demands on design, implementation and maintenance. There is no preview function “out of the box”, no native menu integration, and many standard functions have to be custom developed.

But: the effort is worth it – and pays off in terms of user experience.

Advantages that only headless offers

  • The interest test works offline thanks to Service Worker, ideal for schools with an unstable internet connection.
  • The platform remembers the test progress automatically, even without a login.
  • The live filtering of all professions works at lightning speed and without page reload, a performance that would be almost impossible to achieve with a classic WordPress theme.

These are just a few examples of how we were able to fully exploit the possibilities of a modern PWA – for the benefit of the target group.

Become part of our team

Would you like to work with us on digital solutions that really make a difference?
Find out more about how we work – and if you have an idea how your expertise could enrich our team: Just get in touch.

More about our web development

Are you planning your own headless project or looking for an experienced team for UX and web development?