Ausgangslage
Mit neuen strategischen Zielen der Direktion stand die FHNW vor einer grundlegenden Frage: Wie wird ein digitaler Auftritt dieser Grösse so weiterentwickelt, dass er Studierende und Weiterbildungsinteressierte gezielt gewinnt und ihnen die Orientierung im Angebot erleichtert?
Die bestehende Plattform konnte die neuen strategischen Anforderungen nicht mehr tragen. Ein von Raptus erstelltes "Expert Review" bestätigte die Bandbreite des Handlungsbedarfs, von Informationsarchitektur und Datenstruktur bis zur fragmentierten Plattformlandschaft mit unterschiedlichen Subdomains und Oberflächen.
Schritt 1: Beratung und Anbieterauswahl
Den Auftakt bildete das Beratungsmandat. Dazu gehörten das Expert-Review der bestehenden Website, Workshops sowie die gemeinsame Erarbeitung des Projektmodells mit der FHNW. Für einzelne Teilbereiche entstanden Entscheidungsgrundlagen. Mit den Entscheider:innen der FHNW gab es laufendes Sparring zu offenen Fragen.
Für UX-Design und UI-Design einzelner Teilbereiche unterstützte Raptus die FHNW bei der Erarbeitung der Bewertungskriterien und brachte die eigene Einschätzung aus Agentursicht ein.
Das durften wir beitragen
- Expert-Review der bestehenden Website
- Workshops und Erarbeitung des Projektmodells
- Entscheidungsgrundlagen für einzelne Teilbereiche
- Laufendes Sparring mit den Entscheider:innen der FHNW
- Mitarbeit an den Bewertungskriterien für die Anbieterauswahl
Schritt 2: UX-Konzept für den Zugang zu den Angeboten
Die FHNW bietet über 10'000 Angebote (Studiengänge, Weiterbildungen, Kurse, Events). Das alte System bildete sie über tief verschachtelte Ebenen und eine an Hochschulen orientierte Logik ab. Für Zielgruppen war das Angebot dadurch schwer zu erfassen.
Raptus hat den Zugang zu den Angeboten von Grund auf neu konzipiert: datenbasiert, methodisch und in mehreren iterativen Runden mit echten Nutzer:innen. An die Stelle vieler Ebenen trat ein flacher Katalog, der sich wie ein E-Commerce-System nutzen lässt, mit mehrdimensionalen Filtern und themenbasiertem Einstieg.
Data Structure First
Moderne digitale Systeme sind nur skalierbar, wenn die Daten strukturiert sind. Einer der ersten Schritte war daher die Analyse der bestehenden Daten und die Definition eines neuen Datenschemas. Gemeinsam mit dem Projektteam der FHNW. Auf dieser Grundlage stützen sich heute CMS-Backend, Templates, Filter und LLMO. Sie ermöglicht zudem den Mehrfacheinsatz der Daten, etwa für einen KI-Berater oder externe Plattformen.
Unser Beitrag in dieser Phase
- Analyse und Neudefinition des Datenschemas
- Use-Case-Spezifikationen auf Basis von Nutzerdaten und Personas
- Card Sorting und iterative Wireframe-Prototypen
- Flacher, E-Commerce-artiger Angebotskatalog
- Mehrdimensionale Filter und themenbasierter Einstieg
- Datenbasis für CMS, Filter, LLM-Crawler und KI-Anwendungen
Schritt 3: UI-Design und Designsystem
Aufbauend auf dem bestehenden Markenauftritt der FHNW entstand ein neues visuelles System. Der Spielraum führte zu einer modernen Interpretation von Swiss Design. Reduktion, präzise Typografie und konsequente Hierarchien prägen den Auftritt. Spätere Phasen erweitern das System um UI-Animationen, die derzeit in Arbeit sind. Barrierefreiheit ist durchgängig mitgedacht.
Der Weg dorthin führte über Interviews und Workshops mit den einzelnen Hochschulen. Moodboards und erste grobe Entwürfe machten Stilrichtungen früh greifbar. Nach der Wahl der Stilrichtung wurde diese schriftlich definiert, in vertieften Entwürfen ausgearbeitet und mit der FHNW verabschiedet.
Daraus entstand ein Designsystem in Figma, aufgebaut nach Atomic Design.
Hier kam Raptus ins Spiel
- Visuelles System auf Basis des bestehenden Markenauftritts
- Interviews und Workshops mit den einzelnen Hochschulen
- Moodboards und Stilrichtungs-Entwürfe
- Definition und Ausarbeitung der gewählten Stilrichtung
- Umfangreiches Designsystem in Figma nach Atomic Design
- Durchgängige Berücksichtigung der Barrierefreiheit
Schritt 4: Technische Umsetzung im CMS Plone
Die Website läuft auf dem Open-Source-CMS Plone, das die Inhaltsverwaltung der FHNW seit vielen Jahren trägt. Im Relaunch ging es darum, eine technisch saubere Brücke zwischen dem neuen Designsystem und Plone zu schaffen, damit Inhalte flexibel gepflegt und gleichzeitig konsistent dargestellt werden.
Das Designsystem entstand als React-Komponentenbibliothek und ist in Storybook dokumentiert. Plone bezieht die Komponenten direkt und bildet sie über einen Pagebuilder flexibel ab. Damit können Redakteur:innen Seiten eigenständig zusammenstellen, das Ergebnis ist dank Live-Preview unmittelbar sichtbar.
Als React-basiertes Frontend kam Volto zum Einsatz, das seit Plone 6 das Standard-Frontend des CMS bildet. Eine Überarbeitung war nötig, um es nahtlos mit der Komponentenbibliothek zu integrieren. Komponenten werden zentral verwaltet, Änderungen erfolgen an einem Ort und greifen überall, wo sie eingesetzt sind.
Vom Produktkatalog über die Filterlogik bis zur Suche sind alle Funktionen aus dem UX-Konzept vollständig umgesetzt. Möglich war das nur in enger Zusammenarbeit mit dem internen Entwicklungsteam Kreis Web, das aktiv mitentwickelt hat.
Was Raptus geleistet hat
- Brücke zwischen Designsystem und Plone-CMS
- React-Komponentenbibliothek mit Storybook-Dokumentation
- Pagebuilder mit Live-Preview für die Redaktion
- Integration und Überarbeitung des Volto-Frontends
- Umsetzung von Produktkatalog, Filterlogik und generellen CMS-Funktionen/Templates
- Co-Development mit dem internen Team Kreis Web
