.png){kind=logo}
Charity M. Jantzen,UXC
Showboat Drive-In Theater
Studium przypadku projektowania responsywnego
By Charity M.Jantzen
Nobody likes to wait in line, so we got rid of them!
Produkt
Witamy w nowym doświadczeniu kinowym, jakiego jeszcze nie było! Możesz oglądać filmy, kupować bilety, koncesje i gadżety oraz wypożyczać to kino w stylu retro. Nasza witryna/aplikacja została zaprojektowana tak, aby dostosować wszystko, od miejsca parkowania po napisy i opisy napisów kodowanych, wszystko z wybranego urządzenia.
Problem
Tony Ajana jest zapalonym kinomaniakiem i zajętym tatą, który potrzebuje sposobu na łatwe kupowanie biletów do kina i zniżek online, ponieważ nie chce czekać w kolejce z wieloma dziećmi i przegapić filmu.
Cel
Utwórz interaktywną metodę, aby użytkownicy mogli usprawnić i spersonalizować swoje wrażenia w kinie. Korzystanie z tej aplikacji zwiększy sprzedaż i zapewni, że każda transakcja będzie wolna od kolejek.
Produkt
Witamy w nowym doświadczeniu kinowym, jakiego jeszcze nie było! Możesz oglądać filmy, kupować bilety, koncesje i gadżety oraz wypożyczać to kino w stylu retro. Nasza witryna/aplikacja została zaprojektowana tak, aby dostosować wszystko, od miejsca parkowania po napisy i opisy napisów kodowanych, wszystko z wybranego urządzenia.
Obowiązki
Tworzenie person, historyjek użytkowników i map podróży użytkowników
Prowadzenie badań użyteczności
Tworzenie makiet i prototypów
Testowanie i iterowanie projektów
Projektowanie makiet
Prototyp o wysokiej wierności
Wdrażanie dostępności
Zrozumienie użytkownika
Badania użytkowników: punkty bólu
.png){kind=small}
Nawigacja
Użytkownicy nie byli w stanie znaleźć informacji o filmach, które chcieli obejrzeć.
.png){kind=small}
Interakcja
Kinomani czują się pospieszani, gdy próbują kupić coś w kinie.
Doświadczenie
Nadmierne kolejki często powodują irytację kinomanów; rezygnują z kupowania biletów lub przekąsek w barze z przekąskami.
Persona: Tony Ajana
Stwierdzenie problemu:
Tony jest zapalonym kinomaniakiem, który uwielbia zabierać swoje dzieci do kina, ale kłopoty z kupowaniem biletów i przekąsek w kinie stają się przytłaczające. Potrzebuje sposobu na robienie zakupów online, ponieważ chce cieszyć się filmem.
Mapa podróży użytkownika
Stworzyłem tę mapę podróży, aby pomóc mi zidentyfikować wszelkie luki między osobowością użytkownika a jego modelem mentalnym. Ponadto mapa podróży pomogła mi w wizualizacji ogólnego celu końcowego użytkownika i sposobu, w jaki muszą osiągnąć swój cel.
Rozpoczęcie projektowania
Mapa strony
Użytkownicy mieli spore komplikacje nawigacyjne, co sprawiało, że była to ich główna bolączka. Postanowiłem wykorzystać tę wiedzę i stworzyłem mapę strony.
Moim celem było podejmowanie strategicznych decyzji dotyczących architektury informacji, aby poprawić ogólną nawigację w witrynie. Zdecydowałem się na strukturę nawigacji, która ułatwiła użytkownikom pracę i miała elastyczność, którą można rozwijać w przyszłości.
Przepływ użytkownika
Przed rozpoczęciem mapuję przepływ użytkownika i używam go jako przewodnika, gdy zaczynam budować strony. Uważam, że jest to niezwykle pomocne podczas pracy w pojedynkę i nad projektami, które mają szybki czas realizacji. Ponadto przepływ użytkowników zapewnia mi metodę śledzenia ukończonych, wybitnych i tego, co jest uważane za projekty poza zakresem, które projektuję.
Papierowe makiety
Po przeprowadzeniu analizy konkurencji i pamiętaniu, czego potrzebują użytkownicy i interesariusze, zacząłem szkicować odmiany każdego ekranu w mojej aplikacji.
Początkowo myślałem, że posiadanie kasy na stronie głównej jest idealnym rozwiązaniem.
Papierowy szkielet
Odmiany rozmiaru ekranu
Zaprojektowanie w pełni responsywnej strony jest dla mnie kluczowe. Chcę mieć pewność, że każdy użytkownik i jego urządzenia są obsługiwane. Zacząłem pracować nad makietami papierowymi o różnych rozmiarach ekranu, aby upewnić się, że każdy użytkownik ma dostęp do strony.
Cyfrowe modele szkieletowe
Mając papierowe makiety jako przewodnik do tworzenia cyfrowych makiet, pomogło przyspieszyć proces i było bardziej zrozumiałe, czego potrzebowali użytkownicy. Podczas tworzenia cyfrowych makiety zauważyłem kilka problemów z interakcją, które udało mi się rozwiązać od razu.
.png)
Prototyp o niskiej wierności
Po otrzymaniu opinii od kolegów z zespołu stworzyłem prototyp o niskiej wierności, którego podstawowym podejściem jest zakup biletu do kina.
Badanie użyteczności: parametry
Typ studiów
Moderowane badanie użyteczności
Uczestnicy
5 uczestników
Lokalizacja
Moderowane badanie użyteczności
Długość
20-30 minut
Badanie użyteczności: ustalenia
Oto główne ustalenia odkryte w badaniu użyteczności:
.png)
Kupowanie przekąsek
Większość użytkowników miała problemy z dodawaniem innych produktów objętych koncesją
.png)
Pojęcie
Kilku użytkowników nie rozumiało tego procesu i nieśmiało podchodziło do zakupu i uczestnictwa.
Data
Użytkownicy nie byli w stanie zadeklarować, kiedy chcą obejrzeć film.
Przedefiniowanie projektu
Makiety
Przed badaniem użyteczności
Po badaniu użyteczności
Makiety
Po otrzymaniu opinii na temat profilu VIP/członka zdecydowałem się na bardziej społeczne podejście i dodanie odznak grywalizacyjnych, aby nagradzać użytkowników.
Przed badaniem użyteczności
Po badaniu użyteczności
Makiety
Po teście użyteczności wyniki ujawniły, że użytkownicy chcą mieć możliwość podglądu nadchodzących filmów, a nie tylko funkcji tego tygodnia. W rezultacie usunąłem duży podgląd ze strony głównej i dodałem kilka mniejszych podglądów zwiastunów, dzięki czemu kino może wyświetlać więcej niż dwa filmy tygodniowo.
Przed badaniem użyteczności
Po badaniu użyteczności
.png)
Prototyp o wysokiej wierności
Moim celem było zmniejszenie ilości czasu spędzanego przez użytkowników w kolejkach i ich zamieszania oraz zwiększenie sprzedaży biletów; na podstawie informacji zwrotnej; Osiągnąłem ten cel. Ponadto fajnie było nauczyć się nowego programu i wszystkich wyzwalaczy.
Zobacz teatr Showboat Drive-in
Uwagi dotyczące dostępności
Chcę, aby strona była czytelna dla osób słabowidzących i nierozróżniających kolorów. Osiągnąłem to, pod warunkiem, że witryna jest zgodna z WGA AA ze współczynnikiem 4,5,1 między linkami, tekstem głównym i kontrastem tła.
Chciałem wykorzystać hierarchiczny układ strony, aby utrzymać porządek i pomóc czytnikom ekranu w nawigowaniu, co dalej.
Zaprojektowałem witrynę ze zmianą rozmiaru tekstu i odstępów między tekstami, co pomaga użytkownikowi z utratą wzroku i innymi problemami związanymi z dostępnością.
Idąc naprzód
Na wynos
Uderzenie
"Wybitny!"
„Uwielbiam nową witrynę; jest niesamowita i dobrze zrobiona”.
Użytkownik znalazł nowo „ustanowiony całkowicie spójny przepływ użytkowników z wyraźnymi wskazówkami nawigacyjnymi”. Witryna ogólnie zrealizowała model mentalny i cele użytkownika. Użytkownicy mogli kupować bilety, towary, ulgi, a nawet otrzymywać miejsca parkingowe online.
Czego się nauczyłem
Najcenniejszą rzeczą dla mnie jest prowadzenie dziennika przez cały okres doświadczania celów, cytatów, przemyśleń i pomysłów, gdy każdy element dostarczany jest razem.
Następne kroki
Przeprowadź kolejne testy użyteczności w witrynie i wprowadź zmiany w następujący sposób.
Rozpocznij projektowanie aplikacji obwodu zamkniętego i napisów dla osób niepełnosprawnych.
Moim następnym krokiem byłaby praca nad podmenu, wyśmiewanie ich i wymyślanie nowych funkcji.