BERBASIS WEB
SKRIPSI
DISUSUN OLEH
MUNADIA MENTARI BENGI NPM. 1909010022
PROGRAM STUDI SISTEM INFORMASI
FAKULTAS ILMU KOMPUTER DAN TEKNOLOGI INFORMASI UNIVERSITAS MUHAMMADIYAH SUMATERA UTARA
MEDAN 2023
BERBASIS WEB
SKRIPSI
Diajukan sebagai salah satu syarat untuk memperoleh gelar Sarjana Komputer (S.Kom) dalam Program Studi sistem informasi pada
Fakultas Ilmu Komputer dan Teknologi Informasi, Universitas Muhammadiyah Sumatera Utara
MUNADIA MENTARI BENGI NPM. 1909010022
PROGRAM STUDI SISTEM INFORMASI
FAKULTAS ILMU KOMPUTER DAN TEKNOLOGI INFORMASI UNIVERSITAS MUHAMMADIYAH SUMATERA UTARA
MEDAN 2023
iv
RIWAYAT HIDUP
DATA PRIBADI:
Nama Lengkap : Munadia Mentari Bengi Tempat dan Tanggal Lahir : Takengon, 10 januari 2000
Alamat Rumah : Lr Kala Pasir, Takengon (Aceh Tengah) Telepon/Faks/HP : 082267389102
E-mail : munadiaaid@gmail.com
Instansi Tempat Kerja : -
Alamat Kantor : -
DATA PENDIDIKAN:
SD : SD 6 Lut Tawar TAMAT: 2012
SMP : MTs N 1 Takengon TAMAT: 2015
SMA : SMK 1 Takengon TAMAT: 2018
v
KATA PENGANTAR
Puji dan Syukur kita panjatkan kepada Allah Subhanahu Wata’ala. Dzat yang hanya kepada-Nya memohon pertolongan. Alhamdulillah atas segala pertolongan, rahmat, dan kasih sayang-Nya sehingga penulis dapat menyelesaikan skripsi yang berjudul “PERANCANGAN UI/UX APLIKASI PENJUALAN KOPI MENGGUNAKAN METODE DESAIN THINGKING PADA UKM MEULAWI COFFEE BERBASIS WEB”
Adapun yang perlu disampaikan penyusunan skripsi ini tidak terlepas dari bantuan dan dukungan berbagai pihak. Oleh karna itu, penulis ingin menyampaikan terimakasih kepada:
1. Ayahanda Prof. Dr. Agussani, M.AP. Selaku Rektor Universitas Muhammadiyah Sumatera Utara.
2. Bapak Dr. Alkhowarizmi., S.Kom., M.kom selaku Dekan Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Muhammadiyah Sumatera Utara.
3. Bapak Halim Maulana, S.T., M.Kom selaku Wakil Dekan 1 Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Muhammadiyah Sumatera Utara.
4. Bapak Dr. Lutfi Basit, S.Sos., M.I.Kom selaku Wakil Dekan III Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Muhammadiyah SumateraUtara.
5. Bapak Martiano, S.Pd., S.Kom., M.Kom selaku Ketua Prodi Sistem Informasi Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Muhammadiyah Sumatera Utara.
6. Ibu Yoshida Sary, S.E., S.Kom., M.Kom selaku dosen pembimbing yang telah memberikan arahan dan bimbingan kepada penulis.
7. Bapak dan Ibu dosen Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Muhammadiyah Sumatera Utara yang telah memberikan banyak bekal ilmu kepada penulis.
vi
8. Bapak dan Ibu Pimpinan dan seluruh staff Pegawai yang ada di UKM Meulawi yang telah memberikan izin dan informasi yang tidak bisa penulis sebut namanya satu persatu.
9. Teristimewa Mamak, Kakak, dan Abang dan Alm Ayah tercinta serta seluruh keluarga besar yang telah banyak memberikan dukungan moril dan materil, serta mendoakan penulis dalam setiap langkah dan usaha dalam menyelesaikan Laporan Kerja Praktik ini.
10. Dan Teman-teman seperjuangan yang telah membantu saya dalam penyusunan skripsi yang tidak bisa penulis sebutkan namanya satu persatu.
Penulis menyadari didalam penulisan skripsi ini masih banyak kekurangan.
Oleh karena itu, penulis menerima apabila ada kritik dan saran yang sifatnya dapat membantu agar penulisan ini bisa menjadi sempurna. Segala ucapan terima kasih tentunya belum cukup, semoga Allah Subhanahu Wa Ta’ala senantiasa membalas segala kebaikan anda semua. Aamiin.
Penulis,
Munadia Mentari Bengi
vii
PERANCANGAN UI/UX APLIKASI PENJUALAN KOPI MENGGUNAKAN METODE DESIGN THINKING PADA
UKM MEULAWI COFFEE BERBASIS WEB
ABSTRAK
Dalam penjualan kopi meulawi, UMKM Meulawi Kopi belum pernah menggunakan penjualan kopi berbasis Website. Meulawi Kopi merupakan sebuah toko kopi yang menjual berbagai macam jenis kopi. Meulawi Kopi ingin mempunyai alternatif tambahan untuk mengelola aspek-aspek bisnis mereka, seperti penjualan online berbasis Website. Untuk itu maka dirancang sebuah tampilan website e-commerce dengan fokus menjualkan produk kopi Gayo 100%
asli tanpa campuran yang berbasis website. User Experience (UX) merupakan komponen utama dalam merancang sebuah pengembangan e-commerce hingga merancang sebuah tampilan desain User Interface (UI). Dalam artikel ini menerangkan bagaimana UI/UX dirancang dengan metode Design Thinking.
Design Thinking Terdapat 5 (lima) tahapan yaitu emphaty, define, ideate, prototype dan testing. Dengan metode Design Thinking dalam pembuatan e- commerce, dihasilkanlah sebuah website Meulawi Kopi yang sesuai dengan pengalaman, keinginan serta kebutuhan user atau pengguna.
Kata kunci : Kopi Meulawi, UI/UX, Design Thinking
viii
UI / UX DESIGN OF COFFEE SALES APPLICATION USING DESIGN THINKING METHOD AT MEULAWI COFFEE
WEB BASED
ABSTRACT
In selling Meulawi coffee, Meulawi Kopi MSMEs have never used website-based coffee sales. Meulawi Kopi is a coffee shop that sells various types of coffee.
Meulawi Kopi wants to have additional alternatives to manage aspects of their business, such as website-based online sales. For this reason, an e-commerce website was designed with a focus on selling 100% original Gayo coffee products without any mixtures based on a website. User Experience (UX) is the main component in designing e-commerce development to designing a User Interface (UI) design appearance. This article explains how UI/UX is designed using the Design Thinking method. Design Thinking There are 5 (five) stages, namely empathy, define, ideate, prototype and testing. Using the Design Thinking method in creating e-commerce, a Meulawi Kopi website is produced that suits the user's experience, desires and needs.
Keywords : Meulawi Coffee, UI/UX, Design Thinking
ix DAFTAR ISI
LEMBAR PENGESAHAN ... i
PERNYATAAN ORISINALITAS ... ii
PERNYATAAN PERSETUJUAN PUBLIKASI ... iii
RIWAYAT HIDUP ... iv
KATA PENGANTAR ...v
ABSTRAK ... vii
ABSTRACT ... viii
DAFTAR ISI ... ix
DAFTAR GAMBAR ... xi
DAFTAR TABEL... xiii
BAB I PENDAHULUAN ...1
1.1 Latar Belakang...1
1.2 Identifikasi Masalah ...3
1.3 Batasan Masalah ...4
1.4 Rumusan Masalah ...4
1.5 Tujuan Penelitian ...4
1.6 Manfaat ...5
BAB II KAJIAN PUSTAKA ...6
2.1 Landasan Teori ...6
2.1.1 Perancangan ...6
2.1.2 Umkm ...6
2.1.3 User Interface ...7
2.1.4 User Experience ...7
2.1.5 Prototype ...8
2.1.6 Design Thinking ...8
2.1.7 User Flow ...10
2.1.8 Wireframe ...11
2.1.9 Figma...11
2.1.10 Usability ...12
2.1.11 Website ...12
2.1.12 SUS (System Usability Scale) ...13
2.1.13 User Persona...14
2.2 Literatur Review ...14
x
2.3 Kerangka Pemikiran ...25
2.4 Hipotesis ...26
BAB III METODE PENELITIAN ...23
3.1 Jenis Penelitian ...23
3.2 Defenisi Operasional ...23
3.3 Teknik Pengumpulan Data ...24
3.4 Teknik Analisis Data ...26
3.4.1 Tahapan Awal Emphatize ...27
3.4.2 Tahap Kedua Define ...27
3.4.3 Tahap Ideate ...28
3.4.4 Tahap Prototype ...28
3.4.5 Testing ...29
BAB IV HASIL DAN PEMBAHASAN...30
4.1 Objek Penelitian ...30
4.2 Struktur Organisasi UMKM Melawi Kopi ...30
4.3 Alasan Berbisnis UMKM Meulawi Kopi ...31
4.4 Proses Bisnis UMKM Meulawi Kopi...31
4.5 Produk UMKM Meulawi Kopi ...33
4.6 Initial Product Requirement ...34
4.6.1 Menentukan Potensial Personal ...34
4.6.2 Menentukan Background Permasalahan ...36
4.6.3 Menentukan Objective ...37
4.7 Design Thinking ...38
4.7.1 Empathize ...38
4.7.2 Define ...44
4.7.3 Ideate ...50
4.7.4 Prototype ...97
4.7.4 Test ...98
BAB V PENUTUP ...116
5.1 Kesimpulan ...116
5.2 Saran ...117
DAFTAR PUSTAKA ...118
xi
DAFTAR GAMBAR
Gambar 2. 1. Design Thinking ... 9
Gambar 2. 2. Kerangka Pemikiran ... 26
Gambar 4. 1. Struktur Organisasi Meulawi Kopi ... 30
Gambar 4. 2. User Persona Administrator ... 43
Gambar 4. 3. User Persona Customer ... 43
Gambar 4. 4. User Flow Admin ... 57
Gambar 4. 5. User Flow Customer... 57
Gambar 4. 6. Pemesanan Produk ... 58
Gambar 4. 7. Cart ... 58
Gambar 4. 8. Halaman Login ... 59
Gambar 4. 9. Halaman Dashboard ... 60
Gambar 4. 10. Halaman Leaderboard ... 60
Gambar 4. 11. Halaman Order ... 61
Gambar 4. 12. Halaman Produk ... 61
Gambar 4. 13. Halaman Messages ... 62
Gambar 4. 14. Halaman Settings... 62
Gambar 4. 15. Halaman Sign Up ... 63
Gambar 4. 16. Halaman Home ... 63
Gambar 4. 17. Halaman About Us ... 64
Gambar 4. 18. Halaman Shop ... 64
Gambar 4. 19. Halaman Produk ... 65
Gambar 4. 20. Halaman Cart... 65
Gambar 4. 21. Halaman Checkout ... 66
Gambar 4. 22. Halaman Blog ... 67
Gambar 4. 23. Halaman Blog ... 68
Gambar 4. 24. Halaman Kontak ... 69
Gambar 4. 25. Font Lato ... 73
Gambar 4. 26. Font Jost ... 73
Gambar 4. 27. Iconography ... 75
Gambar 4. 28. Buttons ... 76
Gambar 4. 29. App Bar Administrator ... 76
Gambar 4. 30. App Bar Customer ... 77
Gambar 4. 31. Text Fields ... 78
Gambar 4. 32. Menus ... 78
Gambar 4. 33. Navigation Rail ... 79
Gambar 4. 34. Cards... 80
Gambar 4. 35. Halaman Login ... 81
Gambar 4. 36. Halaman Dashboard ... 82
Gambar 4. 37. Halaman Leaderboard ... 82
Gambar 4. 38. Halaman Order ... 83
Gambar 4. 39. Halaman Produk ... 84
Gambar 4. 40. Halaman Messages ... 85
Gambar 4. 41. Halaman Setting ... 85
Gambar 4. 42. Halaman Sign In ... 86
Gambar 4. 43. Halaman Register ... 87
Gambar 4. 44. Halaman Home ... 88
xii
Gambar 4. 45. Halaman Shop ... 89
Gambar 4. 46. Tampilan Detail Produk ... 90
Gambar 4. 47. Halaman Checkout ... 91
Gambar 4. 48. Halaman About ... 92
Gambar 4. 49. Halaman Blog ... 93
Gambar 4. 50. Halaman Cart... 94
Gambar 4. 51. Halaman Shopping Cart ... 95
Gambar 4. 52. Halaman Promo ... 96
Gambar 4. 53. Prototype Administrator ... 97
Gambar 4. 54. Prototype Customer ... 98
xiii
DAFTAR TABEL
Tabel 2. 1. SUS (System Usability Scale)... 13
Tabel 2. 2. Literature Review ... 15
Tabel 3. 1. Definisi Operasional ... 23
Tabel 4. 1. Produk Kopi UKM Meulawi Kopi ... 33
Tabel 4. 2. Persona Administrator... 34
Tabel 4. 3. Persona Customer ... 35
Tabel 4. 4. Data Potensial Persona Administrator ... 35
Tabel 4. 5. Data Potensial Persona Customer ... 36
Tabel 4. 6. Permasalahan Proses Bisnis Penjualan Online ... 36
Tabel 4. 7. Penentuan Objective ... 38
Tabel 4. 8. Hasil In-depth Interview Administrator ... 39
Tabel 4. 9. Hasil In-depth Interview Customer ... 41
Tabel 4. 10. How Might We Berdasarkan Problems Administrator ... 44
Tabel 4. 11. How Might We Berdasarkan Problems Customer ... 45
Tabel 4. 12. Kuesioner How Might We Administrator ... 48
Tabel 4. 13. Kuesioner How Might We Customer... 48
Tabel 4. 14. Measurements ... 49
Tabel 4. 15. Hasil Brainstorming Dari HMW Administrator ... 51
Tabel 4. 16. Hasil Brainstorming Dari HMW Customer ... 52
Tabel 4. 17. Information Architecture Administrator ... 54
Tabel 4. 18. Information Architecture Customer ... 55
Tabel 4. 19. Penggunaan Warna di Menu Home ... 71
Tabel 4. 20. Test Plan Document ... 99
Tabel 4. 21. Partisipan Testing Prototype Aplikasi... 100
Tabel 4. 22. Tasks Administrator ... 101
Tabel 4. 23. Tasks Customer ... 102
Tabel 4. 24. Kuesioner System Usability Scale (SUS) ... 103
Tabel 4. 25. Hasil Pengerjaan Test Task Administrator ... 105
Tabel 4. 26. Hasil Pengerjaan Test Task Customer ... 106
Tabel 4. 27. Penilaian System Usability Scale (SUS) ... 108
Tabel 4. 28. Skor Penilaian System Usability Scale (SUS) Administrator ... 110
Tabel 4. 29. Hasil Usability Aplikasi dengan SUS Administrator ... 111
Tabel 4. 30. Skor Penilaian System Usability Scale (SUS) Customer ... 111
Tabel 4. 31. Hasil Usability Aplikasi dengan SUS Customer... 114
1 BAB I PENDAHULUAN 1.1 Latar Belakang
Usaha kecil dan menengah (UKM) merupakan sektor yang berperan besar dalam pertumbuhan ekonomi Indonesia. Ini disebabkan oleh tingginya tingkat penciptaan lapangan kerja yang dimiliki oleh UKM, yang hampir menyamai angka rata-rata penciptaan lapangan kerja oleh individu atau usaha komersial (Kusbandono & Rosyad, 2019). Usaha menengah adalah aktivitas ekonomi produktif yang berdiri secara independen dan dilakukan oleh individu atau entitas komersial. Usaha ini tidak memiliki kepemilikan, kontrol, atau afiliasi dengan anak perusahaan atau cabang usaha, baik secara langsung maupun tidak langsung.
Faktor penentu utamanya adalah nilai kekayaan bersih atau pendapatan tahunan (Hidayat et al., 2022).
Urban (2004:2) mengemukakan bahwa pemasaran digital merupakan pemanfaatan Internet dan teknologi informasi untuk memperluas dan meningkatkan strategi pemasaran tradisional. Saat ini, strategi pemasaran digital atau pemasaran online dianggap sangat penting dan lebih efisien serta efektif dalam mencapai target pasar yang diinginkan. Hasil penelitian oleh Pradian (2018) juga menunjukkan bahwa pemasaran online dapat meningkatkan hasil penjualan produk karena konsumen saat ini lebih cenderung mencari referensi dan bahkan membeli produk secara online. Selain itu, pemasaran online juga memiliki potensi untuk memperluas cakupan pasar yang mungkin sulit dicapai atau tidak dapat dicapai melalui pemasaran konvensional (Fahdia et al., 2022).
UKM Meulawi merupakan sebuah toko kopi yang menjual berbagai macam jenis kopi. Yang berlokasi di Kapten Yusuf Desa Meunasah Masjid Kecamatan Munara Dua Kota Lhokseumawe (Aceh). Kopi yang diolah dari Meulawi merupakan produk kopi tanpa campuran dengan kualitas kopi grade 1 yang berstandar sertifikat BPOM, sertifikat HALAL dan sertifikat SCAI yang diproses secara higienis. Wawancara dengan manager UKM Meulawi bahwa UKM Meulawi sudah memiliki akun instagram, shoppe dan blibli tetapi belum memiliki website tersendiri. Maka dibutuhkan perancangan UI/UX penjualan kopi berbasis website.
Hasil dari wawancara, pemilik membutuhkan website sebagai sarana tambahan alternatif agar produk dari UKM Meulawi bisa lebih dikenal dan dapat ditemukan di mesin pencari di internet. Untuk itu kemudahan dalam penggunaan aplikasi penjualan dibutuhkan rancangan dengan UI/UX yang baik. Karena UI/UX yang baik dapat meningkatkan kepercayaan dan minat mereka untuk membeli produk tersebut. Maka dari itu peneliti bertujuan ingin membuat perancangan Website untuk UKM Meulawi dengan menggunakan konsep rancangan UI/UX yang baik.
User Experience (UX) mengacu pada semua aspek yang terkait dengan pengalaman pengguna dalam menggunakan suatu produk, seberapa mudah memahami cara kerjanya, bagaimana rasanya menggunakan produk tersebut, dan bagaimana pengguna mencapai tujuannya dengan produk tersebut. Salah satu bagian program yang menyentuh dan berinteraksi langsung dengan pengguna disebut dengan user interface (UI). (Razi et al., 2018) Perancangan desain antarmuka UI dan desain pengalaman pengguna UX merupakan tahapan yang
sangat penting dalam pengembangan sebuah perangkat lunak. Pembuatan desain Ini melibatkan langkah-langkah seperti melakukan kegiatan untuk mengetahui kebutuhan pengguna. Sebelum melakukan pembuatan website perlu ada prototype desain UI/UX sebagai langkah awal proses pengembangan pembuatan sebuah Web. Prototyping adalah metode pengembangan sistematis yang menggunakan pendekatan dimana program dibuat secara cepat dan bertahap sehingga pengguna dapat langsung mengevaluasinya. Prototipe mewakili model produk yang akan dibangun atau mensimulasikan struktur, fungsionalitas, dan pengoperasian suatu sistem.
Dalam rancangan UI/UX dibutuhkan beberapa metode perancangan salah satunya adalah metode Desain Thinking. Design Thinking adalah metode atau pendekatan yang digunakan untuk pemecahan masalah secara praktis dan kreatif yang berfokus pada pengguna. Dengan demikian, memecahkan masalah, peneliti mencoba memahami kebutuhan pengguna (orang) dan memberikan solusi yang paling efektif untuk kebutuhan tersebut. Penerapan metode Design Thinking digunakan untuk merencanakan dan merancangan desain UI/UX berbasis website.
Design Thinking mempunyai 5 tahapan yaitu (Empetize, Define, Ideate, Prototype, Test).
1.2 Identifikasi Masalah
Indentifikasi masalahnya adalah UMKM Meulawi Kopi sudah terdaftar di marketplace namun belum memiliki website e-commers tersendiri
1.3 Batasan Masalah
Penelitian ini memiliki batasan masalah sebagai berikut :
a) Metode yang digunakan dalam penelitian ini adalah Design Thinking dengan kuesioner customers interview cue card untuk pengelolahan serta pengumpulan data.
b) Objek dalam penelitian ini UMKM Meulawi Kopi
c) Penelitian ini diimplementasikan hanya dalam bentuk prototype desain dan tidak dalam bentuk aplikasi.
1.4 Rumusan Masalah
a) Bagaimana bentuk rancangan UI/UX design berbasis web di UKM Meulawi Kopi?
b) Bagaimana cara mendesain rancangan UI/UX dengan metode Design Thinking
1.5 Tujuan Penelitian
Tujuan penelitian ini adalah:
1. Mengetahui kebutuhan pihak UMKM dengan metode Design Thinking.
2. Menyimpulkan dan memberikan solusi kebutuhan yang paling krusial melalui metode Design Thinking.
3. Menyajikan data yang berguna untuk mempermudah pihak UMKM dalam memenuhi kebutuhan melalui rancangan aplikasi yang dibuat.
4. Memberikan rancangan aplikasi yang layak digunakan dengan menggunakan perhitungan system usability scale.
1.6 Manfaat
Hasil Penelitian ini diharapkan dapat memberikan manfaat atau kegunaan bagi beberapa pihak. Adapun manfaat dari penelitian ini adalah:
a.) Bagi Perusahaan
Hasil dari penelitian ini dapat digunakan untuk pihak UMKM sebagai bahan saran dan usulan perbaikan yang berguna secara terus menerus melalui rancangan aplikasi yang sudah di buat. Lalu penelitian ini juga dapat menyimpulkan permasalahan dan harapan yang dapat di jadikan acuan oleh pihak umkm untuk melakukan pembenahan melalui metode design thinking sehingga lebih tepat sasaran
b.) Bagi Penulis
Bagi penulis penelitian ini dapat bermanfaat utuk menambah ilmu pengetahuan dan pengalaman yang berguna untuk mengembangan potensi pada masa yang akan datang serta sebagai sarana pembelajaran.
c.) Bagi Pihak Lain
Hasil penelitian ini diharapkan biasa menjadi referensi atau bahan kajian lebih lanjut dalam belajar UI/UX desain menggunakan metode Design Thinking.
6 BAB II KAJIAN PUSTAKA 2.1 Landasan Teori
2.1.1 Perancangan
Perancangan merujuk pada proses penggambaran, perencanaan, atau pengaturan berbagai elemen yang berbeda sehingga membentuk satu kesatuan yang berfungsi sesuai dengan definisi para ahli. Ada berbagai pemahaman tentang perancangan, salah satunya adalah "perancangan adalah proses mendefinisikan sesuatu dengan berbagai teknik yang beragam, termasuk deskripsi arsitektural dan komponen-komponennya, serta rincian dan hambatan yang muncul selama proses perancangan sistem pada dasarnya merupakan kumpulan elemen yang saling terkait dan bekerja sama untuk mencapai tujuan tertentu. Dengan kata lain, sistem dapat dijelaskan sebagai gabungan elemen, komponen, atau variabel yang terorganisir, saling berhubungan, saling bergantung, dan saling terintegrasi (Agung et al., 2022).
2.1.2 Umkm
Kegiatan usaha mikro adalah aktivitas ekonomi yang berskala kecil dan memiliki sifat tradisional dalam proses produksinya. Di sisi lain, usaha mikro, kecil, dan menengah adalah jenis usaha kecil yang dikelola oleh masyarakat dan bukan oleh koperasi. Secara umum, usaha mikro, kecil, dan menengah adalah usaha yang dimiliki dan dijalankan oleh individu atau badan usaha produktif yang sesuai dengan kriteria yang diatur dalam Undang-Undang Nomor 20 Tahun 2018.
Menurut Rudjito (2013), sektor UMKM memegang peranan yang sangat penting
dalam perekonomian Indonesia, baik dalam hal jumlah usaha maupun dalam menciptakan lapangan kerja (Karimah et al., 2021).
2.1.3 User Interface
User Interface (UI) berarti bahwa sistem dan pengguna dapat berkomunikasi satu sama lain melalui perintah, seperti mengakses konten dan memasukkan data.(Hartawan, 2022)
a. Consistency : Konsistensi dari tampilan User Interface
b. Hierarki: Membuat hierarki kepentingan dari objek-objek dalam aplikasi
c. Kepribadian: Kesan pertama aplikasi, yang menunjukkan fitur aplikasi d. Layout: Tata letak elemen aplikasi
e. Type: Tipe huruf yang dipakai dalam aplikasi
f. Warna: Warna default yang digunakan oleh aplikasi
g. Gambar: Penggunaan gambar, ikon, dll. untuk mengirimkan informasi dalam aplikasi
h. kontrol dan kemampuan: elemen antarmuka pengguna yang dapat digunakan orang untuk berinteraksi dengan sistem melalui layar.
2.1.4 User Experience
User experience adalah persepsi dan reaksi seseorang dalam menggunakan produk, sistem, atau layanan. User Experienc (UX) mengukur seberapa puas dan nyaman seseorang dengan suatu produk, sistem, dan layanan. Prinsip pembuatan UX adalah audience berhak menentukan tingkat kepuasannya (customer rule).
Sebagus apa pun fitur suatu produk, sistem, atau layanan, tanpa audiens target dapat merasakan kepuasan, aturan, dan kenyamanan dalam interaksinya, tingkat
User Experience akan rendah. Perkembangan dunia digital dan mobile membuat User Experience semakin kompleks dan multidimensional. Situs ini sekarang dapat diakses di beberapa perangkat.(Wiryawan, 2011)
2.1.5 Prototype
Prototyping merujuk pada proses pembuatan model perangkat lunak yang sederhana, yang memungkinkan pengguna untuk memahami dasar dari program tersebut dan melakukan pengujian awal. Dalam prototyping, pengembang dan pengguna dapat berkomunikasi selama tahap produksi sehingga pengembang dapat dengan mudah menggambarkan perangkat lunak yang sedang dibuat.
Prototyping adalah salah satu metode pengembangan perangkat lunak yang paling umum digunakan. Menurut Raymond McLeod JR. (seperti yang diutip dalam Rahma H, S dan Erawan, L. 2014), prototipe didefinisikan sebagai versi potensial dari sistem yang memberikan gambaran kepada pengembang dan calon pengguna tentang bagaimana sistem akan berfungsi pada tahap akhirnya. Proses pembuatan prototipe dikenal dengan istilah prototyping. Pendekatan utamanya adalah membangun prototipe secepat mungkin, bahkan dalam waktu semalam, dan kemudian menerima masukan dari pengguna. Hal ini memungkinkan perbaikan prototipe dengan cepat (Idrus et al., 2023).
2.1.6 Design Thinking
Design Thinking adalah proses iteratif di mana kita berusaha untuk memahami pengguna, menantang asumsi, dan mendefinisikan kembali masalah, mencoba menemukan strategi dan solusi alternatif yang tidak langsung terlihat jelas pada pemahaman awal kita. Pada saat yang sama, Design Thinking menawarkan pendekatan berbasis solusi untuk memecahkan masalah. Ini adalah
cara berpikir dan cara bekerja dan seperangkat metode praktis. Design Thinking sangat berguna untuk menghadapi masalah yang tidak jelas atau tidak diketahui, membuat masalah berpusat pada manusia, menghasilkan banyak ide dalam sesi brainstorming, dan mempraktikkan hal-hal praktis. dalam pembuatan prototipe dan pengujian. (Aryata et al., 2023)
Gambar 2. 1. Design Thinking
Sumber: Danang Haryuda Putra, Marsani Asfi, Rifqi Fahrudin 1. Empathize
Pada tahap pertama, pendekatan itu diterapkan menargetkan pengguna produk untuk mendapatkan pemahaman empati tentang masalah yang sedang diselidiki dan lebih memahami kebutuhan pengguna. Anda bisa mengetahuinya dengan mengikuti survei atau menjadi pengguna. Pada tahap ini beberapa hal perlu diperjelas yaitu. (Zakiya Maulidia &
Andrian, 2023)
a. Pikiran dan perasaan pengguna.
b. Kebiasaan yang dilakukan pengguna.
c. Kegelisahan yang dirasakan oleh pengguna.
d. Hal-hal yang dapat membuat pengguna merasa senang.
2. Define
Define tahap kedua menganalisis dan mensintesis data yang dikumpulkan dalam fase empati untuk mendefinisikan dan mengidentifikasi masalah data yang mendasarinya. Permasalahan yang ditemukan dapat diklasifikasikan berdasarkan beberapa aspek untuk dicarikan solusi yang tepat, seperti:
a. Jenis masalah yang akan dipecahkan.
b. Targetkan pengguna yang digunakan untuk memecahkan masalah.
c. Cara untuk memecahkan masalah.Ideate . 3. Protoype
Anda perlu segera menerapkan ide yang sudah Anda punya dalam bentuk aplikasi atau produk percobaan yang nyata. Tahap ini melibatkan pengembangan produk sebenarnya dan penggunaan yang aktual.
4. Test
Berdasarkan hasil pengujian produk atau aplikasi yang direncanakan pengujian selanjutnya dilakukan langsung dengan pengguna.
Berdasarkan pengalaman pengguna menggunakan produk trial, kritik dan saran dikumpulkan untuk menciptakan produk yang lebih baik dan mengimplementasikan produk yang sudah ada.
2.1.7 User Flow
User Flow adalah diagram yang memungkinkan Anda menjelajahi skenario alur pengguna saat menggunakan situs web. Tujuan dari Alur Pengguna adalah untuk memudahkan desainer menentukan alur sebelum membuat desain UI
situs web dan untuk menghindari navigasi yang terlalu rumit untuk memfasilitasi keramahan pengguna/pengguna. (Soedewi et al., n.d.)
2.1.8 Wireframe
Wireframing merupakan langkah penting dalam proses desain media digital (screen design process). Ini memungkinkan untuk menentukan hierarki data desain, yang membuat tata letak struktur data cocok untuk model data yang diinginkan pengguna saat mendesain tata letak. Wireframe digunakan untuk memfasilitasi pembuatan konten dan pengalaman pengguna. Wireframe juga bisa diartikan sebagai kerangka sederhana yang menghubungkan komponen- komponennya. Sebagai bentuk desain visual, desain Wireframe tidak lebih dari susunan kotak dan/atau bujur sangkar yang dapat merepresentasikan elemen fotografi atau menjadi susunan teks. (Segara, 2019)
2.1.9 Figma
Figma adalah alat desain yang biasa digunakan untuk membuat tampilan aplikasi mobile, desktop, web, dan lainnya. Figma dapat digunakan pada sistem operasi Windows, Linux atau Mac dengan terhubung ke Internet. Secara umum, Figma banyak digunakan oleh pengguna yang bekerja di UI/UX, desain Web, dan bidang jenis lainnya.
Selain fitur lengkap seperti Adobe XD, keunggulan Figma adalah lebih dari satu orang dapat melakukan pekerjaan yang sama secara bersamaan, meskipun berada di tempat yang berbeda. Anda dapat menyebutnya kerja tim, dan fitur Figma telah menjadikan program ini pilihan banyak desainer UI/UX untuk membuat prototipe situs Web atau aplikasi dengan cepat dan efisien.(Agus Muhyidin et al., 2020)
2.1.10 Usability
Usability adalah ukuran yang menjelaskan bagaimana API dapat secara efektif dan efisien mengakses fungsi sistem dan kepuasan dengan pencapaian tujuan yang dapat dicapai (Aditya et al., 2020).
Pengukuran Usability dapat dilakukan pada beberapa bagian yang berbeda yaitu (Supriyadi et al., 2020) (Victoria Hoffman, n.d.) (Nielsen, 2012). (Irfani &
Sartika, 2023)
a. Learnability , yaitu kesederhanaan, mengetahui pemahaman pengguna tentang penggunaan sistem informasi.
b. Efficiencyya itu efisien, yang menunjukkan tingkat atau jumlah sumber daya yang digunakan secara efektif.
c. Memorability, mis mudah diingat jika luas memori pengguna diketahui setelah jangka waktu tertentu.
d. Errors, mis kesalahan dan keamanan informasi, ketika diketahui berapa banyak kesalahan yang dilakukan pengguna, seperti penyimpangan dari apa yang menurut pengguna akan disampaikan oleh sistem.
e. Satisfaction adalah kepuasan, tidak adanya ketidak nyamanan, yang memiliki nilai positif bagi pengguna.
2.1.11 Website
Menurut Arief (2011a:8), pengertian website adalah “kumpulan halaman web yang diterbitkan di Internet dengan nama domain/URL (Uniform Resource Locator) yang dapat diakses oleh semua pengguna Internet dengan memasukkan suatu alamat. dimungkinkan melalui World Wide Web (WWW) - berkat
ketersediaan teknologi. Halaman web biasanya berupa dokumen yang ditulis dalam format HTML. Diakses melalui HTTPS HTTPS adalah protokol yang mengirimkan informasi berbeda dari server situs web untuk ditampilkan kepada pengguna atau pengguna melalui browser. (Nofiyat et al., 2018)
2.1.12 SUS (System Usability Scale)
SUS merupakan penilaian global subjektif responden terhadap aspek kegunaan. Skor SUS menunjukkan bahwa pengguna setuju dengan website yang dibuat. Untuk masuk dalam kategori diterima, skor SUS harus di atas 70. Skor SUS minimal harus 90 untuk mendapat predikat A. Hasil akhirnya adalah nilai rata-rata SUS sebesar 63,1. Nilai tersebut menunjukkan bahwa akseptabilitas berada pada kategori marginal, skala penilaian berada pada kategori D, dan penilaian kata sifat berada pada kategori Baik. (Idrus et al., 2023)
Tabel 2. 1. SUS (System Usability Scale)
No Pertanyaan
1 Saya sepertinya akan sering menggunakan aplikasi ini 2 Saya merasa aplikasi ini terlalu rumit
3 Saya pikir aplikasi ini mudah digunakan
4 Saya sepertinya membutuhkan bantuan teknisi agar dapat menggunakan aplikasi ini dengan lacar
5 Saya merasa fitur-fitur aplikasi ini berjalan dengan semestinya 6 Saya merasa ada banyak ketidak konsistenan dalam aplikasi ini 7 Saya merasa orang lain akan memahami cara menggunakan aplikasi
ini dengan cepat
8 Saya merasa aplikasi ini membingungkan
9 Saya merasa tidak ada hambatan dalam menggunakan aplikasi ini 10 Saya perlu membiasakan diri terlebih dahulu sebelum menggunakan
aplikasi ini
2.1.13 User Persona
Teknim User Persona merupakan tahapan yang mendukung pendekatan karakteristik pengguna dalam proses pasca desain. Persona adalah pendekatan interaksi manusia dengan komputer yang memungkinkan pengembang untuk mendapatkan pemahaman yang lebih dalam tentang perilaku atau karakteristik pengguna yang terkait dengan masalah yang muncul. Teknologi ini memudahkan pengembang untuk memahami karakteristik, kebutuhan, dan tujuan pengguna guna membuat dan mengimplementasikan aplikasi yang memenuhi kebutuhan pengguna. Langkah ini diterapkan untuk memenuhi kebutuhan pengguna.
Persyaratan pengguna diperoleh dengan mengidentifikasi kebutuhan storyboard yang dibuat. Hasil penilaian kebutuhan dikonfirmasi oleh wawancara. (Rohimah et al., 2021)
2.2 Literatur Review
Literatur review adalah studi ilmiah yang berfokus pada topik tertentu.
Literatur review memberikan gambaran tentang pengembangan topik tertentu.
Dengan bantuan Literatur review, seorang peneliti dapat mengidentifikasi teori atau metode, mengembangkan teori atau metode, mengidentifikasi kesenjangan antara teori dan makna lapangan/hasil penelitian ((Rowley dan Slack, 2004;
Bettany-Saltikov, 2012 ) Mengelola kajian pustaka berarti melakukan kegiatan:
(Cahyono et al., 2019)
a. mengumpulkan informasi,
b. evaluasi materi, teori, pengetahuan atau hasil penelitian
c. analisis hasil publikasi seperti buku, artikel penelitian atau publikasi lain yang berkaitan dengan pertanyaan penelitian. disiapkan sebelumnya.
Literatur review ini merupakan survey sistem pengolahan informasi yang bertujuan untuk menentukan variabel dalam perancangan UI UX Design Thinking berbasis Web berdasarkan penelitian sebelumnya, sehingga masih banyak potensi untuk dilakukan modifikasi/pengembangan lebih lanjut.
Tabel dibawah ini memberikan gambaran mengenai penelitian-penelitian terdahulu yang berhubungan dengan masalah dan tujuan penelitian mengenai Perancanga UI UX Design Thinking Berbasis Web. Dalam Literatur Review ini, peneliti menyajikan dan menganalisis temuan-temuan penting yang telah dilakukan oleh peneliti lain terkait dengan topik yang sama dengan penelitian yang sedang dilakukan.
Tabel 2. 2. Literature Review
NO NAMA
PENELITI
JUDUL PENELITIAN
METODE HASIL TAHUN
1 Muhamma
d Syarif Hartawan
Penerapan User Centered Design (Ucd) Pada
Wireframe Desain User Interface Dan
Wireframe Penelitian ini adalah sebagai prototype penerapan User Centered
2022
User
Experience Aplikasi SINOPSIS FILM
Design dalam pengembanga n User Interface Design dan User Experience pada aplikasi android Sinopsis Film 2 Mendiola
B.
Wiryawan
User experience (ux) sebagai bagian dari pemikiran desain dalam pendidikan tinggi desain komunikasi visual
UX Tujuan
tulisan ini adalah untuk meninjau prinsip-prisip yang dipakai dalam studi UX
2011
3 I Made Aryata1*, I Gede Marendra2
The Training of Design Thinking Process in
Design Thinking
Pelatihan yang dilakukan para peserta
2023
, Irmawan Afgani3
New Product Development
telah Mengenal konsep Design Thinking, langkah- langkah menerapkann ya, dan bagaimana penerapan Design Thinking berkontribusi pada berbagai industri untuk menyelesaika n
permasalahan 4 Sri
Soedewi1, Arry Mustikaw an2,
Penerapan Metode Design Thinking Pada Perancangan Website
Design Thinking
Tujuan dari penelitian ini adalah untuk merancang website
2022
Wirania Swasty3
UMKM Kirihuci
UMKM Kirihuci menggunaka n metode Design Thinking.
5 Adi
Segara
Penerapan Pola Tata Letak (Layout Pattern) pada Wireframing Halaman Situs Web
wireframing wireframing merupakan sebuah proses penempatan prioritas struktur informasi ke dalam komposisi visual sebelum dilakukan peran
2019
6 M. Agus Muhyidin 1,
Muhamma d Afif
Perancangan Ui/Ux Aplikasi My Cic
Layanan Informasi
figma Membuat
aplikasi MY CIC yang Ada beberapa permasalahan
2020
Sulhan2, Agus Sevtiana3
Akademik Mahasiswa Menggunakan Aplikasi Figma
antara lain tampilan desain dari My CIC kurang menarik dan ada beberapa halaman &
tombol kurang di pahami oleh mahasiswa yang mengakses website My CIC
7 Muhamma
d Haviz Irfani1), Dewi Sartika2)
Analisis Kepuasan Learning Management System Universitas XYZ
Menggunakan
Usability Scale dan K-Means
Mengetahui persepsi pengguna dengan cara klasterisasi kepuasan pengguna yang sudah
2023
Metode System
Usability Scale dan K-Means
dijalankan selama 1 semester
8 Wahyu
Andhyka Kusuma1, Selma Osa Rohimah2, Rafiatul Husna3
Penggalian Kebutuhan Pengguna Pada Fase Elisitasi Perangkat Lunak
Menggunakan User Persona
User Persona
Penelitian ini menggunaka n pendekatan persona yang bertujuan untuk menentukan sistem informasi terkait kebutuhan pengguna terhadap perangkat lunak,
sehingga data yang
dihasilkan akan
disimpulkan
2021
untuk mendapat kebutuhan dasar pengguna.
9 Nofyat1 , Adelina Ibrahim2 , Arisandy Ambarita3
Sistem Informasi Pengaduan Pelanggan Air Berbasis Website Pada Pdam Kota Ternate Information Systems Water Customers Complaints Web-Based On Pdam Ternate City
Metode Pendekatan dan
Pengemban gan Sistem menggunak an
pendekatan sistem Bottom-up dan model pengemban gan sistem secara waterfall dengan model rancangan Sistem DFD
Bertujuan untuk merancang Sistem Informasi Pengaduan Pelanggan Air Berbasis Web,
2018
dan ERD.
10 Rahayu Widayanti dan Jauharul Maknunah
Analisis Website STIMATA Menggunakan System
Usability Scale (SUS)
SUS (system usability scale)
Untuk mengukur aspek-aspek usability dan kepuas- an pengguna untuk mengetahui apakah website yang telah
dibangun telah memenuhi prinsip- prinsip dasar seperti kemudahan akses (accessible) serta
kemudahan penggunaan
(usable) menggunaka n System Usability Scale (SUS).
11 Farhan Nur Agung1, Ifan Junaedi2*, Akmal Budi Yulianto3
Perancangan Sistem Informasi Pelayanan Customer Dengan Platform Web (Studi
KasusBarbersh op Agung)
Metode Waterfall
tujuan dari peneliti ini adalah merancang aplikasi Barbershop sistem
booking yang dapat
digunakan oleh customer agar
memudahkan customer untuk
memesannya dan tidak perlu dating
2022
ke
Barbershop.
Dalam membangun suatu sistem menggunaka n sistem SDLC dengan metode Waterfall.
12 Karimaha Ridan Muhtadib Kamalic
STRATEGI PENANGGUL ANGAN PENGANGG URAN MELALUI PERAN USAHA KECIL MENENGAH (UKM) GENTING
13 Reski SISTEM Website Tujuan 2023
2.3 Kerangka Pemikiran Idrus 1) ,
Cita St Munthakh abah R 2) , Al Qadri Hatta 3
INFORMASI PENGARSIPA N SURAT MASUK DAN SURAT KELUAR BERBASIS WEB PADA FAKULTAS EKONOMI UNIVERSITA S SULAWESI BARAT
penelitian ini adalah untuk membuat sebuah perancangan dan
implementasi sistem
pengarsipan surat pada Jurusan Sistem Informasi menggunaka n bahasa pemprograma n web.
Kerangka pemikiran adalah struktur konseptual atau rangkaian ide-ide yang digunakan untuk mengorganisasi pemikiran dan analisis dalam konteks tertentu.
Kerangka pemikiran membantu dalam memahami, menginterpretasikan, dan menyusun informasi atau masalah secara terstruktur.
Gambar 2. 2. Kerangka Pemikiran 2.4 Hipotesis
Hipotesis perancangan UI/UX aplikasi penjualan kopi menggunakan metode Design Thinking pada UKM Meulawi Kopi berbasis web adalah bahwa dengan menerapkan pendekatan Design Thinking dalam perancangan UI/UX aplikasi penjualan kopi, akan tercipta pengalaman pengguna yang lebih baik, meningkatkan efisiensi dan kepuasan pelanggan, serta memperkuat citra merek Meulawi Kopi:
1) Berikut adalah beberapa asumsi yang mendasari hipotesis ini:
Pemahaman yang lebih baik tentang pengguna: Dengan menerapkan pendekatan Design Thinking, perancang akan melakukan penelitian
mendalam tentang pengguna aplikasi penjualan kopi, termasuk kebiasaan, preferensi, dan kebutuhan mereka. Dengan pemahaman yang lebih baik tentang pengguna, aplikasi dapat dirancang dengan cara yang sesuai dan memenuhi harapan mereka.
2) Fokus pada pengalaman pengguna: Design Thinking menempatkan pengguna sebagai fokus utama dalam perancangan. Dengan memprioritaskan pengalaman pengguna yang positif, perancang akan menciptakan UI yang mudah digunakan, intuitif, dan menarik. Ini akan membantu pengguna merasa nyaman dan puas saat menggunakan aplikasi penjualan kopi.
3) Pengembangan solusi inovatif: Metode Design Thinking mendorong perancang untuk berpikir kreatif dan menghasilkan solusi yang inovatif.
Dalam konteks aplikasi penjualan kopi, hal ini bisa mencakup fitur-fitur yang unik dan menarik, seperti sistem rekomendasi kopi berdasarkan preferensi pengguna, kemampuan untuk membuat pesanan kustom, atau integrasi dengan sistem pembayaran yang mudah.
4) Uji dan iterasi berkelanjutan: Pendekatan Design Thinking melibatkan siklus uji dan iterasi berkelanjutan untuk mengoptimalkan pengalaman pengguna. Perancang akan menguji Prototype dengan pengguna potensial, mengumpulkan umpan balik, dan melakukan perbaikan berdasarkan temuan tersebut. Hal ini akan memastikan bahwa aplikasi penjualan kopi yang dirancang benar-benar Selaras dengan apa yang diinginkan dan diharapkan oleh pengguna.
Melalui penerapan metode Design Thinking dalam perancangan UI/UX aplikasi penjualan kopi pada UKM Meulawi Kopi, diharapkan dapat tercapai peningkatan dalam hal efisiensi operasional, loyalitas pelanggan, dan pertumbuhan bisnis secara keseluruhan.
23 BAB III
METODE PENELITIAN 3.1 Jenis Penelitian
Dalam penelitian ini, digunakan metode campuran, yang merupakan kombinasi antara pendekatan kualitatif dan kuantitatif. Pendekatan ini melibatkan penggunaan observasi, wawancara, penyebaran kuesioner, dan pencarian data literatur dari buku atau majalah. Penggunaan metode campuran dipilih karena penelitian ini melibatkan berbagai pertanyaan yang akan diinvestigasi (seperti yang dijelaskan oleh Masrizal, 2012).
3.2 Defenisi Operasional
Definisi operasional adalah langkah dalam menentukan karakteristik yang akan diobservasi atau diukur secara rinci, sehingga memungkinkan peneliti untuk melakukan pengamatan atau pengukuran yang akurat terhadap objek penelitian.
Detail tentang variabel operasional dalam penelitian ini dapat ditemukan dalam tabel berikut ini:
Tabel 3. 1. Definisi Operasional
Variabel Defenisi Indikator
Penjualan Penjualan (selling) merujuk pada proses penjualan.
Sementara itu, menjual (sell) mengacu pada tindakan memberikan sesuatu kepada pembeli dengan harga yang telah ditentukan. Penjualan adalah aktivitas yang mencakup transaksi penjualan barang atau
1. Kualitas 2. Harga 3. Pelayanan 4. Anggaran
jasa, baik melalui pembayaran kredit maupun tunai.
Kopi Kopi adalah minuman yang dihasilkan dari pengolahan biji tanaman kopi. Tanaman kopi termasuk dalam keluarga Rubiaceae dengan genus Coffea. Secara keseluruhan, kopi hanya terdiri dari dua spesies utama, yaitu Coffea arabica dan Coffea robusta.
1. Kualitas 2. Harga 3. Rasa
Design Thinking
Design thinking adalah konsep bisnis yang dianggap dapat memberikan dukungan dalam pencapaian tujuan jangka panjang, karena memungkinkan seseorang untuk berpikir kreatif dan melampaui batasan pengetahuannya.
1. Emphatize 2. Define 3. Ideate 4. Prototype 5. Testing
UKM UMKM adalah entitas usaha yang produktif, dapat dimiliki oleh individu atau badan usaha, dan telah memenuhi kriteria yang mendefinisikan sebagai usaha mikro..
1. Skala Usaha 2. Kepemimpinan
Pola Pikir & cara pandang
3. Manajemen Pemasaran 4. Manajemen
Operasional
3.3 Teknik Pengumpulan Data
Dalam penelitian ini, berbagai metode pengumpulan data digunakan, yang mencakup hal berikut
1) Observasi Langsung
Observasi dilakukan melalui survei langsung untuk mengamati aktivitas Meulawi Kopi untuk menghasilkan hipotesis. Pemilik UKM Meulawi sebagai pemangku kepentingan dan pengguna
2) Wawancara
Meulawi Kopi pertama-tama mendapatkan wawancara langsung untuk mengidentifikasi kebutuhan pengguna. Setelah memahami kebutuhan pengguna, penulis mencari solusi untuk mengatasi masalah yang dihadapi pengguna (dalam tahap "define") dan menghasilkan ide-ide dalam bentuk konsep pada tahap Ideate. Konsep yang dihasilkan kemudian diterjemahkan ke dalam tahap desain, di mana sebuah Prototype Website dibuat dengan menggunakan alat desain Figma.
Setelah pembuatan prototipe desain website, dilanjutkan dengan tahap Testing untuk mendapatkan umpan balik terhadap desain website UKM Meulawi. Proses pengujian ini melibatkan penyebaran kuesioner secara online kepada pengguna melalui alat bantu Optimal Workshop untuk mengumpulkan pendapat mengenai desain website UKM Meulawi.
3) Literature Review
Terakhir melakukan literature review dengan menggunakan buku dan jurnal untuk mendapatkan referensi yang berkaitan dengan penelitian.
Pada bagian ini digunakan kriteria untuk memecahkan masalah penelitian, sehingga terdapat beberapa tahapan metodologi penelitian dalam menerapkan hasil akhir.
4) Studi kasus: Melakukan studi kasus tentang aplikasi penjualan kopi serupa atau kompetitor di pasar untuk memahami tren terbaru dalam desain UI/UX aplikasi penjualan kopi. Riset pasar juga dapat memberikan pemahaman tentang preferensi pelanggan dan harapan mereka terhadap pengalaman pembelian kopi.
5) Analisis data yang ada: Jika UKM Meulawi Kopi telah mengumpulkan data penjualan dan umpan balik pelanggan sebelumnya, analisis data ini dapat memberikan wawasan tentang pola pembelian pelanggan, preferensi produk, serta masalah atau keluhan yang perlu diperhatikan dalam perancangan UI/UX aplikasi penjualan kopi.
6) Prototyping dan pengujian: Membangun prototipe UI/UX aplikasi penjualan kopi berbasis web berdasarkan hasil dari tahap-tahap sebelumnya. Prototipe ini kemudian dapat diuji oleh pengguna potensial untuk mendapatkan umpan balik tentang kegunaan, kejelasan, dan kepuasan pengguna.
3.4 Teknik Analisis Data
Perancangan UI/UX aplikasi penjualan kopi menggunakan metode Design Thinking pada UKM Meulawi Coffee berbasis web melibatkan beberapa tahap dan teknik analisis data yang dapat membantu memahami kebutuhan pengguna dan merancang pengalaman pengguna yang optimal. Berikut adalah beberapa langkah yang dapat Anda ikuti:
3.4.1 Tahapan Awal Emphatize
Langkah pertama dalam metode design thinking adalah "Empathize."
Empathize adalah cara untuk memahami perspektif pengguna, mengidentifikasi masalah pengguna, dan mengenali kebutuhan dalam proses perancangan yang akan datang. Peneliti juga melakukan penelitian pengguna, seperti wawancara, untuk mendapatkan pemahaman dari sudut pandang pelanggan, apakah mereka menghadapi kesulitan atau memiliki kekhawatiran saat menggunakan produk dari UKM Meulawi. Setelah memperoleh informasi dari UKM Meulawi dan pelanggan, peneliti melakukan analisis kompetitif untuk menghasilkan ide-ide dalam merancang tampilan website UKM Meulawi.
3.4.2 Tahap Kedua Define
Tahap kedua adalah "Define," yang melibatkan proses ideation berdasarkan informasi yang telah dikumpulkan pada tahap Empathize. Dari hasil wawancara dengan sampel dan distribusi kuesioner, dapat disimpulkan bahwa pemilik dan pelanggan UKM Meulawi menginginkan aplikasi dengan tampilan menarik yang mudah digunakan dan dipahami. Mereka ingin aplikasi ini memungkinkan transaksi penjualan, memberikan informasi tentang produk dan persediaan terbaru, serta memungkinkan komunikasi antara pemilik dan pelanggan UKM Meulawi. Untuk mengatasi permasalahan ini, peneliti berencana membuat sebuah aplikasi penjualan berupa website yang memfasilitasi pertukaran informasi antara pemilik dan pelanggan UKM Meulawi. Hal ini akan mempermudah pelanggan dalam melakukan transaksi dan pembayaran setelah mereka memilih produk yang ingin dibeli. Target pengguna aplikasi ini adalah
individu berusia antara 18 hingga 45 tahun, terutama mahasiswa dan pekerja kantoran yang mengkonsumsi produk kopi secara rutin.
3.4.3 Tahap Ideate
Pada tahap Ideate ini akan menghasilkan sebuah ide. Semua ide dipertimbangkan untuk menyelesaikan masalah yang diimplementasikan pada fase Define. Tujuannya agar ide ini dapat memberikan solusi atas permasalahan UKM Meulawi. Pada langkah ini peneliti menggunakan sesi brainstorming untuk menghasilkan sebanyak mungkin ide dan solusi untuk memenuhi kebutuhan pengguna. Pertimbangkan teknik seperti mind mapping, sketsa kasar, atau prototyping sederhana untuk membantu menggambarkan dan mengembangkan ide-ide tersebut.
3.4.4 Tahap Prototype
Pada tahap ini peneliti akan mulai membuat beberapa versi sketsa Prototype sederhana, serta fitur-fitur khusus yang akan mendukung pembuatan aplikasi berbasis Web UKM Meulawi. Sehingga dapat mendefinisikan kembali permasalahan yang dihadapi pada tahap sebelumnya. Prototype ini juga diuji agar nantinya dapat mengevaluasi hasil dari prototype tersebut jika terdapat permasalahan pada masing-masing prototype. Pembuatan Prototype ini akan menggunakan sebuah Tools berupa Figma. Ada dua proses perencanaan pada tahap ini, yaitu:
a. Low Fidelity
Low Fidelity sendiri sering disebut sebagai konsep sketsa Low Fidelity sederhana. Tujuannya adalah untuk menghasilkan inovasi dalam desain dasar dan menentukan tata letak atau struktur yang
kemudian dapat dievaluasi secara iteratif. Low Fidelity ini dibuat dengan Tools Figma yang bisa digunakan di laptop
b. High Fidelity
Setelah melakukan pembuatan Low Fidelity, langkah selanjutnya adalah High Fidelity. High Fidelity juga dilakukan dengan Tools Figma yang bisa dilakukan di laptop. Di sini anda bisa mendapatkan sketsa yang lebih konkret mengenai desain yang dibuat dan mampu dioprasikan oleh pengguna.
3.4.5 Testing
Pada tahap terakhir yaitu Test ( Uji coba ) atau pengujian yang dilakukan untuk mendapatkan jawaban dan feedback yang sesuai dari hasil prototype, untuk mengetahui apakah solusi yang dibuat telah mengatasi permasalahan yang ada dan menggali lebih dalam kepada pihak UKM Meulawi Kopi dan Customer. Pada fase ini dilakukan pengujian dengan Usability Testing, untuk menguji aspek learnability, efficiency, error dengan memakai task scenario, dan kepuasan dengan menggunakan kuesioner system usability scale. Testing ini nantinya akan dilakukan dengan target pengguna sebanyak 15 orang di mana terdapat sempel lima orang di setiap sistem nya
30 BAB IV
HASIL DAN PEMBAHASAN 4.1 Objek Penelitian
Meulawi Kopi merupakan produk Kopi Gayo 100% Asli tanpa campuran dengan kualitas kopi Grade 1 yang berstandart BPOM, Halal dan berstandart SCAI. Meulawi Kopi berdiri pada tanggal 16 April 2018 yang berlokasi di Dusun Kapiten Yusuf, Desa Meunasah Mesjid, Kecamatan Muara Dua, Kota Lhokseumawe. Meulawi Berasal Dari Bahasa Gayo Tua yang Artinya Semangat.
Kopi yang diolah merupakan 100% Murni Kopi Arabika dan Robusta Gayo asli tanpa campuran yang diperoleh dari perkebunan pribadi dan tetangga kebun yang berlokasi di Kenawat Redelong, Bener Meriah.
4.2 Struktur Organisasi UMKM Melawi Kopi
Meulawi Kopi merupakan sebuah toko kopi yang menjual berbagai macam jenis kopi. Adapun struktur organisasi UMKM Meulawi Kopi dibawah ini :
Gambar 4. 1. Struktur Organisasi Meulawi Kopi
4.3 Alasan Berbisnis UMKM Meulawi Kopi
Kopi Gayo sudah mendunia, bahkan menjadi salah satu kopi terbaik didunia (Spesialty Kopi) oleh SCAA (Specialty Kopi Association of America).
Kopi adalah Budaya Orang Gayo. Meulawi Kopi adalah Brand Produk yang mempromosikan dan memperkenalkan Budaya Gayo dalam bentuk Kopi Gayo Dalam Kemasan. Meulawi Kopi juga Membantu perekonomian petani kopi yang saya bantu untuk mendistribusikan kopi dari kebunnya ke masyarakat luas.
Meulawi Kopi juga Mengedukasi Kopi Gayo Kepada Generasi Milenial dan Gen Z di Aceh agar Budaya Kopi gayo selalu ada.
4.4 Proses Bisnis UMKM Meulawi Kopi
Sebelum kopi siap disajikan kepada konsumen, Kopi Meulawi melewati proses produksi mulai dari menanam biji kopi, mengolah biji kopi hingga melayani pelanggan. Kopi yang diolah merupakan 100% Murni Kopi Arabika dan Robusta Gayo asli tanpa campuran yang diperoleh dari perkebunan pribadi dan kebun tetangga yang berlokasi di Kenawat Redelong, Bener Meriah.
1. Budidaya kopi dengan membuat benih kopi kemudian ditanam sendiri, selain itu bibit kopi juga didapatkan dari hasil tanam masyarakat sekitar.
2. Melakukan perlindungan terhadap hama serta memberikan pupuk sebagai langkah dalam melakukan perawatan selama 2 tahun mulai dari penanaman bibit hingga panen.
3. Pada tahap ketiga, kopi yang telah diambil dari pohon kopi akan mengalami proses pengolahan. Secara umum, proses pengolahan kopi dapat dikelompokkan menjadi dua metode, yakni metode pengolahan basah (wet processing) dan metode pengolahan kering (dry processing).
a. Pendekatan Wet Processing melibatkan penggunaan air dalam seluruh proses pengolahan kopi, mulai dari pemilihan kualitas buah kopi hingga tahap fermentasi. Setelah proses pemilihan, buah kopi yang berkualitas akan diproses lebih lanjut dengan mesin
b. Beberapa pengepul mengeringkan biji kopi basah dengan menjemurnya di bawah sinar matahari langsung. Dibutuhkan 5-7 hari jika kadar air 18-20n dan setelah pengupasan kulit tanduk masih melakukan pengering selama 8-10 jam lagi. untuk mendapatkan 11-12% pengering secara alami
4. Kopi yang telah dijemur dan dikeringkan dimasukkan ke dalam kantong yang dilapisi plastik untuk mempertahankan kelembapan sesuai pembagian proses pengeringan. Kantong biji kopi kering kemudian ditutup dengan kayu untuk mencegah jamur.
5. Kopi kemudian dimasukkan ke dalam mesin Huller untuk menghilangkan kulit kering yang menghasilkan greenbean.
6. Selanjutnya proses penyortiran biji kopi dibagi menjadi kopi non unggulan (pecahan, berongga, dll) dan kopi kualitas super (kopi kualitas baik) sesuai dengan kondisinya.
7. Kopi kemudian masuk ke roaster untuk disangrai agar mengeluarkan rasa asli dari biji kopi dan membuatnya lebih nikmat.
Hasil Kopi yang disangrai tersebut dikemas agar dapat dijual ke berbagai swalayan/supermarket di Kota Lhokseumawe dan Kabupaten Bireun secara Offline. Dan juga secara online di marketplace seperti Shoppe, Tokopedia, Tiktok Shop dan Blibli.com.
4.5 Produk UMKM Meulawi Kopi
Adapun produk yang dijual dari UMKM Meulawi Kopi adalah sebagai berikut:
Tabel 4. 1. Produk Kopi UKM Meulawi Kopi
No Nama Produk Gram Harga
1
Robusta Geste
100 GR 20.000 RB 200 GR 40.000 RB 2
Arabika High Class
100 GR 25.000 RB
200 GR 50.000 RB 3
Arabika Honey
100 GR 35.000 RB 200 GR 70.000 RB 4
Arabika Premium
100 GR 20.000 RB 200 GR 40.000 RB 5
Arabika Spesiallty
100 GR 30.000 RB 200 GR 60.000 RB 6
Arabika Natural
100 GR 35.000 RB
200 GR 70.0
4.6 Initial Product Requirement
Initial product requirement adalah data yang perlu dibuat dan dipenuhi ketika merancang desain aplikasi produk (seperti yang dijelaskan oleh Mardita, 2020). Tujuan dari pembuatan Initial product requirement adalah untuk menetapkan asumsi tentang pengguna target berdasarkan masalah yang teridentifikasi dengan jelas, mudah dipahami, dan dapat dipecahkan. Informasi ini akan digunakan dalam proses perancangan website penjualan Meulawi Kopi.
Dalam menyusun persyaratan produk awal ini, ada tiga aktivitas yang dilakukan, yakni menentukan pengguna target (persona potensial), mengidentifikasi latar belakang masalah, dan merumuskan tujuan dengan cakupan yang jelas.
4.6.1 Menentukan Potensial Personal
Dalam penelitian ini, ketika merancang website penjualan, kami menargetkan satu administrator dan enam pelanggan yang akan terlibat dalam proses pendataan. Hal ini didasarkan pada pemahaman bahwa jumlah peserta sebanyak 5 hingga 6 orang dianggap cukup representatif untuk memperoleh informasi yang lebih mendalam tentang kebutuhan pengguna. Untuk mendapatkan informasi pribadi dari calon pelanggan dan mengumpulkan data pelanggan untuk website penjualan Meulawi Kopi, peneliti melakukan wawancara langsung dengan pemilik Meulawi Kopi.
Tabel 4. 2. Persona Administrator
Persona Demografi Kreteria
Administrator - Berusia 33 tahun
- Tinggal di kabupaten aceh tengah (lhokseumawe)
bertugas untuk mengurus data produk dan catatan transaksi penjualan.
Tabel 4.3 Persona Customer Tabel 4. 3. Persona Customer
Persona Demografi Kriteria
Customer Berusia 18-45 tahun Pernah, jarang, atau sering melakukan pembelian kopi secara online dari Meulawi Kopi.
Setelah menentukan persona, selanjutnya adalah menentukan potensial persona yang akan diwawancarai. Pada persona customer, dengan pembagian katagori yang berbeda dan jumlah customer yang telah ditentukan dengan pembagian masing-masing katagori 2 persona dapat memberikan peneliti untuk menemukan informasi yang lebih beragam mengenai karakteristik, permasalahan, serta pemahaman dari masing-masing persona. Berikut adalah data potensial persona dipaparkan pada tabel di bawah ini:
Tabel 4. 4. Data Potensial Persona Administrator Persona Administrator
Nama Usia Gender Alamat
Zaky
Ardhiansyah
33 Tahun Pria Jln kapten yusuf lhksemawe
Tabel 4. 5. Data Potensial Persona Customer Persona Customer
Nama Usia Gender Katagori Alamat
Mustawa Ridwan 43 Tahun Laki-Laki Sering Aceh Buge Setiawan 28 Tahun Laki-Laki pernah Aceh Zakiyun Mirza 23 Tahun Laki-Laki pernah Aceh
Renaldi 26 Tahun Laki-Laki Pernah Aceh
Fauzi Firdaus 25 Tahun Laki-laki Jarang Aceh Ika Darma 20 Tahun Laki-laki Jarang Aceh
4.6.2 Menentukan Background Permasalahan
Setelah menggambarkan proses bisnis penjualan online di Meulawi Kopi, langkah berikutnya adalah melakukan pengamatan dengan tujuan untuk mengidentifikasi masalah yang sedang dihadapi. Latar belakang permasalahan ini didasarkan pada hasil observasi serta wawancara dengan 1 administrator dan 6 pelanggan Meulawi Kopi mengenai kendala dan masalah yang mereka alami dalam proses bisnis penjualan online saat ini. Hasil dari investigasi ini akan mengungkapkan permasalahan yang terdapat dalam proses bisnis penjualan online Meulawi Kopi.
Tabel 4. 6. Permasalahan Proses Bisnis Penjualan Online
No Persona Permasalahan
1 Administrator 1. Pencatatan penjualan ke toko (offline market) masih sistem offline
2. Belum ada website untuk
pencatatan penjualan dari e-cumers maupun penjualan dalam bentuk online
2 Customer 1. Masalah yang timbul adalah ketidaktransparan dalam proses pengiriman produk kepada pelanggan karena terkadang estimasi waktu pengiriman tidak sesuai dengan perkiraan yang telah diberikan oleh Meulawi Kopi.
2. Kurang nya informasi terhadap produk dan harga produk
3. Kurang nya informasi dalam cara pembuatan kopi siap sajinya
4.6.3 Menentukan Objective
Maksud dari penetapan tujuan adalah untuk mengetahui latar belakang desain halaman Website yang akan dibuat. Penetapan tujuan didasarkan pada keinginan dan keinginan peneliti terhadap suatu desain Website atau produk yang dapat membantu peneliti. Penelitian ini mempunyai dua tujuan, yaitu.
Administrator dan Customers berdasarkan masalah yang dijelaskan oleh peneliti:
Tabel 4. 7. Penentuan Objective
No Target Pengguna Objective
1
Administrator
Bertugas mendukung administrator dalam membuat website penjualan kopi dan mengelola data produk serta transaksi penjualan, sehingga pengelolaan data penjualan dapat dilakukan dengan efektif dan efisien.
2
Customer
Membuat proses pemesanan di Meulawi Kopi secara online menjadi lebih mudah dan nyaman bagi pelanggan, sehingga dapat berjalan dengan efektif dan efisien.
4.7 Design Thinking
Dalam penelitian ini, metode yang diterapkan adalah Design Thinking.
Design Thinking adalah pendekatan yang terdiri dari lima tahapan, yaitu empati, definisi, ideasi, prototyping, dan pengujian.
4.7.1 Empathize
Empati adalah tahap pemikiran desain atau fondasi desain yang berpusat pada manusia. Fase empati dilakukan secara empati untuk memperoleh pemahaman yang lebih mendalam mengenai sudut pandang pengguna sasaran.
Kegiatan fase empati meliputi melakukan wawancara mendalam, menciptakan persona pengguna.
a. In-depth Interview
Langkah awal dalam fase empati melibatkan pelaksanaan wawancara intensif dengan pengguna yang dituju. Tujuan utamanya adalah untuk mengidentifikasi masalah yang timbul, memahami perilaku, karakteristik, dan keinginan individu-individu yang mungkin menjadi persona potensial.
Informasi yang terkumpul selama wawancara intensif ini akan digunakan dalam tahap empati. Tabel di bawah ini menggambarkan hasil dari wawancara intensif yang dilakukan oleh peneliti terhadap masing-masing individu berdasarkan masalah utama yang mereka alami.
Tabel 4. 8. Hasil In-depth Interview Administrator In-depth interview administrator
No Hasil rincian wawancara mendalam berdasarkan masalah utama.
1 Belum ada website untuk pencatatan penjualan dari ecommers maupun penjualan dalam bentuk online
1. Sistem pencatatan online yang terintegrasi, mungkin sulit untuk mengakses informasi penjualan kopi secara real-time.
Hal ini bisa menghambat proses pengambilan keputusan bisnis dan respons cepat terhadap permintaan pelanggan.
2. Informasi mengenai berbagai jenis kopi yang dijual juga menjadi masalah. Dengan ragam pilihan jenis kopi yang ditawarkan, administrator mungkin kesulitan dalam mencatat informasi dengan benar. Kesalahan dalam mencatat jenis kopi yang dipesan dapat menyebabkan ketidaksesuaian antara apa yang diinginkan oleh pelanggan dan apa yang benar-benar diterima
2 Pencatatan penjualan ke toko (offline market) masih menggunakan sistem offline
1. Pencatatan manual memerlukan waktu tambahan untuk mencatat setiap transaksi, sehingga informasi penjualan tidak tersedia secara real-time dan mungkin membutuhkan waktu lebih lama untuk diolah dan dianalisis.
2. Dalam sistem offline, seringkali sulit untuk mencatat informasi pelanggan dengan lengkap, seperti riwayat pembelian atau preferensi, yang dapat membantu dalam memahami kebutuhan dan keinginan pelanggan.
Tabel 4. 9. Hasil In-depth Interview Customer In-depth interview customer
No Hasil penjabaran in-depth interview berdasarkan permasalahan utama
1 Ketidaktransparan dalam proses pengiriman produk kepada pelanggan disebabkan oleh ketidaksesuaian antara estimasi waktu pengiriman yang diberikan oleh Meulawi Kopi dan kenyataan di lapangan.
1. Pengiriman produk tidak memberikan informasi yang aktual dan real-time, sehingga pelanggan tidak dapat memantau atau mendapatkan pembaruan terkini mengenai produk yang telah mereka pesan.
2. Sepertinya Anda belum memberikan kalimat yang perlu diparafase. Mohon berikan kalimat yang ingin Anda parafrase, dan saya akan dengan senang hati membantu Anda.
2 Kurang nya informasi terhadap produk dan harga produk 1. Kekurangan informasi mengenai harga produk dapat
menyulitkan pelanggan dalam menentukan pilihan pembelian mereka. Tanpa informasi yang jelas mengenai harga, pelanggan mungkin merasa ragu-ragu untuk melanjutkan transaksi.
2. Kurangnya informasi mengenai ketersediaan stok dari setiap produk membuat pelanggan tidak dapat dengan
mudah mengetahui apakah produk yang mereka inginkan masih tersedia atau tidak.
3 Kurang nya informasi dalam cara pembuatan kopi siap sajinya 1. Para pelanggan merasa frustasi karena mereka tidak
memiliki panduan yang jelas mengenai langkah-langkah yang harus diikuti untuk membuat kopi siap saji. Hal ini mengakibatkan hasil kopi yang tidak konsisten dan kurang memuaskan.
2. Kurangnya informasi mengenai teknik pembuatan dan tips untuk mencapai hasil terbaik membuat para pelanggan sulit mengevaluasi kualitas kopi yang mereka hasilkan. Ini dapat mengurangi kepuasan dalam menikmati kopi tersebut.
b. User Persona
Tujuan pembuatan user persona adalah untuk mewakili karakteristik pengguna berdasarkan hasil wawancara mendalam. Bagian informasi yang terkandung dalam diri seseorang mencakup peran orang tersebut dan tujuan yang dapat dicapai.
Gambar 4. 2. User Persona Administrator
Gambar 4. 3. User Persona Customer
4.7.2 Define
Data dan informasi yang dikumpulkan selama tahap Empathize dianalisis dan digabungkan pada tahap Define untuk merumuskan permasalahan inti menjadi tantangan yang harus diatasi. Beberapa langkah yang dilakukan dalam proses definisi ini melibatkan How Might We (HMW), penilaian prioritas tantangan, serta menetapkan atribut, sinyal, dan metrik pengalaman pengguna.
a. How Might We
Setelah mengidentifikasi perilaku dan masalah pengguna dalam mencapai tuj
