Website for a residential school

Three paths, one Röseren

The website speaks to three groups looking for very different things: young people, parents and professionals, and future employees. That is why the homepage asks “Where do you want to go?” right at the start and sends everyone on their way via three coloured tiles. When the mouse moves over a tile, the little horns of the logo mark wiggle.

We based the design on Florian Caspers’ brand book. The logo mark runs through the fir-green areas as an Ö pattern, organic waves connect the sections, and headings build up letter by letter. Calling, writing an e-mail and planning a route are one click away from any page, as a bar on the right edge on desktop and as a bar at the bottom on mobile. There the menu opens as a circle out of the burger, and anyone who has set “Reduce motion” on their device sees everything without animation.

The site in three views

Which group lives where, and where is reception? On the Organisation page, the whole site is shown as an isometric model that you can rotate with the mouse or two buttons. Numbered markers, a legend and an info panel explain each building. “Satellite” shows the same markers on the swisstopo aerial image, and “Plan” on the overview map of the new signage, which we redrew in the style of the website, with entrances, car parks and street names.

All three views share the same numbers, names and texts, and the editorial team maintains them in a single place. On mobile, the model continuously recalculates its view while rotating so no building slips out of frame, and the plan there shows the whole site. The two locations in Liestal appear on a map of their own on the contact page: a click on a place or marker opens the address, phone number and route planner.

Work as it really is

The Vacancies page shows what the job feels like. In the header, five numbers count up, from 50 employees to the founding year 1858, three numbered statements explain why people work at Röseren, and the daily schedule “What a day looks like” walks through a shift in a residential group in nine tiles, from waking up at 6:45 to lights-out at 10 pm. Voices from the team and the benefits complete the picture.

The team maintains the vacancies as separate entries. They appear as expandable panels with a direct link for social media, and “Apply now” preselects the vacancy in the form. Documents are uploaded directly, with a progress bar per file. They are attached to the e-mail, kept outside the media library behind signed links and deleted automatically after 30 days.

By young people, for young people

Young people help design the “For young people” page in the homepage lab, which meets once a week. Its centrepiece is the Thesaurus Röseren, a reference guide to words like “Kurve”, “IB” or “BP-Aktion”, with a letter filter and expandable panels. Whenever a term appears anywhere in the body text of the website, the site automatically links it to its entry.

A new addition is the Alumni page for care leavers, young people who spent part of their childhood or youth in a care home, a foster family or with relatives. It brings together the services of Careleaver Schweiz on housing, finances, insurance, education and health, and invites people to alumni meetings with its own form.

A backend that makes sense

The website is built as a custom WordPress theme with 25 modules. Every page starts with a header in eight variants, below which the editorial team lines up modules, from tiles and cards to timeline and form. Long lists are edited in a large window, images get a focal point and a minimum size, and every save creates a revision. Vacancies, projects, thesaurus terms and team quotes are kept in one central place, and an editorial handbook explains everything step by step.

Under the hood

All addresses of the old website, including job ads and PDF files, redirect to the new pages. Structured data describes Röseren with both locations, and the legend of the site is also in the HTML for AI crawlers. The four forms work without a plugin and without picture puzzles, a Content Security Policy protects every page, and Google Analytics only loads after consent. Before go-live, the website scored 90 to 96 points on mobile in PageSpeed Insights and 99 to 100 on desktop.