Kino-Ticketing-System
Konzeption eines flexiblen Frontend-Systems – von der starren Kinoseite zum konfigurierbaren, markenspezifischen Kino-Portal.
- Kunde: Software-Dienstleister für Kinobetreiber
- Projekt-Kontext: Ganzheitliches Frontend-Redesign und modulares UI-Konzept
- Zeitraum: 3 Monate
- Meine Rolle: UX/UI Lead Designer (Konzeption des White-Label-Designsystems, Informationsarchitektur, Layout-Flexibilisierung)
Angewendete Tools
Die Herausforderung
Klassische Web-Templates für Kinobetreiber stehen oft vor einem Dilemma: Sie müssen funktionale Ticketing-Prozesse abbilden, wirken visuell aber wie starre Standard-Themes von der Stange. Der Anbieter für Kino-Software wollte sein Frontend-System grundlegend überarbeiten. Kinobetreiber sollten künftig nicht mehr nur Spielzeiten auflisten, sondern eigene Content-Sektionen und Sonderaktionen vermarkten können.
Der Kern lag im B2B2C-Ansatz (White-Label): Das neue Frontend musste modular und konfigurierbar sein. Einzelne Kinos sollten eigene Farben, Schriften und Logos hinterlegen können. Das Design musste trotz weitreichender Individualisierung über alle Instanzen stabil, responsiv und visuell überzeugend bleiben.
Prozess & meine Rolle
Ich habe das Frontend-System von der strukturellen Flexibilisierung bis zu den finalen UI-Varianten neu konzipiert:
- Neustrukturierung des Kinoprogramms & der Filmdetails: Ich habe die Informationsarchitektur der wichtigsten Seiten überarbeitet. Das Kinoprogramm bietet jetzt intuitive Filter (nach Datum, Genre, Format wie 3D/IMAX). Die Filmdetailseiten wurden aufgewertet, um Filmtrailer, Besetzungsinfos und den direkten Ticketkauf zu verbinden.
- Konzeption modularer Content-Sektionen: Um den Kinos Raum für Eigenmarketing zu geben, habe ich flexible Content-Sektionen (Story-Flächen) entwickelt. Betreiber können nun eigenständig Banner, Rabattaktionen für Popcorn-Menüs oder Sneak-Preview-Events einpflegen, ohne das Kern-Layout zu brechen.
- Entwicklung eines dynamischen White-Label-Designsystems: In Figma habe ich ein UI-System auf Basis flexibler Design-Tokens aufgesetzt. Ich habe definiert, wie sich Primär-, Sekundär- und Hintergrundfarben frei austauschen lassen, ohne dass Kontraste oder die Barrierefreiheit (Accessibility) leiden. Auch die Typo-Skalierung funktioniert mit unterschiedlichen Brand-Fonts.
- Erstellung von Brand-Varianten & High-Fidelity Mockups: Mit Figma, Photoshop und Illustrator habe ich das fertige System gründlich getestet. Ich habe mehrere unterschiedliche Design-Auszüge simuliert (z. B. vom Programmkino-Look bis zum modernen Multiplex-Design), um zu zeigen, dass das System individuell wirkt und der Eindruck eines Standard-Themes verschwindet.
Das Ergebnis
Das neue Frontend lässt jedem Kino seine eigene Marke und bleibt technisch stabil. Der Software-Anbieter hat damit ein starkes Verkaufsargument im B2B-Geschäft, Endkunden buchen über eine klare, durchgängige Oberfläche.