Die Digitalisierung von Kinos hat die Erwartungen der Besucher stark verändert. Eine benutzerfreundliche und effiziente Online-Sitzplatzbuchung ist heute essenziell, um Kundenzufriedenheit und Umsatz zu steigern. Dieser Entwurf beschreibt eine responsive Webseite für ein Retro-Kino, die auf UX-Nutzungsforschung basiert und eine intuitive, schnelle und visuell ansprechende Buchungserfahrung bietet.
Aufgabe
Layout für eine responsive Webseite zur Sitzplatzbuchung in einem Retro-Kino basierend auf einer umfassenden UX-Nutzungsforschung, die die Bedürfnisse und Erwartungen der Kinobesucher an eine moderne, benutzerfreundliche und responsive Sitzplatzbuchungs-Webseite identifiziert.
Ziel
Gesucht wird eine intuitive, schnelle und stilvolle Lösung, die zum Charakter des Kinos passt und die Nutzerbedürfnisse erfüllt.
Meine Rolle: UX/UI-Designer
Projektdauer: Januar – Februar 2025
Verantwortlichkeiten
Analyse der Nutzerbedürfnisse anhand von Forschungsplänen, Entwicklung von Wireframes, Mockups und Prototypen, Gestaltung intuitiver und ansprechender Benutzeroberflächen
Nutzungsforschung
Zusammenfassung
Im Zuge einer ersten Forschungsstudie wurde das Nutzerverhalten analysiert, um potenzielle Pain Points im Interaktionsprozess zu identifizieren. Durch Usability-Tests und Nutzerinterviews wurden zentrale Herausforderungen und Barrieren im Buchungsprozess ermittelt. Die gewonnenen Erkenntnisse bildeten die Basis für die anschließenden Designvorschläge.
Darauf aufbauend wurde eine zweite Forschungsstudie mit einem Low-Fidelity-Prototypen durchgeführt, um die Benutzerführung weiter zu optimieren. Dank gezieltem Nutzerfeedback ließen sich wertvolle Einblicke in die Wahrnehmung und Nutzung des Prototyps gewinnen, sodass konkrete Anpassungen zur Verbesserung der Usability und Nutzerfreundlichkeit vorgenommen werden konnten.
Probleme
Basierend auf UX-Forschung wurden folgende Nutzerbedürfnisse identifiziert:
Persona: Victor
Problembeschreibung:
Victor ist ein Student, der sicher und bequem seine Kinotickets für sein geliebtes Retro-Kino buchen will, damit er sich eine Auszeit vom stressigen Uni-Leben bekommt
User Journey Map
Sitemap
Die Sitemap ist benutzerfreundlich strukturiert und umfasst insbesondere das Programm mit Zeit- und Sitzplatzauswahl. Der Warenkorb ist essenziell, während ein Login-Bereich zur Kundenbindung beiträgt. Zusätzliche Features wie Specials und Unser Haus sind als optionale Ergänzungen sinnvoll.
User Flow Chart
Der User Flow Chart visualisiert die Schritte, die ein Benutzer durchläuft, von der Auswahl eines Films bis zur Bestätigung der Sitzplätze. Es zeigt die Interaktionen, Entscheidungspunkte und den Ablauf der Benutzerreise.
Design-Entwicklung
Responsives Design
Die Webseite wird mit einem flexiblen Grid-System gestaltet, das sich dynamisch an verschiedene Bildschirmgrößen anpasst.
- Mobile-First-Ansatz: Fokus auf eine schnelle und einfache Nutzung auf kleinen Bildschirmen
- Adaptive Layouts: Automatische Anpassung von Navigation, Sitzplan und Buttons je nach Gerätetyp
Sitzplatzauswahl & Buchungsprozess
- Interaktiver Sitzplan: Nutzer können Sitzplätze per Klick auswählen, Farben zeigen Verfügbarkeit an.
- Schrittweiser Buchungsprozess: Auswahl des Films, der Vorstellung, der Sitzplätze und Bezahlung in logischen Schritten.
- Echtzeit-Aktualisierung: Verfügbare Plätze und Preise werden ohne Neuladen der Seite aktualisiert.
- Gästebuchung: Option zur Buchung ohne Kontoerstellung, um den Prozess zu beschleunigen.
Ästhetik & Retro-Design
- Farbschema & Typografie: Warme Farben, nostalgische Schriften und Vintage-Elemente für eine authentische Retro-Atmosphäre.
- Animationen & Mikrointeraktionen: Dezente Effekte bei Hover- und Klickaktionen, um Interaktionen lebendiger zu machen.
Papier-Wireframes
Digitale Wireframes
Verbesserungen
- Nutzende wünschen einen Sitzplan, um die besten verfügbaren Plätze zu sehen
- Im Sitzplan werden die gewünschten Sitzplätze markiert
- Ein Live-Update informiert über aktuelle Belegungsänderungen
Low-Fidelity-Prototyp
Der User Flow beginnt mit der Auswahl des Films und der gewünschten Vorstellung über die Programmübersicht. Danach folgt die Sitzplatzauswahl, die Bestätigung im Warenkorb sowie der Bezahlvorgang, gefolgt von der Ticket-bereitstellung per E-Mail.
→ Link zum Low-Fidelity-Prototyp
Usability-Studie: Parameter
- Art der Studie: Unmodertierte Usability-Studie
- Ort: Berlin, remote
- Teilnehmende: 5 Nutzende
- Länge: 20-30 Minuten
Usability-Studie: Ergebnisse
Mockups
Digitales Kinoticket: Im ersten Wireframe, konnte man die Tickets nur per E-Mail ins Postfach senden. Durch die Nutzungsforschung entwickelte sich die Idee, zusätzlich ein digitales Kinoticket in der Smartphone-Wallet zu speichern. Nach dem Ticketkauf kann die digitale Kinokarte per Link oder QR-Code direkt zur Wallet hinzugefügt werden.
High-Fidelity-Prototyp
Zwischen Low-Fidelity- und High-Fidelity-Prototyp erfolgte eine iterative Verfeinerung des Designs durch Nutzertests, Feedback-Integration und die schrittweise Ergänzung von Details, Interaktivität sowie visuellen Elementen.
→ Link zum High-Fidelity-Prototyp
Berücksichtigung der Barrierefreiheit
Erkenntnisse
Wirkung:
Die neue Webseite bietet eine übersichtliche und ansprechende Möglichkeit zur Sitzplatzbuchung in einem Retro-Kino. Echtzeit-Updates und schnelle Reaktionszeiten reduzieren Buchungsabbrüche. Die schrittweise, visuell geführte Buchung erleichtert den Prozess und verbessert die Nutzererfahrung erheblich.
Was ich gelernt habe:
Die UX-Nutzungsforschung zeigte, dass Nutzer eine intuitive, mobile-optimierte Buchung mit schnellem Ladeverhalten und klarer Navigation bevorzugen. Während das Retro-Design geschätzt wird, muss es mit moderner Usability kombiniert werden, um Lesbarkeit und Übersichtlichkeit zu gewährleisten.
Weitere Schritte:
In Zukunft könnten Funktionen wie personalisierte Empfehlungen oder ein Treueprogramm integriert werden, um die Nutzerbindung noch weiter zu verbessern.
