1 of 40

Design a mobile ticketing app for a movie theater

P2367A348 - Galih Muhammad Ramdan

2 of 40

Penjelasan Produk:

Aplikasi pemesanan tiket bioskop secara online berbasis mobile yang memudahkan pelanggan untuk memesan tiket bioskop secara efektif, efisien dan fleksibel

Ringkasan Project

Durasi project:

Februari 2022

3 of 40

Masalah:

Pengguna terbatas dalam memilih metode pembayaran yang digunakan untuk memesan tiket.

Ringkasan Project

Tujuan:

Merancang desain aplikasi pemesanan tiket bioskop dengan beragam pilihan metode pembayaran untuk memudahkan pengguna.

4 of 40

Posisi:

UX Designer yang merancang aplikasi pemesanan tiket bioskop dari halaman daftar hingga profile.

Ringkasan Project

Tanggung Jawab:

Melakukan user research, membuat wireframe, membuat mockup, membuat prototyping dan melakukan usability study.

5 of 40

Empathize, �Define, �& Ideate

  • User research
  • User persona
  • Problem statement
  • User journey map
  • Brainstorming

6 of 40

Ringkasan User Research

Saya telah melakukan survei terhadap para penonton bioskop untuk mengetahui kebiasaan, kebutuhan dan masalah responden ketika memesan tiket bioskop secara online. Berdasarkan hasil survei, sebagian besar dari responden menggunakan aplikasi TIX ID yang memang dikhususkan untuk memesan tiket bioskop secara online. Hal ini dikarenakan pada aplikasi TIX ID tersebut mencakup beberapa bioskop yang terkenal di Indonesia (Cinema XXI, CGV, Cinepolis). Aplikasi TIX ID cukup populer dan menjadi salah satu pioneer aplikasi pemesanan tiket bioskop. Tampilan yang friendly serta praktis jadi faktor responden memilih aplikasi TIX ID. Disisi lain, kendala yang dihadapi oleh responden adalah terbatasnya metode pembayaran yang tersedia sehingga selalu kehabisan tiket saat memesan film yang ingin ditontonnya.

7 of 40

User research: pain points

Kehabisan Tiket

Kesulitan dalam memesan tiket karena selalu kehabisan

Limited Payment

Terbatasnya opsi metode pembayaran yang disediakan

Rekomendasi

Bingung memilih film yang hendak ditonton karena tidak ada rekomendasi

Notifikasi

Informasi mengenai film yang sedang tayang

1

2

3

4

8 of 40

Tutu Mubarok

Umur:

Pendidikan:

Domisili:

Status Menikah:

Pekerjaan:

21

Lulusan SLTA

Kab. Garut, Jabar

Lajang

Mahasiswa

“You have nothing to fear, if you have nothing to hide.”

Goals

  • Memesan tiket dengan mudah dan tidak kehabisan
  • Fleksibel memilih metode pembayaran
  • Mendapatkan rekomendasi film

Frustrations

  • Kesulitan memesan tiket
  • Kesulitan memilih metode pembayaran
  • Kesulitan memilih film yang hendak ditonton

Tutu adalah mahasiswa yang gemar menonton film di bioskop. Sebagai pelipur lara ditengah banyaknya tugas dan permasalahan yang datang di usia 20-an. Tutu menjadikan film sebagai “healing” dari kejamnya hiruk pikuk permasalahan duniawi.

9 of 40

Mahasiswa yang gemar menonton film di bioskop

Efektif, efisien dan fleksibel melakukan pembayaran

Memesan tiket secara online dengan banyak pilihan metode pembayaran

Tutu Mubarok

USER STORY

Sebagai seorang

Saya dapat

supaya

role pengguna

keinginan pengguna

manfaat

.

10 of 40

Persona: Tutu Mubarok

Goal: Memesan tiket film secara online, praktis dan mudah

AKTIVITAS

Install Aplikasi

Memilih Film

Konfirmasi Pesanan

Membayar Pesanan

Menggunakan Tiket

DETAIL

AKTIVITAS

A. Download aplikasi di Play Store

B. Daftar dan Login akun

C. Izinkan lokasi dan penyimpanan

A. Mencari dan memilih film yang diinginkan

B. Memilih lokasi, tanggal, jam dan kursi yang tersedia

C. Memesan tiket

A. Melakukan checkout

B. Memilih metode pembayaran

C. Memasukkan voucher promo apabila tersedia

A. Melakukan pembayaran sesuai dengan metode yang dipilih

B. Mendapatkan E-Ticket

A. Datang ke bioskop yang tertera di E-Ticket

B. Mencetak E-Ticket di console/print machine

C. Masuk ke studio

PERASAAN/EMOSI

PENGGUNA

Senang karena tidak perlu mengantri dan mudah

Frustasi, film telah habis terjual. Bingung memilih film

Kesal karena metode pembayaran yang disediakan terbatas

Senang karena berhasil memesan tiket yang diinginkan

Senang karena akhirnya bisa menonton film

PELUANG IMPROVISASI

Tersedia di App Store untuk pengguna produk Apple

Fitur Pre Order untuk pengguna premium

Menyediakan lebih banyak opsi metode pembayaran

Pembayaran yang terintegrasi langsung dengan aplikasi. Auto payment, dompet digital., etc.

Tidak perlu mencetak tiket secara fisik. Gunakan scan barcode pada E-Ticket

11 of 40

Memudahkan untuk melakukan pembayaran dan tidak kehabisan tiket

Aplikasi pemesanan tiket bioskop dengan banyak metode pembayaran

Tutu

Penggemar film

alasan

kebutuhan pengguna

karakteristik pengguna

karena

adalah seorang

nama

yang membutuhkan

.

PROBLEM STATEMENT

12 of 40

Brainstorming dengan HMW

Menyajikan metode pembayaran dalam bentuk Dropdown

1

Menyajikan metode pembayaran dalam bentuk Collapse berdasarkan tipenya

2

Menyajikan metode pembayaran dalam bentuk Radio Button

3

HMW mendesain fitur opsi metode pembayaran yang mudah?

Menyajikan metode pembayaran dalam bentuk Pop Up Modal berdasarkan kategori

4

13 of 40

Competitive Audit

14 of 40

Competitive Audit

Rata-rata aplikasi memiliki dompet digital khusus untuk melakukan pembayaran tiket.

1

Rata-rata aplikasi memiliki opsi metode pembayaran yang terbatas untuk bisa memesan tiket.

2

Beberapa aplikasi membutuhkan langkah yang panjang untuk dapat memesan tiket.

3

Kompetitor langsung dari produk ini adalah TIX ID, CGV Cinemas dan M-TIX. Sedangkan kompetitor tidak langsung adalah Gojek (GO-TIX). Selengkapnya disini.

15 of 40

  • Goal Statement
  • User Flow
  • Digital wireframes

Starting

the design

16 of 40

Bisa efektif, efisien dan fleksibel dalam membeli tiket dan tidak kehabisan

Melihat feedback & respon dari pengguna

Sinemaku

Penggemar film yang menginginkan kemudahan dalam membayar

Mudah memilih metode pembayaran

cara mengukur

pengaruh positif pada pengguna (mengapa)

pengguna yang terpengaruh (siapa)

aksi spesifik (apa)

sehingga

Kami akan mengukur efektivitas dengan

.

akan membuat pengguna

nama produk

yang akan mempengaruhi

.

GOAL STATEMENT

17 of 40

User Flow

18 of 40

Storyboard

  • Big picture
  • Close-up

19 of 40

Wireframe Kertas

Foto sketsa wireframe pada kertas yang berisi lima versi dari halaman yang sama dan sebuah sketsa versi penyempurnaannya

20 of 40

Wireframe Digital

Tampilkan minimal 4 halaman beserta link project-nya

21 of 40

Wireframe Digital

Ketersediaan metode pembayaran yang memberikan fleksibilitas bagi pengguna untuk memilih apa yang dikehendakinya.

Menyediakan berbagai macam pilihan metode pembayaran menggunakan radio button untuk memudahkan pengguna

Terdapat tombol yang dapat mengarahkan pengguna ke pilihan metode pembayaran yang lebih banyak lagi

22 of 40

  • Mockup
  • Design System
  • Pertimbangan Aksesibilitas
  • High-fidelity prototype

Mockup & �Prototype

23 of 40

Mockup

Proses mengatur elemen yang memanfaatkan penggunaan grid, containment dan whitespace untuk menciptakan desain visual yang menarik dan selaras.

Halaman yang masih dalam bentuk wireframe (lo-fi design)

Halaman yang sudah dalam bentuk mockup �(hi-fi design)

24 of 40

Mockup

25 of 40

Design System

26 of 40

Pertimbangan Aksesibilitas

Menambahkan teks alternatif pada gambar agar pengguna yang memiliki gangguan penglihatan tetap mendapatkan akses

Penggunaan ikon pada navigasi untuk mempermudah pengguna berpindah halaman

Menggunakan gambar poster film dengan ukuran yang proporsional untuk membantu pengguna memilih film yang diinginkannya

1

2

3

27 of 40

High-fidelity�prototype

28 of 40

  • Usability Study Plan
  • Insight Hasil Test
  • Modifikasi Desain Berdasarkan Insight

UX Research &�Testing

29 of 40

Usability Study Plan

Link Dokumen: Usability Study

30 of 40

Affinity Diagram

Link Dokumen: Affinity Diagram

31 of 40

Usability study: Insight

Usability Study dilakukan secara Unmoderated yang bertujuan untuk mengetahui seberapa mudah alur pemesanan tiket dengan jumlah responden 11 penggemar film.

Insight

Ternyata pengguna menilai tombol pada halaman login, register dan snack terlalu besar

1

Ternyata pengguna menginginkan metode login lain selain menggunakan email & google

2

Ternyata pengguna menganggap aplikasi secara keseluruhan sudah baik

3

32 of 40

Modifikasi Desain

Agar memberikan kenyamanan dan kemudahan dalam menggunakan aplikasi, dilakukan revisi terhadap Tombol CTA yang ada pada halaman login, register dan snack

Sebelum usability study

Setelah usability study

33 of 40

Modifikasi Desain

Sebelum usability study

Setelah usability study

34 of 40

  • Takeaways
  • Next steps

Going forward

35 of 40

Takeaways

Dampak:

Desain aplikasi yang dibuat mampu membantu pengguna untuk membeli tiket bioskop secara efektif, efisien dan fleksibel karena tersedianya banyak pilihan metode pembayaran. Hal tersebut membuat pengguna tidak perlu lagi khawatir kehabisan tiket.

Pelajaran yang Didapat:

Dengan mengerjakan project UX Case Study pemesanan tiket bioskop ini membuat saya belajar banyak hal baru terkait dengan desain yang tidak hanya enak dipandang tetapi dapat membantu pengguna menyelesaikan masalahnya dengan cara paling optimal.

36 of 40

Langkah selanjutnya

Melakukan usability study kembali dengan jumlah responden yang lebih banyak agar mendapatkan insight yang melimpah serta beragam pula untuk kebaikan aplikasi itu sendiri

Melakukan riset dan competitive audit untuk aplikasi serupa dengan waktu yang lebih banyak agar mendapatkan perspektif lain untuk desain aplikasi kedepannya

Besar harapan saya project ini tidak hanya terbatas pada desain saja tetapi juga bisa direalisasikan dalam bentuk aplikasi yang bisa digunakan jika memungkinkan di masa mendatang

1

2

3

37 of 40

Let’s connect!

Terima kasih atas perhatian dan waktu yang telah diluangkan untuk membaca dokumen yang saya susun terkait UX Case Study Design a mobile ticketing app for a movie theater. Besar harapan saya untuk menerima segala saran dan kritikan serta kolaborasi dari pembaca sekalian. Jangan ragu untuk menyapa saya melalui kontak dibawah ini:

Email: galihmramdan17@gmail.com

Github: https://github.com/degalih

Instagram: @galihmramdan17

38 of 40

THANKS TO:

39 of 40

LAMPIRAN

40 of 40

Terima Kasih!