PERANCANGAN UI/UX APLIKASI PENJUALAN KOPI

MENGGUNAKAN METODE DESIGN THINKING PADA

UKM MEULAWI COFFEE
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
 PERANCANGAN UI/UX APLIKASI PENJUALAN KOPI
MENGGUNAKAN METODE DESIGN THINKING PADA
UKM MEULAWI COFFEE
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
 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

iv
 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.

v
 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

vi
 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

vii
 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

viii
 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

ix
 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

x
 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

xi
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

xii
 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

xiii
 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).

1
 2

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

 3

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

 4

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.

 5

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.
 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

6
 7

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

 8

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

 9

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.

 10

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

 11

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)

 12

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

 13

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

 14

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)

 15

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 JUDUL METODE HASIL TAHUN

PENELITI PENELITIAN

1 Muhamma Penerapan Wireframe Penelitian ini 2022

d Syarif User Centered adalah

Hartawan Design (Ucd) sebagai

Pada prototype

Wireframe penerapan

Desain User User

Interface Dan Centered

 16

User Design dalam

Experience pengembanga

Aplikasi n User

SINOPSIS Interface

FILM Design dan

User

Experience

pada aplikasi

android

Sinopsis Film

2 Mendiola User UX Tujuan 2011

B. experience tulisan ini

Wiryawan (ux) sebagai adalah untuk

bagian dari meninjau

pemikiran prinsip-prisip

desain dalam yang dipakai

pendidikan dalam studi

tinggi desain UX

komunikasi

visual

3 I Made The Training Design Pelatihan 2023

Aryata1*, of Design Thinking yang

I Gede Thinking dilakukan

Marendra2 Process in para peserta

 17

, Irmawan New Product telah

Afgani3 Development Mengenal

konsep

Design

Thinking,

langkah-

langkah

menerapkann

ya, dan

bagaimana

penerapan

Design

Thinking

berkontribusi

pada berbagai

industri untuk

menyelesaika

permasalahan

4 Sri Penerapan Design Tujuan dari 2022

Soedewi1, Metode Design Thinking penelitian ini

Arry Thinking Pada adalah untuk

Mustikaw Perancangan merancang

an2, Website website

 18

Wirania UMKM UMKM

Swasty3 Kirihuci Kirihuci

menggunaka

n metode

Design

Thinking.

5 Adi Penerapan wireframing wireframing 2019

Segara Pola Tata merupakan

Letak (Layout sebuah proses

Pattern) pada penempatan

Wireframing prioritas

Halaman Situs struktur

Web informasi ke

dalam

komposisi

visual

sebelum

dilakukan

peran

6 M. Agus Perancangan figma Membuat 2020

Muhyidin Ui/Ux Aplikasi aplikasi MY

1, My Cic CIC yang

Muhamma Layanan Ada beberapa

d Afif Informasi permasalahan

 19

Sulhan2, Akademik antara lain

Agus Mahasiswa tampilan

Sevtiana3 Menggunakan desain dari

Aplikasi My CIC

Figma kurang

menarik dan

ada beberapa

halaman &

tombol

kurang di

pahami oleh

mahasiswa

yang

mengakses

website My

CIC

7 Muhamma Analisis Usability Mengetahui 2023

d Haviz Kepuasan Scale dan persepsi

Irfani1), Learning K-Means pengguna

Dewi Management dengan cara

Sartika2) System klasterisasi

Universitas kepuasan

XYZ pengguna

Menggunakan yang sudah

 20

Metode dijalankan

System selama 1

Usability Scale semester

dan K-Means

8 Wahyu Penggalian User Penelitian ini 2021

Andhyka Kebutuhan Persona menggunaka

Kusuma1, Pengguna Pada n pendekatan

Selma Osa Fase Elisitasi persona yang

Rohimah2, Perangkat bertujuan

Rafiatul Lunak untuk

Husna3 Menggunakan menentukan

User Persona sistem

informasi

terkait

kebutuhan

pengguna

terhadap

perangkat

lunak,

sehingga data

yang

dihasilkan

akan

disimpulkan
 21

untuk

mendapat

kebutuhan

dasar

pengguna.

9 Nofyat1 , Sistem Metode Bertujuan 2018

Adelina Informasi Pendekatan untuk

Ibrahim2 , Pengaduan dan merancang

Arisandy Pelanggan Air Pengemban Sistem

Ambarita3 Berbasis gan Sistem Informasi

Website Pada menggunak Pengaduan

Pdam Kota an Pelanggan

Ternate pendekatan Air Berbasis

Information sistem Web,

Systems Water Bottom-up

Customers dan model

Complaints pengemban

Web-Based On gan sistem

Pdam Ternate secara

City waterfall

dengan

model

rancangan

Sistem DFD
 22

dan ERD.

10 Rahayu Analisis SUS Untuk

Widayanti Website (system mengukur

dan STIMATA usability aspek-aspek

Jauharul Menggunakan scale) usability dan

Maknunah System kepuas-

Usability Scale an pengguna

(SUS) untuk

mengetahui

apakah

website yang

telah

dibangun

telah

memenuhi

prinsip-

prinsip dasar

seperti

kemudahan

akses

(accessible)

serta

kemudahan

penggunaan
 23

(usable)

menggunaka

n System

Usability

Scale (SUS).

11 Farhan Perancangan Metode tujuan dari 2022

Nur Sistem Waterfall peneliti ini

Agung1, Informasi adalah

Ifan Pelayanan merancang

Junaedi2*, Customer aplikasi

Akmal Dengan Barbershop

Budi Platform Web sistem

Yulianto3 (Studi booking yang

KasusBarbersh dapat

op Agung) digunakan

oleh

customer

agar

memudahkan

customer

untuk

memesannya

dan tidak

perlu dating
 24

ke

Barbershop.

Dalam

membangun

suatu sistem

menggunaka

n sistem

SDLC

dengan

metode

Waterfall.

12 Karimaha STRATEGI

Ridan PENANGGUL

Muhtadib ANGAN

Kamalic PENGANGG

URAN

MELALUI

PERAN

USAHA

KECIL

MENENGAH

(UKM)

GENTING

13 Reski SISTEM Website Tujuan 2023

 25

Idrus 1) , INFORMASI penelitian ini

Cita St PENGARSIPA adalah untuk

Munthakh N SURAT membuat

abah R 2) , MASUK DAN sebuah

Al Qadri SURAT perancangan

Hatta 3 KELUAR dan

BERBASIS implementasi

WEB PADA sistem

FAKULTAS pengarsipan

EKONOMI surat pada

UNIVERSITA Jurusan

S SULAWESI Sistem

BARAT Informasi

menggunaka

n bahasa

pemprograma

n web.

2.3 Kerangka Pemikiran

 26

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

 27

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.

 28

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.

 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 1. Kualitas
pada proses penjualan. 2. Harga
Sementara itu, menjual (sell) 3. Pelayanan
mengacu pada tindakan 4. Anggaran
memberikan sesuatu kepada
pembeli dengan harga yang
telah ditentukan. Penjualan
adalah aktivitas yang mencakup
transaksi penjualan barang atau

23
 24

jasa, baik melalui pembayaran

kredit maupun tunai.
Kopi Kopi adalah minuman yang 1. Kualitas
dihasilkan dari pengolahan biji 2. Harga
tanaman kopi. Tanaman kopi 3. Rasa
termasuk dalam keluarga
Rubiaceae dengan genus
Coffea. Secara keseluruhan,
kopi hanya terdiri dari dua
spesies utama, yaitu Coffea
arabica dan Coffea robusta.
Design thinking adalah konsep 1. Emphatize
Design bisnis yang dianggap dapat 2. Define
Thinking memberikan dukungan dalam 3. Ideate
pencapaian tujuan jangka 4. Prototype
panjang, karena memungkinkan 5. Testing
seseorang untuk berpikir kreatif
dan melampaui batasan
pengetahuannya.
UKM UMKM adalah entitas usaha 1. Skala Usaha
yang produktif, dapat dimiliki 2. Kepemimpinan
oleh individu atau badan usaha, Pola Pikir & cara
dan telah memenuhi kriteria pandang
yang mendefinisikan sebagai 3. Manajemen
usaha mikro.. Pemasaran
4. Manajemen
Operasional

3.3 Teknik Pengumpulan Data

Dalam penelitian ini, berbagai metode pengumpulan data digunakan, yang

mencakup hal berikut

 25

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.

 26

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:

 27

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
 28

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
 29

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

 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

30
 31

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).

 32

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.

 33

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 100 GR 20.000 RB

Robusta Geste 200 GR 40.000 RB

2 100 GR 25.000 RB

Arabika High Class

200 GR 50.000 RB

3 100 GR 35.000 RB

Arabika Honey
200 GR 70.000 RB

4 100 GR 20.000 RB

Arabika Premium
200 GR 40.000 RB

5 100 GR 30.000 RB

Arabika Spesiallty
200 GR 60.000 RB

6 100 GR 35.000 RB

Arabika Natural
200 GR 70.0
 34

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 bertugas untuk mengurus

- Tinggal di kabupaten aceh data produk dan catatan

tengah (lhokseumawe) transaksi penjualan.

 35

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 33 Tahun Pria Jln kapten yusuf

Ardhiansyah lhksemawe
 36

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
 37

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:

 38

Tabel 4. 7. Penentuan Objective

No Target Pengguna Objective

1 Bertugas mendukung administrator dalam

Administrator membuat website penjualan kopi dan mengelola

data produk serta transaksi penjualan, sehingga

pengelolaan data penjualan dapat dilakukan

dengan efektif dan efisien.

2 Membuat proses pemesanan di Meulawi Kopi

Customer 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.
 39

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

 40

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.

 41

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

 42

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.

 43

Gambar 4. 2. User Persona Administrator

Gambar 4. 3. User Persona Customer

 44

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 tujuan pada tahap Empathize, langkah berikutnya adalah

mendefinisikan tantangan-tantangan tersebut melalui pernyataan How

Might We (HMW). HMW merupakan sebuah metode yang digunakan

untuk mengubah masalah utama atau hasil pernyataan dari pengguna

menjadi tantangan yang dapat dijalankan. Dalam penelitian ini, peneliti

menerapkan dua jenis pernyataan HMW berdasarkan masalah pengguna

dan kebutuhan pemilik terhadap target pengguna

Tabel 4. 10. How Might We Berdasarkan Problems Administrator

No Problems Challenge

1 Pencatatan penjualan ke Bagaimana cara

toko (offline market) memberikan bantuan

masih sistem offline dan kemudahan kepada

administrator dalam

pengelolaan data

produk

2 Belum ada website untuk Bagaimana dapat

 45

pencatatan penjualan dari membantu

E-comers maupun administrator dalam

penjualan dalam bentuk mencatat penjualan

offline menjadi lebih cepat

dan mudah

Tabel 4. 11. How Might We Berdasarkan Problems Customer

No Problems challenge

1 Ketidaktransparan dalam Bagaimana dapat

proses pengiriman produk membantu

kepada pelanggan disebabkan customer mudah

oleh ketidaksesuaian antara dan cepat dalam

estimasi waktu pengiriman mencari/dalam

yang diberikan oleh Meulawi pemesanan produk.

Kopi dan kenyataan di

lapangan

2 Kurang nya informasi Bagaimana dapat

terhadap produk dan harga membantu

produk customer untuk

mengetahui

informasi harga

produk dan stok

produk.

3 Kurang nya informasi dalam Bagaimana dapat

 46

cara pembuatan kopi siap membantu

sajinya customers untuk

mengetahui cara

penyajian produk

kopi di meulawi

4 Customers tidak memiliki Bagaimana dapat

akses untuk melihat ulasan membantu

yang diberikan oleh customer melihat

customers lain terhadap hasil ulasan

produk tersebut. customer lain

5 Pengisian form data diri Bagaiman dapat

untuk keperluan pendataan memberi

dan pengiriman produk secara kenyamanan dan

manual. kemudahan

customer dalam

membeli produk

6 Tidak adanya kategorisasi Membantu

dari setiap produk customer

menyebabkan customer mengetahui

kesulitan dalam mencari informasi dari tiap

produk. katagori/jenis

produk yang dijual.

 47

b. Prioritize Challenges (Prioritization Matrix)

Setelah tantangan teridentifikasi, peneliti membuat prioritas tantangan

dengan menggunakan matriks tantangan berupa Eisenhower matriks.

Eisenhower matriks ditemukan oleh Dwight D. Eisenhower yang

digunakan untuk memprioritaskan tugas berdasarkan minat dan urgensi.

Tujuan dari penelitian untuk membuat Eisenhower Matriks adalah untuk

berbagi solusi penting untuk masalah pengguna dan memprioritaskan

seberapa penting masalah tersebut harus diselesaikan. Eisenhower

Matriks memiliki 4 kuadran yaitu important/urgent, important/non-

urgent, non-important/urgent, dan non important/non-urgent.

1. Kuadran 1 (Important/urgent) merupakan kegiatan yang harus

diprioritaskan untuk segera diselesaikan karena bersifat mendesak

dan penting.

2. Kuadran 2 (Important/non-urgent) merupakan kegiatan penting

diselesaikan tetapi tidak mendesak.

3. Kuadran 3 (Non-important/urgent) adalah tindakan yang mendesak

tetapi mereka tidak diperlukan untuk eksekusi dan biasanya

merupakan fungsi itu bisa di lakukan lain waktu.

4. Kuadran 4 (Non-important/non-urgent) adalah kegiatan yang tidak

diwajibkan diselesaikan dan dihapus.

Untuk mengelompokkan kegiatan tantangan dalam matriks Eisenhower,

peneliti pertama-tama membuat kuesioner HMW. Kuesioner ini dihasilkan dengan

mengubah pernyataan tantangan HMW menjadi kalimat yang lebih sederhana

 48

agar target pengguna dapat dengan mudah menilai setiap pernyataan dalam

kuesioner HMW.

Tabel 4. 12. Kuesioner How Might We Administrator

No Kode Challenge

1 CA-01 membantu dan memudahkan administrator dalam

mengelola data produk.

2 CA-02 Membantu administrator dalam mencatat penjualan

menjadi lebih cepat dan mudah

Tabel 4. 13. Kuesioner How Might We Customer

No Kode Challeng

1 CC-01 Memberikan dukungan agar pelanggan dapat dengan

mudah dan cepat menemukan produk yang mereka

cari.

2 CC02 Membantu customer untuk mengetahui informasi

harga produk dan stok produk.

3 CC-03 Membantu customers untuk mengetahui cara

penyajian produk kopi di meulawi

4 CC-04 Membantu customer mengetahui informasi hasil

ulasan dari customer lain

5 CC-05 Memberi Kenyamanan dan kemudahan customer

dalam membeli produk

6 CC-06 Membantu customer mengetahui informasi dari tiap

kategori/jenis produk yang dijual.

 49

c. UX Attribute, Signal, dan Metrics

Untuk menilai sejauh mana keberhasilan desain solusi, diperlukan

indikator kunci yang akan dituju melalui UX attribute, sinyal, dan metrik.

UX attribute, sinyal, dan metrik mampu memberikan hasil dampak yang

dapat dibandingkan dengan nilai sebelumnya, aktual, dan target yang

ditetapkan.

Pemilihan UX attribute, sinyal, dan metrik didasarkan pada pedoman

yang tercantum dalam ISO 9241-11, menggunakan metode pengukuran

usability System Usability Scale (SUS) untuk aspek keefektifan, efisiensi,

dan kepuasan. Pengukuran masing-masing UX attribute diuraikan dalam

tabel pengukuran yang terdapat dalam tabel di bawah ini.

Tabel 4. 14. Measurements

No UX Attribute Signal Metrics To Measure

1 Effectiveness Pengguna Skor rata-rata minimum

berhasil/sukses untuk aspek Keefektifan

menjalankan dan berdasarkan tingkat

menyelesaikan tiap keberhasilan pengguna

task/fitur yang adalah 78% (Sauro,

terdapat pada desain 2011).

aplikasi penjualan

2 Satisfaction Pengguna merasa puas Skor yang diperoleh dari

dan menyukai produk pengujian dengan

yang telah dihasilkan pengguna melebihi nilai

saat menggunakannya. minimum yang

 50

ditetapkan oleh System

Usability Scale (SUS).

Nilai minimum dari

System Usability Scale

(SUS) adalah 68, yang

dikategorikan sebagai

tingkat penerimaan yang

tinggi, diberi penilaian

kata "Baik", dan Grade

Scale C.

4.7.3 Ideate

Fase "ideate" merupakan tahap dalam metode design thinking yang

bertujuan untuk mengembangkan desain solusi yang dapat mengatasi

permasalahan pengguna. Pada tahap "ideate," beberapa langkah dilakukan untuk

mencari solusi desain yang sesuai berdasarkan hasil sintesis dari tahap

sebelumnya, yaitu spesifikasi. Selama tahap ini, peneliti menggunakan inovasi

dan kreativitas untuk menciptakan desain solusi. Ini dilakukan melalui

serangkaian aktivitas seperti generative design, conceptual design, dan product

phase. Dengan melalui proses-proses ini, diharapkan dapat menghasilkan sebuah

produk aplikasi yang efektif dalam memecahkan masalah dan memberikan

pengalaman yang nyaman bagi pengguna.

 51

4.7.3.1 Generative Design

Desain generative adalah proses dalam fase ideation dimana strategi dibuat

untuk merancang solusi yang dibuat untuk tumbuh dan berkelanjutan. Ada dua

tahap dalam proses desain generatif yaitu brainstorming dan arsitektur generasi

pengetahuan.

A. Brainstorming

Langkah awal dalam fase generative design adalah sesi brainstorming,

yang bertujuan untuk menghasilkan sebanyak mungkin ide. Brainstorming

adalah metode efektif untuk mengembangkan solusi potensial dalam

aplikasi yang sedang dirancang, berdasarkan pernyataan yang berasal dari

metode How Might We (HMW) yang digunakan dalam tahap define. Ide-

ide yang dihasilkan selama brainstorming kemudian dipetakan oleh

peneliti sesuai dengan pernyataan HMW yang telah dibuat untuk setiap

persona. Selain itu, pengguna juga dilibatkan dalam sesi brainstorming ini

untuk memastikan bahwa ide-ide yang dihasilkan sesuai dengan kebutuhan

dan harapan mereka. Ide-ide yang muncul selama sesi brainstorming

dicatat dalam tabel di bawah ini.

Tabel 4. 15. Hasil Brainstorming Dari HMW Administrator

No Challenge Idea

1. Bagaimana cara memberikan - Memberikan from khusus

bantuan dan kemudahan kepada untuk mengelola data produk

administrator dalam - Pembagian dari katagori

pengelolaan data produk. produk

 52

- Ada notifikasi informasi setiap

dalam mencatat data

- Memberikan informasi

transaksi penjualan yang

dilakukan customer

- Pembuatan vocher pada

produk yang sedang promo

2. Bagaimana dapat membantu - Detail pemesanan customer.

administrator dalam mencatat - Pencarian data

penjualan transaksi menjadi transaksi,penjualan.

lebih cepat dan mudah - Kategori pemesanan

- Filter kategori pemesanan

Tabel 4. 16. Hasil Brainstorming Dari HMW Customer

No Challeng Idea

1. Bagaimana cara memberikan - Antarmuka/pilihan

dukungan agar pelanggan dapat pencarian dan

dengan mudah dan cepat penyaringan produk.

menemukan produk yang mereka - Daftar produk

cari. - Informasi produk

yang sedang dalam

promosi

- Layanan obrolan
 53

(chat)

2. Bagaimana dapat membantu Informasi stok produk

customer untuk mengetahui yang tersedia

informasi harga produk dan stok

produk.

3. Bagaimana dapat membantu Informasi penyajian di

customers untuk mengetahui cara dekat produk

penyajian produk kopi di meulawi

4. Bagaimana dapat membantu Informasi ulasan produk

customer melihat hasil ulasan dari setiap customer.

customer lain

5. Bagaiman dapat memberi - Cara pembelian yang

kenyamanan dan kemudahan sederhana

customer dalam membeli produk - Opsi pembayaran yang

bervariasi (bank/virtual

acaunt,COD,

Dana,Ovo,Link)

- Kode promo/vocher

6. Bagaimana Membantu customer Katalog dari tiap kategori

mengetahui informasi dari tiap produk.

katagori/jenis produk yang dijual.

 54

B. information Architecture

Setelah selesai dengan sesi brainstorming, langkah berikutnya adalah

merancang Information Architecture (IA). Membuat Information

Architecture bertujuan untuk membantu pengguna dalam menemukan

informasi dan mengeksekusi tugas tertentu dengan lebih mudah. Dalam

hal ini, peneliti menggunakan sitemap sebagai wujud dari Information

Architecture, yang merupakan diagram hirarki yang mengatur dan

menunjukkan struktur informasi dalam desain aplikasi penjualan kopi. Di

bawah ini adalah gambaran umum dari Information Architecture untuk

kedua aplikasi penjualan kopi, baik dari perspektif administrator maupun

pelanggan:

Tabel 4. 17. Information Architecture Administrator

No Page Page Detail

1. Dashboard - Grafik pendapatan

- Grafik pengeluaran

- Grafik stok produk

- Produk yang laku

2. Leaderboard - Grafik pembelian

- Tabel customer

3. Order Tampilan pemesanan produk

4. produk Form menambahkan produk baru

5. mesages Daftar pertanyaan customer

6. Settings Untuk pengaturan sistem penjualan

7. Sign Out Keluar dari menu admin

 55

Tabel 4. 18. Information Architecture Customer

No Page Page Details

1. Home - Tampilan Awal dari website meulawi kopi

- Button produk

- Button cart

2 About Us - Informasi tentang meulawi kopi

3 Shop - Jenis- jenis produk

- Harga produk

- Katagori produk

- Halaman istagram

4 Detail produk - Data detail produk

- Button bayar

- Button tambahkan ke cart

Deskripsi produk

5 Cart - Daftar produk yang ditambahkan

- Button ubah cart

- Button lanjut belanja

- Button proses bayar

6 Checkout - Proses pembelian

- Button bayar

7 Blog - Konten tentang kopi

8 Detail blog - Deskripsi tentang konten kopi

9 Contack - Form pertanyaan untuk UMKM Meulawi

Kopi
 56

- Button submit

10 Promo - Kode Promo

4.7.3.2 Conceptual Design

Hasil yang diperoleh dari fase generative design digunakan sebagai

dasar untuk melanjutkan ke tahap desain konseptual. Tahap desain

konseptual adalah saat peneliti merancang konsep dasar untuk website

penjualan kopi. Dalam proses ini, beberapa langkah yang dilakukan meliputi

pembuatan wireframe dan user flow.

A. User Flow

User Flow bertujuan untuk menggambarkan bagaimana tugas-tugas

interaksi dengan website dilakukan oleh pengguna. Biasanya, User Flow

mencakup beberapa skenario pengguna yang menjalankan tugas-tugas

pada berbagai fitur website. Peneliti membagi User Flow berdasarkan

peran pengguna, yaitu administrator dan pelanggan, dan penjelasan rinci

dari pembagian User Flow ini dapat ditemukan di bawah ini

 57

1. User flow admin

Gambar 4. 4. User Flow Admin

2. User Flow Customer

- Login

Gambar 4. 5. User Flow Customer

 58

- Pemesanan produk

Gambar 4. 6. Pemesanan Produk

- Cart

Gambar 4. 7. Cart
 59

B. Wireframe

Setelah merancang struktur informasi pada website melalui Information

Architecture dalam bentuk User Flow, langkah berikutnya adalah membuat

wireframe. Wireframe adalah representasi konsep dasar sebelum memulai desain

high-fidelity, yang menggambarkan tata letak atau struktur halaman, hierarki

informasi, dan fungsi dari website penjualan kopi. Dalam pembuatan wireframe,

peneliti menggunakan alat yang disebut 'framem.

a. Wireframe Administrator

1. Tampilan Login

Gambar 4. 8. Halaman Login

 60

2. Tampilan dashboard

Gambar 4. 9. Halaman Dashboard

3. Tampilan leaderboard

Gambar 4. 10. Halaman Leaderboard

 61

4. Tampilan Order

Gambar 4. 11. Halaman Order

5. Tampilan produk

Gambar 4. 12. Halaman Produk

 62

6. Tampilan Messages

Gambar 4. 13. Halaman Messages

7. Tampilan settings

Gambar 4. 14. Halaman Settings

 63

8. Tampilan Sign Up

Gambar 4. 15. Halaman Sign Up

b. Wireframe Customer

1. Tampilan Home

Gambar 4. 16. Halaman Home

 64

2. Tampilan About Us

Gambar 4. 17. Halaman About Us

3. Tampilan Shop

Gambar 4. 18. Halaman Shop

 65

4. Tampilan produk

Gambar 4. 19. Halaman Produk

5. Tampilan Cart

Gambar 4. 20. Halaman Cart

 66

6. Tampilan Checout

Gambar 4. 21. Halaman Checkout

 67

7. Tampilan Blog

Gambar 4. 22. Halaman Blog

 68

8. Tampilan Blog Detail

Gambar 4. 23. Halaman Blog

 69

9. Tampilan Contact

Gambar 4. 24. Halaman Kontak

 70

4.7.3.3 Product Phase

Product phase adalah langkah yang terjadi setelah konsep dasar desain

solusi telah dibuat pada tahap desain konseptual. Ini merupakan tahap akhir dalam

fase ideate, di mana desain solusi dikembangkan lebih detail dan diberi tampilan

yang menarik pada website penjualan kopi Meulawi.

A. UI Style Guide/Visual Design Language

Sebelum melangkah ke pembuatan desain high-fidelity, langkah yang

esensial adalah memiliki pedoman desain yang akan membimbing

peneliti selama proses perancangan. Ini dapat dicapai melalui

penggunaan design system, yang merupakan sekumpulan komponen

dengan standar yang jelas. Design system ini terdiri dari dua bagian

utama, yaitu panduan gaya antarmuka pengguna (UI style guide) dan

perpustakaan pola antarmuka pengguna (UI pattern library), yang

berguna untuk mempermudah proses perancangan (Suarez et al., 2017).

UI style guide adalah dokumen panduan desain yang mencakup

berbagai aspek seperti warna, tipografi, ikonografi, dan elemen visual

lainnya dalam produk desain. Panduan ini bertujuan untuk menjelaskan

aturan dan prinsip desain yang akan digunakan. Sebagai bagian dari

upaya ini, peneliti telah menyusun UI style guide yang mencakup

sejumlah elemen desain.

1. Colors

Pemilihan warna dalam desain website memiliki peran lebih dari

sekadar merepresentasikan identitas perusahaan atau merek. Warna

juga berfungsi sebagai sarana untuk mengkomunikasikan pesan

 71

kepada pengguna. Dalam kasus website penjualan Meulawi Kopi,

penentuan palet warna didasarkan pada hasil dari diskusi dengan

pemilik Meulawi Kopi, yang mencari warna-warna yang sesuai dan

cocok dengan pesan yang ingin disampaikan.

Tabel 4. 19. Penggunaan Warna di Menu Home

No Colors name Hex RBG

1 Mine Shaft #272727 39, 39, 39, 1

2 Mine Shaft #252525 37, 37, 37, 1

3 Mine Shaft #3A3A3A 58, 58, 58, 1

4 Mine Shaft #323232 50, 50, 50, 1

5 Glacier #72AEC8 114, 174, 200, 1

6 Glacier #75A5BF 117, 165, 191, 1

7 Black #000000 0, 0, 0, 1

8 Black #030303 3, 3, 3, 1

9 Black #040404 4,4,4,1

10 Alto #DODODO 208, 208, 208, 1

11 Alto #D9D9D9 217, 217, 217, 1

12 Alto #D3D3D3 211, 211, 211, 1

13 Alabaster #F8F7F7 248, 247, 247, 1

14 Alabaster #FCFCFC 252, 252, 252, 1

15 Silver #CDCDCD 205, 205, 205, 1

16 Silver #CCCCCC 204, 204, 204, 1

17 Tundora #4A4A4A 74, 74, 74, 1

 72

18 Tundora #494949 73, 73, 73, 1

19 Nero #0B0600 11, 6, 0, 1

20 White #FFFFFF 255, 255, 255, 1

21 Santa Fe #BA704F 186, 112, 79, 1

22 Gallery #EEEEEE 238, 238, 238, 1

23 Porcelain #EBEFF1 235, 239, 241, 1

24 Iron #D7DDDF 215, 221, 223, 1

25 Mercury #E1E1E1 225, 225, 225, 1

26 Royal Blue #2F80ED 47, 128, 237, 1

27 Dove Gray #737373 115, 115, 115, 1

28 Gray #848484 132, 132, 132, 1

29 Heavy Metal #1A1C1E 26, 30, 28, 1

30 Scorpion #5B5B5B 91, 91, 91, 1

31 Lunar Green #484A4B 72, 74, 70, 1

32 Wild Sand #F5F5F5 245, 245, 245, 1

33 Nevada #696F79 105, 111, 121, 1

34 Denim #1565D8 21, 101, 216, 1

2. Typography

Typography merupakan sekumpulan dari penyusunan fonts yang

digunakan pada website. Font yang digunakan pada aplikasi

penjualan Kopi adalah (Lato dan Josh) yang disesuaikan agar terlihat

menarik. Penyusunan typography yang dibuat pada website, terbagi

 73

menjadi 3 yaitu body, button, dan caption. Typography yang telah

disusun oleh peneliti.

Gambar 4. 25. Font Lato

Gambar 4. 26. Font Jost

 74

3. Spacing and sizing

Penerapan spacing and sizing yang baik sangat penting pada sebuah

aplikasi atau website, karena dapat menciptakan keseimbangan dan

ritme yang selaras. Spacing and sizing juga bertujuan untuk

menciptakan layout pada website agar tetap konsisten sehingga

memberikan kenyamanan saat digunakan oleh pengguna. Menurut

(Suarez et al., 2017), dalam menerapkan spacing and sizing paling

baik adalah menggunakan skala berbasis 4dp (8,16,24,32) pada

semua platform sehingga dapat membuat sebuah desain aplikasi yang

responsif. Namun, untuk spacing yang bersifat horizontal akan lebih

baik menggunakan skala berbasis dp.

4. Iconography

Icons atau Iconography pada sebuah aplikasi/website

mempresentasikan fungsi dan makna kepada pengguna. Icons yang

digunakan dalam penelitian diambil dari Figma Community.

 75

Gambar 4. 27. Iconography

B. UI Pattern Library

UI pattern library adalah bagian-bagian pada user interface atau elemen

desain yang digunakan pada produk. UI pattern library terdiri dari buttons,

text field, cards, dan komponen lain yang dibutuhkan dalam merancang user

interface. UI pattern library yang telah dibuat antara lain sebagai berikut:

1. Buttons

Buttonn adalah elemen serta penting pada User Interface (UI) dan User

Experience (UX) yang bertujuan untuk menarik pengguna dan sebagai

sarana interaksi dalam mencapai tujuan tertentu. Terdapat dua jenis

buttons yang dibuat peneliti yaitu filled button, dan disable buttons. Di

bawah ini merupakan gambar komponen buttons yang telah dibuat oleh

peneliti.
 76

Gambar 4. 28. Buttons

2. App Bar

App Bar adalah elemen yang digunakan sebagai interaksi bagi pengguna

atau sebagai navigasi untuk suatu perintah. Terdapat 2 jenis app bar yang

dibuat dengan menyesuaikan pada model aplikasi yang dirancang yaitu

dalam tampilan desktop bagi administrator dan customer yang terdapat

pada gambar dibawah ini.

Gambar 4. 29. App Bar Administrator

 77

Gambar 4. 30. App Bar Customer

3. Text Fields

Text Fields merupakan elemen area yang dapat digunakan oleh pengguna

untuk memasukkan atau mengubah teks yang ada didalamnya. Terdapat

beberapa pembagian text fields yang digunakan pada website penjualan

Meulawi Kopi yaitu dari type, style, dan status. Pada type text fields

mempunyai 3 variasi yaitu empty, filled, dan disable. Pada style text fields

mempunyai 3 variasi yaitu dengan icon, label, dan helper text. Pada status

text fields terdapat 2 jenis varias yaitu status activated serta deactivated.

Dengan pembagian tersebut dapat memudahkan peneliti dalam membuat

sebuat input form dengan menyesuaikan kebutuhan dari jenis text fields

pada setiap pengguna aplikasi.

 78

Gambar 4. 31. Text Fields

4. Menus

Menus merupakan elemen yang menampilkan sebuah daftar elemen

pilihan yang bersifat sementara pada aplikasi. Dalam website penjualan

Meulawi Kopi yang dirancang menerapkan exposed dropdown menus.

Exposed dropdown menus memberikan interaksi kepada pengguna dengan

menampilkan item riwayat pemesanan. Menu yang dibuat oleh peneliti

mempunyai 2 jenis dari type dan status. Pada type menu mempunyai 2

variasi yaitu dengan label dan helper text. Pada status menu terdapat 2

jenis varias yaitu status activated serta deactivated.

Gambar 4. 32. Menus

 79

5. Navigation Rail

Navigation Navigation Rail merupakan elemen yang berfungsi sebagai

navigasi untuk dapat mengakses tujuan atau konten dalam website atau

aplikasi. Bottom Navigation adalah elemen yang memberikan interaksi

perpindahan antara tujuan utama pada aplikasi. Pada website penjualan

Meulawi Kopi, Navigation Rail terdapat pada website pengelolaan

administrator, Navigation Rail yang telah dibuat terdapat pada gambar

dibawah ini.

Gambar 4. 33. Navigation Rail

 80

6. Cards

Cards adalah elemen yang memiliki informasi atau konten serta

representasi dari objek. Informasi yang terdapat dalam elemen cards dapat

bervariasi dengan menyesuaikan informasi yang ingin disampaikan kepada

pengguna.

Gambar 4. 34. Cards

C. High-fidelity Design

a. High-fidelity Design Administrator

1. Halaman login

Sebelum mengakses tampilan admin, diperlukan langkah penting

yaitu login ke akun admin.

 81

Gambar 4. 35. Halaman Login

2. Halaman dashboard

Setelah berhasil login, Anda akan diarahkan ke halaman menu

dashboard yang merupakan pusat kontrol masuk ke tampilan

dashboard admin, Anda akan memiliki akses untuk melihat berbagai

informasi penting. Ini mencakup data mengenai target penjualan,

tujuan pengeluaran, serta daftar produk yang paling diminati oleh

pelanggan. Dengan fitur-fitur ini, Anda dapat dengan mudah

memantau kinerja bisnis dan mengambil keputusan yang lebih baik

untuk pertumbuhan dan efisiensi.

 82

Gambar 4. 36. Halaman Dashboard

3. Halaman Leaderboard

Kemudian, terdapat opsi untuk mengakses halaman "Leaderboard" di

mana Anda dapat menemukan daftar pelanggan yang secara konsisten

melakukan pembelian produk. Pelanggan-pelanggan ini akan

berkesempatan untuk menerima berbagai jenis reward sebagai

penghargaan atas dukungan dan loyalitas mereka.

Gambar 4. 37. Halaman Leaderboard

 83

4. Halaman Order

Selanjutnya, terdapat opsi untuk mengunjungi halaman "Order" di

mana admin memiliki kemampuan untuk memeriksa pesanan-pesanan

dari pelanggan. Di sini, admin dapat melihat rincian lengkap produk

yang dipesan oleh pelanggan, termasuk harga masing-masing barang.

Selain itu, admin juga bisa memeriksa status pembayaran dari

pelanggan, dan dapat dengan mudah mengetahui apakah pembayaran

telah dilakukan atau belum.

Gambar 4. 38. Halaman Order

5. Halaman Produk

Dalam tampilan produk yang disusun dengan baik, admin dapat

dengan mudah melihat semua barang yang ada dalam katalog. Admin

memiliki kewenangan untuk menetapkan harga yang sesuai dengan

nilai produk, serta menyusun deskripsi yang menarik dan informatif.

 84

Semua ini dilakukan dengan cara yang mengizinkan admin untuk

menyesuaikan dan merespons perubahan pasar dengan cepat dan tanpa

hambatan.

Gambar 4. 39. Halaman Produk

6. Halaman massage

Dalam tampilan "Messages" yang telah dirancang secara efisien,

admin dapat dengan mudah memeriksa dan menanggapi pesan-pesan

yang masuk. Kemampuan ini diberikan kepada admin dengan tingkat

fleksibilitas tinggi, memungkinkan mereka untuk merespons

pertanyaan, memberikan informasi, atau memberikan dukungan sebaik

mungkin. Semua ini dapat dilakukan dengan cara yang mengizinkan

admin untuk beradaptasi dengan beragam situasi dan kebutuhan yang

berbeda-beda.
 85

Gambar 4. 40. Halaman Messages

7. Halaman setting

Dalam tampilan "Settings", di mana admin memiliki akses untuk

mengelola berbagai pengaturan termasuk pengiriman, informasi

pribadi, dan elemen lainnya. Di dalam area ini, kemampuan admin

untuk mengatur segala sesuatu menjadi sangat fleksibel dan mudah

diakses.

Gambar 4. 41. Halaman Setting

 86

b. High-fidlity design customers

Untuk memulai akses ke website aplikasi penjualan Meulawi Kopi,

langkah awalnya adalah membuka menu browser atau menggunakan

mesin pencari Google. Kemudian, ketikkan "Meulawi Kopi" pada kotak

pencarian, dan klik salah satu hasil yang muncul untuk menuju ke

halaman beranda. Penting untuk dicatat bahwa proses login hanya akan

terjadi apabila pelanggan memutuskan untuk melakukan transaksi

pembelian produk.

1. Halaman Sign In

Gambar 4. 42. Halaman Sign In

 87

2. Halaman Register

Gambar 4. 43. Halaman Register

3. Halaman Home

Halaman Home adalah halaman pertama yang dilihat oleh pengunjung

saat mereka mengakses website atau aplikasi. Halaman ini bertujuan

utama untuk memberikan gambaran menyeluruh tentang produk dari

meulawi kopi, layanan, atau konten/platform penjualan.

 88

Gambar 4. 44. Halaman Home

 89

4. Halaman shop

Pada halaman shop berisikan tentang produk produk dan harga yang

dijual dari UMKM Meulawi.

Gambar 4. 45. Halaman Shop

 90

5. Detail produk

Pada halaman produk berisikan tentang deskripsi lengkap produk yang

di pilih.

Gambar 4. 46. Tampilan Detail Produk

 91

6. Halaman checkout

Pada halaman ini berisikan tentang proses pembayaran produk yang

akan di beli.

Gambar 4. 47. Halaman Checkout

 92

7. Halaman about

Untuk menampilkan deskripsi lengkap tentang profil UMKM Meulawi

Kopi. Menu ini berisikan beberapa konten seperti sejarah berdirinya

Meulawi Kopi, profil singkat, dan tempat berdirinya UMKM Meulawi

Kopi.

Gambar 4. 48. Halaman About

 93

8. Halaman Blog

Pada halaman blog berisikan konten konten tentang kopi.

Gambar 4. 49. Halaman Blog

 94

9. Halaman Cart

Pada halaman ini berisikan tentang daftar belanja produk yang di pilih

atau disimpan.

Gambar 4. 50. Halaman Cart

 95

10. Halaman shoping cart

Pada halaman ini melihat produk yang ada di keranjang dan riwayat

pemesanan

Gambar 4. 51. Halaman Shopping Cart

 96

11. Halaman promo

Gambar 4. 52. Halaman Promo

 97

4.7.4 Prototype

Dari hasil desain high-fidelity, langkah berikutnya adalah menciptakan

prototipe high-fidelity. Prototipe memiliki nilai saat digunakan untuk memastikan

bahwa desain yang telah dibuat berhasil mengatasi masalah yang dihadapi

pengguna. Selain itu, tujuan dari prototipe adalah memberikan pengalaman

pengguna kepada para pengguna produk, karena prototipe ini memiliki tingkat

interaktivitas yang mendekati pengalaman dengan sistem sebenarnya. Peneliti

membuat prototipe berkualitas tinggi menggunakan alat aplikasi Figma, yang

memungkinkan pembuatan interaksi yang interaktif. Berikut adalah prototipe yang

telah dibuat oleh peneliti untuk setiap desain aplikasi pengguna.

a. Prototype Administrator

Prototype administrator memiliki beberapa bagian dalam alur prototipe high-

fidelity

Gambar 4. 53. Prototype Administrator

 98

b. Prototype Customer

Gambar 4. 54. Prototype Customer

4.7.4 Test

Tahap terakhir dalam proses Design Thinking adalah uji coba (Test), yang

berfokus pada mengevaluasi dan memvalidasi prototipe High-Fidelity dengan

mempertimbangkan masukan dan pemahaman dari pengguna. Evaluasi desain

solusi dalam tahap ini dapat memberikan manfaat dalam meningkatkan dan

memperbaiki pengalaman pengguna pada website. Uji kegunaan aplikasi

dilakukan menggunakan metode System Usability Scale (SUS), yang

mempertimbangkan berbagai aspek atribut pengalaman pengguna (User

Experience atau UX), termasuk efektivitas, kepuasan, daya tarik, kejelasan,

efisiensi, keandalan, stimulasi, dan kebaruan. Berikut adalah langkah-langkah

yang diambil dalam tahap pengujian.

 99

a. Test Plan

Sebelum menguji ketergunaan desain website yang telah dirancang,

langkah awal yang diambil adalah menyusun rencana pengujian (test

plan). Dengan adanya rencana yang terstruktur dalam fase pengujian ini,

akan memungkinkan pengujian yang lebih efektif. Tujuan dari fase

rencana pengujian adalah untuk menyusun kerangka kerja yang akan

digunakan selama proses pengujian website oleh pengguna.

Tabel 4. 20. Test Plan Document

No Test Plan Document Detail Test Plan Dockumen
1. Test Objective Memperoleh pemahaman dan masukan
dari pengguna melalui pengujian prototipe
website penjualan kopi, dan juga
menganalisis data pengujian dengan
menggunakan metode System Usability
Scale (SUS) untuk mengukur ketergunaan
sistem
2. Participants 1. Administrator
2. 6 Customer
3. Equipment 1. Aplikasi Figma
2. Laptop
4. Test Task Administrator
1. login
2. Dashboard
3. Leaderboard
4. Order
5. Prodak
6. Sales riporte
7. Masages
8. Settings
 100

9. Sign Up
Customer
1. Register
2. Sign In
3. Home
4. About us
5. Shop
6. Detail produk
7. Cart
8. Checkout
9. Blog
10. Detail blog
11. Contack
12. Promo

b. Merekrut Partisipan Testing

Partisipan yang akan menguji prototipe website dipilih dari persona yang telah

ditentukan sebelumnya pada tahap awal pembuatan persyaratan produk,

dengan melibatkan satu administrator dan enam pelanggan. Menurut

penjelasan yang diberikan oleh Nielsen pada tahun 2000, jumlah partisipan

tersebut sudah mencakup 85% dari masalah ketergunaan. Data partisipan yang

terlibat dalam pengujian prototipe website dapat dilihat dalam tabel di bawah

ini.

Tabel 4. 21. Partisipan Testing Prototype Aplikasi

Administrator

Kode Nama Usia Gender Alamat

A1 Zaky Ardhiansyah 33 Tahun Laki-laki Jln kapten yusuf

 101

lhksemawe

Customers

Kode Nama Usia Gender Alamat

C1 Mustawa Ridwan 43 Tahun Laki-Laki Aceh

C2 Buge Setiawan 28 Tahun Laki-Laki Aceh

C3 Zakiyun Mirza 23 Tahun Laki-Laki Aceh

C4 Renaldi 26 Tahun Laki-Laki Aceh

C5 Fauzi Firdaus 25 Tahun Laki-laki Aceh

C6 Ika Darma 20 Tahun Laki-laki Aceh

Keterangan:

A: Administrator

C: Customer

c. Melakukan Testing

Pada fase ini peneliti menguji prototype website penjualan Kopi untuk setiap

peserta yang diberikan. Tugas pertama adalah mengetahui latar belakang

diadakannya pengujian tersebut. Peneliti kemudian memberikan tugas tes

kepada setiap peserta untuk diselesaikan. Tugas pengujian untuk setiap

pengguna tercantum dalam Tabel dibawah ini.

Tabel 4. 22. Tasks Administrator

Tasks Code Tasks Benchmark List

TA-01 Login Administrator berhasil login

TA-02 Dashboard Administrator berhasil masuk ke dashboard

 102

TA-03 Leaderboard Administrator berhasil masuk ke

leaderboard

TA-04 Order Administrator berhasil ke menu order

TA-05 produk Administrator berhasil masuk ke menu

produk

TA-06 mesages Administrator berhasil masuk ke

masages/detail chat

TA-07 Settings Administrator berhasil masuk ke setthing

TA-8 Sign Out Administrator berhasil untuk Sign Out

Keterangan :

TA : Task Administrator

Tabel 4. 23. Tasks Customer

Tasks Code Tasks Benchmark List

TC-01 Register Customer berhasil masuk ke register

TC-02 Sign In Customer berhasil login pada website

TC-03 Home Customer berhasil masuk tampilan home

setelah login pada website

TC-04 About us Customer berhasil masuk ke menu about

us pada website

TC-05 Shop Customer berhasil masuk ke menu shop

pada website

TC-06 Detail Produk Customer berhasil masuk ke menu detail

produk pada website

TC-07 Cart Customer berhasil masuk ke menu cart

 103

pada website

TC-08 Checkout Customer berhasil masuk ke menu

checkout pada website

TC-09 Blog Customer berhasil masuk ke menu blog

pada website

TC-10 Detail Blog Customer berhasil masuk ke menu detail

blog pada website

TC-11 Contack Customer berhasil masuk ke menu

contack website

TC-12 Promo Customer berhasil masuk ke menu promo

pada website

Keterangan:

TC: Tasks Customer

Setelah peserta menyelesaikan setiap tugas uji, peneliti memberikan

kesempatan kepada masing-masing peserta untuk memberikan umpan balik

tentang prototipe website berdasarkan pengalaman mereka saat berinteraksi

dengan website. Selain itu, setiap peserta diminta untuk mengisi kuesioner System

Usability Scale (SUS) guna memberikan penilaian terhadap prototipe website.

Hasil yang diperoleh memungkinkan peneliti untuk mengevaluasi solusi desain

prototipe aplikasi penjualan kopi dari perspektif masing-masing peserta. Berikut

adalah daftar pertanyaan dari System Usability Scale (SUS) yang diberikan kepada

semua peserta.

Tabel 4. 24. Kuesioner System Usability Scale (SUS)

No Pertanyaan
 104

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

d. Analisis Hasil Data Testing

Pada tahap pengujian terakhir, tugasnya adalah menganalisis hasil yang

diperoleh dengan System Usability Scale (SUS) berdasarkan beberapa

aspek atribut UX, yaitu. effectiveness, satisfaction, attractiveness,

perspicuity, efficiency, dependability, stimulation, dan novelty. Analisis

hasil usability test yang diperoleh selama pengujian aplikasi adalah

sebagai berikut:

1) Effectiveness

Aspek Effectiveness diperoleh dengan menghitung tingkat

keberhasilan (completion rate) pengguna dalam menyelesaikan tugas

 105

ujian yang tertuang dalam rencana pelaksanaan penjualan kopi. Jika

pengguna berhasil menyelesaikan Tugas dan tingkat keberhasilan

pengguna diukur dengan nilai biner 1 yang berkaitan dengan efisiensi.

Jika pengguna gagal menyelesaikan tugas, ini dijelaskan dengan nilai

biner 0. Rumus berikut digunakan untuk menghitung nilai atribut UX dari

aspek efektif:

𝐸𝑓𝑓𝑒𝑐𝑡𝑖𝑣𝑒𝑛𝑒𝑠𝑠

Hasil pengujian ketergunaan pada aspek efektivitas dari pengguna

tersedia dalam dua tabel terpisah, satu berisi hasil dari administrator dan

yang lain berisi hasil dari pelanggan.

Tabel 4. 25. Hasil Pengerjaan Test Task Administrator

Tasks code A1

TA-01 1

TA-02 1

TA-03 1

TA-04 1

TA-05 1

TA-06 1

TA-07 1

TA-08 1

Keterangan:

1: Sukses
 106

0: Gagal

Dari hasil tugas yang telah diselesaikan oleh administrator, langkah

selanjutnya adalah melakukan perhitungan untuk aspek efektivitas. Hasil

perhitungan efektivitas administrator adalah sebagai berikut:

𝐸𝑓𝑓𝑒𝑐𝑡𝑖𝑣𝑒𝑛𝑒𝑠𝑠

Dengan mendapatkan nilai efektivitas sebesar 100%, dapat disimpulkan

bahwa desain UI/UX Website Meulawi Kopi untuk administrator memiliki tingkat

efektivitas yang sangat baik.

Tabel 4. 26. Hasil Pengerjaan Test Task Customer

Tasks code C1 C2 C3 C4 C5 C6

TA-01 1 1 1 1 1 1

TA-02 1 1 1 1 1 1

TA-03 1 1 1 1 1 1

TA-04 1 1 1 1 1 1

TA-05 1 1 1 1 1 1

TA-06 1 1 1 1 1 1

TA-07 1 1 1 1 1 1

TA-08 1 1 1 1 1 1

TA-09 1 1 1 1 1 1

TA-10 1 1 1 1 1 1

TA-11 1 1 1 1 1 1

TA-12 1 1 1 1 1 1

Keterangan

1: sukses
 107

0 gagal

Setelah mendapatkan hasil dari tugas yang telah diselesaikan oleh enam

pelanggan, langkah selanjutnya adalah melakukan perhitungan untuk mengukur

efektivitas. Berikut adalah hasil perhitungan efektivitas dari pelanggan

𝐸𝑓𝑓𝑒𝑐𝑡𝑖𝑣𝑒𝑛𝑒𝑠𝑠

Dengan memperoleh nilai efektivitas sebesar 100%, dapat disimpulkan

bahwa desain UI/UX Website Meulawi Kopi untuk pelanggan memiliki tingkat

efektivitas yang sangat baik. Kesimpulannya, pengujian prototipe website

berdasarkan aspek efektivitas yang dilakukan kepada administrator dan pelanggan

menghasilkan hasil yang sangat tinggi dan memuaskan. Hal ini terjadi karena nilai

yang diperoleh mencapai 100%, melebihi nilai minimal rata-rata yang dijelaskan

oleh Sauro (2011) sebesar 78%.

2) Satisfaction

Aspek kepuasan ditentukan berdasarkan skor kepuasan pengguna

yang diperoleh dari evaluasi kuesioner System Usability Scale (SUS)

saat menggunakan prototipe website penjualan Meulawi Kopi.

Berikut adalah metode untuk menghitung skor Atribut UX dalam

aspek kepuasan:

a) Pertanyaan positif yang muncul pada nomor-nomor ganjil (1, 3,

5, 7, 9) Dihitung dengan mengurangkan skor yang diberikan oleh

partisipan dengan satu.

𝑆𝑘𝑜𝑟 𝑆𝑈𝑆 𝑔𝑎𝑛𝑗𝑖𝑙 = ∑𝑃 – 1

 108

b) Pertanyaan positif yang muncul pada nomor-nomor ganjil (2, 4,

6, 8, 10) Dihitung dengan mengurangkan skor yang diperoleh

dari partisipan dari nilai 5.

𝑆𝑘𝑜𝑟 𝑆𝑈𝑆 𝑔𝑒𝑛𝑎𝑝 = ∑5 – Pn

c) Total skor yang diberikan oleh semua partisipan digunakan untuk

menghitung skor akhir, kemudian skor akhir tersebut akan

dikalikan dengan faktor 2,5.

d) (∑𝑠𝑘𝑜𝑟 𝑔𝑎𝑛𝑗𝑖𝑙 + ∑𝑠𝑘𝑜𝑟 𝑔𝑒𝑛𝑎𝑝) 2,5

e) Skor rata-rata SUS dihitung dengan menjumlahkan semua skor

yang diberikan oleh partisipan, lalu hasil penjumlahan tersebut

dibagi oleh jumlah total partisipan. Berikut adalah rumus

perhitungan untuk mendapatkan skor rata-rata:

=∑ n

Ket:

: Skor rata-rata

∑ : Jumlah skor SUS

𝑛: Jumlah partisipan

System Usability Scale (SUS) memiliki tiga aspek penilaian yang

mencakup tingkat penerimaan, skala penilaian, serta penilaian berdasarkan

deskripsi kata-kata. Tabel merupakan salah satu bagian dari kategori penilaian

dalam System Usability Scale (SUS).

Tabel 4. 27. Penilaian System Usability Scale (SUS)

No SUS Score Category Score
 109

1 Acceptability Ranges Acceptable High 62-100

Acceptable Low 49-61

Not Acceptable 0-50

2 Grade Scale A 91-100

B 81-90

C 71-80

D 61-70

E 0-60

3 Adjective Ratings Best Imaginable >= 86

Excellent >=72 -

<86

Good >=52 -

<72

Okay >=38 -

<52

Poor =25 - <38

Worst Imaginable -<25

Hasil evaluasi dan analisis kuesioner System Usability Scale (SUS) untuk

website penjualan Meulawi Kopi yang telah dilakukan oleh administrator dapat

ditemukan dalam tabel berikut, menampilkan skor hasilnya.

 110

Tabel 4. 28. Skor Penilaian System Usability Scale (SUS) Administrator

No Pertanyaan Skor SUS

Administrator

1 Saya sepertinya akan sering menggunakan aplikasi 5

ini

2 Saya merasa aplikasi ini terlalu rumit 3

3 Saya pikir aplikasi ini mudah digunakan 5

4 Saya sepertinya membutuhkan bantuan teknisi agar 2

dapat menggunakan aplikasi ini dengan lacar

5 Saya merasa fitur-fitur aplikasi ini berjalan dengan 4

semestinya

6 Saya merasa ada banyak ketidak konsistenan dalam 2

aplikasi ini

7 Saya merasa orang lain akan memahami cara 4

menggunakan aplikasi ini dengan cepat

8 Saya merasa aplikasi ini membingungkan 2

9 Saya merasa tidak ada hambatan dalam 4

menggunakan aplikasi ini

10 Saya perlu membiasakan diri terlebih dahulu 2

sebelum menggunakan aplikasi ini

Total 33
 111

Setelah memperoleh penilaian SUS dari administrator, langkah berikutnya

adalah melakukan perhitungan untuk mendapatkan skor SUS akhir. Berikut

adalah hasil perhitungan skor SUS dari administrator

Hasil skor SUS administrator: 33 x 2,5 = 82,5

Dari perhitungan skor SUS yang diperoleh dari administrator, dengan total

skor 82,5, yang termasuk dalam kategori acceptability yang tinggi, serta

mendapatkan peringkat dalam Grade Scale B yang menunjukkan bahwa sudah

memenuhi kebutuhan dengan baik, dan mendapatkan penilaian adjective rating

dengan hasil yang sangat baik. Oleh karena itu, dapat disimpulkan bahwa aplikasi

penjualan Meulawi Kopi untuk administrator memberikan tingkat kepuasan yang

cukup tinggi dan baik. Tabel di bawah ini memberikan detail skor yang diperoleh

oleh administrator pada aplikasi penjualan Meulawi Kopi.

Tabel 4. 29. Hasil Usability Aplikasi dengan SUS Administrator

SUS Score Category

Partisipan Acceptability Grade Scale Adjective Ratings

Ranges

Administrator Acceptable (High) B Excellent

Setelah mendapatkan hasil usability dari administrator. Selanjutnya akan

dilakukan perhitungan dari skor customer dan hasil usability websie. Tabel yang

merupakan hasil skor dari 6 customer.

Tabel 4. 30. Skor Penilaian System Usability Scale (SUS) Customer

No Pertanyaan Scor SUS Customer

C1 C2 C3 C4 C5 C6
 112

1 Saya sepertinya akan 4 5 4 5 5 5

sering menggunakan

aplikasi ini

2 Saya merasa aplikasi ini 1 2 2 1 2 2

terlalu rumit

3 Saya pikir aplikasi ini 4 5 5 5 5 4

mudah digunakan

4 Saya sepertinya 2 2 1 1 1 2

membutuhkan bantuan

teknisi agar dapat

menggunakan aplikasi ini

dengan lacar

5 Saya merasa fitur-fitur 5 5 5 5 5 5

aplikasi ini berjalan

dengan semestinya

6 Saya merasa ada banyak 2 1 1 2 2 1

ketidak konsistenan dalam

aplikasi ini

7 Saya merasa orang lain 4 4 4 5 5 4

akan memahami cara

menggunakan aplikasi ini

dengan cepat

8 Saya merasa aplikasi ini 2 2 2 1 1 2

membingungkan
 113

9 Saya merasa tidak ada 4 5 5 5 5 4

hambatan dalam

menggunakan aplikasi ini

10 Saya perlu membiasakan 1 2 2 1 1 2

diri terlebih dahulu

sebelum menggunakan

aplikasi ini

Total 29 33 31 31 32 31

Setelah mendapatkan penilaian SUS dari enam customers, langkah

selanjutnya adalah melakukan perhitungan untuk mendapatkan skor SUS akhir.

Berikut adalah hasil perhitungan skor SUS dari semua customers:

- Hasil nilai SUS customer 1: 29 x 2,5 = 72,5

- Hasil nilai SUS customer 2: 33 x 2,5 = 82,5

- Hasil nilai SUS customer 3: 31 x 2,5 = 77,5

- Hasil nilai SUS customer 4: 31 x 2,5 = 77,5

- Hasil nilai SUS customer 5: 32 x 2,5 = 80

- Hasil nilai SUS customer 6: 31 x 2,5 = 77,5

Kemudian, untuk mendapatkan nilai akhir, semua skor yang diperoleh

akan dijumlahkan dari seluruh responden dan kemudian dibagi dengan jumlah

partisipan. Berikut adalah perhitungan nilai akhir dari System Usability Scale

(SUS) oleh customer:

Hasil Akhir SUS: 467,5/6 = 77,9

 114

Dari perhitungan skor SUS yang diperoleh dari pelanggan, dengan total

skor sebesar 77,9, yang termasuk dalam kategori acceptability yang tinggi, serta

mendapatkan peringkat dalam Grade Scale C yang menandakan bahwa telah

memenuhi kebutuhan, dan mendapatkan penilaian adjective rating dengan hasil

yang sangat baik. Oleh karena itu, dapat disimpulkan bahwa situs web penjualan

Meulawi Kopi memberikan tingkat kepuasan yang tinggi dan memuaskan bagi

customer. Tabel di bawah ini merinci skor yang diperoleh oleh pelanggan pada

situs web penjualan Meulawi Kopi.

Tabel 4. 31. Hasil Usability Aplikasi dengan SUS Customer

Partisipan SUS score category

Acceptability Grade Scale Adjective Ratings

Ranges

Customer 1 Acceptable (High) C Excellent

Customer 2 Acceptable (High) B Excellent

Customer 3 Acceptable (High) C Excellent

Customer 4 Acceptable (High) C Excellent

Customer 5 Acceptable (High) C Excellent

Customer 6 Acceptable (High) B Excellent

Sekor Akhir Acceptable (High) C Excellent

Dari hasil pengujian dengan menggunakan System Usability Scale (SUS),

ditemukan bahwa baik administrator dengan skor dan pelanggan dengan skor

77.9, menyimpulkan bahwa tampilan antarmuka (UI/UX) dari situs web penjualan

Meulawi Kopi mendapat tingkat kepuasan yang tinggi dan dapat digunakan
 115

dengan baik oleh pengguna. Hasil ini melebihi nilai rata-rata minimal SUS

sebesar 68, menunjukkan tingkat penerimaan yang tinggi dengan penilaian kata

"Baik" dan peringkat dalam Grade Scale C (Lewis & Sauro, 2009).
 BAB V
PENUTUP

5.1 Kesimpulan

Berdasarkan hasil pembahasan mengenai perancangan UI/UX design

penjualan kopi menggunakan metode Design Thinking berbasis Web dapat di

ambil kesimpulan nya sebagai berikut:

1. Penerapan metode Design Thinking dalam pengembangan desain

antarmuka website dengan fitur-fitur khusus untuk Administrator dan

Customer serta fitur umum, merupakan pendekatan yang responsif

terhadap kebutuhan pengguna. Proses yang melibatkan pemahaman

mendalam, ide-ide kreatif, prototyping, pengujian, dan iterasi

memungkinkan untuk menciptakan desain yang intuitif, efisien, dan sesuai

dengan ekspektasi pengguna. Dengan mengikuti langkah-langkah metode

Design Thinking, website Meulawi Kopi yang dihasilkan memiliki potensi

untuk memberikan pengalaman yang optimal dan relevan bagi setiap peran

yang terlibat, memastikan bahwa inovasi yang dihasilkan benar-benar

memenuhi kebutuhan dan harapan pengguna.

2. Skor akhir dari System Usability Scale (SUS) digunakan untuk

mengevaluasi tingkat kepuasan pengguna terhadap website penjualan

Meulawi Kopi dari perspektif customer. Dengan menghitung kembali

seluruh skor yang diperoleh dari responden dan menjumlahkannya,

diperoleh nilai akhir SUS sebesar 80, yang menunjukkan tingkat

acceptability yang tinggi. Hasil perhitungan ini menempatkan website

dalam kategori grade C, yang mengindikasikan bahwa website ini telah

115
 117

memenuhi kebutuhan pengguna dengan baik. Adjective ratings juga

menghasilkan penilaian "excellent", yang menunjukkan bahwa

pengalaman pengguna pada website ini sangat baik.

5.2 Saran

1. Dalam rangka memaksimalkan potensi website Meulawi Kopi, disarankan

untuk terus mengintegrasikan pendekatan metode Design Thinking dalam

setiap tahap pengembangan. Langkah-langkah ini mencakup

memperdalam pemahaman tentang kebutuhan pengguna, merangsang ide-

ide kreatif yang inovatif, serta melanjutkan proses prototyping, pengujian,

dan iterasi untuk memastikan desain antarmuka yang intuitif dan efisien.

Selain itu, kolaborasi aktif dengan Administrator dan Customer dapat

membantu memahami perubahan atau peningkatan yang perlu dilakukan

agar website tetap relevan dan memenuhi harapan pengguna.

2. Dengan skor akhir SUS yang mencerminkan tingkat acceptability yang

tinggi, langkah selanjutnya adalah melakukan analisis lebih mendalam

terhadap feedback dan evaluasi dari responden. Saran dari pengguna dapat

digunakan sebagai dasar untuk perbaikan yang lebih spesifik. Misalnya,

menganalisis area-area tertentu di dalam website yang membutuhkan

perhatian lebih, memperbaiki alur proses pemesanan produk agar lebih

intuitif, atau meningkatkan kejelasan informasi pada halaman yang

mungkin masih ambigu. Melalui pemahaman yang lebih mendalam

terhadap preferensi dan masukan pengguna, website dapat terus diperbaiki

untuk memberikan pengalaman yang semakin baik dan sesuai dengan

ekspektasi mereka.
 118

DAFTAR PUSTAKA

A. Ibrahim, N.,, & Ambarita, A. (2018). Sistem Informasi Pengaduan Pelanggan

Air Berbasis Website Pada Pdam Kota Ternate. IJIS - Indonesian Journal On

Information System, 3(1), 10. https://doi.org/10.36549/ijis.v3i1.37

Agus Muhyidin, M., Sulhan, M. A., & Sevtiana, A. (2020). PERANCANGAN

UI/UX APLIKASI MY CIC LAYANAN INFORMASI AKADEMIK

MAHASISWA MENGGUNAKAN APLIKASI FIGMA (Vol. 10, Issue 2).

Aryata, I. M., Marendra, I. G., & Afgani, I. (2023). The Training of Design

Thinking Process in New Product Development Pelatihan Design Thinking

Process dalam Pengembangan Produk. 2(6), 443–454.

Cahyono, E. A., Sutomo, & Harsono, A. (2019). Literatur Review: Panduan

Penulisan dan Penyusunan. Jurnal Keperawatan, 12.

Fahdia, M. R., Kurniawati, I., Amsury, F., Heriyanto, & Saputra, I. (2022).

Pelatihan Digital Marketing Untuk Meningkatkan Penjualan Bagi UMKM

Tajur Halang Makmur. Abdiformatika: Jurnal Pengabdian Masyarakat

Informatika, 2(1), 34–39. https://doi.org/10.25008/abdiformatika.v2i1.147

Hartawan, M. S. (2022). Penerapan User Centered Design (Ucd) Pada Wireframe

Desain User Interface Dan User Experience Aplikasi Sinopsis Film. Jeis:
 119

Jurnal Elektro Dan Informatika Swadharma, 2(1), 43–47.

https://doi.org/10.56486/jeis.vol2no1.161

Hidayat, A., Lesmana, S., & Latifah, Z. (2022). Peran Umkm (Usaha, Mikro,

Kecil, Menengah) Dalam Pembangunan Ekonomi Nasional. Jurnal Inovasi

Penelitian, 3(6), 6707–6714.

Idrus, R., Munthakhabah, C. S., & Hatta, A. Q. (2023). Sistem Informasi

Pengarsipan Surat Masuk Dan Surat Keluar Berbasis Web Pada Fakultas

Ekonomi Universitas Sulawesi Barat. Jurnal Ilmiah Ilmu Komputer, 9(1),

55–66. http://ejournal.fikom-unasman.ac.id

Irfani, M. H., & Sartika, D. (2023). JURNAL ILMIAH INFORMATIKA

GLOBAL Analisis Kepuasan Learning Management System Universitas

XYZ Menggunakan Metode System Usability Scale dan K-Means. Jurnal

Ilmiah Informatika Global, 14(1).

Karimah, K., Muhtadi, R., & Kamali, K. (2021). Strategi Penanggulangan

Pengangguran Melalui Peran Usaha Kecil Menengah (Ukm) Genting. Ar-

Ribhu : Jurnal Manajemen Dan Keuangan Syariah, 2(1), 107–131.

https://doi.org/10.55210/arribhu.v2i1.550

Kusbandono, D., & Rosyad, S. (2019). Upaya Pengembangan Usaha Kecil Dan

Menengah (Ukm) Dengan Memanfaatkan E-Commerce Untuk

 120

Meningkatkan Minat Pembelian Konsumen Terhadap Penjualan Bibit Ikan

Di Desa Plosobuden Kec. Deket. E-Prosiding SNasTekS, 1(1), 381–390.

Razi, A. A., Mutiaz, I. R., & Setiawan, P. (2018). Penerapan Metode Design

Thinking Pada Model Perancangan Ui/Ux Aplikasi Penanganan Laporan

Kehilangan Dan Temuan Barang Tercecer. Desain Komunikasi Visual,

Manajemen Desain Dan Periklanan (Demandia), 3(02), 219.

https://doi.org/10.25124/demandia.v3i02.1549

Rohimah, S. O., Kusuma, W. A., & Husna, R. (2021). Penggalian Karakteristik

Pengguna Pada Fase Elisitasi Perangkat Lunak Menggunakan User Persona.

SINTECH (Science and Information Technology) Journal, 4(1), 22–28.

https://doi.org/10.31598/sintechjournal.v4i1.572

Segara, A. (2019). Penerapan Pola Tata Letak (Layout Pattern) pada -------45-

Article Text-169-1-10-20190204. Jurnal Magenta, STMK Trisakti, 3(1),

452–464.

Soedewi, S., Mustikawan, A., & Swasty, W. (n.d.). Penerapan Metode Design

Thinking Pada Perancangan Website UMKM Kirihuci.

Wiryawan, M. B. (2011). User Experience (Ux) sebagai Bagian dari Pemikiran

Desain dalam Pendidikan Tinggi Desain Komunikasi Visual. Humaniora,

2(2), 1158. https://doi.org/10.21512/humaniora.v2i2.3166

 121

Zakiya Maulidia, Z., & Andrian, R. (2023). Perancangan Website Majalengka

Saber Hoaks dalam Mendukung Proses Verifikasi Informasi dengan

Menggunakan Metode Design Thinking The Design of Majalengka Saber

Hoaks Website in Supporting the Information Verification Process Using

Design Thinking Method. Jurnal Teknologi Dan Informasi, 13, 17–28.

https://doi.org/10.34010/jati.v13i1