P a g e | 39 CBIS JOURNAL - VOL.
12 NO.
: MARET
Computer Based Information System Journal ISSN (Prin.
: 2337-8794 | E- ISSN : 2621-5292 web jurnal : http://ejournal.
id/index.
php/cbis PERANCANGAN UI/UX DELIVERY MOBILE APP DENGAN METODE
DESIGN THINKING DAN USABILITY SCALE
Trie Meutia Saddyah1.
Saut Pintubipar Saragih2 Universitas Putera Batam.
Indonesia.
INFORMASI ARTIKEL
A B S T R A C T
Diterima Redaksi: Januari 2024 Diterbitkan Online: Maret 2024 Delivery services are one of the sectors in the business world that is influential in business development, along with the increasing behaviour of people in online shopping.
With significant growth in the courier and delivery service sector, many individuals or the courier and delivery service industry are trying to adopt technology that can support the ease of the delivery process with effective management for use.
In general, the issue encountered when designing an application is that it does not match the needs of users, resulting in the program failing to achieve its goal.
One method that is considered capable of solving these problems is the design thinking method.
This research discusses the UI/UX Design of Delivery Mobile App implementing the design thinking approach with the aim of providing smooth delivery of goods.
The use of the Delivery Mobile App is aimed at senders to improve their smoothness and convenience in the process of sending goods and the interface that suits the needs of the Prototype testing using the System Usability Scale (SUS) yielded a score of 82 and an adjective rating of 'B' or 'Excellent'.
KATA KUNCI
Keyword: Design Thinking.
System Usability Scale.
User Interface.
User Experience.
Jasa Pengiriman KORESPONDENSI E-mail: pb201510030@upbatam.
saut@puterabatam.
Latar Belakang Jasa pengiriman barang dan layanan kurir mengalami pertumbuhan pesat, melebihi rata- merupakan salah satu sektor dalam dunia bisnis proyeksi pasar CEP di Indonesia mencapai USD yang mengalami peningkatan signifikan sesuai 15 Miliar pada tahun 2028.
dengan perubahan perilaku masyarakat dalam Survei terhadap 124 responden yang telah dikumpulkan melalui kuesioner menunjukkan bahwa terdapat sejumlah permasalahan yang dihadapi, seperti transparasi dalam proses pengiriman, pelacakan barang secara real-time, dan estimasi biaya.
Permasalahan menyebabkan para pengusaha lokal sulit untuk merasa aman dalam proses pengiriman barang kepada costumer.
Kondisi ini menunjukkan bahwa perlunya upaya dalam meningkatkan transparasi dalam proses pengiriman barang berbelanja online serta perkembangan teknologi yang terus mengalami kemajuan.
Pada tahun 2021, nilai pasar jasa Kurir.
Ekspres, dan Parsel (CEP) Global mencapai USD 407,7 Miliar, dan proyeksi untuk tahun 2031 menunjukkan peningkatan signifikan menjadi USD 751,07 Miliar dengan CAGR sebesar 6,3% .
Indonesia, sektor jasa kurir dan pengiriman juga http://ejournal.
id/index.
php/cbis rata pertumbuhan industri logistik, dengan CBIS JOURNAL - VOL.
12 NO.
: MARET
keefektifan saat melakukan pengiriman barang Pendekatan yang berpusat pada pengguna untuk memenuhi kebutuhan dan menyelesaikan permasalahan dengan menghasilkan inovasi dengan deferensiasi dan keunggulan positif disebut dengan Design Thinking.
Konstruksi Pemikiran Proses pikirkan desain terdiri dari lima tahap: menekankan, mendefinisikan, merancang, membuat prototipe, dan menguji .
Dengan demikian, metode design thinking dinilai mampu menyelesaikan masalah dengan menyediakan solusi yang disesuaikan dengan kebutuhan pengguna.
Mengacu pada pembahasan diatas, penelitian ini menawarkan solusi yang berupa perancangan UI/UX Delivery Mobile App mengaplikasikan metode design thinking untuk mendukung kelancaran proses pengiriman II.
Kajian Literatur Pada bab ini, merupakan penerangan beberapa teori yang akan diterapkan dalam penelitian ini.
Dibawah ini penjelasan teori yang diterapkan:
User Interface Kegiatan yang melibatkan komunikasi antara program dan pengguna disebut dengan antarmuka (UI).
Istilah User Interface (UI) kadang-kadang digunakan untuk menggantikan istilah Human Computer Interaction .
User Interface (UI) adalah tempat di mana orang berinteraksi dan berkomunikasi dengan komputer dalam sebuah perangkat, termasuk layar tampilan, keyboard, mouse, dan tampilan desktop.
UI memungkinkan orang untuk mengontrol komputer atau perangkat lainnya dengan baik.
User Experience Pengalaman Pengguna (UX) merujuk pada pertemuan pertama dengan sistem, yang memiliki awal dan akhir.
Ini adalah gambaran umum tentang bagaimana orang berurusan dengan sistem.
Dengan sifat dinamis mereka, perspektif ini menekankan hasil dan ingatan pengguna.
Semua aspek http://ejournal.
id/index.
php/cbis P a g e | 40 interaksi pengguna dengan suatu produk, seperti kemudahan penggunaan, sensasi yang dirasakan saat memanfaatkannya, dan bagaimana pengguna dapat mencapai tujuan mereka dengan bantuan produk tersebut, termasuk dalam pengalaman pengguna (UX).
Dalam desain antarmuka web, user experience sangat penting.
Faktor ini sangat penting karena user experience (UX) menunjukkan upaya untuk meningkatkan kepuasan pengguna saat berinteraksi dengan Design Thinking Metode pemikiran desain adalah teknik penyelesaian masalah yang berfokus pada pengalaman pengguna.
Konsep pikiran desain mengatakan bahwa metode ini menghasilkan inovasi yang unik.
Design Thinking terbentuk dari lima tahap, yaitu:
Emphatize (Menyelidiki perkataan, dan perasaan yang dialami ).
Define .
ormulasi masalah secara khusus dan membaginya ke dalam kategori berdasarkan urgensi atau siapa yang terliba.
Ideate .
embuat solusi untuk setiap atau kategori masala.
Prototyping .
enyajikan solusi secara visual untuk menghindari kesalahan komunikasi dengan penggun.
, dan Testing .
enguji solusi dengan memberikan dan menerima feedback dari penggun.
System Usability Scale Salah satu cara untuk menilai suatu produk adalah dengan mengujinya secara langsung pada pengguna utamanya.
Sistem Skala Ketergunaan (SUS) adalah alat evaluasi yang dapat diterapkan untuk menilai level usability pada produk.
System Usability Scale (SUS) memiliki lima ukuran utama usability yaitu Learnbility.
kemudahan pengguna dalam menyelesaikan tugas-tugas dasar saat mereka pertama kali menggunakannya.
Effeciency.
P a g e | 41 CBIS JOURNAL - VOL.
12 NO.
: MARET
Memorability.
kemudahan pengguna dalam mengingat penggunaan aplikasi saat sudah lama tidak memaikainya.
Error.
berapa banyak kesalahan menyelesaikan kesalahan, dan Satisfaction.
mengoperasikan aplikasi .
Metodologi Penelitian ini menerapkan pendekatan Design Thinking.
Pendekatan ini mencoba memahami kebutuhan pengguna, menantang kepercayaan, dan mendefinisikan masalah menemukan cara baru dalam .
Gambar mengilustrasikan aliran langkah-langkah dalam penelitian ini.
Gambar 1 Diagram Alir Gambar 1 menunjukkan bagaimana penelitian dimulai dengan diawali meninjau literatur yang relevan dengan topik penelitian.
Setelah itu, penelitian dilanjutkan dengan menerapkan pendekatan design thinking yang mencakup 5 tahapan yaitu, empati, definisi, ideasi, pembuatan prototipe, dan pengujian.
Setiap tahap dalam design thinking akan dibahas dibawah:
Empatize Tahap pertama dalam metode design thinking berfokus pada pengguna dengan memahami dengan baik permasalahan yang dialami oleh pengguna .
Penelitian ini membagikan kuesioner untuk menentukan Pada tahap ini juga menggunakan affinitiy diagram yang merupakan salah satu teknik untuk memodelkan keteraturan data dalam area klasifikasi yang luas berdasarkan data yang diperoleh dengan post-it .
Define Tahap ini dapat diartikan sebagai pengidentifikasian masalah .
Pada http://ejournal.
id/index.
php/cbis tahapan ini akan mengimplementasikan user persona, poin of view (POV), dan user journey map dengan tujuan dapat memahami kebutuhan pengguna dan mengidentifikasi pain point ketika pengguna dikembangkan .
Ideate Tahap ketiga adalah melakukan penyusunan solusi dengan menggambarkan sitemap yang berfungsi sebagai panduan dalam merancang antarmuka (UI) .
Sebelum membuat user flow dibutuhkan agar calon pengguna mudah menggunakan aplikasi sesuai dengan task yang ingin mereka capai .
Prototype Tahap keempat dalam pendekatan ini adalah melakukan realisasi solusi yang dikembangkan menjadi rancangan lowfidelity wireframe dan high-fidelity wireframe dengan menambahkan interaksi transisi dan animasi sehingga memberikan mengoperasikan prototype Delivery Mobile App .
Test Tahap pengujian prototype .
Dalam penelitian ini, pengujian prototype dilakukan dengan menggunakan Sistem Usability Scale untuk mengevaluasi kemudahan penggunaan aplikasi dari perspektif pengguna.
SUS
dapat dianggap pengujian kenyamanan sistem yang dinilai melalui survei yang dapat diandalkan dan dapat dipercaya .
Tabel 1 Pertanyaan SUS No.
Pertanyaan Saya berencana untuk menggunakan aplikasi ini secara berkala.
Saya berpendapat bahawa aplikasi ini tidak begitu rumit.
Saya berpendapat bahwa penggunaan aplikasi ini cukup sederhana.
CBIS JOURNAL - VOL.
12 NO.
: MARET
Saya merasa akan perlu asistensi dari individu lain atau teknisi saat mengoperasikan aplikasi ini.
Saya berpendapat bahwa fitur-fitur dalam aplikasi ini saling terintegrasi dengan Menurut saya, aplikasi ini tidak memiliki Menurut saya, orang lain akan dengan cepat menguasai dalam mengoperasikan aplikasi ini.
Dalam pandangan pribadi, aplikasi ini Tidak memiliki kendala ketika saya mengoperasikan aplikasi ini.
Saya perlu mempelajari alur dengan baik sebelum menggunakan aplikasi.
Dalam pengambilan data, penelitian ini menggunakan teknik kuesioner dengan 124 responden dengan kriteria masyrakat Indonesia yang pernah menggunakan jasa pengiriman.
Salah satu teknik dalam pengumpulan data adalah kuesioner, yang merupakan serangkaian pertanyaan atau pernyataan dalam bentuk tulisan yang ditujukan kepada responden .
IV.
Pembahasan Hasil berikut didapatkan dari implemetasi metode design thinking pada proses perancangan UI/UX pada prototype Delivery Mobile App yang dikembangkan:
Emphatize Tahap emphatize yang mencakup mengetahui permasalahan dari target dikembangkan .
Dalam penelitian ini membagi permasalahan yang dihasilkan dari kuesioner kedalam kelompok menggunakan affinity diagram, seperti yang telah digambar pada Gambar 2.
Gambar 2 Affinity Diagram http://ejournal.
id/index.
php/cbis P a g e | 42 Define Pada tahap define, jawaban yang berisi informasi yang telah dikumpulkan selama tahap empati diolah dan dianalisis agar mendapatkan pemahaman permasalahan yang dihadapi oleh pengguna.
Dalam penelitian ini, tahap ini melibatkan penerapan User persona.
Point of View (POV), dan User Journey Map.
User Persona.
Tahap define menggunakan user persona untuk menunjukkan target pengguna.
Dengan pembuatan aplikasi yang memenuhi ekspektasi pengguna.
Gambar 3 User Persona Aisyah Gambar 4 User Persona Bahara Point of View.
Pada penelitian ini Point of View (POV) dirumuskan berdasarkan User Persona yang telah dibuat sebelumnya.
Terdapat tiga elemen utama dalam POV yaitu user, need, dan insight.
Dibawah ini merupakan POV pada penelitian ini:
CBIS JOURNAL - VOL.
12 NO.
: MARET
User Penjual yang membutuhkan atau mencari aplikasi pengiriman untuk memenuhi kelancaran bisnis mereka.
Need Membutuhkan memungkinkan mereka mempermudah memantau barang secara real-time lokasi kurir dan status pengiriman, dan barang selama proses pengiriman.
Insight Proses pengiriman barang yang diterapkan secara manual masih kurang cukup sehingga membuat tidak yakin dalam melakukan order pengiriman barang dan proses pengiriman tidak lancar karena tidak adanya transparasi.
User Journey Map.
Setelah menyusun user persona dan mengidentifikasi pain point pengguna, menyusun user journey map adalah tahap User journey map merupakan bentuk desain pastisipatif dan salah satu pengguna.
User Journey Map pada penelitian ini berfokus pada pertimbangan, eksplorasi, membandingkan, memutuskan, dan penyelesaian seperti pada Gambar 5.
Gambar 5 User Journey Map Ideate Setelah dibutuhkan, dalam tahap ideate merupakan tahap membangun ide dan struktur informasi dasar yang teroganisir dengan http://ejournal.
id/index.
php/cbis P a g e | 43 Merancang sitemap dan user flow adalah langkah dalam membentuk struktur Gambar 6 User Flow Gambar 7 Sitemap Prototype Setelah menyelesaikan penyusunan ide yang berupa user flow dan sitemap pada tahap ideate, langkah selanjutnya adalah mengubah alur dan teks menjadi sebuah kerangka low-fidelity wireframe untuk memberikan gambaran awal dari aplikasi yang akan dirancang dan high-fidelity wireframe yang merupakan desain akhir dari sistem yang dirancang dengan sangat detail dan akurat dan mencakup semua elemen seperti warna, tipografi, ikon, dan lain-lain.
Low-fidelity wireframe dan High-Fidelity wireframe pada Delivery Mobile App dapat dilihat pada gambar dibawah.
CBIS JOURNAL - VOL.
12 NO.
: MARET
Low-Fidelity Wireframe Home P a g e | 44 nama, nomor telepon, dan lain-lain.
Pada gambar ketiga paling kanan, pengguna akan diminta untuk mengunggah gambar KTP untuk verifikasi dokumen.
Low-fidelity Wireframe Login Gambar 8 Low-Fi Wireframe Home Halaman Home berisi .
menu bar yang berisi menu home, pesanan, membuat pesanan, riwayat, dan profile, .
card yang berisi untuk pelacakan, .
card yang berisi riwayat pengiriman singkat, .
card yang berisi promo, .
card yang berisi pengiriman yang sedang berlangsung.
Low-fidelity Wireframe Sign up Gambar 10 Low-Fidelity Wireframe Login Login ialah tampilan awal yang akan muncul pada saat pengguna mulai menjalankan aplikasi.
Halaman login memiliki form yang berisi email dan password dilengkapi dengan ilustrasi yang membuat halaman login menjadi lebih Low-fidelity Wireframe Pemesanan Gambar 9 Low-Fi Wireframe Sign Up Halaman daftar pada gambar paling kiri merupakan halaman awal ketika pengguna akan mendaftar menjadi member dalam Data yang dibutuhkan ketika daftar pertama adalah email dan password, setelah pengguna memasukkan email dan password, pengguna diminta untuk melakukan verifikasi menggunakan kode yang telah dikirimkan ke email yang dicantumkan.
Pada gambar kedua merupakan halaman pengguna untuk melengkapi data seperti http://ejournal.
id/index.
php/cbis Gambar 11 Low-Fi Wireframe Pemesanan low-fidelity pemesanan pickup untuk pengirim ketika ingin memesan pengiriman.
Hal pertama memasukkan lokasi pickup dan kemudian mengisi waktu, tanggal pickup, dan jumlah barang yang akan di pickup.
P a g e | 45 CBIS JOURNAL - VOL.
12 NO.
: MARET
Low-Fidelity Wireframe Pengiriman dan Live-tracking Detail untuk nomor telepo, nama kotak dropdown untuk memilih kota, kecamatan, dan lainlain.
Didalamnya juga terdapat maps untuk menentukan titik alamat.
Low-Fidelity Wireframe Riwayat Gambar 12 Low-fi Wireframe Detail Halaman detail pengiriman dapat diakses oleh pengirim jika kurir sudah memasukkan data barang dan ketika admin sudah menugaskan kurir untuk melakukan pengiriman barang.
Dalam halaman ini berisi keterangan proses pengiriman barang seperti barang sudah sampai di gudang sortir, barang diambil kurir, dan lain-lain.
Pada halaman pelacakan secara real-time disediakan kontak kurir untuk pengirim jika ada pertanyaan ketika pengiriman sedang Low-fidelity wireframe tambah alamat Gambar 13 Low-fi Wireframe tambah Low-fi Wireframe Halaman tambah alamat merupakan halaman yang berisi elemen-elemen seperti formulir input yang terkait dengan alamat seperti kotak teks http://ejournal.
id/index.
php/cbis Gambar 14 Low-fi Wireframe Riwayat Low-fidelity wireframe halaman riwayat yang memberikan gambaran Halaman riwayat berisi .
card yang terdiri transaksi pengguna dan .
menu bar yang berisi Home.
Pemesanan, membuat pesanan, riwayat, dan profile.
Low-Fidelity Wireframe Profile Gambar 15 Low-fi Wireframe Profile Low-fidelity wireframe profile berisi elemen-elemen kunci seperti foto profile, dan menu-menu lain seperti edit CBIS JOURNAL - VOL.
12 NO.
: MARET
profile, settings, my orders, dan lainlain.
P a g e | 46 High-Fidelity Wireframe Log in Gambar dibawah ini merupakan hasil design akhir menggunakan High-Fidelity Wireframe yang menampilkan desain visual dan detail Didalamnya juga terdapat elemenelemen desain responsif yang memastikan tampilan yang optimal pada berbagai perangkat.
Keseluruhan, high-fidelity wireframe ini menggambarkan pengalaman pengguna yang menarik dan mudah dipahami, dengan fokus pada estetika dan fungsionalitas.
High-Fidelity Wireframe Home Gambar 18 High-Fidelity Wireframe Log in High-Fidelity Wireframe Sign up Gambar 19 High-Fidelity Wireframe Sign up High-Fidelity Wireframe Splash Screen Gambar 16 High-Fi Wireframe Home High-Fidelity Wireframe Pemesanan Gambar 17 High-Fi Wireframe Pemesanan http://ejournal.
id/index.
php/cbis Gambar 20 High-Fidelity Wireframe Splash Screen CBIS JOURNAL - VOL.
12 NO.
: MARET
P a g e | 47 High-Fidelity Wireframe Riwayat High-fidelity Wireframe Pemesanan Gambar 21 High-Fidelity Wireframe High-Fidelity Wireframe Tambah Alamat Gambar 23 High-Fidelity Wireframe Riwayat High-Fidelity Wireframe Profile Gambar 22 High-Fidelity Wireframe tambah alamat Gambar 24 High-Fidelity Wireframe Profile http://ejournal.
id/index.
php/cbis P a g e | 48 CBIS JOURNAL - VOL.
12 NO.
: MARET
Test Test adalah tahap akhir dari pendekatan design thinking.
Penelitian ini akan menguji prototype yang dibuat menggunakan metode System Usability System (SUS).
Selama pengujian, pengguna akan diberi tugas atau task untuk dilakukan.
Tabel 2 menunjukkan pekerjaan yang harus diselesaikan oleh Tabel 2 Task Pengguna No.
Untuk setiap jawaban pertanyaan Genap, lalu dikurangi 5 untuk mendapatkan nilai Y.
Menambahkan semua nilai X dan Y dan kalikan 2,5 untuk memperoleh skor SUS.
Hasil perhitungan SUS dalam pengujian prototype Delivery Mobile App terdapat dalam tabel 4 dibawah:
Tabel 4 Perhitungan SUS Ganjil Task Daftar ke dalam aplikasi.
Masuk ke dalam aplikasi.
Membuat order pengiriman.
Melihat detail order.
Melacak barang secara real-time.
Melihat riwayat pengiriman.
Mengubah password.
Menambah alamat.
Logout dari aplikasi.
Daftar ke dalam aplikasi.
Responden
R10
Dalam penelitian ini, pengujian dilakukan kepada 10 responden yang diberikan 10 pertanyaan SUS yang menggunakan skala linier, mulai dari 1 .
angat tidak setuj.
hingga 5 .
angat Hasil penjumlahan jawaban kuesioner dipaparkan dalam Tabel 3.
Tabel 3 Hasil Jawaban Asli Responden
Respo
R10
Untuk mendapatkan skor akhir SUS, hasil kuesioner akan dihitung menggunakan tahap-tahap dalam perhitungan SUS yaitu:
Untuk setiap jawaban pertanyaan Ganjil, lalu dikurangi 1 untuk mendapatkan nilai X.
http://ejournal.
id/index.
php/cbis Tabel 5 Perhitungan SUS Genap
Responden
R10
Q10
Tabel 6 Hasil Akhir Perhitungan SUS Responden Jumlah R10 Skor rata-rata SUS Nilai SUS P a g e | 49 CBIS JOURNAL - VOL.
12 NO.
: MARET
Seperti yang ditunjukkan oleh matriks konversi penilaian nilai adjektif pada Gambar 24, skor rata-rata SUS sebesar 82 diperoleh berdasarkan hasil perhitungan menggunakan rumus SUS.
Nilai 82 dikategorikan sebagai nilai "B" dan "excellent".
Services-Market-Report-2022-Rise-inUse-for-Transportation-of-OfficialDocuments-Boosts-Growth--ResearchAndMarkets.
Dimas Jarot Bayu.
AuSurvei MarkPlus:
Frekuensi Penggunaan Jasa Kurir Meningkat saat Pandemi,Ay databooks.
Accessed: Dec.
20, 2023.
[Onlin.
Available:
https://databoks.
id/datapub lish/2020/10/22/survei-markplusfrekuensi-penggunaan-jasa-kurirmeningkat-saat-pandemi .
Faizi.
Purwaningtias, and T.
Oktarina.
AuUI/UX Design of a Production Information System at PT Belitang Panen Raya Using the Design Thinking Method,Ay International Journal of Information System & Technology Akreditasi, vol.
7, no.
2, pp.
108Ae117, 2023.
Basiroh.
Asmarajati, and W.
Fatmafury.
AuPengaruh User Interface Toko Online Terhadap Kenyamanan Pengguna Studi Kasus Pada E Ae Commerce Wonosobo Mall,Ay Device, 10, no.
1, pp.
33Ae37, 2020, doi:
32699/device.
Darmawan.
Saiful Anwar.
Rahmatulloh, and H.
Sulastri.
AuDesign Thinking Approach for User Interface Design and User Experience on Campus Academic Information Systems,Ay JOIV : International Journal on Informatics Visualization, vol.
6, no.
1, pp.
327Ae334, 2022, [Onlin.
Available:
org/index.
php/joiv .
Suratno Shafira.
AuDevelopment of User Interface/User Experience using Design Thinking Approach for GMS Service Company,Ay Journal of Information Systems and Informatics, vol.
4, no.
2, pp.
469Ae494.
Gambar 24 Matriks Konversi SUS Kesimpulan Hasil dari perancangan UI/UX Delivery Mobile App mendapatkan hasil yang baik menggunakan pendekatan design thinking.
Hasil uji coba prototype mendapati skor sebesar 82 yang merupakan peringkat AoBAo dan AoExcellentAo pada adjective rating.
Hasil pengujian tersebut membuktikkan bahwa aplikasi ini dapat membantu para penjual untuk mengirimkan produk ke mereka.
Hal ini juga meningkatkan efesiensi dalam proses.
Ucapan Terima Kasih Saya ingin mengucapkan rasa terima kasih kepada Allah Subhanahu wa Ta'ala yang telah bantuan-Nya menyelesaikan penelitian ini.
Saya juga ingin mengungkapkan rasa terima kasih saya kepada Bapak Saut Pintubipar Saragih, selaku dosen
pembimbing, atas bimbingan yang sangat berarti dalam penyusunan penelitian ini hingga Daftar Pustaka