.png){kind=logo}
Charity M. Jantzen,UXC
Showboat-Autokino
Responsive Design-Fallstudie
Von Charity M. Jantzen
Showboat-Autokino
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.
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.
.png)
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
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.
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.
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.
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.
Modelle
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.