.png){kind=logo}
Charity M. Jantzen,UXC
Showboat-Autokino
Responsive Design-Fallstudie
Von Charity M. Jantzen
Nobody likes to wait in line, so we got rid of them!
Das Produkt
Willkommen zu einem neuen Kinoerlebnis wie nie zuvor! Sie können sich Filme ansehen, Tickets, Konzessionen und Waren kaufen und dieses Retro-Theater mieten. Unsere Website/App ist so konzipiert, dass Sie alles von Ihrem ausgewählten Gerät aus anpassen können, von wo Sie parken, bis hin zu Untertiteln und Untertitelbeschreibungen.
Das Problem
Tony Ajana ist ein begeisterter Kinogänger und vielbeschäftigter Vater, der eine Möglichkeit braucht, Kinokarten und Ermäßigungen einfach online zu kaufen, weil er nicht mit vielen Kindern in der Schlange stehen und den Film verpassen möchte.
Das Ziel
Erstellen Sie eine interaktive Methode, mit der Benutzer ihr Theatererlebnis rationalisieren und personalisieren können. Die Verwendung dieser App wird den Umsatz steigern und sicherstellen, dass jede Transaktion frei von Warteschlangen ist.
Das Produkt
Willkommen zu einem neuen Kinoerlebnis wie nie zuvor! Sie können sich Filme ansehen, Tickets, Konzessionen und Waren kaufen und dieses Retro-Theater mieten. Unsere Website/App ist so konzipiert, dass Sie alles von Ihrem ausgewählten Gerät aus anpassen können, von wo Sie parken, bis hin zu Untertiteln und Untertitelbeschreibungen.
Verantwortlichkeiten
Entwicklung von Personas, User Stories und User Journey Maps
Durchführung von Usability-Studien
Erstellung von Wireframes und Prototypen
Testen und Iterieren von Designs
Entwerfen von Modellen
High-Fidelity-Prototyp
Barrierefreiheit umsetzen
Den Benutzer verstehen
Benutzerforschung: Schmerzpunkte
.png){kind=small}
Navigation
Benutzer konnten keine Informationen zu den Filmen finden, die sie ansehen wollten.
.png){kind=small}
Interaktion
Kinobesucher fühlen sich gehetzt, wenn sie versuchen, etwas im Kino zu kaufen.
Erfahrung
Übermäßige Warteschlangen machen Kinobesucher oft reizbar; sie verzichten auf den Kauf von Tickets oder Snacks an der Snackbar.
Person: Tony Ajana
Problemstellung:
Tony ist ein begeisterter Kinogänger, der es liebt, mit seinen Kindern ins Kino zu gehen, aber der Aufwand, Tickets und Snacks im Kino zu kaufen, wird überwältigend. Er braucht eine Möglichkeit, seine Einkäufe online zu tätigen, weil er den Film genießen möchte.
Karte der Benutzerreise
Ich habe diese Reisekarte erstellt, um mir zu helfen, Lücken zwischen der Benutzerpersönlichkeit und dem mentalen Modell des Benutzers zu identifizieren. Darüber hinaus half mir die Journey Map dabei, das allgemeine Endziel des Benutzers zu visualisieren und wie er sein Ziel erreichen musste.
Starten des Entwurfs
Seitenverzeichnis
Die Benutzer hatten erhebliche Navigationskomplikationen, was sie zu ihrem Hauptschmerzpunkt machte. Ich beschloss, dieses Wissen zu nutzen, und erstellte eine Sitemap.
Mein Ziel war es, strategische Entscheidungen zur Informationsarchitektur zu treffen, um die allgemeine Website-Navigation zu verbessern. Ich habe mich für eine Navigationsstruktur entschieden, die den Benutzern die Arbeit erleichtert und die Flexibilität bietet, sie in Zukunft zu erweitern.
Benutzerfluss
Bevor ich beginne, zeichne ich den Benutzerfluss auf und verwende ihn als Leitfaden, wenn ich mit dem Erstellen der Seiten beginne. Ich finde das äußerst hilfreich, wenn ich alleine arbeite und an Projekten, die eine schnelle Abwicklung haben. Darüber hinaus bietet mir der Benutzerfluss eine Methode zum Nachverfolgen abgeschlossener, ausstehender und als außerhalb des Umfangs liegender Designs, während ich entwerfe.
Drahtgitter aus Papier
Nachdem ich eine Wettbewerbsanalyse abgeschlossen und die Bedürfnisse der Benutzer und Stakeholder berücksichtigt hatte, begann ich, Variationen der einzelnen Bildschirme in meiner App zu skizzieren.
Anfangs hielt ich es für die ideale Lösung, den Checkout auf der Startseite zu haben.
Papier Wireframe
Variationen der Bildschirmgröße
Die Gestaltung einer vollständig responsiven Website ist für mich von entscheidender Bedeutung. Ich möchte sicherstellen, dass jeder Benutzer und seine Geräte unterstützt werden. Ich begann mit der Arbeit an den Papier-Drahtgittern mit unterschiedlichen Bildschirmgrößen, um sicherzustellen, dass jeder Benutzer Zugriff auf die Website hatte.
Digitale Wireframes
Die Wireframes auf Papier als Leitfaden für die Erstellung der digitalen Wireframes halfen, den Prozess zu beschleunigen, und es war verständlicher, was von den Benutzern erwartet wurde. Beim Erstellen der digitalen Wireframes sind mir einige Interaktionsprobleme aufgefallen, die ich sofort beheben konnte.
.png)
Low-Fidelity-Prototyp
Nachdem ich Feedback von meinen Teamkollegen erhalten hatte, erstellte ich einen Low-Fidelity-Prototyp mit dem grundlegenden Ansatz, eine Kinokarte zu kaufen.
Besuchen Sie: Showboat Drive-in Theatre Low-Fidelity-Prototyp
Usability-Studie: Parameter
Studientyp
Moderierte Usability-Studie
Teilnehmer
5 Teilnehmer
Ort
Moderierte Usability-Studie
Länge
20-30 Minuten
Usability-Studie: Ergebnisse
Dies waren die wichtigsten Ergebnisse der Usability-Studie:
.png)
Snacks kaufen
Die meisten Benutzer hatten Probleme damit, andere Konzessionsartikel hinzuzufügen
.png)
Konzept
Mehrere Benutzer verstanden den Prozess nicht und waren beim Kauf und der Teilnahme schüchtern.
Datum
Benutzer konnten nicht angeben, an welchem Datum sie den Film besuchen wollten.
Das Design neu definieren
Modelle
Vor Usability-Studie
Nach Usability-Studie
Modelle
Nachdem ich Feedback zum VIP-/Mitgliederprofil erhalten hatte, entschied ich mich für einen sozialeren Ansatz und fügte Gamification-Abzeichen hinzu, um die Benutzer zu belohnen.
Vor Usability-Studie
Nach Usability-Studie
Modelle
Nach dem Usability-Test zeigten die Ergebnisse, dass Benutzer die Möglichkeit haben möchten, kommende Filme in der Vorschau anzuzeigen, nicht nur das Feature dieser Woche. Infolgedessen habe ich die große Vorschau auf der Homepage entfernt und mehrere kleinere Trailer-Vorschauen hinzugefügt, sodass das Kino mehr als zwei Filme pro Woche zeigen kann.
Vor Usability-Studie
Nach Usability-Studie
.png)
High-Fidelity-Prototyp
Mein Ziel war es, die Zeit, die die Benutzer in Warteschlangen verbringen, und ihre Verwirrung zu reduzieren und den Ticketverkauf zu steigern. basierend auf dem Feedback; Dieses Ziel habe ich erreicht. Außerdem hat es Spaß gemacht, ein neues Programm und alle Trigger zu lernen.
Sehen Sie sich das Showboat-Autokino an
Überlegungen zur Barrierefreiheit
Ich möchte sicherstellen, dass die Website für Menschen mit Sehbehinderung und Farbenblindheit lesbar ist. Ich habe dies erreicht, indem ich bereitgestellt habe, dass die Website WGA AA-konform ist und ein Verhältnis von 4.5.1 zwischen den Links, dem Haupttext und dem Hintergrundkontrast aufweist.
Ich wollte ein hierarchisches Seitenlayout verwenden, um die Dinge zu organisieren und Bildschirmlesern bei der Navigation zu helfen, was als nächstes zu tun ist.
Ich habe die Website so gestaltet, dass die Textgröße und der Textabstand geändert werden, was dem Benutzer bei Sehverlust und anderen Problemen mit der Barrierefreiheit hilft.
Vorwärts gehen
Imbiss
Einfluss
"Hervorragend!"
"Ich liebe die neue Seite; sie ist fantastisch und gut gemacht."
Der Benutzer fand einen neu „eingerichteten, absolut kohärenten Benutzerfluss mit klaren Navigationshinweisen“. Die Website hat insgesamt das mentale Modell und die Ziele des Benutzers erreicht. Benutzer konnten Tickets, Waren, Ermäßigungen und sogar Parkplätze online kaufen.
Was ich gelernt habe
Das Wertvollste für mich ist es, ein Tagebuch zu führen, wenn alle Ziele, Zitate, Gedanken und Ideen zusammenkommen.
Nächste Schritte
Führen Sie nachfolgende Usability-Tests auf der Website durch und nehmen Sie die folgenden Änderungen vor.
Beginnen Sie mit dem Entwerfen der Close Circuit- und Untertitel-Apps für Menschen mit Behinderungen.
Mein nächster Schritt wäre, an den Untermenüs zu arbeiten, diese zu verspotten und neue Funktionen zu entwickeln.