Rattenfest – Case Study

01 — Ausgangslage

Ein Kultfest seit 1972 – online aber kaum wiederzuerkennen.

Das Rattenfest ist die grösste Studentenparty in Rapperswil und wird seit 1972 von Studierenden organisiert. Jedes Jahr kommen mehrere tausend Besucher:innen auf den Campus OST – Rave, Bands, Karaoke, Bars und Foodtrucks inklusive.

In einer Projektwoche des Studiengangs Digital Design erhielten wir als Team von fünf Personen den Auftrag, die bestehende Website auf User Experience und Usability zu analysieren und innerhalb von fünf Tagen ein Redesign zu entwickeln – rechtzeitig für das 50. Jubiläum.

1972

von Studierenden für Studierende organisiert

50.

Edition am 2. Mai 2026 auf dem Campus OST

5 Tage

von der Analyse bis zum testbaren Prototyp

Zielgruppen: Gäste, Sponsor:innen, Artists

Leitfrage

Wie wird das Rattenfest online so klar und einladend wie vor Ort – für Partygäste, Sponsor:innen und Artists, in jeder Phase des Jahres?

01AnalyseHeuristik, Konkurrenz, Content & Social Media

02KonzeptionZielgruppen, Personas, Struktur, Branding

03PrototypingWireframes Low- bis High-Fidelity in Figma

04TestingFeedbackrunde zum klickbaren Prototyp

05OptimierungIteration, Präsentation, Übergabe

02 — Analyse & Research

Zuerst haben wir geklickt, verglichen und zugehört.

Heuristische Evaluation nach den 10 Usability-Heuristiken von Nielsen, eine Konkurrenzanalyse von 18 Festival- und Event-Websites, ein Content-Inventar aller bestehenden Seiten und ein Audit des Instagram-Auftritts – zusammengeführt zu einer SWOT-Sicht auf die bestehende Website.

Heuristische EvaluationKonkurrenzanalyseContent-InventarSocial-Media-AuditSWOT

Bisherige mobile Website: Menü und Startseite — Vorher: die bisherige mobile Website

Orientierung & Erwartung

Unklar, was Besucher:innen am Fest erwartet. Kein Situationsplan zu Bühnen, Bars oder Foodständen.

Ticketing & Sponsoring

Tickets schwer auffindbar, Kaufprozess unklar. Keine Infos oder Kontakt für potenzielle Sponsor:innen.

Navigation & Usability

Mobiles Menü teils nicht anklickbar, Logo führt nicht zur Startseite, Unterseiten im Hauptmenü.

Content-Darstellung

Line-up unübersichtlich, Galerie ohne Struktur, uneinheitliche Bildgrössen und eine Bilderflut auf Mobile.

Social Media

Profil nennt noch «Technikum» statt OST, kein Link zur Website, unregelmässiger Content ohne einheitliches Design.

Behalten

Das Logo ist über Jahre konsistent, und das Line-up funktioniert auf Instagram gut – das gehört auch prominent auf die Website.

«Wo kann man Tickets kaufen? – Nicht klar ersichtlich.»

— Erkenntnis aus der heuristischen Evaluation

03 — Zielgruppen, Phasen & Personas

Drei Zielgruppen, vier Phasen im Jahr.

Wer besucht rattenfest.ch – und wann? Wir haben Teilnehmer:innen, Sponsor:innen und Artists ihren Bedürfnissen entlang des Festjahres zugeordnet. Daraus entstand die Kernidee: eine Website, die sich dem Jahreszyklus anpasst, statt das ganze Jahr dasselbe zu zeigen.

Phase 01

Sponsoringphase

Firmen & Institutionen

Marke bei künftigen Arbeitnehmenden platzieren, Kontakt und Konditionen schnell finden.

Phase 02

Vorphase · Ticketing

Teilnehmer:innen

Ticket kaufen, Programm und Preise kennen, Acts mit Freund:innen teilen.

Phase 03

Heisse Phase · Event

Teilnehmer:innen

Wer spielt wann und wo? Anreise, Essen, Garderobe, Einlass und Barrierefreiheit.

Phase 04

Nachphase

Teilnehmer:innen

Fotos vom Abend, Rückblick auf Line-up und Food – und Vorfreude aufs nächste Jahr.

Personas

Noah HartmannTeilnehmer · 17 · Lehrling

Spontan, will Party mit Freund:innen. Budget rund CHF 60 – braucht Datum, Preis und Ticketlink auf einen Blick.

Nicole RitterTeilnehmerin · 21 · Studentin

Planerin. Interessiert an Food und einem guten Abend mit Studienkolleg:innen, Budget rund CHF 100.

Jorge LukasSponsor · 45 · CEO

Strukturiert. Sucht über das Fest neue Mitarbeitende und will schnell wissen, wie ein Sponsoring abläuft.

DJ CrisiArtist · 28 · lokaler Techno-DJ

Will Reichweite, Follower und grössere Gigs – braucht Infos zu Slots, Bewerbungsfrist und Kontakt.

Insight

Gäste suchen vor dem Fest vor allem Datum, Ort und Tickets – Sponsor:innen und Artists brauchen dagegen ganzjährig einen klaren Kontaktweg. Beides muss die Website je nach Phase in den Vordergrund holen.

04 — Konzeption & visuelles System

Ein visuelles System, das jedes Jahr neu leuchten kann.

Im Team verantworteten wir alle zusammen die konzeptionelle und visuelle Ausarbeitung: von den ersten Scribbles über die Typografie und das Farbsystem bis zur Weiterentwicklung des Logos in eine klare Logo-Familie für Website, Social Media und Print.

Logo

Original für grosse Flächen – Plakate, T-Shirts, Merch

Bildmarke

Profilbild auf Social Media und Maskottchen, z. B. im Footer

Dazu eine reduzierte Schriftmarke für den Website-Header. Ausgangspunkt war das bestehende Logo, das wir bewusst weiterentwickelt statt ersetzt haben – die Wiedererkennung über mehr als 50 Jahre ist ein Wert für sich.

Farbsystem

Navy#000E2BStatic

Light#EEEEEEStatic

Magenta#DB00FFTheme

Rosé#FFCAFF2025

Mint#DDFAE02026

Ice#C2D9E82027

Apricot#FFD3952028

Zwei statische Grundfarben tragen die Marke. Eine Themenfarbe pro Jahr setzt den Akzent – so bleibt das Rattenfest wiedererkennbar und wirkt trotzdem jedes Jahr frisch.

Typografie

Mulish

Freundlich, offen und auf kleinen Screens sehr gut lesbar – in drei Schnitten für Headlines, Fliesstext und Details.

05 — Das Redesign

Klarer Einstieg: sofort sehen, wann, wo und wie.

Die neue Startseite beantwortet die drei wichtigsten Fragen ohne Scrollen: Datum, Ort und Tickets. Mobile first gestaltet – weil die meisten Gäste die Seite kurz vor oder sogar während des Festes auf dem Handy öffnen.

01Logo

Einprägsam und passend zum Jubiläum – die 50 im Chrome-Look als Key Visual.

02Menü

Klar und reduziert auf die wichtigsten Punkte: Tickets, Line-up, Infos, FAQ.

03Startseite

Sofort erkennbar, worum es geht – mit Laufband für Rave, Bars, Foodtrucks, Karaoke.

04Farbkonzept

Erweiterbar und wiederverwendbar: eine Themenfarbe pro Jahr.

05Situationsplan

Bühnen, Bars und Foodstände auf einen Blick – für Orientierung vor Ort.

06UX Writing

Klare, verständliche Benennungen statt interner Begriffe.

ON Season & OFF Season

Statt ein ganzes Jahr veraltete Infos zu zeigen, wechselt die Website zwischen zwei Modi. In der ON Season stehen Tickets, Line-up und Eventübersicht im Fokus. In der OFF Season zeigt sie den Rückblick mit Galerie, kündigt das nächste Fest an und spricht Sponsor:innen und Helfer:innen an.

ON Season

Tickets · Line-up · Eventübersicht

OFF Season

Rückblick · Galerie · Sponsor werden

Für den Verein

Das OK wechselt jedes Jahr, Zeit ist knapp. Darum unsere Empfehlung: Daten und Design trennen, Inhalte nach Plan abfüllen und Farben sowie ON/OFF-Modus automatisch nach Zeitplan umschalten.

Ein Layout, vier Jahre

Das Farbsystem wird zum Zeitstrahl: Jede Edition bekommt eine eigene Themenfarbe – Logo, Key Visual und Akzente wechseln, Struktur und Wiedererkennung bleiben.

2025

2026

2027

2028

Prozess · Entwürfe

Vom ersten Entwurf zum finalen Design.

Bevor das finale Design stand, haben wir Schriften, Navigation und Plakat-Varianten nebeneinander verglichen. Viele Ideen wurden wieder verworfen – genau das hat das System am Ende klarer gemacht.

Mobile-Entwürfe mit verschiedenen Schriften — **Schriftvergleich.** Mulish, Inter, Poppins, Nunito Sans, Open Sans und Montserrat im Test.

Varianten für Header und Navigation — **Navigation.** Varianten für Logo, Ticket-Button und Menü.

Frühe Plakat-Varianten — **Plakat-Varianten.** Erste Layouts für die 50. Edition.

06 — Feedback & Iteration

Mit dem Verein besprochen und nachgeschärft.

Den klickbaren Prototyp haben wir in einer Feedbackrunde mit dem Verein durchgespielt. Jede Rückmeldung wurde gesammelt, priorisiert und direkt in die nächste Iteration übernommen.

FeedbackAnpassung im Redesign

01Tickets ausserhalb der Saison – was sieht man dann?

Klare OFF-Season-Kommunikation; Ticket-Buttons bleiben sichtbar, aber ausgegraut, mit kurzem Hinweis.

02Menü-Reihenfolge entspricht nicht der Wichtigkeit.

Tickets nach oben, FAQ vor Partner, History als zweitletzter Punkt, Kontakt ergänzt.

03«Partner» ist missverständlich.

Umbenannt in «Sponsoren» – passend zur Zielgruppe und zum Footer mit Hauptsponsor OST.

04Situationsplan zu klein, Rot/Blau schwer lesbar.

Grösser, kontrastreicher und mit Icons, z. B. Gläser für Bars.

05Google-Maps-Karte bringt wenig.

Ersetzt durch Link zum SBB-Fahrplan und Hinweis auf Parkplätze.

06Wer ist der Hauptact? Wie alt muss ich sein?

Line-up nach Headliner geordnet, Altersangabe «ab 16» direkt beim Ticketing.

07 — Ergebnis

★ Vom Verein zur Umsetzung ausgewählt

Unser Konzept hat sich durchgesetzt – und ist heute live.

Zum Abschluss der Projektwoche präsentierten wir dem Rattenfest-Verein unser Redesign. Der Verein entschied sich für unseren Entwurf als Grundlage für den neuen Webauftritt zur 50. Edition.

Die technische Umsetzung in WordPress erfolgte anschliessend auf Basis unserer Figma-Designs – Struktur und visuelles System unseres Entwurfs prägen heute rattenfest.ch.

Moderne LösungUserfreundlichWandelbar

Live ansehen: rattenfest.ch →

rattenfest.ch live auf Laptop und Smartphone

08 — Über die Projektwoche hinaus

Aus dem Schulprojekt wurde ein Engagement.

Nach der Projektwoche bin ich Teil des Design- & Social-Media-Teams des Rattenfests geworden. Für die 50. Edition gestaltete ich die Kommunikation mit – vom Plakat über die Staff-Badges bis zu Instagram-Assets und Videos. Auch für 2027 bin ich wieder im Team und arbeite am Social-Media-Konzept mit.

Flyer 2026 Rückseite mit Situationsplan und Sponsoren

PrintPlakat & Flyer 2026

Key Visual mit der 50 im Chrome-Look, Line-up mit Club- und Band-Stage, QR-Code zum Ticketing und Sponsoren-Leiste. Als Plakat, als Flyer mit Vorder- und Rückseite und als separate Line-up-Grafik.

Staff-Badges OK, Technik, Medien, Artist, Barchef

EventStaff-Badges

Ein einheitliches Badge-System für OK, Technik, Medien, Artists und Bar – gleiche Struktur, klare Farbcodierung, im Look des Jubiläums-Key-Visuals.

Social Media · @rattenfestInstagram-Assets & Videoproduktion

Posts, Stories und Videos im neuen Look – damit Website, Plakat und Feed endlich dieselbe Sprache sprechen.

09 — Mein Beitrag & Learnings

Was ich beigetragen habe – und was ich mitnehme.

UX/UI & Visual Designer

In der Projektwoche Website-Konzept und visuelles System im Team – seither im Design- & Social-Media-Team des Vereins.

Ein System schlägt ein Einzeldesign

Jahresfarben und ON/OFF-Modus machen die Seite für ein Team mit jährlich wechselnden Mitgliedern pflegbar.

Für den echten Moment gestalten

Wer kurz vor dem Fest aufs Handy schaut, braucht Datum, Ort und Tickets – nicht mehr.

Design endet nicht bei der Abgabe

Im Social-Media-Team erlebe ich, wie ein Auftritt über Website, Plakat, Badge und Reel konsistent bleiben muss.

Bestehendes weiterentwickeln

Ein Logo mit über 50 Jahren Geschichte verlangt Respekt – Verfeinern war wirkungsvoller als Ersetzen.