Schweizer Paraplegiker Stiftung - Rebranding & Design Refresh 2025
Ein modernes Erscheinungsbild für eine starke Schweizer Marke. Mit dem Facelifting der Hauptwebsite paraplegie.ch und zahlreicher Submarken führen wir den neuen Markenauftritt der Schweizer Paraplegiker-Stiftung digital ein - nutzerzentriert, barrierefrei und zukunftssicher.
Ausgangs-Situation
Die Website der Schweizer Paraplegiker-Gruppe wurde im April 2018 lanciert und erfuhr im Laufe der Jahre verschiedene visuelle Aktualisierungen.
Im Jahr 2024 leitete die Organisation einen umfassenden Rebranding-Prozess ein, da 2025 das 50-jährige Jubiläum anstand und mit einem frischen Look gefeiert werden sollte.
Gleichzeitig wurde der Frontend-Code seit dem Start der Website nicht mehr ganzheitlich aktualisiert, war daher nicht mehr auf dem neuesten Stand der Technik und in einigen Fällen schwer zu pflegen und/oder zu erweitern.
Unsere Aufgabe
Das Rebranding wurde von einer externen Agentur durchgeführt und die neuen Design-Richtlinien mussten auf das UX/UI Design der Website adaptiert und angewandt werden. Unsere Aufgabe war es, die Designs zu entwickeln und sicherzustellen, dass die bestehenden Elemente den neuen Richtlinien entsprechen. Ausserdem sollten wir beachten, dass nur minimale redaktionelle Änderungen erforderlich sind — aber auch die UX und die Zugänglichkeit verbessert wird, wo dies möglich ist.
Im Anschluss an die Designphase sollte das neue Branding implementiert werden.
Unsere Lösungen
Anhand der definierten Markenrichtlinien beschäftigten wir uns zunächst mit den Basiselementen, dann den Layout-Elementen und schließlich mit der umfangreichen Menge an Inhaltselementen. Die Schweizer Paraplegiker Stiftung war stark in den Prozess involviert, in welchem wir alle 2 Wochen in Demo-Meetings eine transparente Abstimmung hatten. Auf diese Weise wurde ein einheitliches Erscheinungsbild geschaffen und die Erwartungen waren klar, bevor die Umsetzung begann.
Zu Beginn der Entwicklung wurde das Frontend auf Storybook migriert, um automatische Tests zu ermöglichen und die Grundlage zu schaffen, den Code auf den neuesten Stand der Technik zu bringen.
Die Entwicklung folgte dem gleichen Ansatz wie in der Designphase, wobei zuerst die Basisstile, dann das Layout und zuletzt die Inhaltselemente implementiert wurden. Während des Design-Refrehs wurde alter Code unter Verwendung modernster Standards aktualisiert und veralteter Code entfernt, um die Wartbarkeit zu verbessern und den Code der Website insgesamt zukunftssicher zu machen.
Die größte Änderung wurde an der Hauptnavigation vorgenommen, um die Benutzerfreundlichkeit zu verbessern und einen Mobile-First-Ansatz umzusetzen.
Das Ergebnis ist ein frisches Aussehen der Website, eine verbesserte Benutzerfreundlichkeit, modernste Technologie und Code sowie eine verbesserte Leistung und Zugänglichkeit.