AITI: Jurnal Teknologi Informasi, Volume 19 No.

1 Februari 2022, 120-136

ISSN 1693-8348 E-ISSN 2615-7128

Perancangan UI/UX Purwarupa Aplikasi Penentu Kualitas Benih

Bunga Berbasis Mobile Menggunakan Metode Design Thinking
(Studi Kasus PT Selektani)

Danang Tri Widiatmoko 1), Birmanti Setya Utami 2)

1,2)
Program Studi Desain Komunikasi Visual, Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Jl. O. Notohamidjojo, Salatiga 50711, Indonesia
Email : danang.widiatmoko@gmail.com 1), birmanti@uksw.edu 2)

Riwayat artikel:
Received: 07-03-2022 Revised: 18-04-2022 Accepted: 21-04-2022

Abstract
Due to the current COVID-19 pandemic situation, PT Selektani Induk Usaha, an
agricultural enterprise exporting quality flower seeds, has switched its conventional data
recording to a digital method with its Android-based mobile application called Penentu
Kualitas Benih (PKB). The challenge is that not all its employees are equally skillful in
operating mobile applications. The design of the application prototype uses Design
Thinking method, involving five stages: Empathize, Define, Ideate, Prototype and Testing.
The method is used to examine the employees’ user experience to create an easy-to-operate
user interface of PKB. Usability testing was done on the prototype using Single Ease
Question (SEQ) with a 7-level Likert scale. It involves five components: learnability,
efficiency, memorability, errors, and satisfaction. While an effective UI/UX design results
in at least 5.5 out of 7 score, the prototype test results in 6.6 score, which means that the
design of the prototype is effective.
Keywords: mobile application, design thinking, prototype, UI/UX.
Abstrak
PT Selektani Induk Usaha adalah sebuah badan usaha bidang pertanian dengan hasil
produk benih bunga kualitas ekspor. Sebagai akibat dari pandemi Covid-19 yang masih
berlangsung, perusahaan mengubah cara pencatatan data konvensional menjadi digital
dengan membangun aplikasi bergerak berbasis Android bernama Penentuan Kualitas
Benih (PKB). Kendala yang dihadapi oleh Selektani adalah tidak semua karyawan
memiliki kecakapan yang sama dalam pengoperasian aplikasi mobile. Perancangan
purwarupa aplikasi menggunakan metode Design Thinking, yang mencakup tahap
Empathize, Define, Ideate, Prototype dan Testing. Metode design thinking digunakan untuk
meneliti user experience karyawan agar menciptakan user interface aplikasi PKB yang
mudah dioperasikan. Purwarupa diuji secara usability testing dengan menyuguhkan single
ease question (SEQ) dengan skala Likert 1 sampai 7. Pengujian usability berdasarkan lima
komponen yaitu learnability, efficiency, memorability, errors dan satisfaction. Sebuah
desain UI/UX dikatakan berhasil jika skor SEQ nya berada minimal pada 5.5 dari 7,
AITI: Jurnal Teknologi Informasi
Volume 19 No. 1 Februari 2022, 120-136 121

sementara pengujian purwarupa menunjukkan hasil SEQ Benchmark sebesar 6.6, dengan
demikian perancangan purwarupa aplikasi ini dapat dikatakan efektif.
Kata kunci: transformasi digital, perancangan aplikasi, design thinking, ui/ux, purwarupa

Pendahuluan
Peran teknologi informasi (TIK) dalam pengelolaan pertanian di Indonesia
memiliki fungsi yang sangat penting [1]. Beberapa penerapan TIK dalam bidang
pertanian tersebut diantaranya adalah untuk merancang skenario pertanian,
membuat proses pekerjaan menjadi lebih cepat dan terstruktur, serta kemudahan
distribusi dan efisiensi dalam manajerial [2]. Selain itu, fungsi lain yang lebih
penting adalah sebagai pendukung pengambilan keputusan tanam [3].
PT Selektani Induk Usaha (Selektani) adalah sebuah perusahaan yang
bergerak dalam bidang pertanian yang menawarkan benih tanaman bunga kualitas
ekspor. Berlokasi di Kecamatan Ngablak, Kabupaten Magelang. Berdasarkan
wawancara yang dilakukan kepada pengelola Selektani pada 22 Juli 2021, salah
satu komoditas unggulannya yakni biji bunga Viola dengan kualitas unggul yang
telah melalui tahap prosedur seleksi dengan kriteria meliputi tinggi tanaman, jumlah
daun, jumlah bunga, dan produktifitas atau berat bunga. Data kriteria tersebut
kemudian diolah untuk menghasilkan nilai yang selanjutnya disebut ranking,
fungsinya untuk menentukan kelayakan ekspor benih tanaman.
Saat ini proses pencatatan data masih dilakukan secara manual dengan
menggunakan hardcopy. Penggunaan hardcopy berisiko mudah hilang, tidak
akurat, rusak dan/atau tidak tersimpan secara teratur, sehingga mempengaruhi
produktifitas perusahaan. Kondisi pandemi Covid-19 yang masih berlangsung juga
menyebabkan pengiriman hardcopy terhambat karena pembatasan interaksi sosial.
Hal ini mendorong Selektani memanfaatkan TIK untuk melakukan transformasi
digital dengan membangun aplikasi yang dapat memudahkan proses penentuan
kualitas benih sebagai pilot project bernama Penentuan Kualitas Benih (PKB) yang
akan digunakan oleh karyawan farmhouse.
Adanya aplikasi ini diharapkan dapat mempermudah pekerja memantau
pertumbuhan benih serta pengelolaan dan pengawasan tugas harian karyawan
secara digital. Namun kendala lain yang dihadapi adalah tidak semua karyawan
memiliki kecakapan yang sama dalam menjalankan aplikasi mobile. Hal ini dapat
dianggap sebagai ancaman bagi produktifitas perusahaan jika aplikasi ini sudah
dibuat namun karyawan masih belum cakap dalam pengoperasiannya. Perusahaan
akan membuang waktu untuk training ulang karyawan. Maka dari itu sebelum
aplikasi ini dibentuk, UX research sangat diperlukan.
Sebagai langkah awal untuk mendukung pengembangan aplikasi ini, maka
perlu dirancang desain antarmuka aplikasi yang disesuaikan dengan pengalaman
penggunanya. Syarat minimal sebuah aplikasi gawai setidaknya memerlukan tiga
122 Perancangan UI/UX Purwarupa Aplikasi Penentu Kualitas...(Widiatmoko, Utami)

hal, yaitu user interface (UI), user experience (UX), dan desain komunikasi visual
(DKV) [4]. UX adalah seluruh aspek untuk meningkatkan kepuasan pengguna
dalam interaksi terhadap produk. Sementara UI berperan sebagai wajah utama
aplikasi yang berinteraksi langsung dengan pengguna untuk memaksimalkan
pengalaman pengguna [5], maka dari itu UI berkaitan erat dengan interaksi manusia
dan komputer. Sistem UI/UX yang ideal akan memudahkan pengguna dalam
pengoperasian aplikasi [6].
Perancangan UI/UX aplikasi ini menggunakan metode Design Thinking,
yang merupakan konsep pendekatan dalam pemecahan masalah yang terdiri dari
lima tahapan; empathize, define, ideate, prototype dan test. Konsep ini pertama kali
dikenalkan oleh David M. Kelley untuk melakukan penyelesaian masalah dalam
dunia bisnis pada tahun 1991. Pada dasarnya pendekatan Design Thinking
merupakan upaya mencari ide dan solusi inovatif untuk menciptakan produk yang
dapat digunakan secara efektif. Design Thinking bersifat user-centered, sehingga
hal yang paling vital dalam metode ini adalah peran pengguna [7].

Kajian Pustaka
Penelitian yang dilakukan oleh Aulia Citra Gunasiwi dengan judul
“Perancangan User Interface dan User Experience Aplikasi KMS Balita Berbasis
Android.” menghasilkan sebuah produk berupa purwarupa aplikasi mobile berbasis
Android yang dirancang dengan menggunakan metode design thinking. Aplikasi
berfungsi sebagai jurnal informasi status gizi, dan tumbuh kembang balita bagi
orang tua generasi milenial serta informasi vaksin. Penggunaan metode design
thinking menghasilkan purwarupa aplikasi yang mudah dijalankan, menampilkan
informasi dengan jelas. Hasil usability test menunjukan hasil yang positif, informasi
yang disajikan dapat mudah diterima oleh pengguna yang memakai kacamata [8].
Terdapat penelitian dengan judul “Penerapan Metode Design Thinking pada
Model Perancangan UI/UX Aplikasi Penanganan Laporan Kehilangan dan Temuan
Barang Tercecer” oleh Aria Ar Razi dkk. Penelitian ini memanfaatkan metode
design thinking dalam merancang model UI/UX aplikasi “KembaliIn” sehingga
menghasilkan produk model purwarupa yang mudah diakses karena menggunakan
fitur aplikasi yang kerap digunakan user seperti peta dan GPS. Aplikasi
“KembaliIn” bertujuan untuk membantu orang menemukan benda hilang untuk
dikembalikan kepada pemilik yang sah. Target pengguna aplikasi ini adalah
kalangan umum pada usia 19-34 tahun. Usability test menggunakan kuisioner dan
pengujian aplikasi langsung, hasil yang diperoleh menunjukan bahwa aplikasi
mudah dipahami dan sangat bermanfaat karena sesuai kebutuhan pengguna [9].
Penelitian selanjutnya berjudul “Perancangan Aplikasi Pemilihan Kepala
Desa Dengan Metode UX Design Thinking (Studi Kasus: Kampung Kuripan)”
karya Feri Fariyanto, Suaidah Suaidah dan Faruk Ulum. Penelitian ini
AITI: Jurnal Teknologi Informasi
Volume 19 No. 1 Februari 2022, 120-136 123

menghasilkan produk aplikasi sistem voting yang bangun untuk mejawab

kebutuhan sistem voting jarak jauh. Pengujian aplikasi menggunakan metode
System Usability Scale (SUS) mendapatkan hasil skor 77.00 yang dapat dikatakan
baik. Penelitian tersebut mampu memberikan pengalaman yang positif bagi target
pengguna [10].
Melalui penjabaran ketiga penelitian terdahulu, maka penggunaan metode
Design Thinking mampu menciptakan aplikasi yang secara usability dianggap baik
dan memiliki hasil positif karena riset yang mendalam pada masing-masing
tahapannya. Keberhasilan UX pada aplikasi dapat diukur pada skor usability test.
Metode Penelitian
Metode Design Thinking adalah metode penyelesaian masalah yang bersifat
non-linear dan iteratif [7]. Setiap fase dapat mengalami perulangan terhadap
sekelompok instruksi tanpa adanya batasan hingga pada kondisi tertentu.
Perulangan akan berhenti jika syarat sudah terpenuhi [11]. Mengacu pada metode
Design Thinking maka metode penelitian yang akan dilakukan terdiri dari lima
tahapan, yaitu Empathize, Define, Ideate, Prototype, dan Test yang dapat dilihat
pada Gambar 1.

Gambar 1 Skema Lima Tahap Design Thinking

Tahap pertama, Empathize. Proses ini adalah pusat dari perancangan yang
berfokus pada pengguna (user-centric) dan kerap dikaitkan dengan pendekatan
human centered design (HCD) [12]. Dalam tahap ini designer melakukan observasi,
wawancara, dan kajian audience guna mendapatkan pemahaman mengenai aktifitas
dan karakteristik karyawan, serta identifikasi masalah yang dialami oleh
perusahaan. Data yang diperoleh kemudian dianalisa untuk membangun persona.
Persona adalah karakter fiksi yang karakteristiknya mewakili kebutuhan
sekumpulan user yang lebih besar [13]. Peran persona adalah untuk memudahkan
desainer memberikan solusi yang dapat diterima oleh seluruh demografi karyawan
dalam satu perusahaan. Hasil akhir dari tahap empathize adalah merancang peta
empati dan persona.
124 Perancangan UI/UX Purwarupa Aplikasi Penentu Kualitas...(Widiatmoko, Utami)

Tahap Define merupakan tahap perumusan masalah. Desainer membuat

daftar masalah yang dihadapi pengguna untuk digunakan sebagai point of view
dalam merancang produk aplikasi. Kemudian, desainer membuat daftar kebutuhan
solusi bagi pengguna berdasarkan fenomena masalah yang sudah ditemukan. Setiap
masalah yang timbul akan dicatat pada bagian Pain Points, sedangkan solusi akan
dicatat pada bagian How-Might We/Gain [14].
Ideate adalah proses membangun ide dan gagasan sebagai landasan dalam
perancangan purwarupa yang akan dibuat. Proses ini merupakan transisi dari
masalah yang telah dirumuskan menuju ke penyelesaian masalah [9]. Pencatatan
ide menggunakan metode Affinity Diagram. Affinity Diagram merupakan alat bisnis
yang digunakan untuk menghimpun ide dalam sesi brainstorming, dengan cara
mengelompokan dan mengurutkan data berdasarkan hubungan dan korelasinya
yang kemudian ditinjau dan dianalisis. Istilah Affinity Diagram diperkenalkan oleh
Jiro Kawakita pada tahun 1960an, yang pada awalnya dikenal sebagai Metode KJ
[15]. Tahap terakhir dari proses Ideate adalah perancangan sketsa wireframe kasar
aplikasi gawai ke dalam metode Crazy 8’s [14].
Proses selanjutnya adalah Prototype. Merupakan proses implementasi ide
menjadi sebuah model aplikasi yang dapat diuji coba untuk menghindari kesalahan-
kesalahan yang terjadi sebelum diproduksi secara massal. Proses Prototype
disesuaikan dengan kerangka aplikasi yang dirancang pada proses Ideate dan
mendesain jaringan interaksinya berdasarkan user flow.
Terakhir adalah tahap Test, merupakan tahap uji coba aplikasi secara
langsung kepada target pengguna, programmer, dan pakar UI/UX. Pengujian
kepada target menggunakan metode Usability Test dengan menyuguhkan Single
Ease Question (SEQ) untuk mengetahui hasil UX usability, yang merupakan salah
satu metode pengujian yang digunakan untuk mengukur kemudahan yang dirasakan
pengguna setelah menyelesaikan tugas yang diberikan [16].
Hasil dan Pembahasan
Tahapan penelitian dilakukan sesuai dengan prosedur langkah pada metode
Design Thinking yang dimulai dengan tahap empathize. Tahap empathize
mencakup kegiatan observasi dan wawancara kepada calon pengguna aplikasi
sehingga mendapatkan wawasan pengguna sebagai fokus dari penelitian aplikasi
PKB yang bersifat user centric. Observasi dilakukan pada lingkungan kerja
Selektani, sementara wawancara dilakukan kepada kepala Cabang Selektani,
developer aplikasi PKB dan beberapa farmer. Hasil wawancara dan observasi yang
didapat adalah alur aktifitas pekerjaan karyawan Selektani, terdapat 20 orang yang
akan menjadi pengguna dari aplikasi ini yaitu petugas farming. Data selanjutnya
adalah calon pengguna berasal dari usia yang beragam pada rentang usia 21-44
tahun, namun tinggal pada wilayah dan area yang sama. Karakteristik target
pengguna yang memiliki kesamaan latar belakang wilayah tempat tinggal dan
AITI: Jurnal Teknologi Informasi
Volume 19 No. 1 Februari 2022, 120-136 125

terikat pada sebuah budaya yang serupa. Memiliki tenggang rasa yang kuat. Secara
umum kesadaran teknologi pekerja pada posisi farmer dapat dikatakan baik namun
tidak cukup mahir. Seluruh pekerja menggunakan telepon pintar, memiliki sosial
media, menggunakan mesin pencari untuk mencari informasi, selama jam istirahat
gemar memutar lagu di situs layanan berbagi video atau pemutar musik, serta
menggunakan fitur kamera. Saat bertugas, farmer wajib menggunakan sarung
tangan, dan seragam kerja. Kegiatan pendataan tanaman sering dilakukan diluar
ruangan (outdoor) selama jam kerja.
Jenjang Pendidikan karyawan akan mempengaruhi kepemahaman
karyawan terhadap teknologi. Jenjang pendidikan calon pengguna berada pada
tingkat yang beragam yang dijelaskan pada Tabel 1.
Tabel 1 Jenjang Pendidikan Selektani Farm Ngablak
Jenjang Pendidikan Jumlah (orang) Jabatan
SMP 5 Farmer
SMA 15 Farmer
D3 1 Pengawas/Leader
S1 1 Pimpinan Cabang

Hasil kegiatan observasi, wawancara, dan kajian audience memperoleh data

utama dalam penelitian yaitu; pertama, pencatatan data bunga untuk ranking masih
menggunakan kertas lembatang sebar. Pengolahan data menjadi ranking masih
dilakukan secara manual dengan ditatat pada kertas dengan risiko mudah luput dari
pengerjaan serta tidak hemat waktu. Kedua, karyawan pada posisi leader tidak
dapat mengawasi tugas harian petugas farming secara realtime sehingga pelaporan
pekerjaan tidak terekam dengan rinci. Ketiga, pengiriman data ranking ke kantor
pusat masih dikerjakan secara manual dan tidak realtime. Keempat, aplikasi PKB
ini merupakan pilot project yang diadakan oleh Selektani Ngablak sebagai akibat
dari pandemi Covid-19 untuk mematuhi jarak sosial. User task flow sudah tersedia
namun belum ada tatap muka yang sesuai untuk perangkat Android. Terakhir,
farmer sebagai calon pengguna berharap aplikasi yang dirancang sesuai
pengalaman aktifitas pekerjaan mereka, serta memiliki tampilan yang sederhana
dan mudah dioperasikan oleh seluruh karyawan, sehingga dapat mempercepat lalu
lintas informasi.
Dari hasil analisis wawancara terhadap karyawan Selektani yang menjadi
calon user, selanjutnya dilakukan penciptakaan karakter fiksi yang disebut persona
dengan mengambil benang merah masalah, menggabungkan karakteristik dan
kriteria user. Hasil analisis narasumber menciptakan seorang persona berjenis
kelamin laki-laki, berusia 28 tahun bernama Elya Widiyanto. Figur persona
kemudian digambarkan ke dalam Peta Empati, serta merangkum masalah yang user
rasakan secara pribadi, masalah didengar dari orang lain, masalah yang dilihat
secara priadi, masalah yang dilakukan dan dikatakan secara pribadi. Peta ini akan
126 Perancangan UI/UX Purwarupa Aplikasi Penentu Kualitas...(Widiatmoko, Utami)

mempermudah memahami keinginan dan kebutuhan user dengan mencatat masalah

yang dihadapi (Pain) serta resolusi yang diiginkan (Gain). [17], yang ditunjukan
pada Gambar 2:

Gambar 2 Peta Empati dan Persona

Dalam tahap define, seluruh masalah yang didapat kemudian dirumuskan

dan dijabarkan ke dalam bagian Pain Points sedangkan How-Might We/Gain untuk
menuliskan resolusinya. Pain Points disusun dan dikembangkan dari Peta Empati.
Penjelasan Pain dan How-Might We/Gain tertera pada Tabel 2.
Tabel 2 Tabel Tahap Define
Pain Points How-Might We/Gain
• Pengolahan dan pengiriman data yang • Menginginkan adanya sistem yang
lama membantu mempercepat pekerjaan
• Dokumen kertas mudah rusak dan pencatatan
hilang • Membantu user untuk menampilkan
• Dokumen kertas mudah robek dan tugas harian
basah • Aplikasi yang dibuat memiliki
• Butuh dua kali kerja, ditulis di kertas tampilan yang ringkas namun
lalu input ke sistem interaktif
• Tugas harian dicatat manual untuk • Sistem yang diinginkan harus praktis
diingat dan mudah dipakai oleh seluruh
• Durasi pencatatan lama. lapisan karyawan
• Tulisan tangan kurang rapi
• Kertas dokumen mudah kotor

Proses ideate adalah proses mencari ide solusi yang efektif untuk
memecahkan permasalahan yang sudah dirangkum dari How-Might We. Ide-ide
tersebut kemudian dikumpulkan dan selanjutnya dikelompokan berdasarkan
kategorinya ke dalam Affinity Diagram. Hasil pengelompokan menghasilkan
AITI: Jurnal Teknologi Informasi
Volume 19 No. 1 Februari 2022, 120-136 127

beberapa klaster yaitu: Tugas Harian, Input Bunga, Security, dan Menu Profile
seperti pada Gambar 3.
Selanjutnya ide di kelompokan berdasarkan prioritas. Pengelompokan
prioritas dibagi dalam empat kategori berdasarkan kebutuhan pengguna (user
value) dan upaya untuk merealisasikannya (effort). Semakin tinggi user value dan
semakin kecil effort nya maka prioritas semakin tinggi. Sedangkan jika user value
semakin rendah namun effort nya terlalu berat, maka prioritasnya semakin rendah.
Penjelasan Prioritizing Idea dapat dilihat pada Gambar 4.

Gambar 3 Affinity Diagram Gambar 4 Proses Prioritizing Idea

Tahap terakhir adalah perancangan sketsa wireframe aplikasi ke dalam

metode Crazy 8’s. Google Design Sprint mendifinisikan metode ini sebagai langkah
efektif dengan membuat delapan ide sketsa inovatif secara cepat dalam waktu
delapan menit [18]. Delapan sketsa ini dikembangkan dari prioritas paling besar
untuk menjadi Minimum Viable Product (MVP) atau serangkaian fitur dasar yang
dianggap penting untuk fokus perhatian pengguna [19]. Sketsa dapat dijelaskan
pada Gambar 5.

Gambar 5 Proses Wireframing dengan Metode Crazy 8’s

Gambar 5 menampilkan fitur utama yang didasarkan pada tugas utama

farmer, meliputi halaman dashboard, tugas harian, detil tugas harian, histori tugas,
input ranking, input bunga, daftar bunga, daftar ranking. Agar farmer secara cepat
mengakses barcode scanning, maka penempatan fungsi pindai barcode terletak di
tengah jendela. Selanjutnya adalah tugas input score untuk proses ranking. Tugas
128 Perancangan UI/UX Purwarupa Aplikasi Penentu Kualitas...(Widiatmoko, Utami)

lain adalah input data bunga dan tugas harian. Penggunaan tombol yang berukuran
besar menjadi pertimbangan karena pengguna akan menggunakan sarung tangan
yang membuat ukuran ibu jari lebih besar saat menyentuh layar.
Tahap Prototype berfokus pada proses perwujudan desain interface dari
hasil Crazy 8’s. Proses yang dilakukan diawali dengan menyusun user task flow,
interaction flow aplikasi, wireframing, kemudian designing. Berdasarkan kebiasaan
karyawan Selektani, terdapat tiga tugas utama pada aplikasi ini, pertama Input
Bunga Baru, Input Ranking, dan Tugas Harian. Ketiga tugas tersebut digambarkan
ke dalam user task flow dijelaskan pada Gambar 6.
Tiga tugas utama pada User Task Flow kemudian dijadikan satu menjadi
kesatuan sistem sehingga terbentuk sebuah alur interaksi. Alur aplikasi PKB akan
dimulai saat membuka aplikasi yang telah terpasang pada gawai hingga pengguna
melakukan aktifitas pekerjaan. Alur interaksi dijelaskan pada Gambar 7, aplikasi
akan diawali dengan splash screen, halaman login, halaman absen, halaman
dashboard, dan halaman-halaman sesuai tugas utama.

Gambar 6 User Task Flow Gambar 7 Interaction Flow

Proses Wireframing merupakan tahap proses perancangan layout desain

dalam versi low-fidelity (Lo-fi) yang dapat membantu memberi kerangka elemen
desain, struktur dan layout interface, serta mempercepat proses validasi elemen dan
designing. Tampilan wireframe secara umum berupa gambar sketsa dengan
tampilan hitam putih. Sketsa awal dari proses Crazy 8’s kemudian digambar secara
digital yang dapat dijelaskan pada Gambar 8.

Gambar 8 Wireframe Digital Aplikasi PKB dari Tahap Crazy 8’s

AITI: Jurnal Teknologi Informasi
Volume 19 No. 1 Februari 2022, 120-136 129

Desain aplikasi harus disesuaikan dengan identitas korporasi Selektani.

Warna korporasi yang dimiliki oleh Selektani adalah Hitam dan Biru. Maka dari
itu, elemen warna pada aplikasi PKB ini didominasi dengan warna seperti pada logo
Selektani Gambar 9.

Gambar 9 Logo Selektani

Proses dalam tahap Designing dimulai dengan perancangan UI Design

System yang merupakan kumpulan komponen yang dapat digunakan berulang,
memiliki standar yang jelas dan dapat digunakan untuk merakit banyak halaman UI
yang berbeda sekaligus [20]. Design System aplikasi PKB dapat dijelaskan pada
Gambar 10.

Gambar 10 Design System Aplikasi PKB Selektani

Pada design system Gambar 10 memaparkan beberapa elemen visual yang

digunakan pada desain ui aplikasi PKB. Elemen dalam design system terdiri dari
namun tidak terbatas pada warna primer dan sekunder, desain input form, ukuran
teks, desain tombol, tombol perintah, penggunaan ikon dan logo. Penentuan elemen
ini disesuaikan dengan perintah dan fungsi yang muncul selama proses user flow
dilakukan.
Untuk memetakan alur calon pengguna berinteraksi dengan aplikasi PKB
maka perlu dibuat User Experience Flow (UX Flow). UX Flow merupakan
penggambaran langkah ideal yang dilakukan oleh pengguna suatu produk digital
untuk menyelesaikan tugas tertentu serta memetakan interaksinya [21]. UX Flow
juga berfungsi sebagai acuan dalam merancang dan mendesain fitur yang ada dalam
aplikasi PKB. UX flow aplikasi PKB dijelaskan pada Gambar 11.
130 Perancangan UI/UX Purwarupa Aplikasi Penentu Kualitas...(Widiatmoko, Utami)

Gambar 11 UX flow Aplikasi PKB Selektani

Tahap selanjutnya adalah merakit desan wireframe dengan elemen pada

design system untuk kemudian disusun model purwarupanya menggunakan aplikasi
Figma, tahap ini adalah proses membangun jaringan interaksi antar UI yang
disesuaikan dengan UX Flow yang telah dirancang.
Proses desain interaksi dimulai dari kuadran Yes, Do It Now sebagai
prioritas utama. Proses aktifitas input bunga baru dimulai dengan mengetuk menu
Tambah Data Bunga pada dashboard, kemudian berlanjut ke halaman Input Bunga
Baru. User diperintahkan untuk mengisi data lokasi farm, tinggi bunga, jumlah
daun, jumlah bunga dan produktifitkas. Sementara tanggal hari ini akan terinput
otomatis oleh sistem. Setelah menginputkan data bunga, user diperintahkan untuk
mengetuk tombol Generate ID Bunga. Sistem akan otomatis menampilkan ID
bunga, jika data sesuai maka user dapat langsung mengetuk tombol simpan yang
selanjutnya akan menampilkan halaman Daftar bunga. User dapat mengetuk panah
kembali untuk kembali ke dashboard. Penjelasan alur Tambah Data Bunga dapat
dijelaskan pada Gambar 12.

Gambar 12 Alur Interaksi Tambah Data Bunga

Untuk melakukan proses ranking bunga, user dapat mengetuk tombol

pemindai kode batang berwarna kuning yang tepat berada ditenga jendela tampilan
dashboard. Kemudian user akan masuk pada halaman Ranking Bunga, untuk
melakukan pemindaian, user dapat mengetuk pada perintah “tap untuk memindai”
yang terletak pada kolom ID Bunga. Secara langsung akan muncul jendela dialog
AITI: Jurnal Teknologi Informasi
Volume 19 No. 1 Februari 2022, 120-136 131

informasi yang bertuliskan pesan “Pastikan pemindai sejajar dengan barcode”. Saat
perangkat berhasil mendeteksi barcode maka ID Bunga akan otomatis terisi dengan
ID bunga yang tertera pada barcode, selanjutnya user dapat mengisi data bunga
pada kolom Tinggi Bunga, Jumlah Daun, Jumlah Bunga, dan Produktifitas,
kemudian dapat memulai Kalkulasi Rangking. Hasil kalkulasi akan muncul
seketika pada jendela yang sama, proses terakhir user dapat menyimpan ranking
dan kembali ke dashboard. Alur proses ranking bunga dijelaskan pada Gambar 13.

Gambar 13 Alur Interaksi Ranking Bunga

Untuk mengakses Tugas Harian, pada tambilan dashboard user dapat

mengetuk pada menu Tugas Harian, kemudian masuk pada halaman Tugas Harian
yang menampilkan tab Tugas Harian dan Riwayat Tugas. Tugas harian yang belum
selesai terdapat indikator berwarna merah. Jika user mengetuk pada salah satu
tugas, maka akan masuk halaman Detil Tugas. Pada halaman Detil Tugas, user
dapat saling mengirimkan pesan kepada pemberi tugas. Jika tugas sudah selesai,
maka user dapat mengetuk tombol centang yang akan berubah warna hijau jika
tugas sudah selesai. Halaman Riwayat Tugas hanya menampilkan tampilan yang
bersifat read-only. Alur akses Tugas harian dapat dijelaskan pada Gambar 14.

Gambar 14 Alur Interaksi Akses Tugas Harian

Selanjutnya mengembangkan desain interaksi pada kuadran Do next sebagai

prioritas kedua. Aplikasi dimulai dengan proses login terlebih dahulu, kemudian
132 Perancangan UI/UX Purwarupa Aplikasi Penentu Kualitas...(Widiatmoko, Utami)

user diwajibkan untuk melakukan absensi dengan swafoto. Setelah berhasil maka
akan masuk ke jendela utama yaitu halaman Dashboard. Alur proses login dan
absensi dijelaskan pada Gambar 15.

Gambar 15 Alur Interasi login dan absensi

Jika seluruh tugas karyawan selesai dikerjakan, maka karyawan diharuskan

untuk mengirimkan laporan tugas harian. Alur dimulai dengan user menu batang
pada sisi sebalah kiri atas jendela dashboard, dilanjutkan dengan mengetuk menu
Kirim Laporan Tugas yang akan mengarahkan user ke halaman Daftar Tugas
Harian. User dapat melakukan pengiriman tugas dengan mengetuk tombol Kirim
Laporan, dan sektika daftar laporan akan kosong. Alur proses kirim laporan harian
dapat dijelaskan pada Gambar 16.

Gambar 16 Alur Interaksi Kirim Laporan Tugas

Purwarupa aplikasi juga menyertakan menu Riwayat Absensi. Untuk

mengakses halaman ini, user dapat mengetuk menu batang pada sebelah kiri atas,
lalu tap pada menu Riwayat Absensi. Seketika akan muncul halaman Riwayat
Absensi, halaman ini bersifat read-only karena hanya mencatat aktifitas absen
karyawan saja. Penjelasan alur interaksi Riwayat Absensi dapat dilihat pada
Gambar 17.

Gambar 17 Alur Interaksi Riwayat Absensi

AITI: Jurnal Teknologi Informasi
Volume 19 No. 1 Februari 2022, 120-136 133

Prototype yang dibuat kemudian diuji coba langsung kepada tartget

pengguna untuk mengakses purwarupa. Proses diawali dengan menjelaskan alur
dan latarbelakang aplikasi ini dibuat. Kemudian wawancara dan survey langsung
terhadap tujuh pengguna, tujuh target diantaranya merupakan praktisi UI/UX, dosen
pada bidang Interaksi Manusia dan Komputer, programmer aplikasi PKB, dan
empat karyawan farm Selektani. Demo aplikasi menggunakan aplikasi Figma pada
prangkat laptop.
Responden pada tahap pengujian ini terbagi atas empat profesi pengguna.
Secara rinci profesi pengguna tersebut dijelaskan pada Tabel 3.
Tabel 3 Daftar Responden
Responden Nama Usia Profesi
1 Angga Widia Purwoko 35 Praktisi UI/UX
2 Sri Winarso Martias Edi 41 Dosen Teknik Informatika
3 Elya Eko Widianto 23 Programmer Aplikasi
4 Sakius Dwi 30 Farmer
5 Muhammad Subekan 21 Farmer
6 Yusak Karyadi 23 Farmer
7 Ririn Nurmalasari 25 Farmer

Pengujian menggunakan metode usability testing dengan menyuguhkan

single ease question (SEQ) dengan total 30 pertanyaan dengan input jawaban
menggunakan skala likert dengan nilai 1 hingga 7 dari pilihan sangat tidak setuju
hingga sangat setuju sekali. SEQ merupakah salah satu post task questionnaire
untuk menguji tingkat kemudahan dan kegunaan produk, serta mengukur
pemahaman pengguna terhadap sistem dengan satu pertanyaan saja [22]. Menurut
Jacob Nielson (2012), pengujian usability berdasarkan lima komponen yaitu
learnability, efficiency, memorability, errors dan satisfaction [23]. Setiap
responden diberi tugas sesuai user task flow kemudian mengisi kuisioner setelah
menyelesaikan tugas. Dari jawaban responden, maka selanjutnya dilakukan
kalkulasi hasil. Berikut adalah pemaparan hasil kalkulasi terhadap lima kategori
pertanyaan yang tersaji pada tabel 4.
Tabel 4 Kalkulasi Hasil Responden
Kategori Responden Total Rata-
No
Pertanyaan R1 R2 R3 R4 R5 R6 R7 Nilai rata
1 Learnability 6,8 5,8 6,5 6,3 7 6,9 7 46,3 6,6
2 Efficiency 6,6 6,6 6,5 6,6 7 6,3 7 46,6 6,7
3 Memorability 6,8 6,3 6,8 6,3 6,8 6 7 46 6,6
4 Error 7 7 6 7 7 6,5 7 46,5 6,6
5 Satisfaction 6,8 6,5 6,4 7 7 6,3 7 46,8 6,7
Total 33,2
Nilai Benchmark 6.6
134 Perancangan UI/UX Purwarupa Aplikasi Penentu Kualitas...(Widiatmoko, Utami)

Hasil pembagian total rata-rata dibagi 5 kategori pertanyaan memperoleh

hasil 6.6 poin. Sebuah desain UI/UX dikatakan berhasil jika skor SEQ benchmark
nya berada minimal pada poin 5.5 dari 7 [24]. Dengan demikian, SEQ Benchmark
telah melampaui batas minimal benchmark sehingga secara UX Usability hasil
perancangan dapat dikatakan berhasil dan efektif. Aplikasi juga tampil dengan baik
meski dioperasikan diluar ruangan dengan cahaya matahari cerah.
Simpulan
Kesimpulan yang didapat dari penilitan dan pengujian dapat dijabarkan
sebagai berikut :
1. Metode Design Thinking dapat mempermudah desainer dan pengembang
aplikasi dalam membangun purwarupa aplikasi sebelum aplikasi diproduksi
secara massal. Aplikasi yang baik tidak hanya diukur dari segi estetikanya saja,
namun juga secara kemudahan untuk digunakan (usability). Metode Design
Thinking akan membantu dalam mengetahui perilaku target pengguna sehingga
aplikasi yang dirancang akan lebih cepat diterima pengguna karena dirancang
sesuai dengan kebiasaannya.
2. Perancangan desain ui/ux aplikasi PKB Selektani mampu menjawab kebutuhan
pengguna untuk mengorganisir kegiatan-kegiatan pendataan bunga dan tugas
harian. Hal ini terlihat dari hasil pengujian dengan skor UX Usability sebesar
6.6 poin dari total maksimal 7 poin.
Saran untuk penelitian selanjutnya adalah membangun desain UI/UX pada
platform komputer desktop pada sisi administrator, agar kedua aplikasi baik mobile
maupun desktop dapat saling terintegrasi.
Daftar Pustaka
[1] N. Setiyawati and E. E. Widiyanto, “SISTEMASI: Jurnal Sistem Informasi Sistem
Pendukung Keputusan Penentuan Kualitas Benih Bunga Viola Menggunakan
Simple Additive Weighting.” [Online]. Available: http://sistemasi.ftik.unisi.ac.id
[2] A. B. Burhan, “Pemanfaatan Teknologi Informasi dan Komunikasi Untuk
Pengembangan Ekonomi Pertanian dan Pengentasan Kemiskinan,” 2018.
[3] D. S. Anwar and D. Rohpandi, “Sistem Pendukung Keputusan Untuk Menentukan
Lahan Tanaman Cabai Dengan Menggunakan Metode Simple Additive
Weighting,” Pontianak, Jul. 2018.
[4] J. Heskett, Toothpicks and Logos : Design in Everyday Life by John Heskett. New
York: Oxford University Press, 2002.
[5] M. N. el Ghiffary, T. D. Susanto, and A. Herdiyanti, “Analisis Komponen Desain
Layout, Warna, dan Kontrol Pada Antarmuka Pengguna Aplikasi Mobile
Berdasarkan Kemudahan Penggunaan (Studi Kasus: Aplikasi Olride),” Surabaya,
2018.
AITI: Jurnal Teknologi Informasi
Volume 19 No. 1 Februari 2022, 120-136 135

[6] Sudarmawan and D. Ariyus, Interaksi Manusia dan Komputer, vol. 1. Yogyakarta:
Penerbit ANDI, 2007.
[7] M. Soegaard and Interaction Design Foundation, “The Basics of User Experience
Design by Interaction Design Foundation,” 2020. Accessed: Jun. 06, 2020.
[Online]. Available: https://www.interaction-design.org/ebook
[8] A. C. Gunasiwi, “Perancangan Mobile App Kartu Menuju Sehat Balita,” Surakarta,
2019.
[9] A. Ar Razi, I. R. Mutiaz, and P. Setiawan, “Penerapan Metode Design Thinking
Pada Model Perancangan UI/UX Aplikasi Penanganan Laporan Kehilangan dan
Temuan Barang Tercecer,” Jurnal Desain Komunikasi Visual, vol. 03, no. 02, 2018,
[Online]. Available: http://bit.do/demandia
[10] F. Fariyanto and F. Ulum, “PERANCANGAN APLIKASI PEMILIHAN KEPALA
DESA DENGAN METODE UX DESIGN THINKING (STUDI KASUS:
KAMPUNG KURIPAN),” Jurnal Teknologi dan Sistem Informasi (JTSI), vol. 2,
no. 2, pp. 52–60, 2021, [Online]. Available:
http://jim.teknokrat.ac.id/index.php/JTSI
[11] Y. Bassil, “A Simulation Model for the Waterfall Software Development Life
Cycle,” May 2012.
[12] M. Stickdorn and J. Schneider, This is Service Design Thinking: Basics, Tools,
Cases. Consortium Book Sales & Dist, 2010. [Online]. Available:
https://books.google.co.id/books?id=o4ZPYgEACAAJ
[13] K. F. Hidayati, “Kupas Tuntas Soal User Persona dan Manfaatnya untuk Desain
Produk,” Glints, Feb. 09, 2021. https://glints.com/id/lowongan/user-persona-
adalah/#.YZWyANBByHt (accessed Nov. 18, 2021).
[14] C. Araújo, I. Santos, E. D. Canedo, and A. Araújo, “Design Thinking Versus Design
Sprint: A Comparative Study,” 2019, pp. 291–306. doi: 10.1007/978-3-030-23570-
3_22.
[15] G. C. Britz, Improving Performance Through Statistical Thinking. ASQ Quality
Press, 2000. [Online]. Available:
https://books.google.co.id/books?id=EfxUMcyGxiUC
[16] J. Sauro and J. Lewis, Quantifying the User Experience. 2012. doi: 10.1016/C2010-
0-65192-3.
[17] K. F. Hidayati, “Mengenal Empathy Map, Jalan Mudah Menuju Pemahaman
Pengguna,” Glints, Dec. 22, 2020. https://glints.com/id/lowongan/empathy-map-
adalah/#.YZWxN9BByHs (accessed Nov. 18, 2021).
[18] E. Chung, “Generate Crazy Ideas With This Design Sprint Method,” UX Planet,
Jul. 31, 2020. https://uxplanet.org/generate-crazy-ideas-with-this-design-sprint-
method-c6a36a16c3d5 (accessed Nov. 21, 2021).
[19] Quora, “What Is A Minimum Viable Product, And Why Do Companies Need
Them?,” Forbes, Feb. 27, 2018.
https://www.forbes.com/sites/quora/2018/02/27/what-is-a-minimum-viable-
136 Perancangan UI/UX Purwarupa Aplikasi Penentu Kualitas...(Widiatmoko, Utami)

product-and-why-do-companies-need-them/?sh=2015bf4c382c (accessed Nov. 21,

2021).
[20] M. A. Hakim, “Desain Sistem,” Medium, Apr. 20, 2018.
https://medium.com/@orovor/desain-sistem-ab8b748b3e48 (accessed Nov. 18,
2021).
[21] T. N. Auliyaa, “Memahami User Flow pada UX Design,”
https://sis.binus.ac.id/2020/04/14/memahami-user-flow-pada-ux-design/, Apr. 14,
2020.
[22] B. Luhoer, “Pengukuran Usability dengan SEQ,” Medium, Nov. 17, 2019.
√https://budhiluhoer3.medium.com/pengukuran-kemudahan-dan-sikap-user-
dalam-menyelesaikan-tugas-dengan-seq-5676333c221b (accessed Mar. 06, 2022).
[23] J. Nielsen, “Usability 101: Introduction to Usability,” Nielsen Norman Group, Jan.
03, 2012. https://www.nngroup.com/articles/usability-101-introduction-to-
usability/ (accessed Mar. 06, 2022).
[24] S. Freitag, “Choosing the right UX metrics can make or break your EdTech product
research,” Openfieldx.com, Oct. 20, 2020. https://openfieldx.com/choose-ux-
metrics-for-edtech-product/ (accessed Mar. 06, 2022).