Jurnal Teknik Informatika dan Sistem Informasi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 453-466 E- ISSN 2503-2933 453

## Perancangan Antarmuka Website E-commerce UMKM

## Pertenunan Pelangi Dengan Metode Design Thinking
Putu Ananta Yoga Manik Mas 1 , Andi Reza Perdanakusuma* 2 , Hanifah Muslimah Az- Zahra 3
Universitas Brawijaya; Jl. Veteran, Malang, 65145, Indonesia
1,2,3 Jurusan Sistem Informasi, FILKOM UB, Malang e-mail: anantayoga34@student.ub.ac.id, andireza@ub.ac.id, hanifah.azzahra@ub.ac.id

## Abstrak
Penelitian ini berfokus pada perancangan antarmuka website e-commerce yang sesuai dengan  kebutuhan  pengguna  sehingga  rancangan  desain  yang  dibuat  dapat  dikembangkan menjadi  website  e-commerce  untuk  meningkatkan  promosi  dan  pemasaran  bagi  UMKM Pertenunan  Pelangi.  Penelitian  ini  menggunakan  metode  design  thinking  yang  menekankan kepada perspektif pengguna dalam memahami dan mengetahui kebutuhan dari pengguna untuk menghasilkan solusi yang efektif. Penelitian ini dimulai dengan melakukan wawancara kepada calon  pengguna  untuk  mengidentifikasi  permasalahan  yang  akan  ditentukan  solusi.  Solusi ditentukan  dengan  melakukan  brainstorming  bersama  stakeholder.  Setelah  melakukan penentuan  solusi,  dilakukan  visualisasi  desain  antarmuka.  Untuk  menentukan  apakah  desain antarmuka  yang  dirancang  telah  sesuai  dengan  kebutuhan  pengguna,  dilakukan  usability testing  dengan  menggunakan  metode  think  aloud  kepada  5  partisipan  dengan  melibatkan  12 task  scenario.  3  partisipan  dapat  menyelesaikan  semua  task  scenario  dengan  baik,  namun terdapat  2  partisipan  yang  hanya  mampu  menyelesaikan  11  task  scenario.  Terdapat  pula beberapa masukan  dari  para partisipan  terkait  rancangan  antarmuka  yang dibuat.  Dari  hasil pengujian  dapat  dikatakan  bahwa  desain  antarmuka  yang  dibuat  dapat  mengatasi permasalahan yang telah diidentifikasikan.
Kata kunci —perancangan antarmuka, e-commerce, design thinking, usability testing, think aloud

## Abstract
This research focuses on designing e-commerce website interface that suit user needs so that the design created can be developed into e-commerce websites to increase promotion and marketing  for  UMKM  Pertenunan  Pelangi.  This  research  uses  the  design  thinking  method which emphasizes the user's perspective in understanding and identifying the needs of users to create effective solutions. This research begins by conducting interviews with prospective users to  identify  problems  which  will  be  determined  by  solutions.  Solutions  are  determined  by brainstorming  with  stakeholder.  After  determining  the  solution,  the  interface  design  is visualized.  To  determine  whether  the  designed  interface  design  is  in  accordance  with  user needs,  usability  testing  was  conducted  by  using  the  think  aloud  method  to  5  participants  by using 12  task  scenarios. 3 participants  were  able  to  complete  all  the  task  scenarios,  but  there were  2  participants  who  were  only  able  to  complete  11  task  scenarios . There  were  also  some feedbacks from the participants for the interface design. With that result it can be said that the designed interface design succeeded in overcoming the problems that have been identified.
Keywords — interface design, e-commerce, design thinking, usability testing, think aloud
454 Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 453-466 E-ISSN 2503-2933
Putu Ananta , et., al [ Perancangan Antarmuka Website E-commerce UMKM Pertenunan Pelangi Dengan Metode Design Thinking ] IJCCS Vol. x, Nopage–end_page

## 1. PENDAHULUAN
-commerce merupakan saluran online yang dapat diakses melalui komputer seseorang dan digunakan  oleh  pebisnis  untuk  menjalankan  operasi  bisnisnya.  Konsumen  dapat mendapatkan  informasi  dengan  bantuan  komputer  mereka.  Maraknya e-commerce saat  ini memudahkan para pengusaha untuk terhubung dengan konsumen [1]. Proses ini dimulai dengan memberi  konsumen  layanan  informasi  yang  membantu  mereka  membuat  pilihan.  Salah  satu media  internet  yang  dapat  dimanfaatkan  dalam  menerapkan e-commerce adalah website . Website sebagai  media e-commerce tidak  hanya  dimanfaatkan  oleh  pelaku usaha  dengan skala besar saja, namun dapat juga dimanfaatkan oleh pelaku Usaha Mikro Kecil Menengah (UMKM) yang  merupakan  salah  satu  sektor  bisnis  yang  dilakukan  oleh  individu,  kelompok,  maupun badan usaha kecil. Mengadopsi website untuk transaksi komersial merupakan hal yang penting bagi  pelaku  UMKM,  mengingat  pada  umumnya  pelaku  UMKM  memiliki  keterbatasan  dalam anggaran  [2].    Salah  satu  UMKM  yang  bergerak  dalam  bidang fashion adalah  Pertenunan Pelangi yang berasal dari daerah Karangasem, Bali. Mereka memiliki pangsa pasar yang rendah karena  sedikitnya  upaya  promosi  yang  dilakukan  dan  belum  memanfaatkan  perkembangan teknologi. Oleh karena itu, ditemukan ide untuk melakukan perancangan antarmuka website e- commerce yang tidak hanya dapat digunakan untuk memasarkan produk, namun juga  berisikan informasi  tentang  bagaimana  produk  dibuat  dan  informasi  umum  seputar  UMKM  Pertenunan Pelangi.
Penelitian ini menggunakan metode design thinking sebagai pedoman dalam merancang antarmuka website  e-commerce .  Metode  ini  menggunakan  kepekaan  dan  pola  pikir  untuk memenuhi  kebutuhan  pengguna  serta  kelayakan  strategi  bisnis  untuk  menghasilkan  nilai konsumen dan peluang pasar. Metode design thinking dikenal sebagai pendekatan inovasi yang berpusat  terhadap  konsumen  dengan  mengutamakan  desain  produk  dan  layanan  sehingga metode ini mulai banyak mendapat perhatian dalam lingkungan bisnis [3]. Terdapat lima prinsip utama  dalam design  thinking yakni problem  framing,  user  focus,  diversity,  visualization ,  dan experimentation and iteration [4]. Penerapan metode design thinking perlu memerhatikan lima tahap  yakni empathize,  define,  ideate,  prototype¸ dan test .  Kelima  tahap  tersebut  dapat menyajikan  kerangka  konseptual  yang  bertujuan  untuk  menghasilkan  hasil  yang  potensial  [5]. Hingga  saat  ini,  penggunaan  metode design  thinking dikaitkan  dengan  adanya  inovasi, kreativitas, dan pemecahan suatu masalah [6].
Penerapan  metode design  thinking pada  penelitian  ini  dimulai  dari  melakukan penggalian  kebutuhan  permasalahan,  dilanjutkan  dengan  pendefinisian  permasalahan  yang dialami  dan  menentukan  ide  solusi  yang  dapat  dilakukan melalui  sesi brainstorming .  Terdapat beberapa  penelitian  terdahulu  yang  digunakan  sebagai  acuan  dalam  penelitian  ini.  Penelitian pertama merupakan penelitian oleh [7] yang dijadikan salah satu acuan karena diterapkannya metode design  thinking dalam  merancang  desain UI  UX pada  aplikasi  penjualan  untuk membantu  UMKM  Kebun  Edamame  Banyuwangi  dalam  meningkatkan  produktivitas penjualan. Hal yang membedakan penelitian tersebut dengan penelitian yang dilakukan kali ini  terletak  pada  segi  evaluasi.  Dimana  pada  penelitian  kali  ini,  peneliti  menggunakan pengujian usability testing dengan metode think aloud dengan tujuan untuk memperhatikan sikap  dan  ucapan  yang  ditunjukkan  oleh  calon  pengguna  dalam  menggunakan prototype yang telah dirancang.
Penelitian serupa dilakukan oleh [8] yang menerapkan metode design thinking dalam merancang  suatu  antarmuka. Output dari  penelitian  tersebut  adalah  terciptanya  aplikasi
E
Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 453-466 E- ISSN 2503-2933 455
yang  membantu  masyarakat  luas  dalam  memecahkan  masalah  mengenai  kendaraan  dan perawatan  kendaraan.  Namun  dalam  tahapan  pembuatan  aplikasi,  peneliti  terdahulu  tidak melibatkan stakeholder.  Stakeholder perlu  dilibatkan  agar  dapat  memahami  kebutuhan  dari kedua  belah  pihak,  baik  pengguna  maupun  pelaku  UMKM.  Oleh  karena  itu,  penelitian  ini melibatkan stakeholder dalam  proses  pembuatannya.  Data  yang  diperoleh  dari  Kementerian Koperasi  dan  Usaha  Kecil  dan  Menegah  Republik  Indonsia  menunjukkan  bahwa  pada  tahun 2023,  baru  21%  UMKM  Indonesia  yang  sudah  berbasis  digital.  Hal  ini  mendasari  penelitian yang  dilakukan  oleh  [9].  Penelitian  tersebut  menggandeng  CV  REN  yang  merupakan perusahaan  yang  bergerak  di  bidang  konveksi.  Metode design  thinking yang  digunakan  pada penelitian  tersebut  menghasilkan output layanan  berupa  aplikasi  yang  menunjang  penjualan produk CV REN secara online. Namun, penelitian tersebut tidak mencantumkan apakah layanan tersebut  dapat  diakses  menggunakan website ,  padahal website merupakan  sarana  yang  dapat diakses  semua  pengguna  pasar  baik  melalui  sistem  operasi  iOS  maupun  Android.  Melalui  hal tersebut,  penelitian  ini  akan  berfokus  dalam  pengembangan  layanan  melalui website dengan tujuan agar dapat diakses dengan mudah oleh seluruh pengguna pasar.

## 2. METODE PENELITIAN

## 2.1   Tahapan Penelitian
Pada  penelitian  diterapkan  metode design  thinking dengan  tahapan  yang  dapat  dilihat pada gambar 1.

## 2. 1.1  Tahap Empathize (M1)
Tahap ini dilakukan pengumpulan data menggunakan teknik wawancara secara tertulis kepada stakeholder dari UMKM Pertenunan Pelangi.  Wawancara adalah pertemuan antara dua orang  untuk  bertukar  ide  dan  informasi  dengan  menggunakan  tanya  jawab  untuk  membuat definisi tentang sesuatu. Wawancara bersifat  struktural tanpa menghilangkan ruang spontanitas sehingga  peneliti  dapat  melakukan  proses  tersebut  guna  memperoleh  informasi  mengenai pertanyaan yang sedang diselidiki [10].  Tujuan wawancara adalah untuk memahami bagaimana kebiasaan  stakeholder  dalam  berbelanja  dengan e-commerce dan  mendapatkan  preferensi bagaimana pedoman dalam membuat antarmuka e-commerce seperti dengan keinginan penguna. Setelah  melakukan  wawancara  akan  dihasilkan  draft  yang  berisikan  jawaban  dari  narasumber terkait  daftar  pertanyaan.  Kemudian  hasil  tersebut  digunakan  untuk  membantu  dalam menemukan solusi berupa desain antarmuka produk website e-commerce. Dibuat juga empathy map sebagai penggambaran bagaimana sudut pandang pengguna.
Gambar 1. Tahapan Penelitian
456 Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 453-466 E-ISSN 2503-2933
Putu Ananta , et., al [ Perancangan Antarmuka Website E-commerce UMKM Pertenunan Pelangi Dengan Metode Design Thinking ] IJCCS Vol. x, Nopage–end_page

## 2. 1.2  Tahap Define (M2)
Pada tahap ini data dari proses wawancara dan penggambaran empathy map pada tahap empathize akan  dikumpulkan  untuk  dapat  didefinisikan  menjadi  beberapa problem  statement . Problem  statement dapat  mendefinisikan  apa  saja  yang  menjadi  masalah  yang  dihadapi  oleh pengguna  untuk  dapat  ditentukan  sebuah  solusi.  Pada  tahap  ini  juga  akan  dihasilkan  persona dengan  tujuan  untuk  membantu  dalam  memahami  kebutuhan  dan  tujuan  dari  penguna  [11]. Persona  tidak  perlu  mencatat  semua  aspek  kehidupan  seseorang,  namun  harus  berfokus  pada karakteristiknya.  Persona  biasanya  digunakan  untuk  mengidentifikasi  jenis  dan  tipe  pengguna yang  sesuai  dengan  pelanggan  yang  memuat  nama,  jenis  kelamin,  dan  informasi  demografi dasar [12].

## 2. 1.3  Tahap Ideate (M3)
Pada  tahap  ini  akan  dilakukan  pengumpulan ide  dan  solusi  sebanyak  mungkin dengan tujuan untuk dapat menemukan solusi dan ide yang sesuai dengan permasalahan yang dihadapi oleh  UMKM  Pertenunan  Pelangi.  Pada  tahap  ini  digunakan  metode brainstorming yang dilaksanakan  bersama stakeholder dari  UMKM  Pertenunan  Pelangi  untuk  dapat  menemukan solusi  dengan  menciptakan  banyak  ide  dari  permasalahan  yang  sudah  didefenisikan. Brainstorming merupakan  salah  satu  teknik  yang  digunakan  untuk  menumbuhkan  kreativitas dan  menghasilkan  ide  serta  pemikiran  antar  anggota  yang  bertujuan  untuk  mencapai  solusi mengenai masalah yang ada [13].

## 2. 1.4  Tahap Prototype (M4)
Pada  tahap  ini  akan  dibuat  penggambaran  kerangka  alur  yang  didasari  oleh  hasil pemetaan  kebutuhan  yang  telah  diperoleh  pada  tahap  sebelumnya.  Tahap prototype digunakan sebagai  visualisasi  dari  solusi  dan  ide  yang  telah  ditentukan  pada  tahap ideate .  Nantinya prototype yang  disusun  akan  dibuat  ke  dalam  2  bentuk  yaitu wireframe dan high  fidelity prototype .  Sebelum  menyusun  sebuah prototype akan  ditentukan user  flow dan information architecture yang  akan  digunakan  sebagai  pedoman  dalam  menjalankan  task  pada website  e- commerce. Information  architecture digunakan  untuk  menyusun  informasi  pada  situs  dengan tujuan  membantu  pengguna  dalam  memenuhi  kebutuhannya  secara  efektif  [14].  Setelah mendapatkan pedoman dapat disusun antarmuka berupa wireframe dan high fidelity prototype . Prototype yang  dibuat  harus  berinteraksi  dengan  cara  yang  signifikan  untuk  memberikan pemahaman  yang  jelas  tentang  bagaimana  produk  tersebut  akan  berfungsi.  Dalam  menyusun wireframe dan high  fidelity  prototype akan  digunakan guideline dari google  material  design . Material  design merupakan  suatu  panduan  sistem  desain  yang  dibuat  oleh  Google  untuk membantu  tim  pengembang  atau  perancang  aplikasi  dalam  membangun  sebuah  produk  digital berkualitas tinggi untuk Android, iOS, Flutter, dan Website.

## 2. 1.5  Tahap Test (M5)
Pada  tahap  ini  akan  dilakukan  proses  evaluasi  menggunakan usability  testing dengan metode think  aloud .  Tahap test akan  menggunakan feedback yang  telah  diperoleh  untuk menyempurnakan prototype dan mempelajari  lebih  lanjut  mengenai  pengguna  [15]. High fidelity prototype yang telah dibuat akan memastikan bahwa prototype yang dibuat sudah sesuai dengan kebutuhan pengguna dan  menjawab permasalahan yang ada. Pelaksanaan tahap test ini dilakukan  secara  daring  dengan  menggunakan  media  Google  Meet.  Proses  evaluasi  akan dilakukan dengan melibatkan calon pengguna sebagai partisipan untuk menggunakan prototype yang  telah  dibuat.  Hasil  evaluasi  yang  dilakukan  akan  dianalisis  dan feedback atau  saran  yang diberikan oleh partisipan akan dilakukan perbaikan.
Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 453-466 E- ISSN 2503-2933 457

## 3. HASIL DAN PEMBAHASAN

## 3.1   Hasil Tahap Empathize (M1)
Pada  tahap  ini  dilakukan  pengumpulan  data  permasalahan  dengan  memanfaatkan metode wawancara yang dilakukan kepada 4 narasumber. Hal ini dilakukan guna mendapatkan perspektif  dan  harapan  dari  sudut  pandang  calon  pengguna  dan stakeholder bagi  perancangan website  kedepannya.  Dari  hasil  wawancara  yang  dilakukan  disimpulkan  bahwa  mereka membutuhkan adanya pemanfaatan teknologi seperti e-commerce yang berisikan berbagai fitur seperti pencarian produk, berbagai pilihan metode pembayaran dan pengiriman, contact person , serta penilaian terhadap produk. Berdasarkan data wawancara kemudian akan disusun ke dalam empathy map seperti terlihat pada Gambar 2.

## Gambar 2. Empathy Map

## 3.2   Hasil Tahap Define (M2)
Setelah  melakukan  proses  pengumpulan  informasi,  kemudian  informasi  tersebut  akan dianalisis  untuk  menentukan  masalah  inti  yang  sudah  diidentifikasikan  atau  biasa  disebut dengan problem statement [16]. Pembuatan problem statement dilakukan dengan mengolah data yang  telah  didapatkan  melalui  wawancara  sebelumnya  dan  akan  didefinisikan  kedalam  tabel yang  berisikan  deskripsi  permasalahan.  Dengan  adanya  probem  statement,  maka  proses  ideasi pada  tahap  selanjutnya  akan  lebih  mudah  karena  solusi  yang  ditentukan  akan  disesuaikan dengan permasalahan yang telah terdefinisi pada Tabel 1.
458 Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 453-466 E-ISSN 2503-2933
Putu Ananta , et., al [ Perancangan Antarmuka Website E-commerce UMKM Pertenunan Pelangi Dengan Metode Design Thinking ] IJCCS Vol. x, Nopage–end_page
Tabel 1. Problem Statement Kode Problem Statement Problem Statement PS_01 Pengguna membutuhkan layanan proses transaksi yang terintegrasi melalui sistem e-commerce untuk mempermudah dan mempercepat proses promosi dan pemasaran yang saat ini masih dilakukan secara manual. PS_02 Pengguna  membutuhkan  layanan  e-commerce  dengan  fitur  pencarian produk yang sesuai dengan kebutuhan konsumen.
PS_03 Pengguna membutuhkan layanan e-commerce dengan fitur berbagai pilihan metode  pembayaran  untuk  memberikan  kemudahan  kepada  konsumen untuk melakukan transaksi.
PS_04 Pengguna membutuhkan layanan e-commerce dengan fitur berbagai pilihan metode  pengiriman  untuk  memberikan  pilihan  kepada  konsumen  dalam menentukan metode pengiriman yang sesuai.
PS_05 Pengguna  membutuhkan  layanan  e-commerce  dengan  fitur  untuk memberikan  penilaian  atau  review  terhadap  produk  agar  dapat dimanfaatkan konsumen untuk memberikan ulasan kepada produk UMKM
Pertenunan Pelangi.
Setelah  melakukan  pengidentifikasian  permasalahan  dengan  menuliskan  pada  tabel problem  statement  proses  pada  tahap define akan  dilanjutkan  dengan  menggambarkan kebutuhan  dari  pengguna  atau  user  kedalam  sebuah  persona.  Berikut  hasil  pembuatan  persona pengguna  atau  user  berdasarkan  data  yang  telah  didapatkan  dari  tahap  sebelumnya  seperti terlihat pada Gambar 3.
Gambar 3. Persona User

## 3.3   Hasil Tahap Ideate (M3)
Pada  tahap ideate ,  akan  ditentukan  serangkaian  ide  solusi  untuk  menyelesaikan permasalahan  yang  telah  didefinisikan  pada problem  statement .  Pendefinisian  solusi  terhadap permasalahan  akan  dilakukan  dengan  metode brainstorming .  Pelaksanaan  metode
Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 453-466 E- ISSN 2503-2933 459
brainstorming dilakukan  dengan  cara  diskusi  bersama stakeholder dari  UMKM  Pertenunan Pelangi yakni I Dewa Ayu Kartika Dewi. Diskusi ini dilakukan secara daring melalui platform google  meet.  Berdasarkan  hasil  dari brainstorming didapatkan  solusi  dari  setiap problem statement yang  telah  didefinisikan  pada  tahap define .  Solusi  yang  didapatkan  pada  sesi brainstorming dengan stakeholder dari UMKM Pertenunan Pelangi dapat dilihat pada Tabel 2.
Tabel 2. Solusi Dari Metode Brainstorming Kode Problem Statement Solusi yang Didapat dari Metode Brainstorming PS_01 Merancang  antarmuka website  e-commerce yang  sesuai  dengan  kebutuhan pengguna  dan  dapat  mempermudah  serta  mempercepat  proses  transaksi sehingga  dapat  meningkatkan  promosi  dan  pemasaran  dalam  UMKM Pertenunan Pelangi. PS_02 Memberikan  fitur  pencarian  produk  pada  rancangan  antarmuka website  e- commerce agar sesuai dengan kebutuhan pengguna. PS_03 Memberikan  fitur  yang  dapat  menawarkan  berbagai  pilihan  metode pembayaran  mulai  dari  pembayaran  tunai,  kartu,  hingga  beragam  dompet digital  guna  memberikan  kemudahan  konsumen  dalam  melakukan transaksi.
PS_04 Memberikan  fitur  yang  dapat  menawarkan  berbagai  pilihan  metode pengiriman  produk  mulai  dari  kurir,  jasa  pengiriman  serta  pengiriman melalui ojek online guna memberi kemudahan dalam mengirimkan pesanan konsumen.
PS_05 Menambahkan fitur yang dapat dimanfaatkan konsumen untuk memberikan penilaian  atau review terhadap  produk  yang  telah  dibeli  agar  konsumen dapat menyampaikan saran maupun penilaian terhadap produk dari UMKM Pertenunan Pelangi.
Dengan  ditentukannya  serangkaian  solusi  menggunakan  metode brainstorming akan dilanjutkan  dengan  pendefinisian  apa  saja  kebutuhan  fungsional  untuk  menunjang  penelitian. Kebutuhan  fungsional  yang  akan  didefinisikan  merupakan  kebutuhan  yang  berkaitan  dengan layanan  dan  interaksi  apa  saja  yang  akan  disediakan  pada  perancangan  antarmuka website . Pengidentifikasian  kebutuhan  fungsional  ini  didasarkan  dengan  penggalian  kebutuhan  dan penentuan  solusi  yang  telah  ditetapkan.  Kebutuhan  fungsional  nantinya  juga  berguna  sebagai alat  bantu  dalam  merancang  kerangka  desain  antarmuka  atau  wireframe  pada  tahap prototype . Daftar kebutuhan fungsional dapat dilihat pada Tabel 3.
Tabel 3. Kebutuhan Fungsional Kode Kebutuhan Fungsional Kebutuhan Fungsional KF_01 Sistem dapat menampilkan pilihan opsi login untuk pengguna. KF_02 Sistem dapat menampilkan form pendaftaran akun baru bagi pengguna.
460 Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 453-466 E-ISSN 2503-2933
IJCCS Vol. x, Nopage–end_page
KF_03 Sistem  dapat  menampilkan  halaman  utama  dari website  e-commerce yang  berisikan  rekomendasi  produk,  fitur  katalog  dan  keranjang  serta informasi UMKM. KF_04 Sistem dapat menampilkan produk sesuai dengan katalog yang ada. KF_05 Sistem  dapat  menyimpan  dan  menampilkan  produk  yang  telah dimasukan kedalam keranjang pemesanan. KF_06 Sistem  dapat  menampilkan  fitur custom  produk sesuai  dengan permintaan pengguna. KF_07 Sistem dapat menyimpan dan menampilkan desain produk custom yang telah diberikan oleh pengguna. KF_08 Sistem  dapat  menampilkan  berbagai  opsi  pembayaran  produk  dan berbagai opsi pengiriman produk kepada pengguna. KF_09 Sistem  dapat  menampilkan  fitur  pembatalan  produk  yang  berisikan alasan dan bukti pembayaran. KF_10 Sistem  dapat  menyimpan  dan  menampilkan  alasan  pembatalan  produk yang diberikan oleh pengguna. KF_11 Sistem  dapat  menyimpan  dan  menampilkan  masukan  dan  saran  yang diberikan pengguna kepada produk.

## 3.4 Hasil Tahap Prototype (M4)
Kemudian  dilakukan  pengembangan  dan  juga  visualisasai  terhadap  solusi  dari permasalahan  yang  ada.  Pengerjaan  akan  dimulai  dengan  membuat user  flow , information architecture ,  dan  pembuatan prototype  website  e-commerce . User  flow menggambarkan  alur atau proses bagaimana pengguna dapat menyelesaikan task atau pekerjaan ketika menggunakan website  e-commerce .  Dengan  adanya user  flow ,  akan  membantu  pengguna  dalam  mencapai tujuan selama berinteraksi dengan sistem yang akan dibuat.
Gambar 4. User Flow Product, Cart, dan Checkout
Kemudian  dibuat information  architecture yang  merupakan  gambaran  umum  bagi pengguna  dalam  menggunakan  website  yang  ditentukan  melalui  penggambaran user  flow sebelumnya. Information  architecture akan  digunakan  sebagai  pedoman  dalam  menjalankan
Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 453-466 E- ISSN 2503-2933 461
task pada website  e-commerce UMKM  Pertenunan  Pelangi  sehingga  nantinya  pengguna  tidak kebingungan dalam menggunakan website .
Gambar 5. Information Architecture Pengguna
Selanjutnya  akan  dilakukan  visualisasi  perancangan  kerangka  desain  yang  bertujuan untuk  menjelaskan  bagaimana  susunan  antarmuka  proses  yang  dilakukan  pengguna  ketika menggunakan website yang  akan  dibangun. Wireframe yang  dirancang  akan  berisikan  elemen dasar  dari  antarmuka  seperti text,  button,  navigation dan  lainnya. Wireframe yang  dirancang berisikan  fitur  seperti  melakukan login dan  mendaftarkuan  akun  baru, edit profil,  melihat produk  kain  endek  dan  songket,  melakukan checkout pesanan,  melihat  informasi  seputar UMKM  Pertenunan  Pelangi,  menghubungi customer  service ,  dan  memberikan  penilaian  atau review kepada produk. Untuk hasil rancangan wireframe selengkapnya dapat diakses pada link berikut: bit.ly/WireframePertenunanPelangi.
462 Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 453-466 E-ISSN 2503-2933
Putu Ananta , et., al [ Perancangan Antarmuka Website E-commerce UMKM Pertenunan Pelangi Dengan Metode Design Thinking ] IJCCS Vol. x, Nopage–end_page
Gambar 6..Wireframe Halaman Awal/Home
Kemudian  visualisasi  akhir  dari  tahap  ini  akan  berupa high  fidelity  prototype yang dirancang  menggunakan guideline Google  Material  Design. Guideline yang  digunakan  terdiri dari style guide warna, tipografi, icon , dan bentuk. High fidelity prototype yang dirancang akan berdasarkan wireframe yang  dibuat.  Fitur  seperti  melakukan login dan  mendaftarkuan  akun baru, edit profil, melihat produk kain endek dan songket, melakukan checkout pesanan, melihat informasi seputar UMKM Pertenunan Pelangi, menghubungi customer service , dan memberikan penilaian  atau review kepada  produk  juga  akan  dilakukan  visualisasi.  Untuk  hasil  rancangan dari high  fidelity  prototype lebih  lengkapnya  dapat  diakses  pada  link  berikut: bit.ly/HighFidelityPertenunanPelangi.
Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 453-466 E- ISSN 2503-2933 463

## Gambar 7. High Fidelity Prototype Halaman Home

## 3.5   Hasil Tahap Test (M5)
Setelah  merancang wireframe dan high  fidelity  prototype  website  e-commerce untuk UMKM  Pertenunan  Pelangi,  selanjutnya  dilakukan  proses  evaluasi  dilakukan  dengan usability testing menggunakan  metode think  aloud .  Hal  ini  bertujuan  untuk  menemukan  apa  yang sebenarnya dipikirkan oleh pengguna terhadap rancangan antarmuka yang dibuat.
Terdapat  5  partisipan  yang  merupakan  calon  pengguna  dari website  e-commerce UMKM  Pertenunan  Pelangi  yang  akan  dilibatkan  pada  proses  pengujian  ini.  Hal  ini  sesuai dengan yang disebutkan oleh [17], dimana hasil terbaik datang dari pengujian yang melibatkan tidak  lebih  dari  5  pengguna  dan  menjalankan  pengujian  kecil  sebanyak  yang  kita  mampu. Pelaksanaan  pengujian  terhadap  kelima  partisipan  dilakukan  secara  daring  dengan menggunakan  media  Google  Meet  dan  menggunakan task  scenario untuk  mempermudah partisipan  dalam  menggunakan prototype yang  dirancang.  Setelah  pengujian  dilakukan  akan
464 Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 453-466 E-ISSN 2503-2933
dihasilkan data yang merupakan hasil keberhasilan masing-masing partisipan dalam melakukan setiap task scenario yang diberikan.
Tabel 4. Data Keberhasilan Partisipan
Kode Partisipan Task Scenario T1 T2 T3 T4 T5 T6 T7 T8 T9 T10 T11 T12 P1 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ P2 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ P3 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ P4 ✓ ✓ ✓ ✓ ✓ ✓ ✓ X ✓ ✓ ✓ ✓ P5 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ X
Pada  Tabel  4  ditunjukan  bahwa  pada task  scenario dengan  kode  T8,  terdapat  seorang partisipan  yang  gagal  menyelesaikan task  scenario tersebut  dikarenakan  partisipan  tersebut memerlukan  waktu  untuk  memahami  isi  dari  halaman checkout .  Pada task  scenario dengan kode  T12,  terdapat  seorang  partisipan  yang  gagal  menyelesaikan task  scenario tersebut dikarenakan  partisipan  tersebut  membutuhkan  waktu  untuk  membaca  informasi order  history sehingga  partisipan  merasa  sedikit  kebingungan.  Sedangkan  pada task  scenario dengan  kode T1, T2, T3, T4, T5, T6, T7, T9, T10, dan T11, semua task scenario dapat diselesaikan dengan baik oleh kelima partisipan.
Terdapat  juga feedback dari  setiap  partisipan  selama  pengujian  berlangsung.  Kelima partisipan  lebih  banyak  memberikan feedback positif  terkait  desain  antarmuka website  e- commerce yang  dirancang.  Namun  terdapat  beberapa feedback negatif  seperti  pada task scenario 2 dimana terdapat seorang partisipan (P4) yang merasa bahwa informasi data diri yang ditampilkan  pada  halaman  profil  dapat  dibuat  lebih  rapi  lagi  dan  dapat  menambahkan  fitur untuk  melakukan logout  account .  Pada task  scenario 8  terdapat  seorang  partisipan  (P4)  yang membutuhkan  sedikit  waktu  untuk  membaca  dan  memahami  atribut  yang  ada  pada  halaman checkout sehingga  belum  dapat  menyelesaikan task  scenario dengan  baik  dan  pada task scenario 12  terdapat  seorang  partisipan  (P4)  yang  memerlukan  waktu  untuk  dapat  memahami informasi  yang  ada  pada  halaman order  history dan  memberi  masukan  terkait  informasi  yang ditampilkan  pada  fitur order  history dapat  dibuat  lebih  rapi  agar  lebih  mudah  dipahami. Sehingga  berdasarkan feedback yang  diberikan  dilakukan  perbaikan  kepada  3 high  fidelity prototype yaitu high fidelity prototype account, checkout , dan order history .

## 4. KESIMPULAN
Berdasarkan  perancangan  antarmuka  pengguna website  e-commerce yang  telah dilakukan  untuk  UMKM  Pertenunan  Pelangi  dengan  menggunakan  metode design  thinking , dapat  ditarik  kesimpulan  yaitu  setelah  melakukan  penggalian  kebutuhan  dan  permasalahan ditemukan bahwa masalah utama yang dialami UMKM Pertenunan Pelangi adalah memerlukan suatu sistem yang terintegrasi melalui e-commerce dimana dalam e-commerce tersebut nantinya pengguna  dapat  melakukan  beberapa  kegiatan  seperti  mencari  produk  yang  sesuai  dengan kebutuhan,  melakukan  pembayaran  dengan  beragam  metode,  memilih  beragam  metode pengiriman yang terpercaya dan memberikan penilaian atau review terhadap produk yang telah dibeli.
Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 453-466 E- ISSN 2503-2933 465
Dilakukan  perancangan  antarmuka website  e-commerce sebagai  jawaban  dari permasalahan  yang  ada.  Perancangan  diawali  dengan  membuat wireframe yang  merupakan kerangka  desain  dan  menjelaskan  bagaimana  susunan  antarmuka website yang  akan dibangun. Kemudian  visualisasi  dilanjutkan  dengan  membuat high  fidelity  prototype dengan  menjadikan Google Material Design sebagai guideline . High fidelity prototype yang telah dibuat kemudian dilakukan proses evaluasi menggunakan usability testing dengan metode think aloud . Dari hasil evaluasi  ditemukan  beberapa feedback dari  partisipan  sehingga  dilakukan  perbaikan  kepada high fidelity prototype agar sesuai dengan kebutuhan pengguna .

## 5. SARAN
Dapat dilakukan penelitian untuk mengembangankan perancangan antarmuka website e- commerce yang telah dibuat untuk UMKM Pertenunan Pelangi sehingga menjadi produk yang dapat  membantu stakeholder kedepannya  serta  dapat  dilakukan  pengujian  kembali  pada  hasil perbaikan  antarmuka  pengguna  yang  telah  dilakukan  dengan  menggunakan  metode  yang berbeda.

## UCAPAN TERIMA KASIH
Ucapan  terima  kasih  disampaikan  kepada  Universitas  Brawijaya  yang  telah berkontribusi dalam mendanai penelitian ini.

## DAFTAR PUSTAKA
[1] X. Liu, D. Tong, J. Huang, W. Zheng, M. Kong, and G. Zhou, “What Matters in The E- Commerce  Era?  Modelling  and  Mapping Shop  Rents  in  Guangzhou,  China,” Land  Use Policy , Vol. 123, No. November, p. 106430, 2022, doi:
10.1016/j.landusepol.2022.106430.
[2] D. Di Fatta, D. Patton, and G. Viglia, “The Determinants of Conversion Rates in SME e- Commerce Websites,” J. Retail. Consum. Serv. , Vol. 41, No. October 2017, pp. 161–168, 2018, doi: 10.1016/j.jretconser.2017.12.008.
[3] M.  Eradatifam,  S.  Heydarabadi,  and  A.  Shahbazi, “The  Impact  of  Design  Thinking  on Innovation,”  Impact  Des.  Think.  Innov.  JDT ,  Vol.  1,  No.  1,  p.  50,  2020,  [Online]. Available: https://jdt.ut.ac.ir/
[4] A. Buhl et al. , “Design Thinking For Sustainability: Why and How Design Thinking Can Foster  Sustainability-Oriented  Innovation  Development,”  J.  Clean.  Prod. , Vol. 231, pp. 1248–1257, 2019, doi: 10.1016/j.jclepro.2019.05.259.
[5] N.  D.  Fila,  S.  McKIlligan,  and  K.  Guerin, “Design  Thinking  in  Engineering  Course Design,” ASEE Annu. Conf. Expo. Conf. Proc. , Vol. 2018-June, 2018, doi: 10.18260/1-2- -30271.
466 Jatisi ISSN 2407-4322 Vol. 10, No. 4, Desember 2023, Hal. 453-466 E-ISSN 2503-2933
Putu Ananta , et., al [ Perancangan Antarmuka Website E-commerce UMKM Pertenunan Pelangi Dengan Metode Design Thinking ] IJCCS Vol. x, Nopage–end_page
[6] P. Micheli, S. J. S. Wilner, S. H. Bhatti, M. Mura, and M. B. Beverland, “Doing Design Thinking: Conceptual Review, Synthesis, and Research Agenda,” J. Prod. Innov. Manag. , Vol. 36, No. 2, pp. 124–148, 2019, doi: 10.1111/jpim.12466.
[7] K. ANGELINA, Perancangan UI UX Aplikasi Penjualan pada UMKM Kebun Edamame Banyuwangi Dengan Metode Design Thinking . 2022.
[8] F.  Effendi et  al. , “Perancangan  Antarmuka  Aplikasi  Monteer  Dengan  Metode  Design Thinking,”  MDP  Student  … , pp. 384–391, 2022, [Online]. Available:
https://jurnal.mdp.ac.id/index.php/msc/article/view/1785
[9] R.  Putra,  A.  O.  Pebiansyah,  L.  R.  Sulaeman,  Nurali,  and  D.  Utama, “Application  of Design  Thinking  and  Prototype  Methods  In  The  Design  of  Mobile-Based  Hijab  E- Commerce Applications : CV REN,” Vol. 12, No. 03, pp. 1483–1489, 2023.
[10]  C.  Cheron,  J.  Salvagni,  and  R.  K.  Colomby, “The  Qualitative  Approach  Interview  in Administration: A Guide for Researchers,” Vol. 26, pp. 1–15, 2022.
[11]  M.  Pande  and  S.  V.  Bharathi, “Theoretical  Foundations  of  Design  Thinking  –  A Constructivism Learning Approach to Design Thinking,” Think. Ski. Creat. , Vol. 36, No. February, 2020, doi: 10.1016/j.tsc.2020.100637.
[12]  S.  Guaman-Quintanilla,  P.  Everaert,  K.  Chiluiza,  and  M.  Valcke, “Fostering  Teamwork through Design Thinking: Evidence from a Multi-Actor Perspective,” Educ. Sci. , Vol. 12, No. 4, 2022, doi: 10.3390/educsci12040279.
[13]  H.  Al-Samarraie  and  S.  Hurmuzan, “A  Review  of  Brainstorming  Techniques  in  Higher Education,” Think.  Ski.  Creat. ,  Vol.  27,  No.  December  2017,  pp.  78–91,  2018,  doi: 10.1016/j.tsc.2017.12.002.
[14]  L. Fanani, “User Experience Design for Nutrition Information Applications Using Design Thinking,” MATICS J. Ilmu Komput. dan Teknol. Inf. (Journal Comput. Sci. Inf. Technol. , Vol. 15, No. 1, pp. 43–50, 2023, doi: 10.18860/mat.v15i1.23025.
[15]  K. Lee, I. Design, T. Process, and T. Future, “Innovative Design Thinking Process with TRIZ  Kyeongwon  Lee  To  Cite  This  Version:  HAL  Id :  hal-02279754  Innovative  Design Thinking Process with TRIZ,” pp. 241–252, 2019.
[16] “Design Thinking,” Interaction Design Foundation , 2022.
[17]  J. Nielsen, “Thinking Aloud: The #1 Usability Tool,” Nielsen Norman Group , 2012.