Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Redesign der Yorck-Kinoapp

Redesign der App der „Yorck Kinogruppe“ im Sinne der iOS-Guidelines. Neben einem neuen Navigationskonzept habe ich den Ticket-Buchungsflow redesignt und viele Details überarbeitet, um eine App zu gestalten, die Lust auf Kino macht.

Yorck Kinogruppe

26.png26.png

Bestehend aus 14 Kiez-Kinos in Berlin, ist die Yorck Kinogruppe der größte Kinoverband Berlins. Je nach Kino spezialisiert sich die Gruppe auf Arthouse- und Indieproduktionen, zeigt aber auch Blockbuster. Viele der Kinos stehen unter Denkmalschutz und haben architektonisch einen historischen Charakter, der bewusst bei Sanierungen beibehalten wird. Ein Beispiel ist das ehemalige DDR-Premierkino „Kino International“, das derzeit im Zuge der Berlinale genutzt wird.

Ein wichtiges Produkt der Kinogruppe ist das „Yorck Unlimited-Abo“ für knapp 20 Euro im Monat, womit man fast jeden Film ohne zusätzliche Kosten besuchen kann. 

Die App der Kinogruppe dient in erster Linie der Ticketbuchung. Insbesondere Kund:innen mit Kinoabo nutzen die App, um Plätze zu buchen.


Vorgehensweise

Da ich selbst langjähriger Inhaber eines „Unlimited-Abos“ bin, kenne ich viele der Probleme der App selbst. Im Zuge meines Redesigns habe ich regelmäßig Freunden sowie im Kurs meine Zwischenstände präsentiert und konnte so Feedback einsammeln. Dennoch ist dieses Redesign nicht vollständig durchdacht; für eine Umsetzung erfordert es noch mehr Research und Interviews mit Stakeholdern.

Navigation

Ist-Zustand

Die App nutzt für die drei Menüpunkte „Home“, „Filme“, „Kinos“ und „Mein Profil“ ein Hamburger-Menü. Unter „Home“ findet sich eine Mischung aus aktuellen Informationen, empfohlenen Filmen und ein Link auf den Filme-Tab. Hier findet sich der Hauptteil der App: Eine Auflistung des aktuell im Kino laufenden Programms. Im „Kinos“-Tab ist eine Liste aller Kinos, von wo aus Nutzer:innen deren jeweiliges Programm einsehen können. „Mein Profil“ beherbergt administrative Punkte wie vergangene Buchungen.

0,99.png0,99.png

Neu

Aufgrund der vielen Probleme von Hamburger-Menüs und der iOS Guidelines, die diese nicht vorsehen, habe ich es durch eine leicht erreichbare Tableiste auf der Unterseite ersetzt. Der erste Punkt ist nun „Ticket buchen“, denn das ist die zentrale Funktion der App. Der Tab „Entdecken“ soll Lust aufs Kino machen; er soll das Stöbern durch den aktuellen Filmkatalog erlauben, motivieren, sich heute Abend noch den ein oder anderen Film anzuschauen. Unter „Mein Yorck“ finden sich administrative, persönliche Belange wie das Abo, aber auch eine Auflistung der Kinos.

15.png15.png


Filme buchen und entdecken

Ist-Zustand

Filme lassen sich unter dem Tab „Filme“ buchen, wo sich eine lange Auflistung aller derzeit laufenden bzw. demnächst anlaufenden Filme mitsamt Bewertung findet. Im „Home“-Tab werden Filme empfohlen. Hier bietet die App keine weiteren Kontext-Informationen außer Titel, Länge und Plakat bzw. Thumbnail des Films.

0,5.png0,5.png

Neu: Ticket buchen

Der „Ticket buchen“-Tab ist darauf ausgelegt, schnell einen Film zu finden und Tickets zu buchen. Es wird davon ausgegangen, dass Nutzer:innen vorher bereits wissen, welchen Film sie schauen wollen. Aus diesem Grund ist die Auflistung kompakt, zeigt lediglich ein großes Filmplakat und Informationen darüber, wann und in welcher Sprache der Film gespielt wird.

Wie im Original gibt es auch in meinem Entwurf Filter-Einstellungen, welche ich um eine Uhrzeit-Einstellung ergänzt habe. Die Idee ist, dass Nutzer:innen die Suche auf ihren persönlichen zeitlichen Rahmen anpassen können. Wenn sie bspw. erst 19 Uhr frei haben, dann ergibt es keinen Sinn, nach Filmen vor 18 Uhr zu suchen.

Über den Kino-Filter lassen sich beispielsweise die Münchener „City Kinos“ ausschließen, die für Berliner:innen irrelevant sind.

1.png1.png

Neu: Filmansicht

Die Filmansicht stellt eine liebevolle Zusammenstellung von wichtigen Informationen zum Film dar. Eine kurze Inhaltsangabe, Metriken wie Bewertung (die Yorck jetzt schon anbietet), Originalsprache, Beliebtheit, Filmlänge und so weiter. Dazu kommen Trailer, Verlinkungen zu den Filmdatenbanken IMDB und Letterboxd (wichtig für Filmfans!) und zusätzliche Informationen.

Da Yorck ein eigenes Magazin hat (das Yorcker), ist davon auszugehen, dass sie über all diese Informationen bereits verfügen.

4.png4.png

Neu: Entdecken

Ziel des Entdecken-Tabs ist es, Lust aufs Kino zu machen. Anstelle der oft wenig aussagenden Filmplakate finden sich hier großflächige Bilder. (Diese könnten auch wie eine Galerie wechseln). Man findet eine kurze Inhaltsangabe und die Sprachen, in denen der jew. Film gespielt wird. 

Einige Filme werden seit jeher als „Yorck Pick“ gekennzeichnet, auch das findet sich hier wieder.

Drückt man auf einen Film, landet man in der Film-Detailansicht (s. oben).

3.png3.png


»Ticket buchen«-Flow

Ist-Zustand

Bucht ein:e Nutzer:in ein Ticket, kommt er:sie von der Detailansicht des Films über eine Auswahl des Tickets zur Sitzplatzauswahl.

Ein großes Problem, welches ich hier identifiziert habe, ist das Buchen eines Tickets mit Kinoabo. Wenn mehrere Freund:innen ein Kinoabo haben und eine:r von ihnen für alle anderen Tickets für einen FIlm buchen möchte, dann muss er:sie sich die langen Kartennummern aller merken. Die App erlaubt es zwar, Karten von anderen Nutzer:innen zu einer Liste hinzuzufügen, aber keine dazugehörigen Namen (s. 3. Screen unten). So muss sich die Person merken, welche Nummer zu welcher Freund:in gehört, was einen großen Mental Load erzeugt.

0.png0.png

Neu

In meinem Redesign zeigt ein ständiges Element die zu dem Schritt gebuchten Informationen wie Film, Datum, Uhrzeit, Ticketanzahl, usw. So wissen Nutzer:innen in jedem Schritt, wo sie gerade sind. 

Anstelle der eben kritisierten Speicherung der Kartennummern, habe ich ein „Freunde“-System implementiert, dazu im Kapitel „Freunde“ mehr. Anstelle einer Nummer wird nun die Person ausgewählt.

Eine besondere Challenge stellt das Auswählen des Sitzplatzes dar. In großen Kinosälen wird das schnell unübersichtlich. In meinem Redesign erhalten Nutzer:innen zunächst eine Übersicht über alle Ränge und können mit Tap auf den Rang den genauen Sitzplatz in einer Detailansicht auswählen. Der Mittelpunkt der Leinwand ist dabei jederzeit markiert.

7.png7.png
9.png9.png
8.png8.png
10.png10.png

25.gif25.gif

»Mein Yorck« und Freunde

Ist-Zustand und Problematik

Auf der „Mein Profil“-Seite sind administrative Punkte wie verganene Buchungen und die Datenschutzerklärung zu finden.

Die App bietet keine Möglichkeit, Freunde zu speichern oder zu merken. Erfahrungsgemäß haben Menschen mit einer Yorck Kinokarte mehrere Freunde, die ebenfalls diese Karte besitzen. Möchte eine Person die Tickets für mehrere dieser Freunde buchen, gibt es die Möglichkeit, all deren Kinoabo-Nummern zu einer Liste hinzuzufügen und mit diesen dann einen Film zu buchen. Nutzer:innen müssen sich hierbei jedoch merken, welche Person zu welcher Nummer gehört, denn die App erlaubt es nicht, zu den Nummern zugehörige Namen zu speichern (s. 2. Screen).

Ein weiteres Problem: So lassen sich einfach beliebige Kinoabo-Nummern in das System einspeichern und mit diesen Tickets buchen, ohne, dass die Person, der das Abo gehört, davon etwas mitbekommt.

0,95.png0,95.png

Neu

Mein Lösungsvorschlag ist ein „Freunde“-System. Es lassen sich andere Menschen mit einem Yorck-Profil hinzufügen, welche diese Anfrage bewusst annehmen müssen. Freund:innen können gegenseitig ihre Profile anschauen und sehen, welche Filme sie zusammen geschaut haben – ein nostalgischer Faktor.

Bucht ein:e Nutzer:in nun einen Film mit weiteren Freund:innen, die ein Kinoabo haben, kann sie beim Buchungsprozess unter deren Namen auswählen. Meine Vorstellung ist, dass gebuchte Tickets nicht nur in der eigenen App erscheinen, sondern auch in den Apps der Freunde; außerdem erhalten sie eine Benachrichtigung darüber.

Im „Mein Yorck“-Tab ist nach wie vor eine Watchlist, die nun „Gemerkte Filme“ heißt und sich visuell vom Rest abtrennt, um die höhere Wichtigkeit zu unterstreichen. Über Bookmark-Icons lassen sich Filme innerhalb der Film-Detailansichten speichern.

Man findet hier auch wie zuvor vergangene Buchungen, usw. Die Liste der Kinos ist auch in diesen Tab gerückt, weil diese meinen Befragungen und Erfahrungen zufolge für Nutzer:innen eine untergeordnete Rolle spielt. Prominent platziert ist das Kinoabo (bzw. wenn keins vorhanden, dann die Yorck-Kinokarte für Stammkund:innen).

11.png11.png


Ticket

Ist-Zustand

Gebuchte Tickets finden sich unter einer Liste auf der Profil-Seite. Sinnvoll ist, dass Reihe und Sitzplatz sehr groß und damit schnell erkennbar sind.

0,8.png0,8.png

Neu

Wenn ein Ticket gebucht ist, erscheint es visuell präsent im „Ticket buchen“-Tab. Dahinter verbirgt sich ein Modal. Das Ticket ist ein dreidimensionales Objekt, das sich minimal durch Berührungen drehen lässt. Meine Idee war es, das Gefühl und die Wertigkeit eines physischen Tickets zu imitieren.

Nutzer:innen können das Ticket auch absagen, sich den QR-Code groß und einen genauen Saalplan mit den gekennzeichneten gebuchten Plätzen anzeigen lassen.

2.png2.png


Komponentenlibrary, Farben, Typografie

Typografisch und farblich möchte ich mit meinem Redesign näher an die Identität der Yorck Kinogruppe heranrücken. Die Auszeichnungsfarbe (das Gelb) und die Schrift Scotch habe ich deshalb übernommen. Durch ihre hohen Kontraste ist die Schrift in kleinen Größen auf dem Screen nicht gut lesbar, weshalb sie nur für Überschriften verwendet wird; nicht für interaktive UI-Elemente oder Mengentexte.

Basierend auf iOS-16-Komponentenbibliotheken habe ich für die App eine eigene angelegt.

13.png13.png


Ausblick: Achievements, Leaderboard

Ziel meines Redesigns war es unter anderem, den Incentive zu erhöhen, die App zu nutzen und schlussendlich Tickets zu buchen. Ein weiterführender Gedanke ist es, durch Gamification-Ansätze mehr Menschen mitzunehmen. Es könnte ein Achievement sein, den Mongay zu besuchen (jeden Montag werden in einem Kino queere Filme gezeigt). Über das neue Freunde-Feature könnten sich Freunde messen und gegenseitig motivieren.

Ein gut umgesetztes Achievement-System ist nicht nur für das Kino profitabel. Denn Kinobesuche erweitern mitunter den eigenen Horizont. :)

12.png12.png


28.png28.png

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Frank Rausch

Zugehöriger Workspace

Apps & Details · WiSe 2022/23

Entstehungszeitraum

Wintersemester 2022 / 2023

Keywords