634
Progresif: Jurnal Ilmiah Komputer https://ojs.
stmik-banjarbaru.
id/index.
php/progresif/index Jl.
Ahmad Yani.
33,5 - Kampus STMIK Banjarbaru Loktabat - Banjarbaru (Tlp.
, e-mail: puslit.
stmikbjb@gmail.
e-ISSN: 2685-0877 Penerapan Metode User-Centered Design dalam Redesign UI/UX Aplikasi Mobile Transjakarta DOI: http://dx.
org/10.
35889/progresif.
Creative Commons License 4.
0 (CC BY Ae NC) Luthfia Masruroh Syah1.
Mia Kamayani2* Teknik Informatika.
Universitas Muhammadiyah Prof.
Dr.
Hamka.
Jakarta.
Indonesia *e-mail Corresponding Author: mia.
kamayani@uhamka.
Abstract The Transjakarta mobile application plays a vital role in supporting public transportation in Jakarta, but many users report poor usability, complicated navigation, and unintuitive interface Based on an initial survey involving 20 active users, the application scored only 26.
8 on the System Usability Scale (SUS), placing it in the AuPoorAy category.
This study adopts the UserCentered Design (UCD) approach in the redesign process of the application's UI/UX, involving four key stages: understanding the context of use, identifying user needs, designing appropriate solutions, and evaluating the alignment of those solutions with the identified needs.
Evaluation was conducted using the SUS method and A/B Testing.
The redesign process led to a significant improvement, raising the SUS score 85.
25 and showing that 86% of users preferred the new Additional features such as AuTop-up BalanceAy and AuTransaction HistoryAy also received positive feedback.
These findings demonstrate that the UCD approach effectively improves usability and user satisfaction, and can serve as a reference for future developments in public service applications.
Keywords: A/B Testing.
Redesign.
System Usability Scale.
Transjakarta.
User Centered Design Abstrak Aplikasi mobile Transjakarta merupakan layanan pendukung transportasi publik di Jakarta yang penting, namun masih menghadapi berbagai masalah dalam kemudahan penggunaan, integrasi fitur, dan tampilan antarmuka yang kurang intuitif.
Berdasarkan survei awal terhadap 20 pengguna, skor System Usability Scale (SUS) hanya mencapai 26,8 yang termasuk kategori Poor.
Penelitian ini menggunakan pendekatan User-Centered Design (UCD) dalam proses perancangan ulang UI/UX aplikasi, yang melibatkan empat tahapan inti: memahami konteks penggunaan, mengidentifikasi kebutuhan pengguna, merancang solusi desain, serta mengevaluasi kesesuaian solusi terhadap kebutuhan tersebut.
Evaluasi dilakukan menggunanan SUS dan A/B Testing.
Hasilnya menunjukkan peningkatan signifikan, dengan skor SUS yang naik menjadi 85,25 .
ategori Excellen.
dan 86% responden lebih menyukai desain baru.
Selain itu, fitur baru seperti AuIsi SaldoAy dan AuRiwayat TransaksiAy mendapat tanggapan positif dari mayoritas Penelitian ini menunjukkan bahwa UCD efektif dalam meningkatkan kualitas pengalaman pengguna serta dapat menjadi acuan dalam pengembangan aplikasi layanan publik berbasis digital.
Kata kunci: A/B Testing.
Perancangan Ulang.
System Usability Scale.
Transjakarta.
User Centered Design Pendahuluan Teknologi digital yang terus berevolusi telah menggerakkan perubahan drastis di hampir seluruh aspek kehidupan, termasuk layanan transportasi publik.
Sebagai kota metropolitan dengan mobilitas tinggi.
Jakarta menghadapi tantangan besar dalam mengelola kemacetan dan menyediakan sistem transportasi yang efisien .
Salah satu upaya strategis yang dilakukan Pemerintah Provinsi DKI Jakarta adalah pengoperasian layanan Bus Rapid Transit (BRT) Transjakarta sejak tahun 2024, yang bertujuan meningkatkan aksesibilitas dan kenyamanan Penerapan Meteode User Centered Design Redesign UI/UX a.
Luthfia Masruroh Syah Progresif e-ISSN: 2685-0877 transportasi masyarakat .
Seiring meningkatnya jumlah pengguna, layanan ini memerlukan dukungan sistem informasi berbasis teknologi, salah satunya dalam bentuk aplikasi mobile.
Aplikasi mobile Transjakarta dirancang untuk menyediakan berbagai informasi penting seperti jadwal, rute, serta lokasi halte, guna membantu pengguna merencanakan perjalanan.
Namun, efektivitas aplikasi ini dalam memberikan pengalaman pengguna yang optimal masih Berdasarkan survei terhadap 20 pengguna aktif, ditemukan bahwa 75% responden menganggap aplikasi terlalu rumit, 55% mengeluhkan integrasi fitur yang buruk, dan 45% mengalami kesulitan dalam memahami alur penggunaan aplikasi.
Melalui pengukuran dengan System Usability Scale (SUS), didapatkan skor rata-rata 26,8, sebuah angka yang mencerminkan tingkat usability yang rendah dan termasuk dalam kategori 'F'.
Hal ini mencerminkan rendahnya tingkat kegunaan dan efisiensi aplikasi dalam memenuhi kebutuhan Lebih lanjut, hasil survei mengungkapkan bahwa tampilan ikon dinilai cukup informatif, desain visual aplikasi dianggap terlalu polos dan tidak menarik dibandingkan dengan aplikasi transportasi lainnya.
Ukuran teks yang terlalu kecil menjadi hambatan signifikan, terutama bagi pengguna dengan keterbatasan penglihatan.
Selain itu, tidak tersedianya fitur riwayat membuat pengguna kesulitan dalam memantau pemotongan saldo secara transparan.
Hal ini mencerminkan urgensi untuk memperbaiki antarmuka dan pengalaman pengguna melalui strategi desain yang menitikberatkan pada perspektif dan kebutuhan pengguna.
Untuk menjawab permasalahan tersebut, pendekatan User-Centered Design (UCD) dinilai tepat karena menempatkan pengguna sebagai pusat dalam proses perancangan.
UCD
merupakan metodologi iteratif yang berfokus pada pemahaman menyeluruh terhadap kebutuhan, konteks, dan keterbatasan pengguna, sehingga solusi yang dihasilkan mampu memberikan pengalaman penggunaan yang lebih baik .
Melalui pendekatan ini, peningkatan tidak hanya terjadi pada aspek kinerja dan desain antarmuka, tetapi juga pada kesesuaian aplikasi dengan keinginan pengguna.
Dengan mempertimbangkan permasalahan yang telah diidentifikasi serta relevansi pendekatan yang digunakan, penelitian ini bertujuan untuk merancang ulang antarmuka dan pengalaman pengguna (UI/UX) aplikasi mobile Transjakarta melalui penerapan metode UserCentered Design.
Penelitian ini menitikberatkan pada proses identifikasi kebutuhan pengguna, perancangan ulang desain melalui prototipe, serta penilaian usability dengan menggunakan metode SUS dan A/B Testing.
Diharapkan, hasilnya mampu memberikan kontribusi terhadap perbaikan kualitas sistem transportasi publik digital, terutama di Jakarta.
Tinjauan Pustaka Temuan dari penelitian terdahulu menunjukkan bahwa pendekatan UCD memiliki peran penting dalam meningkatkan kemudahan penggunaan berbagai aplikasi digital.
Pradana et al.
meneliti penerapan metode UCD pada aplikasi Ipusnas untuk meningkatkan usability dan pengalaman pengguna.
Penelitian ini melalui tahapan UCD berupa analisis kebutuhan, pembuatan prototype, dan evaluasi dengan parameter System Usability Scale (SUS) dan A/B Testing.
Hasilnya menunjukkan skor SUS sebesar 61,2 .
ategori AyOKA.
dan 64% responden memilih desain baru.
Ridho et al.
mengimplementasikan metode UCD pada situs laboratorium HUMIC Telkom University, dengan fokus pada peningkatan navigasi dan tampilan antarmuka.
Evaluasi dilakukan menggunakan SUS dan Single Ease Question (SEQ), yang menunjukkan skor SUS meningkat dari 43 menjadi 80,5, dan skor SEQ dari 5,5 menjadi 6,4.
Zaman et al.
juga menerapkan UCD untuk memperbaiki aplikasi internal Kampus Kita Tendik Universitas Airlangga.
Penelitian ini mengidentifikasi masalah usability antarmuka, kemudian melakukan redesign dengan melibatkan pengguna.
Hasil evaluasi dengan SUS menunjukkan skor meningkat dari 66,47 menjadi 84,14, yang termasuk dalam kategori Best Imaginable.
Penelitian lainnya oleh Nurhidayah et al.
menggunakan metode Design Thinking untuk merancang ulang antarmuka Learning Management System (LMS), dengan fokus pada pengalaman pembelajaran daring.
Evaluasi dilakukan melalui A/B Testing, yang menunjukkan preferensi pengguna terhadap desain baru meningkat dari 64% menjadi 84%.
Terakhir, studi oleh Maulana Alja et al.
menerapkan UCD pada situs e-commerce Tutus Betta Farm untuk memperbaiki tampilan dan meningkatkan kenyamanan pengguna.
Penerapan Meteode User Centered Design Redesign UI/UX a.
Luthfia Masruroh Syah e-ISSN: 2685-0877 Penelitian ini menggunakan parameter SUS, dengan skor evaluasi mencapai 84 .
ategori Excellen.
Berdasarkan studi-studi tersebut, terlihat bahwa metode UCD terbukti efektif meningkatkan usability pada berbagai platform digital.
Namun, terdapat beberapa perbedaan dari aspek platform, metode evaluasi, dan fitur yang dianalisis.
Penelitian Pradana et al.
Ridho et .
, dan Zaman et al.
berfokus pada aplikasi pendidikan dan internal kampus, sementara Maulana Alja et al.
pada platform e-commerce, serta Nurhidayah et al.
menggunakan pendekatan berbeda, yaitu Design Thinking.
Tidak ditemukan penelitian terdahulu yang secara spesifik menerapkan UCD pada aplikasi layanan publik transportasi seperti Transjakarta, dengan evaluasi menggunakan kombinasi parameter System Usability Scale (SUS) dan preferensi pengguna (A/B Testin.
, serta melibatkan pengembangan fitur baru seperti Isi Saldo dan Riwayat Transaksi.
Oleh karena itu, penelitian ini memberikan kontribusi baru dalam konteks layanan transportasi publik berbasis digital dengan paramater evaluasi yang lebih komprehensif dan Metodologi Penelitian ini berfokus pada redesain UI/UX aplikasi mobile Transjakarta dengan mengadopsi pendekatan User-Centered Design (UCD), yang dipilih agar rancangan akhir selaras dengan keinginan dan kebutuhan pengguna.
Metode User-Centered Design (UCD) menempatkan pengguna sebagai pusat dalam seluruh proses perancangan sistem, dengan fokus pada pemenuhan kebutuhan mereka .
Secara garis besar.
UCD terdiri atas empat tahapan pokok .
, yaitu:
Gambar 1.
Tahapan Utama Metode User-Centered Design (UCD) Understand Context of Use (Memahami Konteks Penggunaa.
Pada tahap ini, peneliti berupaya mengidentifikasi permasalahan utama yang dialami pengguna aplikasi Transjakarta serta memahami pola interaksi mereka dalam keseharian.
Data dikumpulkan melalui survei kepada 20 responden yang dipilih secara purposive, menggunakan Google Forms.
Survei ini terdiri dari dua bagian:
Kuesioner System Usability Scale (SUS): untuk memperoleh data kuantitatif mengenai tingkat kegunaan aplikasi saat ini.
Kuesioner ini terdiri dari 10 butir pertanyaan (P1 Ae P.
yang mencakup aspek-aspek seperti keinginan menggunakan sistem, kompleksitas, kemudahan, kebutuhan bantuan, integrasi fitur, konsistensi, kemudahan belajar, kenyamanan, rasa percaya diri, dan kebutuhan pembelajaran.
Daftar lengkap butir pertanyaan disajikan dalam Tabel 1.
Tabel 1.
Daftar Butir Pernyataan Kuesioner SUS Pertanyaan Saya merasa bahwa saya akan sering menggunakan aplikasi ini Saya merasa aplikasi ini terlalu rumit Saya merasa aplikasi ini mudah digunakan Saya merasa membutuhkan bantuan teknis dari orang lain untuk menggunakan aplikasi ini Fitur-fitur dalam aplikasi ini terintegrasi dengan baik Saya merasa tampilan dan cara kerja aplikasi ini kadang tidak konsisten Sebagian besar orang akan dapat belajar menggunakan aplikasi ini dengan cepat Saya merasa sistem ini membingungkan jika digunakan Saya merasa percaya diri ketika menggunakan aplikasi ini Saya harus mempelajari banyak hal sebelum dapat menggunakan aplikasi dengan Progresif: Vol.
No.
Agustus 2025: 634-647 Progresif e-ISSN: 2685-0877 Survei esai: untuk menggali wawasan kualitatif terkait kendala yang dihadapi, fitur yang dianggap kurang bermanfaat, serta harapan pengguna terhadap perbaikan aplikasi.
Dari hasil survei ini, peneliti memilih 3 responden dengan keragaman masukan dan tingkat penggunaan yang tinggi untuk diwawancarai lebih lanjut secara singkat namun terarah.
Wawancara difokuskan pada pengalaman penggunaan aplikasi, halaman atau fitur yang dirasa sulit atau membingungkan, serta harapan mereka terhadap fitur-fitur baru yang potensial.
Temuan-temuan dari survei dan wawancara kemudian divisualisasikan dalam bentuk Empathy Map, yang merangkum apa yang dirasakan, dipikirkan, dikatakan, dan dilakukan Empathy Map ini membantu memberikan gambaran menyeluruh mengenai konteks penggunaan aplikasi dan menentukan prioritas dalam proses redesign.
Specify User Requirements (Menentukan Kebutuhan Penggun.
Pada tahap ini, peneliti mengolah hasil Empathy Map dari wawancara tiga responden untuk menyusun User Flow yang menggambarkan alur aktivitas pengguna saat menggunakan Visualisasi yang dibuat dengan Canva ini menunjukkan tahapan-tahapan yang biasanya dilalui pengguna.
Melalui User Flow, peneliti dapat memahami pola penggunaan aplikasi lebih jelas serta mengidentifikasi elemen yang perlu diperbaiki agar alur interaksi menjadi lebih sederhana dan sesuai dengan kebutuhan pengguna.
Design Solutions (Merancang Solus.
Setelah kebutuhan pengguna diidentifikasi, peneliti menyusun solusi desain yang sesuai.
Proses diawali dengan pembuatan prototipe low-fidelity di Balsamiq Wireframes untuk merancang struktur dasar tampilan aplikasi.
Selanjutnya, desain dikembangkan menjadi prototipe high-fidelity di Figma dengan elemen visual yang lebih lengkap dan interaktif.
Kedua prototipe ini membantu memvisualisasikan ide desain agar lebih sesuai dengan kebutuhan pengguna dan mampu menghadirkan pengalaman penggunaan yang lebih nyaman.
Evaluate Against Requirements (Evaluasi Terhadap Kebutuha.
Setelah proses redesign selesai, peneliti kembali menyebarkan kuesioner kepada 20 responden yang sama untuk mengevaluasi desain baru.
Penilaian dilakukan melalui System Usability Scale (SUS) untuk mengevaluasi seberapa besar peningkatan usability setelah desain ulang dilakukan.
Karena menggunakan metode yang sama dengan tahap evaluasi awal, hasil yang diperoleh dapat dibandingkan secara langsung guna melihat efektivitas dari perubahan desain terhadap pengalaman pengguna.
Selain itu, peneliti juga melakukan evaluasi menggunakan metode A/B Testing melalui kuesioner kedua.
Responden diminta membandingkan beberapa halaman dari versi lama dan versi baru berdasarkan tampilan serta kemudahan penggunaan.
Di akhir kuesioner, terdapat bagian khusus untuk mengevaluasi fitur baru, di mana responden menilai apakah fitur tersebut membantu atau tidak.
Seluruh data dikumpulkan melalui Google Forms, sementara prototype yang dibandingkan berasal dari desain interaktif di Figma.
Peneliti kemudian menganalisis data yang diperoleh dari kedua kuesioner tersebut.
Desain ulang dianggap berhasil apabila skor SUS mencapai atau melebihi angka 70, yang termasuk dalam kategori Good, serta lebih dari 70% responden A/B Testing memilih desain Berdasarkan hasil analisis ini, peneliti menarik kesimpulan akhir mengenai efektivitas proses redesign dan sejauh mana tujuan penelitian telah tercapai.
Hasil dan Pembahasan Understand Context of Use (Memahami Konteks Penggunaa.
Tahap awal dalam metode User-Centered Design (UCD) mencakup pemahaman terhadap konteks penggunaan aplikasi, yang dilakukan melalui identifikasi profil pengguna, pola interaksi mereka, serta berbagai hambatan yang dihadapi saat menggunakan aplikasi mobile Transjakarta.
Untuk mendukung pemahaman ini, peneliti melakukan evaluasi awal terhadap versi lama aplikasi dengan mengamati tampilan dan alur penggunaannya guna mengenali antarmuka yang kurang intuitif serta fitur yang belum optimal.
Untuk memperjelas kondisi awal aplikasi, pada Gambar 2 ditampilkan beberapa tampilan dari versi lama, seperti halaman splash screen, login, register, home, pencarian rute, notifikasi, dan profil pengguna.
Penerapan Meteode User Centered Design Redesign UI/UX a.
Luthfia Masruroh Syah e-ISSN: 2685-0877 Gambar 2.
Tampilan Awal Aplikasi Mobile Transjakarta Penelitian ini memanfaatkan metode System Usability Scale (SUS) untuk menilai tingkat kepuasan dan kenyamanan pengguna terhadap antarmuka aplikasi mobile Transjakarta.
Sebanyak 20 pengguna aktif diminta menyelesaikan sejumlah tugas simulasi, kemudian menjawab 10 pertanyaan dalam skala Likert 1 sampai 5 yang mengevaluasi pengalaman mereka secara keseluruhan.
Metode ini membantu mengidentifikasi aspek desain yang perlu ditingkatkan berdasarkan skor rata-rata yang diperoleh .
Adapun langkah-langkah perhitungan dalam metode System Usability Scale (SUS), yaitu .
Untuk pertanyaan dengan nomor ganjil, skor dikurangi dengan angka 1.
Untuk pertanyaan dengan nomor genap, skor dikurangkan dari angka 5.
Seluruh skor yang telah disesuaikan kemudian dijumlahkan, dan hasil penjumlahan tersebut dikalikan dengan 2,5 untuk memperoleh skor akhir SUS.
Berdasarkan hasil perhitungan tersebut, interpretasi skor SUS dapat dijelaskan melalui ketentuan yang ditampilkan pada Gambar 3 berikut.
Gambar 3.
System Usability Scale (SUS) Hasil evaluasi yang diperoleh dari kuesioner kemudian dihitung menggunakan metode SUS, yang mencakup 10 butir pertanyaan tentang persepsi pengguna terhadap usability aplikasi sebagaimana dijelaskan pada metodologi.
Perhitungan skor dari 20 responden menghasilkan rata-rata sebesar 26,8.
Nilai ini menunjukkan bahwa kegunaan aplikasi berada pada kategori AuPoorAy atau rendah.
Rekapitulasi hasil perhitungan skor SUS sebelum dilakukan proses redesign disajikan pada Tabel 2.
Progresif: Vol.
No.
Agustus 2025: 634-647 Progresif e-ISSN: 2685-0877 Tabel 2.
Hasil Perhitungan Skor SUS Sebelum Redesign
Responden
R10
R11
R12
R13
R14
R15
R16
R17
R18
R19
R20
Pertanyaan P5 P6 P7 Jumlah P10 Skor Rata-rata SUS Nilai Selain menggunakan metode System Usability Scale (SUS), peneliti menambahkan pertanyaan esai dalam survei awal guna menggali pendapat dan pengalaman pengguna secara lebih mendalam.
Pendekatan ini bertujuan untuk menangkap keluhan, kendala, serta masukan yang tidak tercakup dalam pertanyaan berskala.
Berdasarkan tanggapan yang diperoleh, sejumlah responden menyoroti tampilan aplikasi yang dinilai terlalu polos dan kurang menarik jika dibandingkan dengan aplikasi transportasi lain (R.
, serta terkesan terlalu kosong dan menyisakan ruang yang dapat dimanfaatkan lebih baik (R.
Meskipun informatif, ukuran teks yang terlalu kecil juga dianggap menyulitkan proses pembacaan, terutama bagi pengguna dengan keterbatasan penglihatan (R.
Dari sisi fitur, responden, mengeluhkan notifikasi yang tidak konsisten (R.
serta sistem pembelian tiket yang disarankan untuk diganti dengan metode pengisian saldo (R.
Beberapa masukan tambahan meliputi pentingnya penambahan fitur riwayat transaksi guna memantau pemotongan saldo secara transparan (R.
, serta opsi bahasa asing untuk mendukung wisatawan mancanegara yang menggunakan layanan Transjakarta (R.
Masukan-masukan tersebut memberikan gambaran yang lebih spesifik mengenai area yang perlu ditingkatkan dalam proses perancangan ulang aplikasi.
Setelah penyebaran kuesioner, peneliti melakukan wawancara singkat dengan tiga responden terpilih berdasarkan keragaman masukan dan frekuensi penggunaan aplikasi.
Tujuannya adalah untuk mendalami pengalaman dan kendala yang mereka alami.
Responden pertama mengeluhkan tampilan aplikasi yang membingungkan, khususnya fitur pencarian rute yang sulit ditemukan.
Responden kedua menyoroti proses pembelian tiket yang dinilai rumit, dan menyarankan penggunaan sistem isi saldo seperti e-wallet agar lebih praktis.
Sementara itu, responden ketiga mengungkapkan perlunya fitur riwayat transaksi untuk memastikan kejelasan proses pembelian.
Temuan ini akan menjadi dasar penting untuk menyusun Empathy Map dan melanjutkan ke tahap perancangan ulang desain aplikasi.
Empathy Map merupakan alat yang digunakan dalam pendekatan User-Centered Design (UCD) untuk memahami secara menyeluruh kebutuhan, perasaan, dan pengalaman pengguna dari berbagai sudut pandang, seperti apa yang mereka pikirkan, lihat, dengar, katakan, lakukan, alami sebagai masalah, dan harapan sebagai solusi .
Dalam penelitian ini.
Empathy Map disusun berdasarkan wawancara dengan tiga responden yang dipilih dari peserta survei awal karena menunjukkan keragaman tanggapan dan intensitas penggunaan aplikasi Transjakarta.
Hasilnya menggambarkan kondisi emosional dan kebutuhan pengguna terkait antarmuka, fitur, dan kemudahan penggunaan, yang divisualisasikan dalam Gambar 4.
Gambar 5.
Gambar 6 Penerapan Meteode User Centered Design Redesign UI/UX a.
Luthfia Masruroh Syah e-ISSN: 2685-0877 Gambar 4.
Empathy Map - Responden 1 Gambar 5.
Empathy Map - Responden 2 Gambar 6.
Empathy Map - Responden 3 Specify User Requirements (Menentukan Kebutuhan Penggun.
Setelah menyusun Empathy Map, peneliti merumuskan kebutuhan pengguna berdasarkan permasalahan dan harapan yang ditemukan selama wawancara.
Tujuan dari tahap ini adalah mengidentifikasi fitur utama yang dibutuhkan serta menyusun alur interaksi aplikasi agar lebih sesuai dengan kebiasaan dan kebutuhan pengguna sehari-hari.
Untuk membantu proses ini.
Progresif: Vol.
No.
Agustus 2025: 634-647 Progresif e-ISSN: 2685-0877 peneliti menyusun user flow sebagai visualisasi yang bisa dilakukan pengguna saat berinteraksi dengan aplikasi, sehingga dapat diketahui bagian-bagian yang perlu disederhanakan atau ditingkatkan .
Dari hasil wawancara, ditemukan beberapa kebutuhan utama.
Responden 1 menginginkan antarmuka yang lebih intuitif dan fitur pencarian rute yang lebih mudah diakses, sebagaimana divisualisasikan dalam Gambar 7.
Responden 2 menyarankan penggantian fitur pembelian tiket dengan sistem isi saldo agar lebih praktis, yang digambarkan pada Gambar 8.
Sementara itu.
Responden 3 menekankan pentingnya fitur riwayat transaksi untuk memudahkan pelacakan aktivitas, sebagaimana ditunjukkan pada Gambar 9 berikut.
Gambar 7.
User Flow - Responden 1 Gambar 8.
User Flow - Responden 2 Gambar 9.
User Flow - Responden 3 Design Solutions (Merancang Solusi Desai.
Tahap perancangan solusi desain dilakukan untuk merespons berbagai permasalahan pengguna yang telah diidentifikasi sebelumnya.
Proses ini dilaksanakan secara bertahap, dimulai dari pembuatan wireframe sederhana hingga pengembangan prototype yang mendekati tampilan akhir aplikasi.
Pendekatan bertahap ini bertujuan untuk memastikan bahwa setiap keputusan desain tetap berfokus pada kebutuhan pengguna dan mengikuti alur interaksi yang telah dianalisis pada tahap sebelumnya.
Desain Low-Fidelity (Wirefram.
Pada tahap awal, peneliti membuat desain low-fidelity menggunakan Balsamiq Wireframes.
Wireframe ini menggambarkan struktur dasar aplikasi tanpa elemen visual yang kompleks, dan berfungsi untuk menyusun navigasi serta fungsi utama sesuai kebutuhan pengguna .
Dalam tahap ini, peneliti merancang tiga halaman utama yang paling mewakili kebutuhan pengguna sebagai dasar pengembangan desain berikutnya.
Pertama, halaman Beranda (Hom.
dan Pencarian Rute dirancang agar fitur pencarian rute langsung dapat terlihat di bagian awal, dilengkapi informasi saldo dan akses cepat ke menu Penerapan Meteode User Centered Design Redesign UI/UX a.
Luthfia Masruroh Syah e-ISSN: 2685-0877 Gambar 10.
Wireframe Halaman Beranda (Hom.
dan Pencarian Rute Kedua, halaman Isi Saldo disusun secara sederhana agar proses pengisian saldo lebih cepat dan praktis, sesuai masukan pengguna yang menginginkan pengganti fitur pembelian tiket.
Gambar 11.
Wireframe Halaman Isi Saldo Ketiga, halaman Riwayat Transaksi menampilkan catatan aktivitas seperti pengisian saldo dan penggunaan kartu, yang memudahkan pengguna untuk memantau histori transaksi kapan pun dibutuhkan.
Gambar 12.
Wireframe Halaman Riwayat Transaksi Progresif: Vol.
No.
Agustus 2025: 634-647 Progresif e-ISSN: 2685-0877 Desain High-Fidelity (Prototyp.
Setelah tahap wireframe selesai, peneliti melanjutkan ke pembuatan high-fidelity prototype menggunakan Figma.
Desain aplikasi pada fase ini dikembangkan secara mendalam dengan integrasi elemen visual seperti warna, ikon, dan tata letak yang menyerupai tampilan Tujuannya adalah untuk menyimulasikan pengalaman nyata bagi pengguna sebelum dilakukan pengujian .
Desain prototype mencakup tiga halaman utama yang sebelumnya telah diidentifikasi berdasarkan hasil wawancara dan analisis, yaitu:
Halaman Beranda (Hom.
dan Pencarian Rute Gambar 13.
Prototype Halaman Beranda (Hom.
dan Pencarian Rute .
Halaman Isi Saldo Gambar 14.
Prototype Halaman Isi Saldo Penerapan Meteode User Centered Design Redesign UI/UX a.
Luthfia Masruroh Syah e-ISSN: 2685-0877 Halaman Riwayat Transaksi Gambar 15.
Prototype Halaman Riwayat Transaksi Evaluate Against Requirements (Evaluasi Terhadap Kebutuha.
Setelah pembuatan prototype selesai, peneliti melakukan evaluasi untuk memastikan bahwa desain baru telah menjawab kebutuhan pengguna.
Dua metode evaluasi, yaitu SUS dan A/B Testing, digunakan dalam penelitian ini untuk menilai keefektifan dan preferensi pengguna terhadap desain aplikasi yang telah diperbarui.
Evaluasi dengan Metode System Usability Scale (SUS) Tahap pertama evaluasi dilakukan menggunakan metode SUS, di mana 20 responden yang sama seperti pada awal penelitian diminta mencoba prototype baru melalui link Figma.
Tahapan berikutnya adalah pengisian kuesioner System Usability Scale (SUS) oleh pengguna, yang mencakup 10 pernyataan dengan rentang skala penilaian antara 1 dan 5.
Hasilnya kemudian diolah untuk menghitung skor akhir dan dibandingkan dengan skor sebelumnya.
Skor evaluasi dari responden setelah redesign ditampilkan pada Tabel 3.
Tabel 3.
Hasil Perhitungan Skor SUS Setelah Redesign
Responden
R10
R11
R12
R13
R14
R15
R16
R17
R18
R19
R20
Pernyataan Progresif: Vol.
No.
Agustus 2025: 634-647 Jumlah P10 Skor Rata-rata SUS Nilai 85,25 Progresif e-ISSN: 2685-0877 Berdasarkan data kuesioner SUS pada Tabel 3, peneliti melakukan perhitungan sesuai dengan prosedur metode System Usability Scale (SUS).
Nilai rata-rata sebesar 85,25 yang diperoleh sebelum redesign menunjukkan peningkatan usability yang signifikan.
Termasuk dalam kategori B (Excellen.
, skor ini menandakan bahwa pengguna merasa desain baru lebih nyaman dan mudah dioperasikan.
Evaluasi A/B Testing Selain metode SUS, peneliti juga menggunakan A/B Testing untuk membandingkan tampilan lama dan hasil redesign dari beberapa halaman aplikasi, seperti splash screen, login, register, home, pencarian rute, rencana perjalanan, notifikasi, dan profil.
A/B Testing adalah metode evaluasi yang umum digunakan untuk membandingkan dua atau lebih versi desain, dengan tujuan mengidentifikasi mana yang paling efektif dalam meningkatkan pengalaman pengguna .
Responden diminta memilih tampilan yang lebih jelas, mudah digunakan, dan Hasil pilihan responden dirangkum dalam Tabel 4.
Tabel 4.
Hasil A/B Testing Ae Perbandingan Desain Lama dan Desain Baru Menu Splash Screen Login Register Beranda Pencarian Rute Bus Rencana Perjalanan Notifikasi Profil Pengguna Rata-rata Desain Lama (A) Desain Baru (B) Hasil Berdasarkan hasil kuesioner A/B Testing, desain baru .
esain B) memperoleh persentase lebih tinggi dibandingkan desain lama .
esain A), sehingga dapat disimpulkan bahwa desain baru lebih baik.
Peneliti juga menambahkan dua fitur baru, yaitu Isi Saldo dan Riwayat Transaksi, yang sebelumnya tidak ada.
Evaluasi terhadap fitur ini dilakukan melalui pertanyaan tambahan dalam kuesioner, dan hasilnya ditampilkan pada Gambar 16.
Gambar 16.
Evaluasi Fitur Baru Ae Isi Saldo dan Riwayat Transaksi Hasil kuesioner menunjukkan bahwa fitur Riwayat Transaksi mendapat respons positif dari 90% responden, sementara 10% menganggapnya kurang berguna atau belum memahami.
Fitur Isi Saldo juga dinilai membantu oleh 85% responden, meski 15% merasa masih perlu perbaikan.
Secara keseluruhan, kedua fitur diterima dengan baik dan dapat dikembangkan lebih lanjut.
Pembahasan Desain ulang yang diajukan dalam penelitian ini terbukti mampu menjawab masalahmasalah yang telah diidentifikasi pada tahap awal.
Berdasarkan hasil survei awal, mayoritas responden mengeluhkan tampilan aplikasi yang polos, ukuran teks kecil, navigasi yang membingungkan, tidak adanya riwayat transaksi, dan proses pembelian tiket yang dianggap tidak Desain baru yang dikembangkan melalui pendekatan User-Centered Design (UCD) menyelesaikan masalah-masalah tersebut dengan beberapa perbaikan spesifik.
Navigasi diperbaiki dengan menempatkan fitur pencarian rute pada halaman utama untuk memudahkan Tampilan diperbaiki dengan visual yang lebih menarik dan ukuran teks yang lebih besar untuk meningkatkan keterbacaan.
Dua fitur baru, yaitu Isi Saldo dan Riwayat Transaksi, berhasil Penerapan Meteode User Centered Design Redesign UI/UX a.
Luthfia Masruroh Syah e-ISSN: 2685-0877 menjawab keluhan responden mengenai transparasi transaksi dan kepraktisan pembayaran.
Hasil evaluasi kuantitatif juga mendukung temuan ini, dengan skor SUS meningkat dari 26,8 .
ategori Poo.
menjadi 85,25 .
ategori Excellen.
, serta 86% responden menyatakan lebih memilih desain baru dibandingkan desain lama melalui A/B Testing.
Ini menunjukkan bahwa desain baru tidak hanya berpotensi, tetapi sudah terbukti meningkatkan usability dan kepuasan pengguna secara signifikan.
Temuan ini juga sejalan dengan penelitian-penelitian terdahulu mengenai efektivitas UCD dalam meningkatkan kualitas UI/UX.
Misalnya.
Pradana et al.
melaporkan peningkatan skor SUS menjadi 61,2 dan preferensi 64% setelah menerapkan UCD pada aplikasi Ipusnas.
Penelitian Ridho et al.
juga menunjukkan peningkatan signifikan pada situs laboratorium HUMIC, dengan skor SUS naik dari 43 menjadi 80,5.
Demikian pula.
Zaman et al.
menemukan peningkatan dari 65,57 menjadi 87,14 pada aplikasi internal kampus setelah redesign dengan UCD, sedangkan Maulana Alja et al.
mencapai skor SUS 84 pada situs e-commerce.
Penelitian ini menguatkan temuan-temuan sebelumnya bahwa UCD merupakan pendekatan yang efektif untuk meningkatkan usability berbagai platform digital.
Namun demikian, penelitian ini memberikan kontribusi lebih jauh dengan menerapkan UCD pada layanan publik transportasi berbasis digital, yang belum banyak dikaji sebelumnya.
Selain itu, penelitian ini menggabungkan evaluasi SUS dengan A/B Testing, serta melibatkan fitur baru seperti Isi Saldo dan Riwayat Transaksi yang disesuikan dengan kebutuhan spesifik pengguna Transjakarta.
Dengan demikian, penelitian ini tidak hanya mendukung efektivitas metode UCD yang telah dibuktikan oleh studi-studi sebelumnya, tetapi juga memperluas penerapannya pada konteks layanan publik transportasi dengan kebutuhan dan parameter evaluasi yang lebih Penelitian ini dapat menjadi referensi untuk mengembangkan aplikasi sejeni di bidang layanan publik lainnya.
Simpulan Penerapan lengkap metode User-Centered Design UCD yang mencakup pemahaman konteks penggunaan, identifikasi kebutuhan, pembuatan solusi, dan evaluasi, menghasilkan desain ulang aplikasi Transjakarta yang lebih sesuai dengan ekspektasi pengguna.
Evaluasi System Usability Scale SUS menunjukkan skor meningkat dari 26,8 menjadi 85,25 (Excellen.
, dan mayoritas responden .
%) lebih memilih tampilan baru daripada desain sebelumnya.
Penambahan dua fitur baru, yaitu Isi Saldo dan Riwayat Transaksi, juga mendapat respons masing-masing dinilai membantu oleh 85% dan 90% responden, yang membuktikan bahwa pendekatan UCD mampu menghasilkan solusi yang relevan dan bermanfaat.
Untuk penelitian selanjutnya, disarankan melibatkan lebih banyak variasi profil pengguna agar kebutuhan yang terkumpul lebih representatif, serta menambahkan metode observasi langsung dalam pengujian usability guna menangkap hambatan yang tidak terlihat dari hasil kuesioner Daftar Referensi .
Santoso and A.
Dzikrillah.
AuAnalisis Sentimen Pengguna Terhadap Kinerja Sistem Transportasi Umum Jakarta Menggunakan Algoritma Naive Bayes,Ay KLIK: Kajian Ilmiah Informatika dan Komputer, vol.
4, no.
6, pp.
3032Ae3043, 2024, doi: 10.
30865/klik.
Pristanto.
Lauren.
Aryani, and S.
Sahara.
AuAnalisis Kepuasan Pelanggan Terhadap Fasilitas yang Disediakan oleh Pihak Transjakarta,Ay Jurnal Manajemen Riset Inovasi, vol.
1, no.
3, pp.
9-17, 2023.
doi: 10.
55606/mri.
Satrya.
Kusumah.
Fajri, and D.
Mahendra.
AuPerancangan UI/UX aplikasi Sensus Pajak Daerah DKI Jakarta berbasis Mobile dengan metode User Centered Design,Ay Nautical : Jurnal Ilmiah Multidisiplin, vol.
2, no.
9, pp.
2829Ae7466, 2023, [Onlin.
Available:
https://jurnal.
id/index.
php/nautical/index .
Rafi Pradana.
AuRedesign Of Ipusnas Application Using User Centered Design Method,Ay International Journal Science and Technology, vol.
2, no.
1, pp.
2829Ae050, 2023, doi:
56127/ijst.
Ridho.
Dwi.
Suwawi, and R.
Riskiana.
AuRedesigning the User Interface of a University Laboratory Website Using the User-Centered Design Approach,Ay Media Online, 4, no.
1, pp.
378Ae387, 2023, doi: 10.
30865/klik.
Zaman.
Nayottami, and E.
Hariyanti.
AuEvaluasi dan Desain Ulang Antarmuka Menggunakan Metode User Centered Design (UCD) pada Aplikasi Kampus Kita Tendik,Ay Progresif: Vol.
No.
Agustus 2025: 634-647 Progresif e-ISSN: 2685-0877 Jurnal Komputer dan Informatika, vol.
12, no.
1, pp.
91Ae101.
Apr.
2024, doi:
35508/jicon.
Nurhidayah et al.
AuPerancangan Desain Ulang User Interface Learning Management System Menggunakan Design Thinking Method,Ay Jurnal Mahasiswa Teknik Informatik.
, vol.
8, no.
4, pp.
8098-8105 2024.
Maulana Alja.
Daniati, and A.
Ristyawan.
AuPerancangan Ui/Ux E-Commerce Menggunakan Metode User Centered Design (UCD),Ay Journal of Information System Management (JOISM), 6, no.
93Ae101.
Jul.
2024, doi:
24076/joism.
Serbiadventa.
Bezaleel, and J.
Prestiliano.
AuIT-Explore Penggunaan User Centered Design Dalam Perancangan Antarmuka Website Smp Pangudi Luhur Ambarawa,Ay Jurnal Penerapan Teknologi Informasi dan Komunikasi, vol.
2, no.
1, pp.
3047, 2023.
Zen.
Namira, and T.
Rahayu.
AuRancang Ulang Desain UI (User Interfac.
Company Profile Berbasis Website Menggunakan Metode UCD (User Centered Desig.
,Ay In Prosiding Seminar Nasional Mahasiswa Bidang Ilmu Komputer dan Aplikasinya, 2022.
Vol.
No.
Masruroh Syah.
Faqihuddin Hanif.
Rahmawati.
Novianti, and P.
Saidatuzzahra.
AuPenerapan Prinsip Design Thinking Pada Ui/Ux Aplikasi Mobile Renas Fashion,Ay Jurnal Informatika Polinema, vol.
10, no.
4, pp.
Dumalang.
Montolalu, and D.
Lapihu.
AuPerancangan UI/UX Aplikasi Penjualan Makanan berbasis Mobile pada UMKM di Kota Manado menggunakan metode Design Thinking,Ay Jurnal Ilmiah Informatika dan Ilmu Komputer (JIMA-ILKOM), vol.
2, no.
41Ae52.
Sep.
2023, doi: 10.
58602/jima-ilkom.
Priyono.
Aryotejo, and S.
Adhy.
AuPenerapan Metode Design Thinking untuk Perancangan Prototype Lost and Found,Ay Jurnal Masyarakat Informatika, vol.
14, no.
2, pp.
Nugroho.
Purwanto.
Muin, and F.
Mahardika.
AuUI/UX Design of a Web-Based Student Organizations System Using the Design Thinking Method Approach,Ay Journal of Technology and Informatics (JoTI), vol.
7, no.
1, pp.
24-38, 2025, doi:
37802/joti.
Dwi Amalina and E.
Rachmawati.
AuPenerapan Metode Design Thinking Dalam Perancangan Ulang Ui&Ux Aplikasi Ipusnas,Ay Jurnal Informatika Polinema, vol.
11, no.
Alif.
Nasution.
Wulandari, and R.
Dwi Arista.
AuBulletin Of Computer Science Research Perancangan UI/UX Aplikasi Moblie Pertolongan Pertama Dengan Metode Prototipe Interaksi Untuk Meningkatkan Respon Darurat,Ay Media Onlin.
, vol.
5, no.
1, pp.
14Ae23, 2024, doi: 10.
47065/bulletincsr.
Ong.
Truong, and H.
Lauw.
AuCornac-AB: An Open-Source Recommendation Framework with Native A/B Testing Integration,Ay in w 2024 Companion - Companion Proceedings of the ACM Web Conference.
Association for Computing Machinery.
Inc.
May 2024, pp.
1027Ae1030.
doi: 10.
1145/3589335.
Penerapan Meteode User Centered Design Redesign UI/UX a.
Luthfia Masruroh Syah