JURNAL MULTI MEDIA DAN IT
VOL.
09 NO.
PP.
P-ISSN : 2548-9534 | E-ISSN : 2548-9550
Perancangan User Interface Dengan Figma Prototype Pada Website CGV Dengan Metode Design Thinking Muhammad Rafi Hilalbi Politeknik Negeri Media Kreatif,Jakarta INFORMASI ARTIKEL Sejarah Artikel:
Diterima Redaksi: 19 Oktober 2025
Revisi Akhir: 6 Januari 2026
Diterbitkan Online: 6 Januari 2026
KATA KUNCI
Design Thinking.
Figma.
User Interface.
Website CGV
KORESPONDENSI
ABSTRACT
Website CGV Cinemas yang digunakan untuk mencari informasi film, jadwal tayang, dan pemesanan tiket secara online mengalami beberapa masalah pada antarmuka pengguna (UI), seperti navigasi yang kurang intuitif dan desain yang tidak konsisten.
Penelitian ini menggunakan metode Design Thinking meliputi tahapan Empathize.
Define.
Ideate.
Prototype, dan Test untuk merancang ulang UI dengan bantuan Figma.
Berdasarkan hasil survei, prototipe baru dikembangkan dan diuji menggunakan metode System Usability Scale (SUS), dengan skor sebesar 51.
7, yang menunjukkan tingkat usability yang memuaskan.
DOI: https://doi.
org/10.
46961/jommit.
Teknologi Rekayasa Multimedia 21240089@polimedia.
PENDAHULUAN
Dalam masa kini yang semakin bergantung pada teknologi, pengalaman pengguna menjadi hal yang sangat penting dalam kesuksesan platform digital, termasuk website.
CGV sebagai salah satu jaringan bioskop terkemuka di Indonesia menghadirkan website sebagai media utama bagi pengguna untuk mencari informasi jadwal film, membeli tiket, dan menikmati berbagai layanan lainnya.
Meski demikian, masih ada beberapa masalah dalam cara pengguna berinteraksi dengan antarmuka atau User Interface di website CGV.
Website CGV merupakan salah satu platform utama bagi pengguna dalam mencari informasi mengenai jadwal film, lokasi bioskop, serta melakukan pemesanan tiket secara daring.
Meskipun demikian, website ini masih memiliki beberapa kelemahan yang dapat mempengaruhi antarmuka pengguna (UI), seperti navigasi yang kurang user-friendly.
Berdasarkan penelitian yang dilakukan oleh Ernowo et al.
dalam Jurnal berjudul AuPengujian Website CGV Cinemas Berdasarkan Aspek IMK dengan Metode A/B TestingAy, ditemukan bahwa tampilan antarmuka website CGV masih memiliki permasalahan dari segi desain dan pengalaman pengguna.
Dalam penelitiannya menggunakan kuisioner yang memilih berbagai aspek seperti Human Memory Limitation.
Simplicity, dan juga Consistency dan memperoleh hasil skor 55 dalam kuisioner SUS Nilai ini berada di bawah standar benchmark SUS, yaitu 68, yang menandakan bahwa tampilan antarmuka website masih tergolong kurang baik UI yang memikat dan intuitif penting karena dapat memberikan pengalaman yang menyenangkan bagi pengguna dan mendukung tujuan bisnis.
Desain responsif, animasi interaktif, pemilihan warna dan tipografi yang tepat, serta pendekatan desain berbasis emosi dalam menciptakan https://doi.
org/10.
46961/jommit.
JURNAL MULTI MEDIA DAN IT - VOL.
09 NO.
pengalaman pengguna yang lebih personal dan memikat.
(Muhammad Ichsan, et al, 2.
Oleh karena itu, penulis merancang ulang user interface pengguna website CGV menggunakan Figma dan menerapkan metode Design Thinking sebagai pendekatan utama dalam pengembangan desain.
Design Thinking digunakan untuk memahami kebutuhan serta permasalahan yang dihadapi pengguna dalam mengakses website CGV, melalui tahapan empati, definisi masalah, ideasi, pembuatan prototipe, dan Pendekatan ini bertujuan untuk menghasilkan desain UI yang lebih responsif, intuitif, dan menarik, guna meningkatkan kenyamanan pengguna dalam menjelajahi website dan mempercepat proses pembelian.
Melalui kombinasi metode Design Thinking dan alat desain digital seperti Figma, diharapkan perancangan ulang ini dapat memberikan solusi yang lebih efektif dalam meningkatkan pengalaman pengguna di website CGV.
Proses ini biasanya dilakukan melalui tahapan-tahapan sistematis yang memungkinkan tim untuk mengeksplorasi berbagai ide sebelum menetapkan solusi akhir.
Design Thinking berfokus pada penelitian masalah untuk merancang sebuah solusi untuk pengguna setiap tahapannya melibatkan calon pengguna mulai dari emphatize, define, ideate, prototype, dan test.
Design Thinking adalah pendekatan pemecahan masalah yang berpusat pada pengguna .
ser-centere.
dan berorientasi pada solusi.
4 Website Website didefinisikan sebagai kumpulan halaman digital yang di-hosting pada server dan dapat diakses melalui internet dengan menggunakan nama domain tertentu (Saputra, 2.
Peran website dalam layanan digital seperti bioskop adalah menyediakan akses ke informasi, pemesanan tiket, serta interaksi dengan pengguna secara real-time.
TINJAUAN PUSTAKA
5 Prototype 1 User Interface (UI) Prototype adalah versi awal dari sebuah produk, sistem, atau desain yang dibuat untuk digunakan untuk menguji desain produk sebelum produksi massal dilakukan.
Dalam bidang desain dan pengembangan, prototipe bertindak sebagai model kerja yang membantu desainer, pengembang, dan pihak terkait menguji cara kerja sesuatu, menemukan masalah yang mungkin muncul, serta memperbaiki solusi sebelum produk akhir dirilis.
Menurut Ulrich & Eppinger .
2: .
dalam buku Product Design and Development, prototype didefinisikan sebagai "aproximasi dari produk yang diinginkan, yang dapat digunakan untuk menguji aspek-aspek tertentu dari desain.
" Definisi ini menegaskan bahwa prototype tidak perlu sempurna atau mencakup semua fitur produk akhir, tetapi cukup untuk memvalidasi elemen kunci dari konsep yang sedang User interface (UI) merupakan bagian visual dari suatu sistem digital yang memungkinkan pengguna berinteraksi langsung dengan sistem tersebut.
Meliputi seluruh komponen sistem yang berhubungan langsung dengan pengguna seperti tampilan layar, elemen grafis, tombol, dan ikon yang dirancang untuk mendukung interaksi yang efektif sekaligus memberikan pengalaman yang menyenangkan (Nielsen, 1.
UI terdiri dari berbagai komponen seperti tombol, ikon, teks, menu, dan struktur tata letak yang dirancang secara fungsional untuk membantu pengguna menyelesaikan tugas atau memperoleh informasi dengan mudah.
Dalam konteks website bioskop seperti CGV, antarmuka pengguna yang dirancang secara efektif akan memudahkan pengunjung dalam mencari informasi film, melihat jadwal penayangan, serta melakukan pemesanan tiket.
Kemudian ada juga dari Michael Schrage .
6: .
dalam jurnal The Role of Prototyping in Design menambahkan dimensi lain, dengan menyatakan bahwa prototype adalah "alat komunikasi yang memungkinkan desainer untuk berinteraksi dengan ide-ide mereka dan mendapatkan umpan balik dari " mengindikasikan bahwa prototipe tidak hanya berperan sebagai alat untuk pengujian teknis, tetapi juga sebagai sarana untuk eksplorasi kreatif dan kolaborasi.
2 Figma Figma merupakan platform desain antarmuka yang berbasis web dan memungkinkan kolaborasi secara waktu nyata.
Aplikasi ini digunakan oleh tim desain untuk membuat prototipe, wireframe, dan rancangan visual tanpa perlu instalasi perangkat lunak tambahan.
Salah satu keunggulannya adalah kemudahan dalam berbagi proyek dan bekerja bersama secara daring, yang membuat proses desain menjadi lebih fleksibel dan efisien.
Dalam proyek ini.
Figma digunakan untuk membuat prototipe interaktif untuk perancang ulang UI dari website CGV, memanfaatkan fitur seperti library dan prototyping untuk mempermudah proses perancangan ulang.
6 Website CGV Website CGV, dikelola oleh CGV Cinemas Indonesia, adalah platform digital utama yang memungkinkan pengguna untuk mengakses informasi film, jadwal penayangan, dan membeli tiket secara daring.
Didirikan awalnya sebagai BlitzMegaplex pada tahun 2006, perusahaan ini mengalami rebranding menjadi CGV Cinemas pada tahun 2017 sebagai bagian dari strategi global untuk menyediakan pengalaman sinematik yang lebih baik (Web CGV Indonesi.
Website ini memegang peranan kunci dalam strategi digital CGV, berfungsi tidak hanya sebagai sumber informasi, tetapi juga sebagai alat untuk meningkatkan keterlibatan dan kepuasan pengguna.
3 Design Thinking Design Thinking adalah pendekatan pemecahan masalah yang menekankan pemahaman mendalam terhadap kebutuhan Design Thinking adalah metode desain yang berpusat pada manusia dan berorientasi pada inovasi, yang memadukan kreativitas, analisis data, dan pengujian berkelanjutan untuk mengatasi tantangan kompleks dengan solusi yang berarti (DellAoEra et al.
, 2.
Tujuannya adalah menghasilkan solusi yang tidak hanya inovatif, tetapi juga relevan dan bermanfaat bagi https://doi.
org/10.
46961/jommit.
JOURNAL OF MULTIMEDIA AND INFORMATION TECHNOLOGY - VOL.
09 NO.
7 Wireframe Wireframe merupakan kerangka rancangan desain awal yang digunakan sebagai dasar dari pembuatan purwarupa website yang ingin didesain (Hartawan & Id, 2.
Wireframe adalah sketsa atau rancangan struktur awal dari antarmuka desain yang memuat penempatan dasar dari komponen visual tanpa menyertakan warna atau desain akhir, sehingga dapat digunakan untuk merancang alur navigasi secara fungsional.
Elemen ini memungkinkan desainer dan pemangku kepentingan untuk fokus pada user experience (UX) dan user interface (UI) pada tahap Wireframe sering disebut sebagai AublueprintAy dalam proses desain, mirip dengan cetak biru dalam arsitektur, yang memberikan gambaran kasar tentang bagaimana komponen akan disusun sebelum memasuki tahap desain yang lebih detail.
8 Skala likert Dalam penelitian ini, skala Likert diperlukan sebagai instrumen pengukuran.
Skala Likert digunakan untuk mengukur sikap, pendapat, atau persepsi seseorang atau sekelompok orang tentang fenomena sosial (Sumartini et al.
, 2.
Skala ini merupakan cara untuk mengukur pendapat individu dengan menggunakan kuesioner, yang berguna untuk mengetahui sikap mereka terhadap suatu objek .
Skala Likert digunakan sebagai metode pengukuran sikap atau pendapat dalam penelitian Responden diminta memberikan nilai terhadap suatu pernyataan dalam rentang skala, biasanya 1 hingga 5 atau 1 hingga 7, dari sangat tidak setuju hingga sangat setuju.
9 System Usability Scale (SUS) System Usability Scale (SUS) adalah alat pengukuran yang digunakan untuk mengevaluasi usability sebuah sistem, seperti perangkat keras .
, perangkat lunak .
, aplikasi mobile, hingga situs web.
SUS pertama kali dikembangkan oleh John Brooke pada tahun 1986 dan sejak itu menjadi salah satu metode standar dalam pengujian usability.
Alat ini menggunakan kuesioner yang terdiri dari 10 pertanyaan untuk menilai persepsi pengguna terhadap kemudahan penggunaan, kompleksitas, dan kepuasan keseluruhan terhadap sebuah sistem (Brooke, 1996:
189Ae.
Metode ini menggunakan kuesioner dengan 10 item pertanyaan yang dinilai dengan skala Likert, bertujuan untuk mengukur persepsi pengguna terhadap kemudahan penggunaan suatu sistem.
Skor total dihitung berdasarkan perhitungan tertentu, kemudian dinormalisasi ke skala 0Ae100 untuk memberikan gambaran tentang seberapa baik kegunaan antarmuka yang diuji.
KONSEP PERANCANGAN
Penelitian ini menggunakan pendekatan kuantitatif yang dikombinasikan dengan metode Design Thinking.
Penelitian kuantitatif merupakan pendekatan untuk menguji teori objektif dengan menguji hubungan antar variabel.
Variabel ini, pada gilirannya, dapat diukur dengan menggunakan instrumen, sehingga data jumlah dapat dianalisis dengan menggunakan prosedur statistik (Creswell, 2.
Penelitian ini tidak melibatkan pihak internal CGV dan hanya berdasarkan observasi terhadap website publik serta survei terhadap pengguna umum yang bersedia mengisi kuesioner secara sukarela.
Pendekatan ini memungkinkan peneliti untuk memahami permasalahan dari sudut pandang pengguna secara sistematis dan mendalam.
Data kuantitatif didapatkan saat menganalisis data dari survei yang diambil pada awal riset saat menyebar survei kepuasan UI website CGV sebelum dirancang ulang dan survei kepuasan UI website CGV sesudah dirancang ulang.
Pada awal riset, penulis akan menyebarkan kuesioner Google Form kepada responden yang pernah menggunakan website CGV untuk menilai kepuasan responden kepada UI website CGV sebelum dirancang ulang oleh penulis di Figma.
Setelah membuat prototype Figma website CGV, penulis akan memberi kuesioner lagi kepada responden untuk menilai kepuasan terhadap user (UI) website CGV yang telah dirancang ulang oleh penulis lewat Figma.
Kemudian saat penulis mendapatkan hasil data dari kuesioner responden kepada UI website CGV sesudah dirancang ulang olehpenulis di Figma, user akan menilai hasil kepuasan UI rancang ulang menggunakan metode System Usability Scale (SUS).
Gambar 1.
Ilustrasi Design Thinking Lestari.
Nurdiansyah.
, & Rahmawati.
Design Thinking terdiri dari lima tahap utama: Empathize.
Define.
Ideate.
Prototype, dan Test.
Tahapan-tahapan ini saling terkait dan sering kali berulang untuk memastikan solusi yang dihasilkan benar-benar memenuhi kebutuhan pengguna.
1 Emphasize Tahap Empathize bertujuan untuk memahami pengguna secara mendalam, termasuk kebutuhan, harapan, dan tantangan yang mereka hadapi.
empati adalah inti dari Design Thinking karena memungkinkan desainer untuk melihat dunia dari perspektif pengguna.
2 Define Tahap Define melibatkan sintesis informasi yang dikumpulkan selama tahap Empathize untuk merumuskan permasalahan yang jelas dan terfokus.
Harus mendefinisikan masalah dengan tepat sangat penting karena pernyataan masalah yang baik akan menjadi panduan untuk tahap-tahap berikutnya (Rikke Dam & Teo Siang, 2.
3 Ideate Tahap Ideate adalah proses kreatif untuk menghasilkan berbagai ide solusi tanpa batasan.
Pentingnya mendorong "wild ideas" dan menunda penilaian agar kreativitas dapat berkembang.
Teknik yang umum digunakan meliputi brainstorming, mind mapping, dan sketsa cepat (Tim Brown, 2008: 4-.
JURNAL MULTI MEDIA DAN IT - VOL.
09 NO.
Gambar 3.
Demografik Profil Dari Responden Pra-Riset 4 Prototype Pada pra-riset yang sudah dilakukan, penulis mendapat responden dengan jenjang umur sekitar 18 sampai 35 tahun.
Penulis menggunakan metode Random Sampling karena bisa mengurangi bias, sehingga setiap data yang dimasukkan memiliki kesempatan yang sama untuk dipilih.
Pada tahap Prototype, ide-ide yang dihasilkan diwujudkan dalam bentuk representasi nyata yang dapat diuji.
Prototipe dapat bervariasi dari model sederhana seperti low-fidelity hingga highfidelity (Ulrich & Eppinger, 2012: 189Ae.
Tahap Ideate 5 Test Setelah mengumpulkan hasil dari tahap Empathize melalui kuesioner pra-riset dan pengamatan terhadap pengalaman pengguna pada antarmuka website CGV, serta merangkum permasalahan utama pada tahap Define, seperti navigasi yang sulit dipahami, desain visual yang tidak seragam, dan tampilan yang kurang memikat, peneliti melangkah ke tahap Ideate dalam pendekatan Design Thinking.
Ide-ide yang dikembangkan meliputi penyederhanaan struktur navigasi, pengoptimalan tata letak halaman, penerapan skema warna dan tipografi yang harmonis, serta penambahan fitur-fitur esensial seperti fungsi pencarian film yang lebih intuitif dan akses cepat ke informasi jadwal tayang atau promosi.
Proses Ideation dilakukan dengan membuat sketsa wireframe sederhana dan mengeksplorasi desain tata letak dengan mengacu pada analisis kompetitor serta prinsipprinsip desain UI/UX yang efektif, memastikan bahwa hasil desain tidak hanya menarik secara visual tetapi juga praktis dan mudah digunakan.
Konsep-konsep ini kemudian menjadi dasar untuk pengembangan prototipe pada tahap berikutnya.
Tahap Test melibatkan pengujian prototipe dengan pengguna untuk mengumpulkan umpan balik.
Pengujian tidak hanya untuk memverifikasi, tetapi juga sebagai cara belajar, serta mengetahui apa yang sudah baik dan apa yang perlu diperbaiki.
HASIL DAN PEMBAHASAN
Tahap Emphasize Dalam tahap Empathize dari proses Design Thinking, sebuah kuesioner pra-riset didistribusikan untuk mengumpulkan wawasan tentang pengalaman pengguna dengan antarmuka pengguna (UI) situs web CGV saat ini.
Kuesioner ini di-upload di website bernama cinema.
id, sebuah platform komunitas yang didedikasikan untuk film dan cinema, guna menjangkau audiens target yaitu para penggemar film dan penikmat cinema.
Sketsa Gambar 2.
Postingan survei di website Cinema.
Tahap Define Pada pra-riset ini, penulis mengumpulkan kuesioner sebanyak 35 orang dengan menggunakan metode Random Sampling.
Random Sampling adalah metode pengambilan sampel secara acak yang bertujuan untuk memastikan bahwa sampel yang dipilih mewakili populasi secara tidak bias (Revita.
Gambar 4.
Sketsa home Pada halaman home tampil film - film yang sedang bertayang.
https://doi.
org/10.
46961/jommit.
JOURNAL OF MULTIMEDIA AND INFORMATION TECHNOLOGY - VOL.
09 NO.
Gambar 5.
Sketsa Movies Gambar 8.
Sketsa Promosi Kemudian ada halaman untuk menampilkan film-filmyang sedang tayang di bioskop.
halaman menampilkan gridlayout baris, masing-masing berisi berbentuk persegi panjangyang akan diisi dengan poster film dan judul.
Dalam halaman ini cinema akan memberikan berbagai promosi dan event yang sedang berjalan, disusun berupa grid yang berisi thumbnail yang kemudian bisa di-klik Gambar 6.
Sketsa Cinema halaman web cinema ini untuk memudahkan pengguna dalam memeriksa lokasi cinema, melihat harga tiket, serta mengetahui film yang tersedia.
Di halaman ini user bisa mencari lokasi kota dan nama lokasi cinema-nya yang kemudian bisa melihat tikat apa yang tersedia dan juga film yang sedang bertayang.
Gambar 9 .
Sketsa Isi Promosi Dalam sketch ini adalah halaman setelah memasuki salah satu Diatas gambar/thumbnail promosi dan kemudian dibawah keterangan dan deskripsi promosinya Gambar 7.
Sketsa Membership Gambar 10 .
Sketsa Auditorium Dalam sketsa ini adalah halaman untuk melihat keuntungan membership dan daftar membership.
Dalam halaman ini user akan melihat keuntungan - keuntungan saat menjadi member Di sketsa ini adalah halaman untuk auditorium.
Auditorium dalam website CGV adalah berbagai tipe menonton cinema seperti menonton dengan 3D atau beli ruangan cuma untuk 2 orang saja.
JURNAL MULTI MEDIA DAN IT - VOL.
09 NO.
Gambar 14.
Sketsa checkout Gambar 11 .
Sketsa Concession Di halaman ini setelah ambil tempat duduk.
Berikut adalah rincian nya dari filmnya, nomor kursi, dan tipe tiketnya.
Kemudian ada halaman untuk membeli camilan bernama Di Halaman ini user bisa pilih lokasi nya dan beli apa berdasarkan menu yang ada di lokasi itu Gambar 12.
Sketsa Deskripsi film Gambar 15.
Sketsa login dan sign up Berikut adalah halaman saat user mengklik salah satu film.
Dalam halaman ini user bisa lihat poster film juga isi deskripsi dan informasi tentang film tersebut.
Dibawahnya berupa trailer dan tombol untuk membeli tiketnya.
Di halaman ini adalah untuk login dan sign up.
Saat ingin memasuki akun, akan diarahkan ke halaman ini.
Gambar 16.
Sketsa akun Gambar 13 .
Sketsa seat Saat sudah masuk akun, berikut adalah halaman untuk melihat akun.
Dihalaman ini berisi nama akun serta history transaksi tiket dan snack.
Kemudian saat user ingin membeli tiket.
User akan masuk halaman untuk melihat kursi yang dapat bisa dibeli.
https://doi.
org/10.
46961/jommit.
JOURNAL OF MULTIMEDIA AND INFORMATION TECHNOLOGY - VOL.
09 NO.
placeholder persegi panjang dalam format grid.
Setiap placeholder berlabel AuFilmAy, mewakili poster dan judul.
Gambar 16.
Sketsa transaksi Saat mau melihat transaksi, user bisa masuk ke halaman User bisa klik transaksi dan akan masuk ke halaman QR Code dari pesanan tersebut.
Gambar 19.
Wireframe cinema Pada tahap ini penulis melakukan pembuatan Wireframe berdasarkan tahap define dan ideation.
Pembuatan Wireframe menggunakan tools Figma.
Berikut tampilan wireframe website.
Pada wireframe ini menampilkan halaman untuk melihat lokasi cinema dan juga melihat harga tiket dan tipe tiket yang ada.
User dapat mengganti kota dan mall yang sedia cinema CGV.
bagian bawah, terdapat lokasi ada list harga tiket dan tipe tiket yang tersedia, serta jadwal film yang ada di setiap cinema.
Gambar 17.
Wireframe home Gambar 20.
Wireframe membership Pada bagian atas, terdapat header yang mencakup navigation bar dengan opsi seperti AuHome,Ay AuMovies,Ay AuPromotions,Ay AuMembership,Ay AuConcession,Ay AuSpecial,Ay dan AuAkunAy.
Pada wireframe ini ada halaman untuk melihat berbagai keuntungan dari mendaftar sebuah membership.
User bisa ikut membership dengan mendaftar akun yang bisa di klik di dalam banner atas.
Gambar 18.
Wireframe movies Berikut adalah wireframe untuk halaman Movies dimana user bisa lihat film - film yang sedang tayang lewat tampilan 3 x 12 Gambar 21.
Wireframe promotion Pada wireframe untuk halaman promotion berisi berbagai event atau promosi yang sedang berjalan dalam CGV.
JURNAL MULTI MEDIA DAN IT - VOL.
09 NO.
Gambar 25.
Wireframe signup Berikut adalah wireframe untuk halaman Login dan Sign Up.
Pada halaman login, tersedia kolom untuk memasukkan email dan kata sandi bagi pengguna yang sudah terdaftar.
Jika pengguna belum memiliki akun, mereka dapat mengakses halaman sign up yang menyediakan kolom isian untuk email, serta kata sandi yang akan digunakan.
Gambar 22.
Wireframe special Dalam halaman Special, terdapat wireframe berisi kotak persegi sebagai thumbnail poster yang disusun grid kebawah serta di atas ada tombol untuk melihat auditorium dan lapangan Setelah mengklik salah satu poster, user akan diarahkan ke halaman berisi informasi tentang auditorium atau lapangan olahraga tersebut.
Gambar 26.
Wireframe akun berikut adalah wireframe untuk halaman akun member.
Saat user sudah login, user bisa melihat akun mereka dari melihat riwayat transaksi mereka dan point mereka dapat dari membeli tiket dan snack.
Jiika user ingin melihat riwayat user bisa klik tombol transaction history untuk melihat semua transaksi yang Gambar 23.
Wireframe concession Halaman ini berupa wireframe untuk halaman concession.
halaman ini user memilih lokasi untuk memilih lokasi dimana user ingin membeli camilan.
Setelah memilih lokasi yang ingin diambil, user selanjutnya memilih menu yang sedia pada lokasi Gambar 27.
Wireframe Deskripsi Film Gambar 24.
Wireframe login https://doi.
org/10.
46961/jommit.
JOURNAL OF MULTIMEDIA AND INFORMATION TECHNOLOGY - VOL.
09 NO.
Saat memilih film, user akan diarahkan halaman berisi informasi dan deskripsi filmnya.
Dalam halaman ini, user bisa melihat sinopsis film, cuplikan trailer-nya, serta lokasi dan Dan jika mau memesan tiket untuk menonton bisa klik tombol next saat selesai cek jadwal.
Gambar 30.
Prototype Home Gambar 28.
Wireframe seat Saat selesai memilih lokasi dan waktu di halaman deskripsi film, user diarahkan ke halaman seat untuk memilih kursi saat menonton di cinema CGV.
Setelah memilih kursi, user bisa klik tombol AuConfirm SelectionAy untuk lanjut ke halaman halaman Home tidak jauh dari wireframe-nya.
Penulis juga menambahkan logo CGV pada atas kiri dan juga pada footer di bawah kiri, serta ikon untuk link ke Google Play serta Apple Store ada di bawah kanan.
Di home juga memberi film-film yang sedang direkomendasikan juga promotion yang sedang Gambar 29.
Wireframe checkout Setelah memesan kursi, user akan diarahkan ke halaman checkout dimana untuk melihat rincian pesanan dari nama film, nomor kursi, dan harganya.
Gambar 31.
Prototype movies Tahap Prototype Tahap berikutnya melibatkan pembuatan prototipe sebagai jawaban atas kendala yang telah diidentifikasi dalam penelitian.
Di tahap ini, peneliti menyusun berbagai desain antarmuka baru.
Gambar 32.
Prototype deskriipsi movies JURNAL MULTI MEDIA DAN IT - VOL.
09 NO.
Gambar 33.
Prototype Seat Gambar 34.
Prototype cinema Untuk halaman Cinema, user bisa memilih lokasi dan melihat tiket - tiket yang sedia dalam lokasi cinema itu.
User juga bisa melihat harga - harga tiketnya serta jadwal film yang sedang berlangsung di cinema-nya di bawah page.
Untuk halaman Movies juga tidak jauh berbeda dari wireframe-nya.
setiap persegi pada wireframenya sekarng diisi dengan poster film serta ada text nama film di bawah poster.
Saat memilih salah satu film, user akan masuk ke halaman Movie description untuk mengetahui deskripsi film serta informasi tentang jadwalnya.
Setelah memilih jadwal tayang, user bisa memilih kursi saatnya dimana user ingin duduk saat menonton cinema-nya.
Gambar 35.
Prototype promotion Di halaman promotions, user bisa melihat promosi dan event yang sedang berlangsung.
User bisa klik promosi yang sedang ada dan akan dilanjutkan ke halaman dimana user bisa melihat informasi tentang promosinya.
Gambar 33.
Prototype membership Berikut adalah halaman membership di sebelah kiri adalah halaman sebelum di rancang ulang dan di kana sesudah dirancang ulang.
Di halaman ini tidak jauh dari wireframe-nya dan juga tidak banyak yang berganti dari yang sebelum dirancang tapi pengguna memiliki keluhan pada pemilihan warnanya yang tidak pas.
Maka penulis mengganti warna orange dari sebelumnya.
Gambar 36.
Prototype Special https://doi.
org/10.
46961/jommit.
JOURNAL OF MULTIMEDIA AND INFORMATION TECHNOLOGY - VOL.
09 NO.
Berikut adalah halaman Special.
Dalam konteks CGV, special merupakan berbagai tipe Cinema yang disediakan CGV, termasuk fasilitas lapangan olahraga yang bisa dipakai Untuk auditorium, user bisa mengalami berbagai tipe cinema dari 3D sampai bisa 4D dengan membeli tiket sesuai dengan tipe cinemanya.
Gambar 39.
Prototype sign up Gambar 37.
Prototype concession Gambar 40.
Prototype login Pada halaman Sign up dan Login tidak berbeda dengan yang dibuat di wireframenya.
User jika ingin membuat akun harus melakukan Sign up dengan memasukan email dan password dua Jika sudah memiliki akun, user bisa login dengan masukan email dan password untuk masuk ke dalam akun.
Gambar 41.
Prototype akun Gambar 38.
Prototype order Pada halaman Concession, user bisa memesan snack seperti popcorn atau soda.
Pada mock up concession user harus memilih lokasi untuk mengambil snack, kemudian saat sudah siap klik tombol next.
Kemudian user akan diarah kan ke halaman Order dimana user bisa memilih snack nya sesuai menu yang tersedia.
Jika sudah melakukan login, user akan diarahkan ke halaman akun.
User bisa melihat member point yang diraih dengan membeli tiket dan snack, dan juga riwayat transaksi user pernah buat.
JURNAL MULTI MEDIA DAN IT - VOL.
09 NO.
(Acceptanc.
, nilai huruf (Grad.
, skala penilaian (Scal.
, serta Adjective Rating.
Gambar 44.
Hasil presentase SUS Hasil evaluasi menunjukkan bahwa desain situs web stres dini memiliki skor 51.
itu berada pada tingkat Marginal dengan grade D, memiliki Adjective Rating dengan tingkat OK, dan NPS berada pada tingkat Detractor.
Nilai SUS rata-rata dari banyak penelitian adalah 68.
Nilai di atas 68 termasuk di atas rata-rata, dan nilai di bawah 68 termasuk di bawah rata-rata.
Dengan itu maka dengan nilai 51.
7, desain ini dapat dibawah rata - rata.
Gambar 42.
Prototype transaksi Untuk halaman check out bisa diarahkan saat user membeli tiket atau beli concession.
Di halaman checkout user bisa melihat: rincian pesanan dari film, nomor kursi, dan harga.
Tahap Test Dalam pengujian ini, hasil kuesioner dianalisis menggunakan skala Likert, karena pendekatan ini dianggap sesuai untuk mengukur persepsi pengguna.
Data yang diperoleh dari kuesioner kemudian dihitung dan diolah berdasarkan ketentuan perhitungan dalam metode System Usability Scale (SUS).
KESIMPULAN DAN SARAN
Berdasarkan analisis yang diberikan pada attachment, kesimpulan utama dari evaluasi usability website dengan skor SUS sebesar 51.
Skor ini menempatkan website dalam kategori Marginal, artinya penggunaannya masih bisa diterima, tetapi perlu diperbaiki agar performanya lebih baik.
Dalam skala Adjective Rating, skor ini sesuai dengan kategori OK, sedangkan dalam penilaian Grade, website berada pada level D.
Berdasarkan Net Promoter Score (NPS), website ini termasuk dalam kategori Detractor.
Dengan demikian, disarankan untuk melakukan iterasi desain dan pengujian lebih lanjut untuk meningkatkan pengalaman pengguna agar mencapai skor SUS yang lebih tinggi, mendekati atau melebihi 68, yang dianggap sebagai ambang batas Gambar 43.
System Usability Scale survei Berdasarkan hasil perhitungan, desain website pendeteksi stres dini memperoleh skor SUS sebesar 51.
Nilai tersebut kemudian dianalisis berdasarkan kriteria yang berlaku dalam metode SUS.
Dalam evaluasi usability, terdapat tiga aspek utama yang digunakan untuk menilai, yaitu tingkat penerimaan https://doi.
org/10.
46961/jommit.
JOURNAL OF MULTIMEDIA AND INFORMATION TECHNOLOGY - VOL.
09 NO.
DAFTAR PUSTAKA