CineSeat
Case Study

UX Dizajn responzívnej web aplikácie

Kategória: UX dizajn

Klient: Cvičný projekt, Google UX Certificate

Realizované: Máj 2023

V rámci projektu s pracovným názvom „CineSeat“ bolo mojou úlohou pripraviť responzívny dizajn webovej aplikácie slúžiacej na rezerváciu sedadiel v kine. Riešil som tak postup užívateľa od momentu výberu konkrétneho filmu a času premietania cez rezerváciu a nákup lístkov.

Tento projekt som realizoval ako súčasť zadania obsiahnutého v kurze Google UX Design Professional Certificate.

Problém

Rezervačný proces v kine je komplexná záležitosť, do ktorej vstupuje množstvo premenných ako rozloženie sedadiel v kinosále, ich obsadenosť, a stav ich dostupnosti. Z toho vyplýva, že samotné dizajnové riešenie musí počítať s tým s rôznymi variáciami.

Je potrebné pripraviť riešenie, ktoré bude vizuálne atraktívne a reprezentatívne, zjednodušujúce proces a vylepšuje informovanosť užívateľa.

Ciele

Cieľ #1

Zabezpečiť jednoduchý a priamočiary proces rezervácie

Cieľ #2

Zabezpečiť intuitívny výber sedadiel pri rôznych layoutoch a situáciách

Cieľ #3

Navrhnúť vizuálne atraktívne riešenie.
user flow

Prístup na základe zariadenia

Vzhľadom na možnosti veľkosti obrazovky som sa rozhodol aplikovať rozdielny user flow pre mobilné a desktopové zariadenia. Toto riešenie som zvolil pre minimalizáciu potreby scrollovania používateľmi mobilných zariadení s použitím lineárneho user flowu a umiestnením navigácie medzi jednotlivými krokmi v hornej časti obrazovky.

Na obrazovkách s väčšou zobrazovacou plochou (tablet, desktop) som si dovolil použiť veľkorysejší priestor a spojiť niektoré kroky, ktoré na seba logicky nadväzujú do jedného screenu. Užívateľ na väčšom zariadení má zároveň počas celého procesu vizuálny prehľad o zvolených miestach na sedenie.

Wireframes / Drôtené modely

Tvorba wireframov je nevyhnutná fáza, počas ktorej som preskúmal rôzne možnosti layoutu a informačnej štruktúry. Rýchle iterácie wireframov umožnili preskúmať množstvo návrhov v krátkom čase.

Štylizácia & UI

Vizuálny štýl vytvorený pre túto webovú aplikáciu sa nesie v tmavých tónoch, na pozadí podfarbený ambientným podsvietením vo farbách titulnej fotky/plagátu konkrétneho filmu. Hlavné CTA prvky sú v kontrastnej modrej farbe, ktorá pôsobí v rámci farebnej schémy dominantne.

Dizajn je rozdelený do kartových segmentov s cieľom zlúčiť k sebe patriace elementy a vytvoriť dojem hĺbky. Farebnosť výberu sedadiel využíva paralelu semaforu, ktorá signalizuje obsadenosť jednotlivých sedadiel.

Finalizácia

Výsledným produktom je dizajnové riešenie, ktoré zabezpečuje jednoduchý proces pre užívateľa. Sýte farby s referenciou na reálne situácie vo fyzickom svete ponúkajú užívateľovi jasné indície pri výbere sedadiel. Samotný dizajn je v tmavých farbách ako paralela k prostrediu v kine

Zber dát je limitovaný na možné minimum, tak aby webová aplikácia poskytovala plnohodnotné funkcie. V procese rezervácie sa zberajú dáta: počet lístkov, výber sedadiel, email, meno a priezvisko + dáta potrebné na uskutočnenie platby treťou stranou.