Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Trasportation Tracker
AuNumpakAy Sebagai Upaya Mendukung Penggunaan Trasportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
PERANCANGAN UI/UX APLIKASI PUBLIC TRASPORTATION TRACKER
AuNUMPAKAy SEBAGAI UPAYA MENDUKUNG PENGGUNAAN TRANSPORTASI
UMUM DI KOTA MALANG
Annisa Ayu Amalia1.
Pujiyanto2 Program Studi Desain Komunikasi Visual.
Fakultas Sastra.
Universitas Negeri Malang Jl.
Cakrawala No.
Kota Malang, 65145, .
551312 e-mail: annisa.
2102536@student.
id1, pujiyanto.
fs@um.
Abstraksi Kurangnya fasilitas untuk mengakses informasi menyebabkan transportasi umum di Kota Malang dinilai kurang efektif dalam memenuhi kebutuhan mobilitas masyarakat.
Hal itu mengakibatkan minat masyarakat terhadap transportasi umum di Kota Malang menurun dan lebih memilih menggunakan kendaraan pribadi.
Sebagai upaya mendukung penggunaan transportasi umum di Kota Malang diperlukan solusi digital yang memudahkan dalam mengakses informasi transportasi umum tersebut.
Perancangan ini bertujuan untuk merancang aplikasi AuNumpakAy sebagai alat bantu navigasi angkot dengan fitur live tracking dan informasi rute.
Proses perancangan ini menggunakan metode design thinking yang meliputi empathize, define, ideate, prototype, dan test.
Perancangan ini menghasilkan prototype aplikasi sebagai media utama serta beberapa media pendukung sebagai sarana Dari segi visual, hasil perancangan ini menggunakan karakter desain modern minimalis dengan tipografi sans serif dan palet warna monokrom biru dan putih, guna menciptakan tampilan yang mudah dipahami.
Aplikasi ini diharapkan dapat menjadi solusi digital yang mendukung efektivitas transportasi umum di Kota Malang.
Kata Kunci : User Interface.
User Experience.
Aplikasi.
Transportasi Umum.
Design Thinking.
Prototipe Abstract Limited access to transportation information has led to public transportation in Malang City being perceived as ineffective in meeting mobility needs.
This has decreased public interest in using it, with a shift toward private vehicles.
To support the use of public transport, a digital solution is needed to provide easy access to relevant information.
This project aims to design Numpak, a mobile application that serves as a navigation tool for public transportation, featuring live tracking and route information.
The design process uses the design thinking method, consisting of empathize, define, ideate, prototype, and test.
The outcome is a functional prototype, and several media used for promotional purposes.
Visually, the design applies a modern minimalist style with sans serif typography and a monochrome palette to ensure clarity and user friendliness.
The application is expected to offer an innovative digital solution to improve the accessibility and efficiency of public transportation in Malang.
Keywords: User Interface.
User Experience.
Application.
Public Transportation.
Design Thinking.
Prototype __________________________________________________________________________ PENDAHULUAN Penggunaan kendaraan pribadi yang tidak ada batasnya menjadi salah satu faktor terjadinya kemacetan lalu lintas.
Tingginya angka penggunaan kendaraan pribadi, dapat dilihat dari gaya hidup masyarakat yang cenderung lebih memilih menggunakan kendaraan pribadi daripada kendaraan umum (Ariesandi et al.
, 2.
Berdasarkan data BPS Kota Malang tahun 2022 jumlah kendaraan bermotor di Kota Malang tercatat sebanyak 394.
274 unit.
Penggunaan 61 | Volume 07.
Nomor 01.
Maret 2025 Citradirga : Jurnal Desain Komunikasi Visual dan Intermedia Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Transportation Tracker AuNumpakAy Sebagai Upaya Mendukung Penggunaan Transportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
kendaraan pribadi ini banyak juga dijumpai di kalangan pelajar.
Saat ini, sebagian besar kebutuhan mobilitas pelajar di Kota Malang terpenuhi dengan fasilitas yang diberikan oleh orang tua masing-masing.
Banyak dari mereka yang masih mengandalkan orang tuanya untuk berpergian, serta banyak juga pelajar yang belum memiliki SIM (Surat Izin Mengemud.
menggunakan kendaraan bermotor sebagai alat transportasi atau menggunakan ojek online untuk kebutuhan mobilitasnya dibandingkan dengan menggunakan transportasi umum.
Saat ini, penggunaan transportasi umum di Kota Malang semakin menurun.
Masyarakat lebih memilih menggunakan kendaraan pribadi dibandingkan dengan transportasi umum yang tersedia, yaitu angkot .
ngkutan kot.
Salah satu faktor utama penyebab turunnya minat masyarakat dalam menggunakan transportasi umum adalah rendahnya tingkat kenyamanan dan kelayakan fasilitas transportasi umum yang ada.
Selain itu, akses terhadap informasi mengenai trayek dan rute angkot juga masih sangat terbatas.
Selama ini, informasi mengenai trayek angkot lebih banyak diperoleh dari bertanya kepada orang lain, bukan dari sumber informasi resmi atau sistem yang terstruktur.
Hal lainnya yang menjadi kendala pengguna transportasi umum adalah tidak adanya sistem pemantauan pergerakan angkot secara real time.
Hal tersebut membuat penumpang kesulitan dalam memperkirakan estimasi waktu kedatangan, durasi perjalanan, serta memilih waktu yang tepat untuk berangkat.
Akibatnya, banyak masyarakat yang merasa bahwa transportasi umum kurang efisien.
Sebagai upaya untuk mengatasi permasalahan tersebut, media digital dapat dimanfaatkan untuk memberikan kemudahan bagi masyarakat dalam mengakses informasi mengenai transportasi umum.
Seiring dengan meningkatnya teknologi di masyarakat, terutama penggunaan smartphone, terdapat peluang besar untuk mengembangkan solusi berbasis digital sebagai sarana informasi dalam mendukung penggunaan transportasi umum.
Penggunaan transportasi umum juga dapat membantu mengurangi kepadatan lalu lintas pada jam-jam sibuk .
eak hou.
Selain itu, trasportasi umum juga dapat digunakan untuk melatih kemandirian pelajar dalam kebutuhan mobilitasnya.
Perancangan ini dapat menjadi solusi yang efektif untuk mendukung penggunaan transportasi umum, dimana hal tersebut bisa mengurangi angka penggunaan kendaraan pribadi serta membuat angkutan umum .
di kota Malang lebih tertib.
Dalam perancangan UI/UX aplikasi public transportation tracker AuNumpakAy ini digunakan model perancangan design thinking.
Menurut Kelly & Brown .
, design thinking merupakan metode inovasi yang berpusat pada kebutuhan manusia, dengan memanfaatkan berbagai alat dan teknik perancangan untuk memenuhi kebutuhan individu.
Dalam design thinking, terdapat lima tahapan yang harus dilalalui untuk dapat memahami kebutuhan pengguna secara menyeluruh, yaitu empathize, define, ideate, prototype , test.
Penelitian terdahulu yang dijadikan sebagai referensi dalam perancangan ini adalah artikel ilmiah berjudul AuPerancangan UI/UX Aplikasi My CIC Layanan Informasi Akademik Mahasiswa Menggunakan Aplikasi FigmaAy oleh (Muhyidin et al.
, 2.
memiliki hasil desain yang relevan dengan peranacangan ini yaitu prototype aplikasi.
Selain itu, terdapat juga artikel ilmiah AuPerancangan User Interface dan User Experience Aplikasi Say.
coAy oleh (Jamilah & Padmasari, 2.
didapatkan topik yang sama yaitu memanfaatkan media digital sebagai sarana informasi.
Referensi lainnya juga didapatkan melalui artikel ilimiah AuPenerapan Metode Design Thinking pada Model Perancangan UI/UX Aplikasi Penanganan Laporan Kehilangan Barang dan Temuan Barang TercecerAy oleh (Razi et al.
, 2.
Dalam artiker tersebut didapatkan topik mengenai penggunaan metode design thinking dalam perancangan UI/UX.
Ketiga artikel ilmiah tersebut menjadi referensi dalam perancangan ini karena memiliki tujuan yang sama yaitu sebagai sarana informasi dalam konteks tertentu.
Namun berbeda dengan perancangan sebelumnya, pada perancangan UI/UX aplikasi public transportation tracker AuNumpakAy disini berfokus untuk memberikan kemudahan akses informasi mengenai transportasi umum di Kota Malang.
Perancangan ini dilakukan karena saat ini sarana informasi mengenai transportasi umum di Kota Malang dinilai masih kurang, hal tersebut menyebabkan 62 | Volume 07.
Nomor 01.
Maret 2025 Citradirga : Jurnal Desain Komunikasi Visual dan Intermedia Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Transportation Tracker AuNumpakAy Sebagai Upaya Mendukung Penggunaan Transportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
transportasi umum kurang diminati oleh masyarakat Kota Malang karena dianggap kurang METODE PERANCANGAN Dalam perancangan UI/UX aplikasi public transportation tracker AuNumpakAy menggunakan model perancangan design thinking dari Kelley & Brown .
yang memiliki lima tahapan, yaitu empathize, define, ideate, prototype, test.
Dalam (Margaretta et al.
, 2.
Kelley & Brown menjelaskan bahwa design thinking merupakan sebuah pendekatan yang berpusat pada manusia dengan mengadopsi dari alat-alat perancang untuk memenuhi kebutuhan individu.
Model perancangan tersebut digunakan karena dalam design thinking dilakukan proses berulang sehingga dapat memahami masalah pengguna untuk diidentifikasikan kembali sebagai upaya menciptakan solusi.
Bagan 1.
Kerangka Design Thinking oleh Kelley dan Brown .
Emphatize .
merupakan tahapan pertama yang dianggap sebagai inti dari proses perancangan yang berpusat pada manusia.
Pada tahap ini difokuskan untuk memahami masalah pengguna melalui teknik pengumpulan data yang akan digunakan.
Selanjutnya terdapat tahap kedua yaitu define .
yang merupakan proses menganalisis informasi yang diperoleh melalui tahap empati, dengan tujuan untuk menentukan masalah utama yang menjadi perhatian pada perancangan ini.
Tahapan ketiga pada metode ini ialah ideate .
yang merupakan proses perpindahan dari rumusan masalah menuju penyelesaian masalah, dalam proses ideate ini akan berkonsentrasi untuk menghasilkan gagasan atau ide sebagai landasan dalam membuat prototipe rancangan yang akan Tahap keempat adalah prototype, tahap ini dikenal sebagai rancangan awal suatu produk yang akan dibuat, untuk mendeteksi kesalahan sejak dini dan memperoleh berbagai kemungkinan baru, melalui ujicoba untuk mendapatkan respon atau feedback yang sesuai untuk menyempurnakan rancangan.
Tahapan terakhir yang dilakukan yaitu test .
ji cob.
, tahapan pengujian ini dilakukan untuk mengumpulkan feedback pengguna dari berbagai rancangan akhir yang telah dirumuskan dalam proses prototype sebelumnya.
Tahap ini merupakan tahap akhir yang bersifat life cycle sehingga memungkinkan terjadi perulangan dan kembali pada tahap perancangan sebeumnya apabila terdapat kesalahan.
Berdasarkan tahapan perancangan dalam metode design thinking, pada tahap define dilakukan proses analisis data untuk menentukan masalah utama.
Proses analisis tersebut menggunakan teori analisis 5W1H (What.
Why.
When.
Where.
Who.
Ho.
Dalam (Alfarid et , 2.
dijelaskan teori analisis 5W1H merupakan metode penelitian umum yang sering digunakan untuk memahami suatu permasalahan agar mengahasilkan solusi yang dapat membantu dalam proses pemencahan masalah.
Dengan menggunakan analisis 5W1H dapat ditarik kapankan permasalahan ini muncul, siapa saja yang terlibat masalah, dimana 63 | Volume 07.
Nomor 01.
Maret 2025 Citradirga : Jurnal Desain Komunikasi Visual dan Intermedia Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Transportation Tracker AuNumpakAy Sebagai Upaya Mendukung Penggunaan Transportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
permasalahan ini terjadi, mengapa permasalahan ini dapat terjadi, apa penyebab permasalahan ini, dan bagaimana cara menanggulanginya.
Populasi merupakan jumlah keseluruhan dari subjek dan objek penelitian yang akan dipelajari dan kemudian ditarik kesimpulannya, sedangkan sampel adalah bagian yang termasuk didalam subjek populasi (Rozana & Musfikar, 2.
Pendapat lain menyatakan bahwa populasi adalah sekumpulan individu atau objek yang berada pada suatu wilayah dengan karakteristik khas yang menjadi perhatian dalam suatu penelitian.
Sedangkan sampel merupakan perwakilan atau begian dari sebuah populasi yang telah dihilangkan dengan metode tertentu (Arfatin et al.
, 2.
Dalam perancangan ini, populasi yang ditetapkan adalah pelajar usia 12 hingga 18 tahun di Kota Malang.
Serta pengambilan sempel dilakukan secara purposive sampling dikarenakan jenis sampel tersebut dapat menghasilkan data yang sesuai berdasarkan maksud dan tujuan.
Pada proses pengumpulan data pada perancangan ini, dilakukan beberapa teknik pengumpulan, yaitu data wawancara, observasi, dan studi dokumen.
Pada teknik wawancara dilakukan wawancara semi terstruktur dimana pewawancara dan narasumber memiliki ruang eksplorasi dalam suatu pertanyaan.
Wawancara dilakukan bersama tiga narasumber, yaitu pelajar sebagai target audien, orang tua pelajar sebagai pihak yang berpengaruh pada keputusan anak dan faktor kepercayaan, serta kepala bidang angkutan jalan dinas perhubungan Kota Malang sebagai pengelola angkutan umum di Kota Malang.
Wawancara ini dilakukan untuk mengumpulkan informasi mengenai bagaimana kondisi angkutan umum di Kota Malang saat ini, serta bagaimana pengalaman, kebutuhan, dan kekhawatiran terhadap angkutan umum.
Pada perancangan ini dilakukan dua jenis observasi, yaitu observasi partisipan dan obeservasi non partisipan.
Observasi partisipan dilakukan dimana penulis secara langsung merasakan pengalaman menjadi penumpang untuk mengamati kondisi angkutan umum dan tingkah laku penmpang lainnya di lapangan.
Sedangkan observasi non partisipan dilakukan dengan mengamati lingkungan sekitar sekolah untuk mengetahui apakah para pelajar saat ini masih aktif menggunakan angkutan umum untuk keperluan mobilitas mereka atau mengandalkan fasilitas dari orang tua masing-masing.
Studi Dokumen merupakan teknik pengumpulan data dengan menghimpun dan menganalisis dokumendokumen, baik dokumen tertulis, gambar, hasil karya, maupun elektronik.
Pada perancangan ini dokumen yang didapatkan adalah seputar bagaimana informasi situasi dan kondisi, serta keterangan mengenai transportasi umum di kota Malang.
Dalam perancangan ini digunakan triangulasi sumber, dimana triangulasi data dilakukan dengan menggabungkan informasi data yang didapatkan melalui wawancara bersama tiga narasumber, yaitu pelajar sebagai target audien, orang tua pelajar sebagai pihak yang berpengaruh pada keputusan anak dan faktor kepercayaan, serta kepala bidang angkutan jalan dinas perhubungan Kota Malang sebagai pengelola angkutan umum di Kota Malang.
Dalam (Nurfajriani et al.
, 2.
dijelaskan bahwa menurut Mekarisce .
Triangulasi sumber berarti menguji data dari berbagai sumber informan yang akan diambil Melalui teknik triangulasi sumber, periset dilakukan perbandingan data hasil wawancara yang diperoleh dari setiap sumber atau informan untuk mencari dan menggali keakuratan informasi yang telah didapatkan.
Dengan kata lain, triangulasi sumber adalah cross check data dengan membandingkan fakta dari satu sumber dengan sumber yang lain.
HASIL DAN PEMBAHASAN
Empathize Pada tahap ini akan didapatkan data masalah utama serta kebutuhan pengguna transportasi umum di Kota Malang melalui teknik pengumpulan data wawancara, observasi, dan studi dokumen.
Data Hasil Wawancara Melalui wawancara bersama siswa, disampaikan bahwa mereka terbiasa menggunakan angkot untuk pulang sekolah.
Mengenai akses informasi seperti rute trayek 64 | Volume 07.
Nomor 01.
Maret 2025 Citradirga : Jurnal Desain Komunikasi Visual dan Intermedia Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Transportation Tracker AuNumpakAy Sebagai Upaya Mendukung Penggunaan Transportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
biasanya diperoleh dari orang tua.
Kendala yang dirasakan selama menggunakan angkot adalah waktu tunggu yang cukup lama, khususnya saat hujan yang mengakibatkan angkot menjadi sepi, serta kondisi kendaraan yang terkadang kurang nyaman.
Membahas mengenai aplikasi ini, siswa menganggap bahwa menggunakan aplikasi sepeti numpak akan sangat membantu, terutama untuk mengetahui informasi rute dan posisi angkot secara real time.
Dari informasi yang didapat dari siswa tersebut diperkuat dengan informasi melalui perspektif orang tua siswa.
Mereka menyatakan adanya kekhawatiran terhadap keamanan anak, apalagi bila anak harus naik angkot sendirian dalam kondisi sepi dengan jarak tempuh yang cukup jauh.
Keputusan memperbolehkan anaknya menggunakan angkot dipengaruhi oleh keterbatasan waktu dan jarak.
Dengan jarak rumah dan sekolah yang jauh mengaharuskan anak menggunakan transportasi umum untuk menempuh perjalanan pulang.
Orang tua juga menyampaikan bahwa informasi mengenai trayek dan jadwal angkot sangat terbatas dan umumnya hanya didapat dari mulut ke mulut.
Karena itu, keberadaan aplikasi seperti Numpak dipandang positif karena dapat memberikan informasi yang lebih akurat dan real time, serta meningkatkan rasa aman.
Sementara itu, menurut pihak Dinas Perhubungan Kota Malang, saat ini terdapat 400 unit angkutan umum yang terdata, dengan 800 hingga 900 unit yang memiliki izin operasi.
Namun, hanya sekitar 15Ae20% dari kapasitas ideal yang digunakan .
oad facto.
, padahal standar minimum load factor seharusnya berada di angka 70%.
Hal ini menunjukkan rendahnya minat masyarakat untuk menggunakan angkot, dimana salah satu penyebabnya adalah akses informasi yang terbatas.
Pihak Dishub mendukung inisiatif perancangan aplikasi transportasi publik seperti Numpak, namun mengingat status kepemilikan angkot yang masih dikelola perorangan, aplikasi ini sebaiknya difokuskan pada jalur trayek tanpa sistem pemesanan layaknya ojek online.
Data Hasil Observasi .
Observasi Pratisipan Observasi partisipan dilakukan dimana penulis ikut secara langsung merasakan pengalaman menjadi penumpang angkutan umum di Kota Malang.
Observasi dilakukan pada hari Sabtu tanggal 10 Mei pada pukul 1.
14 WIB, rute yang dipilih dimulai dari Pasar Gadang dengan tujuan Mall Olympic Garden menggunakan trayek LG.
Dalam perjalanan tersebut waktu yang ditempuh adalah 28 menit.
Selama perjalanan dapat dikatakan angkot masih cukup ramai digunakan untuk bepergian, masih banyak masyarakat yang menggunakan angkot untuk kebutuhan mobilitas mereka, mulai dari anak muda hingga orang dewasa.
Saat ini tarif yang berlaku adalah Rp 5.
000 dalam setiap perjalanannya.
Saat observasi berlangsung, yang menjadi kendala adalah waktu tunggu angkot yang tidak pasti, untuk treyek LG sendiri waktu tunggu pada hari itu sekitar 35 menit.
Berdasarkan pengamatan selama obeservasi saat ini penumpang tidak bisa mendapatkan informasi yang akurat mengenai waktu kedatangan angkot serta masih banyak orang-orang yang kebingungan dengan trayek dan lokasi kendaraan sesuai trayek yang dibutuhkan.
Selama ini hanya mengandalkan bertanya kepada orangorang yang berada di terminal, yang juga tidak memberikan jawaban pasti dan mengakibatkan penumpang harus menunggu dengan waktu yang lama karena ketidakpastian tersebut.
Observasi Non Partisipan Observasi dilakukan di dua lokasi, dengan lokasi pertama yaitu di Jl.
Surabaya tepatnya di depan SMKN 3 Kota Malang, serta lokasi kedua berada di Jl.
Bandung.
Pada lokasi pertama, didapatkan hasil obesrvasi bahwa masih banyak siswa yang menggunakan kendaraan pribadi sepeda motor sebagai alat transportasi untuk keperluan pergi dan pulang sekolah.
Observasi dilakukan pada pukul 06.
55 WIB
65 | Volume 07.
Nomor 01.
Maret 2025 Citradirga : Jurnal Desain Komunikasi Visual dan Intermedia Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Transportation Tracker AuNumpakAy Sebagai Upaya Mendukung Penggunaan Transportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
dimana pada waktu tersebut banyak siswa yang diantar orangtuanya utnuk berangkat sekolah dan ada juga yang menggunakan ojek online.
Pada Lokasi kedua yaitu di Jl.
Bandung, observasi dimulai pada pukul 08.
WIB dengan lokasi titik pengamatan di depan Point Coffee Bandung.
Dari obesrvasi tersebut didapatkan data mengenai jarak atau waktu tunggu setiap angkot yang melewati lokasi observasi.
Pada lokasi tersebut terdapat 5 jenis trayek, yaitu AL.
GL, dan LG dengan rute pergi dari Jl.
Bogor ke arah Jl.
Veteran, serta dengan rute pulang dari Jl.
Veteran ke arah Jl.
Bandung.
Selain itu, terdapat juga trayek LDG dan ADL dengan rute Jl.
Bandung lalu putar balik di Jl.
Veteran lalu ke arah Jl.
Terusan Bogor.
Dari keempat trayek tersebut trayek AL memiliki waktu tunggu sekitar 3 Ae 30 menit, trayek GL memiliki waktu tunggu 3 Ae 22 menit, trayek LG memiliki waktu tunggu kurang lebih 26 menit trayek LDG dengan waktu tunggu sekitar 3 Ae 7 menit, serta trayek ADL memiliki waktu tunggu sekitar 7 Ae 8 menit.
Dari trayek-trayek tersebut, trayek yang cukup sering melewati lokasi tersebut adalah trayek LDG, sedangkan yang paling jarang ditemui adalah LG.
Data Dokumen Informasi yang didapatkan dari studi dokumen adalah informasi mengenai data jalur trayek angkot melalui website Dinas Perhubungan Kota Malang.
Data jalur trayek angkot ini digunakan sebagai dasar informasi dalam merancangan UI/UX aplikasi Numpak mengenai trayek angkot di Kota Malang.
Berdasarkan informasi data yang didapatakan dari website Dinas Perhubungan Kota Malang, jalur trayek angkot yang aktif beroperasi saat ini berjumlah 17 trayek.
Angkutan kota yang berjalan saat ini menggunakan tipe kendaraan MPU/Carry dengan kapasitas 12 orang.
Tarif yang dikenakan pada angkutan kota ini adalah Rp 5.
Saat ini status kepemilikan kendaraan masih milik perseorangan.
Selain itu, didapatkan juga informasi data mengenai jumlah kendaraan bemotor di Kota Malang berdasarkan website Badan Pusat Statistik Kota Malang.
Data tersebut menunjukkan bahwa kendaraan bermotor tersebar di seluruh kecamatan di Kota Malang dengan variasi jumlah yang signifikan.
Kecamatan dengan jumlah kendaraan terbanyak adalah Kecamatan Klojen dimana pada tahun 2022 mencapai 55.
718 unit kendaraan bermotor, diikuti oleh Kecamatan Lowokwaru dan Blimbing.
Jenis kendaraan yang dominan digunakan oleh masyarakat Kota Malang adalah sepeda motor.
Sedangkan, jumlah kendaraan umum seperti bus dan angkutan kota relatif rendah dibandingkan dengan kendaraan pribadi.
Hal ini menunjukkan bahwa penggunaan transportasi umum masih belum menjadi pilihan utama bagi sebagian besar warga Kota Malang.
Define Pada tahap define analisis data dilakukan dengan menggunkan teori analisis 5W1H dan triangulasi data.
Tahap ini dilakukan untuk memahami masalah utama pengguna serta mencari solusi untuk mengatasi hambatan atau permasalahan pengguna.
Analisis 5W1H .
What (Apa yang menjadi permasalahan besar dalam perancangan ini? Dan apa solusi yang diberikan untuk mengatasi masalah tersebut?) Selama ini masyarakat di Kota Malang, khususnya pelajar kesulitan mengakses informasi mengenai angkot seperti informasi trayek atau jam operasionalnya.
Tidak adanya sistem live tracking atau panduan rute yang mudah digunakan menjadi salah satu faktor yang menjadikan angkot di Kota Malang dinilai kurang efisien.
Hal tersebut membuat masyarakat Kota Malang lebih memilih menggunaan kerndaraan pribadi dibandingkan dengan transporatasi umum yang tersedia.
Perancangan aplikasi Numpak ini menjadi solusi untuk mendukung penggunaan transportasi umum di Kota Malang, aplikasi ini dapat digunakan untuk mengakses informasi detail mengenai angkot di Kota Malang, mulai dari panduan rute sesuai lokasi dan tujuan, informasi rute 66 | Volume 07.
Nomor 01.
Maret 2025 Citradirga : Jurnal Desain Komunikasi Visual dan Intermedia Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Transportation Tracker AuNumpakAy Sebagai Upaya Mendukung Penggunaan Transportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
setiap trayeknya, serta live tracking kendaraan.
Aplikasi ini dapat membantu perjalanan menggunakan transportasi umum di Kota Malang menjadi lebih efisien.
Why (Kenapa perancangan aplikasi numpak menjadi solusi dalam permasalahan yang Karena dianggap kurang efisien, minat masyarakat terhadap angkot menjadi menurun sehingga masyarakat Kota Malang banyak yang lebih memilih untuk menggunakan kendaraan pribadi.
Hal tersebut, akan memperburuk kondisi kemacetan di Kota Malang.
Selain itu, penggunaan kendaraan pribadi ini juga tidak luput dikalangan pelajar.
Banyak dari mereka yang sudah membawa kendaraan bermotor meskipun masih dibawah umur.
Maka dari itu untuk membantu melatih kemandirian anak usia sekolah lebih baik untuk menggunakan transportasi umum yang ada.
Dengan adanya aplikasi Numpak, penggunaan transportasi umum di Kota Malang akan lebih efisien dan mendorong minat masyarakat dalam menggunakan transportasi umum di Kota Malang.
When (Kapan hasil dari solusi perancangan ini dapat diterapakan?) Kemacetan yang disebabkan dari permasalahan ini terjadi setiap hari, terutama saat jam berangkat dan pulang sekolah atau kerja.
Ketidakpastian mengenai jadwal angkot menyebabkan sulitnya melakukan perencanaan waktu untuk kegiatan seharihari.
Maka dari itu aplikasi ini dirancangan untuk digunakan sepanjang hari kerja operasional angkot, terutama pada jam-jam sibuk seperti pagi dan sore hari saat pelajar dan pekerja berangkat atau pulang.
Waktu penggunaan aplikasi yang fleksibel, bisa diakses kapanpun saat dibutuhkan.
Where (Dimana solusi perancangan ini dapat diterapakan?) Permasalahan ini terjadi di Kota Malang, maka dari itu perancangan aplikasi Numpak ini akan berfokus pada angkot di Kota Malang.
Aplikasi ini digunakan secara lokal di Kota Malang, baik oleh masyarakat lokal maupun pengunjung dari luar kota.
Informasi data yang tersaji didalam aplikasi disesuaikan dengan data lapangan yang sudah ada.
Who (Siapa yang terlibat sebagai target pasar dalam perancangan ini?) Batasan khalayak pada perancangan ini dibagi menjadi dua, yaitu primer dan Primer sebagai target audien adalah pelajar di Kota Malang yang menggunakan angkot untuk kebutuuhan mobilitas, sedangkan sekunder sebagai target pasar adalah masyarakat umum seperti mahasiswa, pekerja, wisatawan luar kota, dan orang tua siswa yang membutuhkan referensi transportasi umum yang jelas dan efisien.
How (Bagaimana solusi dari permasalah yang diangkat?) Solusi dari permasalah yang diangkat dalam perancangan ini adalah dengan membuat aplikasi public transportation tracker seperti Numpak yang menyediakan fitur-fitur seperti live tracking posisi angkot, informasi rute dan halte, rekomendasi trayek berdasarkan lokasi dan tujuan.
Perancangan aplikasi ini mengikuti metode design thinking dengan 5 tahapan, yaitu empathize .
, define .
, ideate .
, prototype .
, dan test .
ji cob.
Ideate Tahap ketiga dari design thinking yaitu ideate yang dalam prosesnya berkonsentrasi untuk menghasilkan ide solusi yang lebih matang sebagai acuan dalam membuat prototyepe.
67 | Volume 07.
Nomor 01.
Maret 2025 Citradirga : Jurnal Desain Komunikasi Visual dan Intermedia Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Transportation Tracker AuNumpakAy Sebagai Upaya Mendukung Penggunaan Transportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
Desain Logo .
Brainstorming Gambar 1.
Brainstorming Berdasarkan hasil dari proses brainstorming yang telah dilakukan, didapatkan 3 kata kunci yang menjadi acuan dalam peracangan logo.
Kata kunci tersebut terdiri dari mobil, duduk, dan cepat atau efisien.
Sketsa Logo Gambar 2.
Sketsa Logo Dari beberapa sketsa yang dibuat, dipilih tiga sketsa logo yang paling mempresentasikan kata kunci yang didapat sebelumnya, yaitu mobil, duduk, dan cepat atau efisien.
Sketsa yang terpilih merupakan sketsa yang tercentang pada gambar 2.
yang kemudian akan didigitalisasikan.
Digitalisasi Logo Gambar 3.
Digitalisasi Logo Dari tiga sketsa logo yang terpiih dilakukan proses digitalisasi yang kemudian dikembangkan lagi menjadi lima digitalisasi logo.
Dari pengembangan tersebut diperoleh satu logo yang dipilih berdasarkan persetujuan dari klien dan kemudian dikembangkan lagi menjadi logo yang lebih representatif terhadap insight yang .
Color Palette Gambar 4.
Warna Primer Gambar 5.
Warna Sekunder 68 | Volume 07.
Nomor 01.
Maret 2025 Citradirga : Jurnal Desain Komunikasi Visual dan Intermedia Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Transportation Tracker AuNumpakAy Sebagai Upaya Mendukung Penggunaan Transportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
Warna pada gambar 4.
Merupakan warna primer yang digunakan sebagai identitas brand.
Warna tersebut terdiri dari warna biru tua (#093.
dan putih (#.
Adapun pada gambar 5.
Terdapat warna sekunder yang merupakan turunan warna dari warna primer yang befungsi sebagai pelengkap agar warna-warna yang ditampilkan bervariasi.
Warna-warna tersebut diterapkan pada semua media yang dihasilkan dari perancangan ini.
Variasi Logo Gambar 6.
Variasi Logo Variasi logo disini terdiri dari logo primer, logo sekunder, favicon, dan submark.
Logo primer digunakan sebagai logo utama dengan bentuk horizontal yang dapat diaplikasikan pada berbagai macam media sesuai kebutuhan layoutnya.
Sedangkan.
Logo sekunder digunakan sebagai alternatif dari logo primer, logo ini digunakan saat layout pada media yang dipakai membutuhkan logo berbentuk vertikal.
Favicon merupakan variasi logo yang hanya berisi simbol tanpa tulisan yang digunakan sebagai ikon aplikasi.
Logo submark ini menjadi alternatif logo yang digunakan pada mediamedia yang membutuhkan logo dengan variasi lain.
Desain User Inteface .
Sketsa Desain Gambar 7.
Sketsa Desain User Interface Berdasarkan sketsa yang telah dibuat, dipilih beberapa sketsa halaman aplikasi yang dijadikan acuan dalam pembuatan wireframe.
Wireframe Gambar 8.
Wireframe 69 | Volume 07.
Nomor 01.
Maret 2025 Citradirga : Jurnal Desain Komunikasi Visual dan Intermedia Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Transportation Tracker AuNumpakAy Sebagai Upaya Mendukung Penggunaan Transportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
Wireframe merupakan representasi visual sederhana dari struktur dan tata letak dasar suatu halaman web atau aplikasi.
Wireframe pada aplikasi ini terdapat 18 halaman mulai dari onboarding hingga profile.
User Interface Elements Gambar 9.
User Interface Elements Dalam perancangan UI/UX aplikasi Numpak ini digunakan beberapa jenis elemen dalam tampilan aplikasinya.
Elemen tersebut terdiri dari button, text field, icon, image, tabs, dan card.
Grid Gambar 10.
Grid Grid merupakan struktur dasar dalam merancang halaman aplikasi yang membantu mengatur elemen-elemen antarmuka dalam aplikasi secara teratur dan Dengan menggunakan grid dapat membantu dalam menentukan penempatan teks, gambar, dan elemen lainnya dengan format yang terstruktur sehingga memudahkan pengguna untuk bernavigasi dan memahami konten yang Dalam perancangan UI/UX aplikasi Numpak menggunakan grid 4 columns dengan margin dan gutter 16 px.
70 | Volume 07.
Nomor 01.
Maret 2025 Citradirga : Jurnal Desain Komunikasi Visual dan Intermedia Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Transportation Tracker AuNumpakAy Sebagai Upaya Mendukung Penggunaan Transportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
Final Design Gambar 11.
Final Design Dalam perancangan user interface aplikasi Numpak ini menghasilkan 19 halaman desain user interface aplikasi Numpak, yaitu splash screen, onboarding yang terdiri dari 3 halaman, login, sign up, main screen, search page, search result, start page, history, history detail, trayek, detail trayek, profile, account detail, password setting, language setting, dan notification.
Selanjutnya desain tersebut akan dilakukan proses prototyping agar alur pengguna lebih jelas dan dapat menciptakan user experience yang lebih nyata.
Prototype Prototype sendiri merupakan tahap keempat dari design thinking yang dikenal dengan pembuatan rancangan awal dari produk yang akan dibuat, nantinya akan dilakukan uji coba untuk mendeteksi kesalahan atau mendapatkan berbagai kemungkinan baru.
Pada tahap ini semua elemen desain yang diperlukan dalam aplikasi Numpak telah siap untuk dilakukan uji coba kepada responden.
Media Utama Prototype aplikasi merupakan media utama dalam perancangan ini, dengan berfokus pada User Interface (UI) dan User Experience (UX) untuk menghasilkan tampilan menarik dan dapat menyampaikan informasi yang mudah dipahami, serta tampilan aplikasi yang ramah pengguna .
ser friendl.
Adapun format dari UI aplikasi ini menggunakan format UI Android .
x800 pixe.
dengan jumlah halaman yang digunakan sebanyak 19 halaman dengan main menu yang berjumlah 4 halaman, terdiri dari main screen, history, daftar trayek, dan profile.
Onboarding Gambar 12.
Onboarding Screen Pada awal aplikasi diawali dengan splash screen berisi logo dari Numpak, dan dilanjutkan dengan halaman onboarding yang berisi informasi singkat mengenai 71 | Volume 07.
Nomor 01.
Maret 2025 Citradirga : Jurnal Desain Komunikasi Visual dan Intermedia Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Transportation Tracker AuNumpakAy Sebagai Upaya Mendukung Penggunaan Transportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
Login/Sign Up Gambar 13.
Login/Sign Up Page Selanjutnya terdapat halaman Login dan Sign Up.
Pada halaman ini pengguna diharuskan untuk mengisi informasi yang sesuai dengan informasi akun yang dimiliki.
Namun jika belum memiliki akun, pengguna bisa daftar terlebih dahulu dengan mengisi formulir pendaftaran yang tertera pada halaman sign up.
Main Screen Gambar 14.
Main Screen Setelah pengguna mengisi informasi pada halaman Login, selanjutnya pengguna akan diarahkan ke halaman main screen.
Pada halaman tersebut menampilkan peta lokasi saat ini dari pengguna serta live tracking kendaraan.
Selain itu terdapat juga titik-titik halte terdekat dengan radius 500 meter dari titik lokasi Gambar 15.
Search Result Dalam halaman utama terdapat juga search bar yang mengarahkan pengguna ke halaman pencarian, dimana pengguna bisa menuliskan lokasi yang akan dituju dan nantinya aplikasi Numpak akan membantu mencarikan rute mana yang sesuai dengan lokasi dan tujuan pengguna.
Gambar 16.
Notification Page 72 | Volume 07.
Nomor 01.
Maret 2025 Citradirga : Jurnal Desain Komunikasi Visual dan Intermedia Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Transportation Tracker AuNumpakAy Sebagai Upaya Mendukung Penggunaan Transportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
Tepat di sebelah kanan search bar terdapat tombol yang mengarahkan ke halaman notifikasi.
Halaman ini berfungsi untuk memberi tahu atau mengingatkan mengenai informasi-informasi baru dari aplikasi Numpak.
History Gambar 17.
History Page Pada halaman history terdapat informasi mengenai riwayat perjalanan yang telah dilakukan.
Pada halaman ini pengguna bisa mengulang perjalanan yang pernah .
Daftar Trayek Gambar 18.
Trayek List Page Pada halaman ini terdapat daftar jalur trayek angkot yang dapat disesuai dengan lokasi terminal yang dipilih.
Card yang terdapat pada halaman tersebut akan mengarahkan ke halaman detail trayek yang dipilih, mulai dari rute pergi, rute pulang, jarak tempuh trayek, waktu tunggu kendaraan, hingga waktu tempuh perjalanan.
Profile Gambar 19.
Profile Page Profile merupakan halaman terakhir dari aplikasi Numpak, halaman ini berisi informasi akun, pengaturan kata sandi, pengaturan bahasa, serta terdapat tombol keluar yang mengarahkan pengguna untuk log out dari aplikasi.
Media Pendukung Selain menghasilkan prototype sebagai media utama, perancangan ini juga menghasilkan media pendukung yang berfungsi sebagai alat promosi yang efektif untuk membantu meningkatkan kesadaran dan minat terhadap hasil perancangan ini.
73 | Volume 07.
Nomor 01.
Maret 2025 Citradirga : Jurnal Desain Komunikasi Visual dan Intermedia Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Transportation Tracker AuNumpakAy Sebagai Upaya Mendukung Penggunaan Transportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
Sosial Media Instagram Gambar 20.
Media Sosial Instagram Dalam perancangan ini media sosial Instagram dimanfaatkan dengan membuat beberapa konten yang dapat diunggah secara publik.
Unggahan instagram tersebut berisi informasi mengenai keunggulan fitur-fitur dalam aplikasi Numpak yang dikemas dengan visual yang menarik menggunakan format skala 4:3 dalam setiap .
Seragam Gambar 21.
Seragam Seragam yang digunakan sebagai media pendukung ini dibuat untuk digunakan oleh para supir angkot yang bekerjasama.
Seragam terdiri dari kemeja dan topi yang dilengkapi dengan identitas Numpak.
Stiker Mobil Gambar 22.
Stiker Mobil Dalam perancangan ini stiker digunakan sebagai alat promosi dengan memanfaatkan body mobil sebagai medianya.
Stiker mobil ini akan ditempatkan pada seluruh sisi mobil mulai dari depan, samping kiri dan kanan, hingga belakang.
74 | Volume 07.
Nomor 01.
Maret 2025 Citradirga : Jurnal Desain Komunikasi Visual dan Intermedia Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Transportation Tracker AuNumpakAy Sebagai Upaya Mendukung Penggunaan Transportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
Halte Gambar 22.
Halte Penggunaan media halte dalam perancangan ini sangat sesuai karena perancangan ini berhubungan dengan transportasi umum, dimana pasti membutuhkan tempat pemberhentian untuk menaikkan dan menurunkan penumpang.
Dalam media halte juga terdapat Penggunaan media promosi luar ruangan ini diaplikasikan pada halte karena memiliki lokasi yang strategis dan mudah untuk menjangkau audien.
Kaos Gambar 23.
Kaos Dalam perancangan ini kaos yang dipakai memiliki tambahan elemen visual logo Numpak dan pesan ajakan untuk menggunakan aplikasi Numpak yang bertuliskan Auready to numpakAy pada dada kiri Tas Ransel Gambar 24.
Tas Ransel Tas ransel dipilih sebagai salah satu media pendukung karena memiliki nilai guna yang tinggi dan daya promosi yang kuat.
Penggunaan tas ransel ini juga memperkuat positioning Numpak sebagai aplikasi yang menyasar generasi muda yang membutuhkan transportasi umum yang mudah, aman, dan terpercaya 75 | Volume 07.
Nomor 01.
Maret 2025 Citradirga : Jurnal Desain Komunikasi Visual dan Intermedia Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Transportation Tracker AuNumpakAy Sebagai Upaya Mendukung Penggunaan Transportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
Totebag Gambar 25.
Totebag Totebag dipilih sebagai media pendukung karena selain menjadi alat bantu membawa barang, totebag juga berfungsi sebagai media yang dapat menampilkan pesan visual yang dapat membantu menjangkau audiens di ruang publik.
Saputangan Gambar 26.
Saputangan Dalam perancangan ini saputangan dimanfaatkan menjadi media pendukung sebagai sarana promosi dengan mencantumkan elemen visual brand seperti logo dan Pengharum Mobil Gambar 27.
Pengharum Mobil Pengharum mobil digunakan sebagai media promosi karena dapat diletakkan di dalam kendaraan.
Berisi elemen visual brand yaitu logo Numpak, pengharum mobil ini dapat membantu mengenalkan brand Numpak secara visual.
Gantungan Kunci Gambar 28.
Gantungan Kunci Pada perancangan ini gantungan kunci yang digunakan sebagai media pendukung yang dapat di kombinasikan dengan media tas ransel.
Gantungan kunci ini dibentuk menyerupai mobil dengan ukuran 5x7 cm.
76 | Volume 07.
Nomor 01.
Maret 2025 Citradirga : Jurnal Desain Komunikasi Visual dan Intermedia Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Transportation Tracker AuNumpakAy Sebagai Upaya Mendukung Penggunaan Transportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
Hand Sanitizer Gambar 29.
Hand Sanitizer Dalam perancangan ini hand sanitizer dimanfaatkan sebagai media promosi dengan menggunakan kemasan pocket spray bottle dengan kapasitas 40ml yang mudah dibawa saat berpergian menggunakan transportasi umum, serta menambahkan logo Numpak pada media ini sebagai identitas Numpak.
Testing Testing dilakukan dengan menguji prototype yang merupakan media utama dari perancangan UI/UX aplikasi Numpak melalui kuisioner yang disebarkan kepada audiens secara offline melalui kegiatan pameran dan juga secara online melalui media sosial.
Dari kuisioner yang disebarkan terdapat 24 responden yang telah melakukan uji coba prototype, terdiri dari pelajar, mahasiswa, pegawai, dan juga perwakilan dari pihak dishub selaku klien dari perancangan ini.
Dari 24 responden tersebut memiliki rentang usia 14-58 tahun yang mayoritas adalah penduduk asli Kota Malang.
Berikut adalah hasil uji coba prototype aplikasi Numpak melalui kuisioner.
Berdasarkan hasil uji coba yang dilakukan oleh 24 responden, dapat disimpulkan bahwa hasil perancangan UI/UX aplikasi public transportation tracker AuNumpakAy yaitu prototype aplikasi dinilai memiliki user interface yang mudah digunakan, serta memiliki tampilan visual yang menarik dan mudah dipahami .
ser friendl.
Selain itu hampir seluruh responden .
,8%) menyatakan bahwa mereka dapat memahami fungsi dari fitur-fitur yang ada, dengan fitur yang paling disukai adalah live tracking kendaraan dan informasi detail trayek setiap angkot.
Dengan begitu hasil dari uji coba ini menunjukkan bahwa aplikasi ini dapat menjawab kebutuhan pengguna akan kemudahan dalam akses informasi trasportasi umum di Kota Malang.
KESIMPULAN
Perancangan UI/UX aplikasi public transportation tracker AuNumpakAy ini bertujuan untuk memberikan fasilitas digital dalam mengakses informasi mengenai transportasi umum di Kota Malang, agar masyarakat di Kota Malang tertarik untuk menggunakan transportasi umum dan mengurangi penggunaan kendaraan pribadi.
Selain itu, upaya mendukung penggunaan transporatasi umum ini juga bermanfaat untuk melatih kemandirian pelajar di Kota Malang dalam memenuhi kebutuhan mobilitasnya.
Dalam perancangan ini digunakan metode design thinking dari Kelley & Brown .
yang memiliki lima tahapan, yaitu empathize, define, ideate, prototype, test.
Metode perancangan tersebut digunakan karena dalam design thinking dilakukan proses berulang sehingga dapat memahami masalah pengguna untuk diidentifikasikan kembali sebagai upaya menciptakan solusi.
Pada tahap akhir dalam metode design thinking yaitu testing dilakukan proses ujicoba prototype melalui kuisioner yang dilakukan oleh 24 responden.
Berdasarkan hasil pengujian tersebut dapat disimpulkan bahwa hasil perancangan UI/UX aplikasi public transportation tracker AuNumpakAy yaitu prototype aplikasi dinilai memiliki user interface yang mudah digunakan, serta memiliki tampilan visual yang menarik dan mudah dipahami .
ser friendl.
Dengan begitu hasil dari uji coba ini menunjukkan bahwa aplikasi ini dapat menjawab kebutuhan pengguna akan kemudahan dalam akses informasi trasportasi umum di Kota Malang.
77 | Volume 07.
Nomor 01.
Maret 2025 Citradirga : Jurnal Desain Komunikasi Visual dan Intermedia Annisa Ayu Amalia.
Pujiyanto
Perancangan UI/UX Aplikasi Public Transportation Tracker AuNumpakAy Sebagai Upaya Mendukung Penggunaan Transportasi Umum di Kota Malang
ISSN 2656-9973
E-ISSN 2686-567X
DAFTAR PUSTAKA