## Edusaintek: Jurnal Pendidikan, Sains dan Teknologi
Volume 11 Issue  2 2024 Pages 643 - 656 p-ISSN: 1858-005X e-ISSN: 2655-3392 DOI: https://doi.org/10.47668/edusaintek.v11i2.1028 website: https://journalstkippgrisitubondo.ac.id/index.php/EDUSAINTEK

## PERANCANGAN ANTARMUKA PENGGUNA DAN PENGALAMAN PENGGUNA PADA WEBSITE BESUREK COFFEE DENGAN

## METODE DESIGN THINKING
Reizi Fiqriansyah 1 , Beni Suranto 2* 1,2 Universitas Islam Indonesia, Indonesia
E-mail: 19523162@students.uii.ac.id
Abstract: Besurek Coffee , a startup specializing in the sale of Coffee from Bengkulu Province, utilizes Lean Canvas to formulate ideas and identify target markets. Their aim is to provide ease, efficiency, and cost savings to users and customers. They employ all nine components of Lean Canvas, including problem, customer segments, solution, channels, revenue stream, cost structure,  key  metrics,  and  unfair  advantage. Additionally,  user  experience  (UX)  and  user interface (UI) take center stage in website design, with the application of the five stages of Design Thinking: Empathize, Define, Ideate, Prototype, and Testing. The result is the Besurek Coffee website that aligns with user experiences, preferences, and needs.
Keyword: Design Thinking, Website, User Interface, User Experience, Lean Canvas
Abstrak: Besurek Coffee , sebuah startup yang  berfokus  pada  penjualan  kopi  dari  Provinsi Bengkulu,  menggunakan Lean  Canvas untuk  merumuskan  ide  dan  mengidentifikasi  target pasar. Mereka bertujuan memberikan kemudahan, efisiensi, dan penghematan biaya kepada pengguna dan pelanggan. Sembilan komponen Lean Canvas digunakan: problem, customer segments , solution,  channels , revenue  stream , cost  structure , key  metrics ,  dan unfair advantage .  Selain  itu,  pengalaman  pengguna  ( User  Experience )  dan  antarmuka  ( User Interface ) menjadi fokus utama dalam perancangan website , dengan penerapan metode Design Thinking yang  terdiri  dari lima  tahapan: Empathize , Define , Ideate , Prototype ,  dan Testing . Hasilnya  adalah website Besurek Coffee yang  sesuai  dengan  pengalaman,  preferensi,  dan kebutuhan pengguna.
Kata kunci: Design Thinking, Website, User Interface, User Experience, Lean Canvas
Copyright (c) 2024  The Authors. This is an open access article under the CC BY-SA 4.0 license ( https://creativecommons.org/licenses/by-sa/4.0/ )

## PENDAHULUAN
Dampak globalisasi telah mendorong pertumbuhan industri, seperti industri kedai kopi di Indonesia, yang menghasilkan persaingan sehat di antara pemain bisnis minuman kopi olahan (Putri & Mukti, 2020). Kopi telah meraih popularitas yang luas di kalangan beragam kelompok masyarakat, termasuk petani, pekerja, mahasiswa, dan politisi. Selain menawarkan kenikmatan rasa yang unik, kopi juga sesuai untuk berbagai situasi sehari- hari seperti sarapan, relaksasi, pekerjaan, istirahat, perbincangan, atau berkumpul dengan teman (Maryani et al., 2020).
Provinsi Bengkulu telah diakui sebagai bagian dari Kawasan Segitiga Kopi karena perannya sebagai salah satu wilayah utama dalam produksi kopi Robusta di Indonesia. Bersama  dengan  Provinsi  Lampung  dan  Provinsi  Sumatera  Selatan,  kawasan  ini
berkontribusi sekitar 70% dari total produksi kopi Robusta di negara ini (Sadikin et al., 2021).  Data  dari  situs  web  www.bps.go.id  tahun  2021  mencatat  bahwa  di  Bengkulu terdapat perkebunan kopi seluas 85,30 hektar dengan produksi kopi sebanyak 62,40 ton. Provinsi Bengkulu merupakan salah satu dari lima provinsi di Indonesia yang aktif dalam produksi kopi. Selain itu, hasil penelitian menunjukkan potensi produksi kopi yang besar di  wilayah  ini,  yang  tercermin  dalam  beragam  produk  kopi  lokal  yang  dihasilkan  dan dijual di kota Bengkulu serta pasar lainnya (Mulyani et al., 2022).
Kemajuan  dalam  teknologi  dan  informasi  telah  menyederhanakan  proses transaksi dan perdagangan produk melalui internet. Transaksi antara calon pembeli dan penjual dapat  berlangsung secara instan melalui platform online , yang  menghilangkan kebutuhan  untuk  pergi  ke  toko  fisik  terlebih  dahulu.  Sebagai  contoh,  pengusaha  atau perusahaan dapat dengan mudah mempromosikan dan menjual produk mereka melalui situs web mereka  sendiri  (Imaniawan  &  Nur,  2019).  Kualitas  desain visual situs web memengaruhi interaksi pengguna dengan sistem. Meningkatkan interaksi dapat dicapai dengan  memfokuskan  perhatian  pada  antarmuka  pengguna  (UI)  dan  pengalaman pengguna  (UX)  sistem.  Desain  antarmuka  pengguna  yang  menarik  secara visual memengaruhi kesan  awal  pengguna terhadap sistem.  Pengalaman pengguna dirancang agar  sesuai  dengan  kebutuhan  pengguna  dan  menciptakan  pengalaman  interaksi  yang positif, termasuk dalam hal bagaimana pengguna merasakan, berperilaku, dan berpikir ketika menggunakan sistem tersebut (Saraswati & Sari, 2019).
Keberadaan startup Besurek Coffee berpotensi  untuk  secara  positif mempromosikan kopi lokal dari Bengkulu dengan memperluas distribusinya ke berbagai daerah. Hal ini akan meningkatkan ketersediaan kopi Bengkulu bagi calon pembeli dan mempermudah  proses  penjualan.  Oleh  karena  itu,  tujuan  utama  penelitian  ini  adalah untuk  merancang  antarmuka  pengguna  (UI)  dan  pengalaman  pengguna  (UX)  pada website Besurek Coffee dengan harapan menciptakan tampilan yang menarik dan mudah dipahami, sehingga menarik minat pembeli terhadap produk yang ditawarkan.

## METODE
Dalam perancangan website Besurek Coffee , metode yang digunakan adalah Lean Canvas dan Design Thinking. Lean Canvas berperan sebagai alat bantu dalam mengurai ide agar lebih mudah dibaca dan dipahami, serta menggambarkan ide bisnis secara visual
dalam satu tampilan sederhana. Terdapat 9 komponen dalam Lean Canvas , yaitu customer segment,  problem,  solution,  unique  value  proposition,  channel,  Revenue  Stream,  cost structure, key metric, dan unfair advantage.
Gambar 1. Lean Canvas
Di sisi lain, Design Thinking digunakan sebagai alat bantu dalam merancang User Interface dan User Experience . Dengan berfokus pada ide dan pengalaman pengguna, penulis  mendapatkan  pemahaman  mendalam,  wawasan,  dan  mengidentifikasi  masalah yang perlu diatasi. Terdapat 5 tahapan dalam Design Thinking , yaitu Emphatize, Define, Ideate, Prototype, dan Testing.

## Gambar 2. Design Thinking

## HASIL DAN PEMBAHASAN

## 1. Lean Canvas
Tahap  ini  merupakan  hasil  dari Lean  Canvas .  Pengisian  ini  terjadi  setelah dilakukannya  sesi brainstorming dan  juga  melibatkan  wawancara  dengan  beberapa calon pengguna Besurek Coffee . Hasil brainstorming dapat dilihat pada Gambar 3.
Gambar 3. Hasil Lean Canvas
a. Customer Segment
Customer  segment Besurek Coffee adalah  pelaku  bisnis  kopi  di  seluruh Indonesia,  dengan  fokus  utama  pada  pebisnis  kopi,  namun  juga  terbuka  untuk masyarakat  umum  yang ingin  mengeksplorasi  dan  menikmati  kopi  dari  Provinsi Bengkulu.
b. Problem
Dalam  bagian  ini,  terdapat  beberapa  masalah  yang  muncul  dari  proses brainstorming dengan partisipasi calon pelanggan dan pemilik usaha, antara lain:
• Sejumlah  calon  pengguna  aktif  mencari  biji  kopi  dari  berbagai  lokasi  di Indonesia, tetapi kopi dari Provinsi Bengkulu masih kurang dikenal, mungkin karena minimnya promosi dan perhatian terhadap penjualannya.
• Pelaku  usaha  seringkali  harus  mencari  biji  kopi  atau  produk  olahan  kopi dengan datang langsung ke lokasi, yang memakan banyak waktu, terutama jika  harus  berpindah  pulau  atau  tidak  memiliki  akses  yang  mudah  untuk membeli kopi lokal dari Bengkulu.
c. Solution
Dari  sejumlah  masalah  yang  diidentifikasi,  akan  diterapkan  langkah- langkah penyelesaian. Solusi yang dirumuskan meliputi:
• Platform  online memudahkan  pembelian  kopi  lokal  Bengkulu  tanpa  perlu mencari  secara  fisik,  mengatasi  kendala  akses,  dan  meningkatkan kenyamanan pembelian.
• Platform menyediakan  informasi  rinci  tentang  kopi  khas  Bengkulu  untuk meningkatkan  pengalaman  berbelanja  dan  mendukung  edukasi  tentang keanekaragaman kopi lokal di Bengkulu.
d. Unique Value Proposition
Dengan  adanya Unique  Value  Proposition ,  kita  bisa  mengidentifikasi keunggulan yang membedakan Besurek Coffee ,  yaitu menyediakan berbagai  biji kopi  dan  produk  olahan  eksklusif  dari  berbagai  daerah  di  Provinsi  Bengkulu.
Konsep ini disampaikan sebagai "Temukan Kekayaan Rasa Kopi Khas Bengkulu di Ujung Jari Anda" dengan desain yang sederhana untuk memudahkan pengguna dalam pembelian biji kopi.
e. Channels
Channels adalah  jalur  yang  menghubungkan  proposisi  nilai  perusahaan dengan pelanggan. pengisian blok channels melibatkan:
• Promosi  melalui  media  sosial  seperti Instagram dan TikTok dengan  video promosi  yang  bertujuan  untuk  memberikan  gambaran  produk  dan  menarik perhatian pasar target.
• Strategi testimoni mengandalkan  umpan  balik  pelanggan  untuk  menarik minat pelanggan lain, meskipun dengan potensi risiko umpan balik negatif yang dapat membantu perbaikan produk.
• Diskon  produk  pada  waktu  tertentu  untuk  meningkatkan  penjualan  dan kegembiraan konsumen dalam pembelian produk.
f. Revenue Stream
Revenue  stream  website Besurek Coffee terdiri  dari  beberapa  sumber pendapatan utama, yaitu:
• Penjualan produk biji kopi dan produk kopi olahan melalui platform website .
• Opsi  pembayaran premium dengan  biaya  tambahan  untuk  layanan  yang lebih cepat atau prioritas.
• Pengemasan khusus untuk produk yang dikirimkan kepada pelanggan.
g. Key Matrics
Key metrics adalah indikator untuk  mengukur kinerja bisnis atau proyek.
Pada website Besurek Coffee , key  metrics melibatkan  data  penjualan  dan  ulasan pelanggan  yang  dihasilkan  secara  berkala  dan  melalui platform  website setelah pembelian.  Data  ini  penting  untuk  mengarahkan  perbaikan  dan  pengembangan Bisurek Coffee .
h. Unfair Advantage
Dalam bagian ini, terdapat penjelasan mengenai karakteristik unik produk yang tidak dapat disamai pesaing, seperti platform Besurek Coffee yang menjadi yang pertama menawarkan biji kopi dan produk olahan dari berbagai kabupaten di Provinsi Bengkulu dalam satu platform .
i. Cost Structure
Bagian ini membahas pengeluaran penting untuk mengoperasikan Besurek Coffee , termasuk:
• Gaji karyawan yang mendukung operasional Besurek Coffee .
• Biaya pengembangan dan pemeliharaan sistem agar platform Besurek Coffee berfungsi sesuai rencana.
• Anggaran  pemasaran  untuk  memperkenalkan  produk  dari  situs website Besurek Coffee kepada pasar target.
2. Design Thinking
a. Empathize
Pengguna  Besurek Coffee adalah  pelaku  usaha  kopi  dan  masyarakat pencinta  kopi.  Berikut  rangkuman  hasil  wawancara  dengan  beberapa  calon pengguna yang selanjutnya dimasukkan ke dalam empathy map.
Gambar 4. Hasil Empathy Map
b. Define
Pada tahap ini user persona dan tabel how might we dibentuk berdasarkan informasi yang terkumpul selama sesi wawancara.
Gambar 5. Salah satu user persona
Tabel 1. How Might We No How? We? 1. Bagaimana  kita  bisa  menghadirkan pengalaman  pembelian  yang  intuitif dan  sederhana  sehingga  calon pelanggan  merasa  puas  dan  tertarik untuk berbelanja kembali?
Merancang  antarmuka  website  yang  intuitif  dengan navigasi yang jelas, tampilan produk yang menarik, serta proses  pembelian  yang  simpel  dan  cepat.  Selain  itu, memberikan  pilihan  pembayaran  yang  beragam  untuk meningkatkan kepuasan calon pelanggan.
2. Bagaimana  kita  bisa  membuat pengalaman mencari varian kopi khas Bengkulu  menjadi  lebih  mudah  dan terarah bagi calon pelanggan? Mengembangkan  fitur  pencarian  yang  lebih  canggih dengan  filter  berdasarkan  varian,  rasa,  dan  asal  daerah kopi  Bengkulu  untuk  membantu  calon  pelanggan
menemukan pilihan kopi yang sesuai dengan preferensi mereka.
3. Bagaimana kita bisa memberikan opsi pengiriman kopi yang cepat dan aman sehingga  calon  pengguna  merasa yakin  dalam  membeli  produk  kopi lokal?
Menyediakan  layanan  pengiriman  yang  bekerjasama dengan  kurir  terpercaya,  serta  memberikan  opsi pemantauan pengiriman secara real-time, sehingga calon pengguna  merasa  yakin  dan  aman  dalam  proses pembelian dan pengiriman kopi.
Kesimpulan dari kelima user persona dan how might we adalah diperlukan platform online yang mudah digunakan, menyediakan informasi lengkap tentang kopi Bengkulu, menjaga kepercayaan dan keamanan.
c. Ideate
• Sitemap
Sitemap merupakan  struktur  pokok  dari  situs web Besurek Coffee yang mengilustrasikan rangkaian fitur yang ada. pembuatan sitemap ini menggunakan alat bantu Whimsical.com .
Gambar 6. Sitemap Besurek Coffee
• Userflow
Dalam userflow ini, penulis merancang tiga alur pengguna utama berikut hasilnya:
o Userflow untuk  masuk  dan  daftar,  pada  tahapan  masuk  dan  daftar  terdapat masuk tanpa akun, fitur ini digunakan pengguna hanya memiliki akses untuk menjelajahi situs web tanpa opsi untuk melakukan pembelian.
Gambar 7. Userflow mendaftar dan melakukan login
o Userflow menambahkan  produk  kekeranjang  dan  membeli,  dalam  tahapan membeli  akun  pengguna  diminta  untuk  login  terlebih  dahulu  sebelum melanjutkan kepembayaran.
Gambar 8. Userflow menambahkan kedalam keranjang, dan membeli produk o Userflow memberikan ulasan, pada saat pembelian sudah diterima pengguna diminta untuk konfirmasi dan memberikan ulasan produk.
Gambar 9. Userflow pemberian ulasan produk
d. Prototype

## • Prototype Masuk dan Daftar akun
Pada halaman login dan daftar akun, pengguna dapat memilih "Daftar" untuk membuat akun atau "Masuk Tanpa Akun" untuk melihat produk tanpa perlu mendaftar.
Gambar 10. Prototype Masuk dan Daftar akun
• Prototype beranda
Halaman ini menampilkan navigasi atas (logo, beranda, produk, tentang kami, dan keranjang belanja) serta area Onboard dengan produk kopi, promosi, ulasan pelanggan, dan ringkasan singkat tentang Besurek Coffee .
Gambar 11. Prototype beranda
• Prototype halaman produk dan detail produk
Halaman  produk  menawarkan  beragam  pilihan  daerah  dan  produk, sementara prototype produk  detail  berisi  gambar  produk,  nama,  harga, deskripsi, dan ulasan dari berbagai pelanggan.
Gambar 12. Prototype halaman produk dan detail produk
• Prototype keranjang dan pembayaran
Pengguna dapat melihat isi keranjang belanja, memeriksa pesanan, dan melakukan  pembayaran.  Halaman  pembayaran  meminta  data  pribadi  seperti nama,  nomor handphone , email ,  dan  alamat,  yang  dapat  diubah  dengan menekan  tombol  "Ubah".  Halaman  ini  juga  menampilkan  detail  pesanan, termasuk gambar produk, harga, jumlah, total harga, dan biaya pengiriman.
Gambar 13. Prototype Keranjang dan Pembayaran
• Prototype Informasi Perusahaan
Pada  halaman  ini,  terdapat  informasi  mengenai  identitas  Besurek
Coffee ,  termasuk  visi,  misi,  menampilkan  berbagai  dokumentasi  yang berkaitan dengan perusahaan Besurek.
Gambar 14. Prototype Informasi Perusahaan
e. Testing
Setelah  menyelesaikan  tahap prototype dari  sejumlah  proses  yang  telah diimplementasikan, desain prototipe yang sebelumnya telah direncanakan diujicoba oleh  calon  pengguna  berdasarkan  5  profil  pengguna  yang  telah  ditentukan sebelumnya dan menyelesaikan Task Scenario , Task scenario dapat diliat pada tabel 2.
Tabel 2. Task Scenario Kode Tugas Skenario ST-1 Pengguna melakukan pendaftaran  dan  masuk  ke akun Anda diminta untuk daftar terlebih dahulu dan mengisi Textfield kemudian masuk menggunakan akun. ST-2 Pengguna  mencari  produk dan memfilter produk
Anda diminta untuk melihat produk dengan menekan tombol  ‘Produk’  pada Navigation  Bar dan  memilih daerah ‘kota bengkulu’ ST-3 Pengguna  memilih  dan menambahkan produk kedalam keranjang Anda diminta untuk melihat produk dengan menekan produk  ‘Arabica  Simpang  Lima’,  menambah kuantitas,  dan  menambahkan  produk  kedalam keranjang  dengan  menekan  tombol  ‘Masukkan kekeranjang’ ST-4 Pengguna melakukan pembayaran produk Anda diminta untuk menekan tombol ‘ keranjang ’ pada Navigation Bar kemudian mengisi data diri, memilih opsi  pengiriman,  dan  memilih  metode  pengiriman.
Setelah itu menekan tombol ‘beli produk’ ST-5 Pengguna memberikan ulasan Setelah  produk  sampai  ditujuan,  anda  diminta  untuk konfirmasi dan mengisi ulasan dengan menekan CTA ‘produk dikirim’ dan menekan tombol ‘Konfirmasi’
ST-6 Pengguna mencari informasi perusahaan Anda  diminta  untuk  mencari  informasi  perusahaan dengan  menekan  tombol  ‘Tentang’  pada Navigation Bar
𝑥̅ = ∑𝑥 𝑛 𝑁𝑖𝑙𝑎𝑖 𝑟𝑎𝑡𝑎 − 𝑟𝑎𝑡𝑎 = 𝐽𝑢𝑚𝑙𝑎ℎ 𝑠𝑘𝑜𝑟 𝑠𝑢𝑠 𝑑𝑎𝑟𝑖 𝑠𝑒𝑡𝑖𝑎𝑝 𝑟𝑒𝑠𝑝𝑜𝑛𝑑𝑒𝑛 𝐽𝑢𝑚𝑙𝑎ℎ 𝑟𝑒𝑠𝑝𝑜𝑛𝑑𝑒𝑛
𝑁𝑖𝑙𝑎𝑖 𝑟𝑎𝑡𝑎 − 𝑟𝑎𝑡𝑎 = 420
5 𝑁𝑖𝑙𝑎𝑖 𝑟𝑎𝑡𝑎 − 𝑟𝑎𝑡𝑎 =  84
Berdasarkan perhitungan kepuasan pengguna, skor rata-rata dari kuesioner SUS  adalah  84,  seperti  yang  ditunjukkan  dalam Gambar 15 ,  dengan  penilaian sebagai berikut:
• Tingkat acceptability ranges atau  penerimaan  penggunaan  termasuk  dalam kategori Acceptable .
• Tingkat grade scale atau nilai skala termasuk kategori B
• Tingkat adjective rating termasuk dalam kategori excellent .

## Gambar 15. Hasil Score SUS

## SIMPULAN
Simpulan yang didapat dari jurnal ini adalah Hasil dari perancangan Antarmuka Pengguna ( User Interface ) dan Pengalaman Pengguna ( User Experience ) pada website Besurek Coffee menyimpulkan bahwa penerapan Lean Canvas dalam startup Besurek Coffee dipilih untuk membantu fokus pada masalah yang dihadapi, memastikan bahwa pengembangan startup tersebut  terarah  pada  solusi  yang  sesuai  dengan  kebutuhan pelanggan.  Selain  itu,  menerapkan  pendekatan Design  Thinking dalam  merancang Antarmuka  Pengguna  dan  Pengalaman  Pengguna  pada website Besurek Coffee telah mempermudah  proses  pembuatan  dan  memastikan  bahwa  fitur  dan  informasi  yang
diintegrasikan dapat disampaikan dengan jelas dan akurat, serta pengujian kebergunaan ( Usability  Testing )  dengan  metode  yang  digunakan  memiliki  peran  penting  dalam perancangan website Besurek Coffee dengan hasil positif dan kualitas yang terukur sesuai dengan  indikator  yang  telah  ditetapkan,  menunjukkan  kontribusi  yang  signifikan  dari pengujian ini.

## DAFTAR RUJUKAN
Imaniawan,  F.  F.  D.,  &  Nur,  H.  M.  (2019).  Perancangan  Dan  Pembuatan  Website Penjualan  Biji  Kopi  Pada  Society Coffee House  Purwokerto. EVOLUSI  -  Jurnal Sains Dan Manajemen , 7 (1), 61–67. https://doi.org/10.31294/evolusi.v7i1.5030
Maryani,  D.  Y.,  Rochdiani,  D.,  &  Setia,  B.  (2020).  Pakemitan  Kecamatan  Ciawi Kabupaten  Tasikmalaya  Development  Strategy  Of  "  Ai Coffee " Coffee Coffee Business  In  Pakemitan  Village  ,  Ciawi  District  ,  Tasikmalaya  Regency  Fakultas Pertanian  Universitas  Galuh  Fakultas  Pertanian  Universitas  Padjajaran  Email : Jurnal Ilmiah Mahasiswa , 7 (3), 739–748.
Mulyani, E., Herlina, H., Winni Fauziah, D., & Fatkhil Haque, A. (2022). Perbandingan Kadar  Kafein  pada  Jenis  Kopi  Hasil  Perkebunan  Bengkulu  dengan  Metode Spektrofotometri  Ultraviolet. Indonesian  Journal  of  Pharmaceutical  Education ,
2 (2), 86–93. https://doi.org/10.37311/ijpe.v2i3.15492
Putri,  N.  N.  M.,  &  Mukti,  G.  W.  (2020).  KAJIAN  MODEL  INOVASI AGRIBISNIS
KOMODITAS KOPI (Studi Kasus di ‘Kopi Sebagai’). Mimbar Agribisnis: Jurnal Pemikiran Masyarakat Ilmiah Berwawasan Agribisnis , 6 (1), 339. https://doi.org/10.25157/ma.v6i1.3209
Sadikin, M. I., Swandari, T., & Wilisiani, F. (2021). Membangun Sinergi antar Perguruan Tinggi dan Industri Pertanian dalam Rangka Implementasi Merdeka Belajar Kampus Merdeka. Seminar Nasional Dalam Rangka Dies Natalis Ke-45 UNS Tahun 2021 ,
5 (1), 245–252.
Saraswati, N. W. S., & Sari, N. L. P. W. (2019). RANCANG BANGUN WEBSITE E- COMMERCE  PRODUK  KERAJINAN  BAMBU  UNTUK  PASAR  EKSPOR. Jurnal Teknologi Informasi Dan Komputer , 5 (2), 146–161.