UI/UX Case Study: Revamp the User Experience of TIX ID Apps in Payment Methods, Bundling Promo and Add on Food
Intoduction
Halo! Saya Sisil, saya sedang dalam perjalanan untuk beralih karir menjadi Desainer UI/UX. Beberapa bulan terakhir ini, saya sedang mengikuti bootcamp untuk kursus desain UI/UX yang diselenggarakan oleh Binar Academy. Studi kasus UI/UX ini adalah tugas akhir project saya dalam bootcamp ini. Saya harap Anda mendapatkan beberapa wawasan dari ini, jadi mari kita mulai studi kasusnya.
⏳Timeline
Project Duration : 2 weeks ( 29– 11 Juni 2023)
Overview
TIX ID adalah aplikasi pilihan untuk pecinta film di Indonesia. Dengan TIX ID, kamu bisa memesan tiket film dari bioskop favoritmu (Cinema XXI, CGV, Cinepolis). Dengan adanya aplikasi TIX ID user tidak perlu repot-repot mengantri di loket sehingga user bisa mendapatkan seat yang diinginkan tanpa harus membeli tiket di loket. Selain itu TIX ID menyediakan fitur presale untuk beberapa film yang antusiasme nya sangat tinggi, sehingga user bisa mendapatkan kepastian seat yang dipilih sebelum film nya tayang. Dan dibeberapa waktu, TIX ID memberikan voucher promo untuk user DANA, sehingga membuat user DANA tertarik membeli tiket film bioskop di aplikasi ini.
💟ROLE & CONTRIBUTION
Pada proses design ini, kami membagi peran dan jobdesk sebagai berikut:
Imtiyaz Anysah & Hanah Nurjanah (Product Manager)
- Product manager ini bertanggung jawab dalam mengatur jalannya pengembangan sebuah product mulai dari Product Requirement Document (PRD), EPIC, User story strategi, indentifikasi fitur, riset pasar hingga mengembangkan product tersebut.
Frissila Laraswati (UX Researcher)
- User Interviewer: Dimulai dari background atau problem statement divalidasi dengan riset yaitu metode interview. Dalam hal ini akan mendapatkan infomasi kualilatif yang nantinya dikemas dalam sebuah thematic analysis, affinity diagram, insight serta recommendation. Di support dengan Tools: Google Doc, Google Sheets, Google Form, Figma, Jira
- Conduct UT: Observasi user selama melakukan design testing untuk mengetahui design tersebut sudah bisa berjalan dengan baik atau tidak. Dan mendapatkan feedback user untuk diolah kembali menjadi fitur yang lebih baik lagi. Di support dengan Tools: Maze, Google Form
Hafizh Izzan (UX Designer)
- Menerjemahkan dari affinity diagram (design mandates) atau recommendation dan insight menjadi sebuah ide desain. (output:POV, HMW,User Story, IA, Flowchart). Di support dengan Tools: Figma, Jira
Fernaldi Angga (UI Designer)
- Memvisualisasikan dari flowchart, menjadi sebuah ide atau wireframe secara interface. Lalu membuat prototypenya sesuai dengan hasil researcher dan ux design. Di support dengan Tools: Figma, Jira
Background
TIX ID merupakan sebuah aplikasi pembelian tiket bioskop secara online yang dapat diakses melalui smartphone. Pengguna dapat membeli tiket bioskop dimana pun dan kapan pun tanpa harus menunggu antrian. Konsep pembelian tiket bioskop diintegrasikan dengan pihak ketiga dari sisi pembayaran yaitu DANA sebagai konsep uang digital. Kenaikan pengguna TIX ID tergolong lambat, hal ini dikarenakan terbatasnya pilihan metode pembayaran. Selain itu, aplikasi ini hanya berfokus pada pembelian tiket bioskop saja padahal terdapat daya tarik lain yang mampu meningkatkan revenue dan konversi pengguna yakni metode pembelian makanan. Perlu diingat bahwa TIX ID dan dompet digital DANA mempunyai kerjasama sehingga harus tetap memprioritaskan DANA sebagai metode pembayaran utama.
Design Thinking
Untuk mendapat solusi dari masalah user, kami menggunakan design thinking dengan tahapan sebagai berikut:
Design Thinking diharapkan mampu memenuhi kebutuhan user dan dapat menyelesaikan permasalahan user saat menggunakan aplikasi tersebut.
🧡Emphatize
🟠Problem
Dari hasil riset yang saya dapat dari Aplikasi TIX ID, untuk layanan dan fiturnya sendiri masih sangat terbatas. Dalam pembelian makanan sampai saat ini kendalanya, konsumen hanya bisa memesan makanan ketika sampai ditempat dan harus mengantri kembali lagi. Ini akan menghabiskan waktu yang tidak singkat.
Disisi lain Aplikasi TIX ID memiliki kehambatan, yaitu untuk metode pembayaran hanya tersedia pilihan DANA dan Credit Card. Sehingga user yang tidak menggunakan DANA merasa kesulitan untuk menyelesaikan pembayaran nya dan berakhir pindah memesan di aplikasi lain.
🟠Current Condition
User merupakan pecinta film yang seringkali ingin menyempatkan waktu untuk pergi nonton ke bioskop tetapi karena kesibukan mengharuskannya membeli tiket di Aplikasi online. Pembelian tiket online ternyata mampu mengoptimalkan kenyamanan penikmat film melalui kepastian tersedianya tiket film yang di inginkan, keleluasaan memilih jadwal dan posisi kursi yang strategis, tidak menghadapi antrian panjang, dan memiliki waktu yang lebih fleksibel untuk tiba di bioskop.
Kebanyakan user lebih tertarik ketika mendapatkan voucher promo dalam melakukan transaksi. Untuk pembelian makanan di bioskop user masih kesulitan dikarenakan belum ada fitur yang dapat mempermudah user membeli makanan dan minuman tanpa harus mengantri di tempat bioskop. Lalu mereka membandingkan promo harga, fitur yang lebih menguntungkan di Aplikasi lain.
🟠Product Objectives
Pada dasarnya, kami ingin membantu pengguna TIX ID untuk mendapatkan pengalaman berbelanja yang lebih baik. Untuk meraih tujuan tersebut, maka kami menetapkan tiga tujuan yang lebih fokus untuk kemudian akan dijadikan sebagai acuan dalam proses research:
- Mengidentifikasi masalah pada desain fitur Metode Pembayaran di aplikasi TIX ID agar memudahkan user bertransaksi dengan default mode tetap menggunakan DANA.
- Mengidentifikasi masalah pada desain penambahan fitur baru Bundling Promo untuk memudahkan user membeli tiket + makanan dengan potongan harga dan tanpa antri.
- Mengidentifikasi masalah pada desain penambahan fitur baru TIX Food pemesanan makanan diawal akan memudahkan customer dan meningkatkan user experience.
🟠Hypotesis
Langkah selanjutnya adalah menyusun hipotesis dimana akan ada berbagai macam asumsi yang bisa mendorong proses UX Research ini benar-benar terjadi. Tentunya hipotesis tersebut perlu kita uji di tahap selanjutnya.
Goal
“Menargetkan jumlah pengguna aktif ataupun retention user dengan cara melakukan promo bundling dan pilihan lebih banyak untuk metode pembayaran. Dengan menambahkan feature untuk membeli makanan di mobile app akan sangat mempermudah user tidak perlu mengantri dan menunggu untuk menerima order.”
💚Define
🟢Research
Bagi saya sebagai Researcher di awali dengan menentukan topik yang nanti nya akan kami kembangkan. Memulai langkah pertama bersama PM, UI/UX Design saat break room (Zoom meeting) mendiskusikan lalu memberikan ide untuk mencari solusi apa yang sangat relevan. Mendefine mulai dari background, problem, objective, hypothesis, user stories.
✨Alasan melakukan Research harus bisa memahami produk yang dibuat karena adanya peluang yang artinya produk tersebut memang dibutuhkan oleh user (customer needs) dan bisa dimanfaatkan untuk kepentingan bisnis perusahaan (business needs).
Saya membuat Transkrip User Interview melalui tahap berikut:
Introduction: Dimulai dari awal memperkenalkan diri dan menceritakan alasannya mengapa harus melakukan wawancara ini mulai dari (siapa kita, mengapa melakukan ini, berapa lama, dan bagaimana kita melakukan datanya), mendapatkan perizinan untuk me-record selama wawancara. Menanyakan hal general seperti demografis user.
Mainbody — Principles: Buat tema konteks pertanyaan secara berurut. Kalau disini saya menanyakan seputar tentang pembelian tiket bioskop, kesehariannya dalam menonton film, suka beli makanan/minuman saat menonton film sampai ke metode pembayarannya.
Projection: Disini saya menanyakan hal tentang bagaimana user menggunakan aplikasi, pengalaman user selama berbelanja online.
Wrap up: Langkah terakhir ini saya menanyakan hal kedepannya bagaimana harapan user terhadap sebuah aplikasi, lalu memberikan user kembali bertanya terkait wawacara ini.
Kemudian setelah saya membuat transkrip user interview, maka saya menentukan orang-orang yang akan saya interview. Dengan kategori harus memiliki hobi yang sama yaitu menonton film, mereka juga yang suka berbelanja online menggunakan apps. Dikarenakan ini saya harus mencari 5 partisipan sesuai kategori yang saya harapkan dapat menjawab semua pertanyaan-pertanyaan kebutuhan user.
Partisipan Kriteria
- User TIX ID apps
- Nasional (Indonesia)
- Umur 16–25 Tahun
- Perempuan/Laki-Laki
✨Kenapa harus 5 responden yang akan di interview?
Karena menurut data dari NN Group, 5 partisipan yang sesuai dengan target user saja ternyata sudah cukup untuk memberikan kita data akan pola perilaku, masalah usability, dan preferensi sebesar 80% dari keseluruhannya secara statistik. Karenanya disarankan untuk cukup melibatkan 5 partisipan selain karena sudah memberi banyak gambaran, juga lebih hemat biaya dan waktu.
Method: In person testing
Tools: Maze and Screencastify
Date: 21 Mei 2023
Number of participants: 5 people
🟢Thematic Analysis
Dari hasil interview user, saya mengolah kembali data yang sudah didapat dengan mendengarkan hasil record. Kemudian saya tuangkan hasil interview di dalam Analysis Thematic.
Saya melakukan Thematic Analysis karena dapat mempermudah saya mengatur data yang banyak dari sebuah qualitative research dengan menandai beberapa observasi lalu kutipannya akan menjadi sebuah code. Sesuai dengan namanya, Thematic Analysis melibatkan pencarian tema yang nanti outputnya berupa Affinity Diagram.
🟢Affinity Diagram
Affinity Diagram itu sendiri adalah cara memrepresentasi visual yang baik dari sebuah Thematic Analysis berupa code. Setelah mendapatkan sebuah tema dari Thematic Analysis, hasilnya akan dikelompokan poin-poin penting yang didapat. Dengan cara antara lain:
- Tuliskan hal yang menarik dari observasi (Kelompokan dengan observastion, goals, dan quote).
- Kelompokan hasil dari observasi
Tools: Link Figma AD
Dari 5 Affinity Diagram yang saya buat, saya berdiskusi dengan PM dan tim UI/UX Designer dan saya mendapatkan 2 hasil yang perlu di prioritaskan berdasarkan pola yang sudah di identifikasi. Ini hasil Affinity Diagram yang akan dikembangkan oleh tim kami:
Dari sebuah Affinity Diagram akan mendapatkan ide berisi fitur-fitur yang dibutuhkan oleh user dengan menggunakan Desain Mandates. Sehingga kami perlu mempertimbangkan apa yang dibutuhkan user untuk fitur yang lebih baik. Mendapat beberapa findings dan insights yang membantu kami mendapatkan ide yang berpotensial untuk dikembangkan serta mengetahui hal yang dibutuhkan. Berikut hasil Insight serta Recomendation:
🟢Insight dan Recomendation
Insight 1: Sistem Pembayaran yang Kurang Beragam. Saat ini pembayaran yang tersedia baru ada dompet digital DANA, sehingga user yang tidak menggunakan Dana merasa terhambat untuk menyelesaikan pembayaran nya dan beralih menggunakan aplikasi kompetitor.
Recomendation: Memberikan beberapa metode pembayaran
- Bekerja sama dengan merchant pembayaran lain selain E-Wallet (Direct Competitor).
- Membuat page another payment method yang memberikan keterangan keunggulan menggunakan metode pembayaran DANA.
Insight 2: User memiliki kebiasaan makan/minum sambil menoton. Dari hasil research tidak sedikit user yang memiliki kebiasaan menonton sambil makan/minum tetapi diaplikasi TIX ID tidak ada yang menjual makanan/minuman.
Recomendation: Membuat beragam pembelian makanan
- Membuat promo berupa bundling tiket dan makanan
- Membuat fitur dropdown add on food
- Membuat pop banner pada awal tampilan aplikasi
- Membuat invoice yang diperuntukan untuk pick up makanan
- yang dipesan secara online.
.
🟢User Persona
Kemudian dilakukan pengolahan data dari kelima partisipan dan didapatkan sebuah user persona yang dapat menggambarkan kebutuhan dan keinginan dari target user. Darimana sumber data untuk membuat Persona? dari hasil interview yang telat dilakukan.
💙IDEATE
Tools: Link Figma POV, HMW, User Story, Flowchart
🔵Point of View (POV)
Point of View (POV) ini di dasarkan pada pemahaman kami yang paling penting tentang user berdasarkan hasil dari interview sebelumnya. Dan juga ini hasil dari insight dan recomendation yang telah ditemukan oleh saya sebagai Researcher. Berikut ini POV:
POV 1
POV 2
🔵How Might We (HMW)
Seluruh proses iterasi, kami ingin menilai masalah sampai ke akarnya, karena tujuan utama kami adalah menciptakan solusi untuk membantu pengguna target kami dalam berbelanja online lebih naik. Jadi di sini tentang bagaimana kita menantang diri kita sendiri untuk menempatkan segala sesuatu dalam rekonsiliasi:
Iteration 1
- Bagaimana memberikan pengalaman pembayaran yang lebih beragam kepada Pengguan TIX ID agar mereka mendapat kemudahan dalam melakukan pembayaran.
- Bagaimana memotivasi menggunakan Aplikasi TIX ID kepada pengguna aplikasi booking tiket bioskop agar mereka mendapat meningkatkan ketertarikan menggunakan TIX ID.
Iteration 2
- Bagaimana memberikan pengalaman memesan makanan yang beragam kepada Pengguna TIX ID agar mereka mendapat kemudahan dalam melakukan pembelian makan.
🔵User Story
User stories hasil kombinasi dari semua informasi terkait produk (scope, requirement, tujuan produk, bisnis model, analisis konten, analisis komparatif, pedoman brand, dll). Riset terhadap user juga dapat di analisis berdasarkan user stories berikut:
- Iteration 1.1
- Iteration 1.2
- Iteration 2.1
🔵Flow Chart
Fungsi dari flowchart yang kami buat adalah untuk mengetahui alur dari pengguna/user saat menggunakan aplikasi. Ditahap ini, kami menggunakan tools Figma untuk membuat flowchart dari aplikasi TIX ID. Flowchart tersebut kami buat berdasarkan sisi dari User sebagai pengguna aplikasi TIX ID.
Flowchart ini pada awalnya kami buat dengan menggabungkan seluruh tahapan mulai dari pembelian tiket bioskop sampai dengan melakukan pembayaran.
🔵Information Architecture
Dari flowchart yang telah di buat, saat nya untuk menentukan information architecture sebelum melakukan perancangan wireframe. Information architecture secara garis besar memiliki arti kumpulan dari desain berupa pelabelan, pengaturan, dan pencarian serta sistem navigasi dalam melakukan pembuatan aplikasi. Hal ini diperlukan agar dapat memudahkan dalam melakukan perancangan aplikasi yang akan di buat. Berikut Infomation Architecure yang kami buat:
🔵Wireframe (Low-Fidelity)
Pembuatan wireframe ini adalah memberikan rancangan gambar untuk kerangka yang akan diolah menjadi sebuah Design UI. Sejatinya Wireframe bisa berbentuk struktur atau sketsa kotak-kotak dan garis besar desainnya berwarna hitam dan putih. Sehingga UI Designer tahu bagaimana penempatan tata letaknya dan tinggal mengkolaborasikan dengan visual serta konten atau informasi yang ingin disampaikan.
Dikarenakan pengerjaan aplikasi TIX ID merupakan pengerjaan secara tim, kami memilih untuk menggunakan tools Figma dalam perancangan wireframe, agar lebih efisien dalam pengerjaannya dan lebih menghemat kertas (paperless). Berikut rancangan wireframe yang kami buat:
💛OUTPUT
🟡User Interface Design (High-Fidelity
Kami melanjutkan hasil rancangan wireframe ke dalam user interface design dengan tetap menggunakan design system yang sudah ditentukan sebelumnya. Inilah UI design sebelum diperbaiki:
Link Figma UI Design
🟡 Protoype
Bisa lihat preview untuk Prototype Figma disini
🟡Design Guideline
Sebuah pedoman yang digunakan untuk membuat branding produk efektif di mata user dan masih mengikuti pola design TIX ID itu sendiri.
🟡Usability Testing (UT)
Kenapa kita perlu melakukan usability testing?
Untuk mengecek apakah fitur yang telah dibuat berjalan dengan lancar sesuai flow, mengidentifikasi masalah dalam UI design yang telah dirancang oleh tim kami, dan akan menemukan peluang dan kesempatan baru yang dapat diterapkan pada pengembangan produk. Tujuan dalam tujuan penelitian ini adalah untuk:
- Mengindetifikasi masalah desain dalam fitur Metode Pembayaran.
- Untuk mendapatkan sebuah insight dari user dalam pengembangan sebuah produk.
- Memahami sebuah produk dengan lebih baik.
Pengujian test Usability Testing sebagai berikut:
Method: In person testing
Tools: Maze and Screencastify
Date: 5–6 Juni 2023
Number of participants: 5 people
Tools : Google Form link UT Script, Maze link
- Preamble: Dimulai dari awal memperkenalkan diri. Setelah itu menceritakan alasannya mengapa melakukan test ini. Lalu menceritakan bagaimana proses yang akan dilakukan selama test berlangsung dari awal hingga akhir test.
- Pra-Question: Pertanyaan tentang demografis user. Lalu bertanya tentang pengalaman user dengan produk yang serupa, keseharian user seperti apa dan data lain yang berkaitan dengan pengujian produk.
- Test Scenario: Uji coba test UT ini menggunakan prototype yang telah dirancang oleh tim UI Design melalui Figma. Test uji coba ini menggunakan tools Maze agar mempermudah Researcher dan tim UI/UX Designer mendapatkan hasil yang diinginkan. UX designer membuat scenario per-EPIC yang akan dicoba uji testnya, seperti: Apakah fitur yang telah dibuat kelompok kami dapat menyelesaikan permasalahan user atau belum, dan Apakah user mengerti bagaimana cara melakukan sebuah tugas yang diberikan tim kami.
- Post-Question — Follow up Question: Setelah pengujian selesai, langkah terakhir yang harus dilakukan dengan menanyakan hal atau pendapat mereka mengenai proses yang telah di uji coba test.Ini memberi kesempatan untuk menyerap detail apa pun tentang pengalaman pengguna user.
Tujuannya dalam reset ini untuk mendapatkan sebuah insight tentang pandangan mereka terhadap aplikasi online pada TIX ID dimana mereka membeli tiket bioskop dan ingin tahu lebih lanjut apa aja yang ingin mereka harapkan untuk tersedia di Aplikasi sehingga kedepannya mempermudah mereka untuk menyelesaikan proses pembelian tiket secara online.
🟡Completion Rate (Effectiveness)
Completed Rate menghasilkan sebesar 100% dalam mengerjakan task Add on Food. Hampir semua participant dapat menjalankan tasks dengan lancar untuk fitur Dana dan Payment. Namun ada 1 dari 5 partisipan memiliki beberapa kendala pada saat proses pemilihan fitur Dana dan Payment yang tidak sesuai dengan skenario. Untuk task bundling promo itu sendiri hampir semua partisipan dapat menjalankan fitur dengan lancar. Tentunya aplikasi ini membutuhan pengembangan.
Tools: Google Dosc, Google Sheets
🟡Satisfaction Scores
Berikut ini hasil dari UT Single Ease Question (SEQ) yang didapatkan dari prototype TIX ID:
Single Ease Question (SEQ)
Dapat disimpulkan bahwa dari hasil SEQ ini fitur yang telah kami buat sudah cukup mudah digunakan.
Sistem Usability Scale (SUS)
Hasil dari Usability Testing (UT) saya mendapatkan sebuah insight dan findings, diantara lain:
🟡Insight
Insight 1 : Payment method dapat disimpulkan bahwa user sudah tahu akan cara menggunakan atau mengganti metode pembayaran menggunakan opsi lain seperti BCA Virtual Account, yang mana bahwa terlihat kkita memberikan opsi promo cashback meggunakan metode DANA tetapi lebih memilih menggunakan BCA Virtual Account.
Insight 2: Pop up Bundling dapat disimpulkan bahwa user sudah mengetahui terdapat promo bundling dengan menampilkan popup banner seperti disamping. User menginginkan bahwa ada direct page yang khusus ketika klik button pesan sekarang maka kedepannya akan dibuat lebih kearah informasi yang lebih detail mengenai”how to use promo bundling.”
Insight 3: Add on Food dapat disimpulkan bahwa user sudah mengerti cara memesan atau menambahkan makanan atau minuman pada ringkasan order. User ingin lebih mudah mencari makanan maka depannya akan dibuat search bar pada kolom food and beverages.
🟡Findings
Berikut adalah rangkuman dari findings yang didapat setelah UT pertama dan kedua disertai design sebelum dan sesudah UT.
Finding 1 : Beberapa user ingin bisa memilih voucher ketika di halaman ringkasan order.
Recommendation: Pada popup promo bundling akan diberikan informasi yang lebih jelas akan bagaimana cara menggunakan promo tersebut seperti mengganti tombol klik “pesan sekarang” menjadi tahap yang harus dilakukan.
Finding 2 : Untuk section Add on Food user ingin diberi tombol search agar tidak sulit mencari makanan/minuman.
Recommendation: Pada section Add on Food mnginginkan bahwa makanan dapat dicari agar lebih mudah, rekomendasi yang dapat diberikan yaitu membuat search bar di atas kategori snack.
🟡Iteration
Dimana setelah saya melakukan UT dan menghasilkan beberapa feedback untuk mengolah kembali perkembangan fitur design dari aplikasi TIX ID. Seperti ini design yang telah diubah sesuai dengan findings yang didapat:
🟡Conclusion
Dari hasil Usability Testing dapat disimpulkan fitur Revamp pada Aplikasi TIX ID diperoleh beberapa feedback bahwa layanan promo bundling, payment method dan add on food sudah dapat diterima dengan baik oleh user, terutama bagi yang membutuhkan beberapa kemudahan dalam membeli tiket bioskop melalui aplikasi booking tiket online. Perlu digaris bawahi bahwa masih butuh beberapa peningkatan dalam segi fitur diatas agar lebih maksimal dan berdampak pada user ketika release nanti.
💜OUTCOME
🟣Lesson Learned?
Dari project ini dalam me-revamp aplikasi TIX ID kami banyak belajar mulai dari mencari latar belakang permasalahan, apa yang harus dikembangkan lagi sampai apa yang sangat dibutuhkan oleh user yang kemudian menghasilkan sebuah ide untuk penambahan fitur yang lebih baik. Dengan adanya usability testing terbukti mendapatkan feedback dan insight
Project aplikasi kali ini juga belajar pentingnya kerjasama tim antara Reearcher, UI/UX dan PM agar terciptanya Time Management yang baik. Dengan terus melakukan diskusi bersama, saling mengingatkan apa yang kurang dan kesulitan apa yang sedang dikerjakan dan selalu menyampaikan progress dari masing-masing tugas yang sudah ditentukan membuat perancangan penambahan fitur di aplikasi TIX ID ini berjalan dengan lancar dan tepat waktu. Dan hal tersebut akan terus kami asah agar menjadi sebuah kebiasaan dalam proses menyelesaikan pekerjaan yang membutuhkan kerja sama tim yang baik.
Melalui studi kasus UI/UX ini, saya belajar banyak hal baru. Pengalaman ini telah mendorong saya untuk melanjutkan dan meningkatkan keterampilan saya dalam me-Research sebuah penelitian saya. Jika Anda memiliki feedback untuk memperbaiki UI/UX studi kasus ini, jangan ragu untuk berkomentar!😊