Background
With the administration’s new strategic goals, the FHNW faced a fundamental question: How can a digital presence of this scale be further developed in a way that specifically attracts students and those interested in continuing education and makes it easier for them to navigate the program offerings?
The existing platform was no longer able to meet the new strategic requirements. An "Expert Review" conducted by Raptus confirmed the scope of the issues that needed to be addressed, ranging from information architecture and data structure to a fragmented platform landscape with various subdomains and user interfaces.
Step 1: Consultation and Vendor Selection
The project began with a consulting engagement. This included an expert review of the existing website, workshops, and the joint development of the project model with the FHNW. Decision-making frameworks were established for individual sub-areas. There was ongoing consultation with FHNW decision-makers regarding open questions.
For UX and UI design in specific areas, Raptus assisted the FHNW in developing evaluation criteria and provided its own assessment from an agency perspective.
Here is what we were able to contribute
- Expert Review of the Existing Website
- Workshops and development of the project model
- Basis for decision-making in specific areas
- Ongoing dialogue with FHNW decision-makers
- Contribution to the evaluation criteria for vendor selection
Step 2: UX concept for accessing the services
The FHNW offers over 10,000 programs (degree programs, continuing education courses, classes, and events). The old system organized these offerings using deeply nested levels and a structure based on academic departments. This made it difficult for target audiences to understand what was available.
Raptus has completely redesigned access to its offerings: data-driven, methodical, and developed through multiple iterative rounds of testing with real users. The multi-tiered structure has been replaced by a flat catalog that functions like an e-commerce system, featuring multidimensional filters and topic-based navigation.
Data Structure First
Modern digital systems are only scalable if the data is structured. One of the first steps was therefore to analyze the existing data and define a new data schema. This was done in collaboration with the FHNW project team. Today, the CMS backend, templates, filters, and LLMO are all based on this schema. It also enables the data to be reused in various ways, such as for an AI advisor or external platforms.
Our contribution during this phase
- Analysis and Redefinition of the Data Schema
- Use-case specifications based on user data and personas
- Card sorting and iterative wireframe prototypes
- A flat, e-commerce-style product catalog
- Multidimensional filters and topic-based navigation
- Data source for CMS, filters, LLM crawlers, and AI applications
Step 3: UI Design and Design System
Building on the FHNW’s existing brand identity, a new visual system was developed. This creative freedom led to a modern interpretation of Swiss design. The identity is characterized by minimalism, precise typography, and clear hierarchies. Future phases will expand the system to include UI animations, which are currently in development. Accessibility has been integrated throughout the design.
The process involved interviews and workshops with the individual universities. Mood boards and initial rough drafts helped bring the design styles to life early on. Once the design style was selected, it was defined in writing, developed into detailed designs, and approved by the FHNW.
This resulted in a design system in Figma, built using Atomic Design.
That's where Raptus came in
- Visual identity based on the existing brand identity
- Interviews and workshops with individual universities
- Mood boards and style concept designs
- Definition and development of the chosen style
- Comprehensive design system in Figma based on Atomic Design
- Consistent consideration of accessibility
Step 4: Technical Implementation in the Plone CMS
The website runs on the open-source CMS Plone, which has been powering the FHNW’s content management system for many years. The goal of the relaunch was to create a technically sound bridge between the new design system and Plone, ensuring that content can be maintained flexibly while being displayed consistently.
The design system was developed as a React component library and is documented in Storybook. Plone imports the components directly and renders them flexibly using a page builder. This allows editors to build pages on their own, and the results are immediately visible thanks to the live preview.
Volto, a React-based front end that has been the CMS’s default front end since Plone 6, was used. A redesign was necessary to integrate it seamlessly with the component library. Components are managed centrally; changes made in one place take effect wherever they are used.
From the product catalog to the filter logic and search functionality, all features outlined in the UX concept have been fully implemented. This was only possible through close collaboration with the in-house development team at Kreis Web, which played an active role in the development process.
What Raptus has accomplished
- Bridge between the design system and the Plone CMS
- React component library with Storybook documentation
- Page builder with live preview for the editorial team
- Integration and revision of the Volto front end
- Implementation of the product catalog, filter logic, and general CMS functions/templates
- Co-development with the internal Kreis Web team
