top of page
Gourmet Appetizer

Showboat Drive-In Theater

Studium przypadku projektowania responsywnego
By Charity M.Jantzen

Showboat Drive-in Theatre

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.

FancyFoodCover_edited.png

Zrozumienie użytkownika

Food Delivery

Badania użytkowników: punkty bólu

number one icon in a blue circle

Nawigacja

Użytkownicy nie byli w stanie znaleźć informacji o filmach, które chcieli obejrzeć.

number-2 (1).png

Interakcja

Kinomani czują się pospieszani, gdy próbują kupić coś w kinie.

number-3.png

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.

Design a menu & ordering app for a fancy restaurant by Charity Jantzen (1).png

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.  

Journey Map.png

Rozpoczęcie projektowania

Researching and Writing
menu & food ordering app  - User flow.png

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ę.

Fancy Foods Paper Wireframe.HEIC

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. 

Fancy Foods Digital Wireframe.png

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. 

Jantzen Digital Wireframe

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. 

Low-fi prototype gif

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

Usability icon
Typ studiów

Moderowane badanie użyteczności

Participants.png
Uczestnicy

5 uczestników

Location.png
Lokalizacja

Moderowane badanie użyteczności

Length.png
Długość

20-30 minut

Badanie użyteczności: ustalenia

Oto główne ustalenia odkryte w badaniu użyteczności: 

number-one (1).png
Kupowanie przekąsek

Większość użytkowników miała problemy z dodawaniem innych produktów objętych koncesją

number-2 (1).png
Pojęcie

Kilku użytkowników nie rozumiało tego procesu i nieśmiało podchodziło do zakupu i uczestnictwa. 

number-3.png
Data

Użytkownicy nie byli w stanie zadeklarować, kiedy chcą obejrzeć film.

Image by Alvaro Reyes

Przedefiniowanie projektu

Makiety

Przed badaniem użyteczności

MEMBER.png

Po badaniu użyteczności

Membership - Web.png

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.

Mockup Comparison.png

Makiety

Mockups 4 phones.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

Prototyp o wysokiej wierności

Uwagi dotyczące dostępności

number one icon in a blue circle

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. 

number-2 (1).png

Chciałem wykorzystać hierarchiczny układ strony, aby utrzymać porządek i pomóc czytnikom ekranu w nawigowaniu, co dalej.  

number-3.png

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ą.

Hi-Fi.gif

Idąc naprzód

Ready to Serve

Na wynos

number one icon in a blue circle

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.

number-2 (1).png

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

number one icon in a blue circle

Przeprowadź kolejne testy użyteczności w witrynie i wprowadź zmiany w następujący sposób. 

number-2 (1).png

Rozpocznij projektowanie aplikacji obwodu zamkniętego i napisów dla osób niepełnosprawnych. 

number-3.png

Moim następnym krokiem byłaby praca nad podmenu, wyśmiewanie ich i wymyślanie nowych funkcji.

bottom of page