## Perancangan Prototype UI/UX Website Softcoffee Dengan Penerapan Metode Design Thinking
Herdiyanti Ratiningsih Sitorus, Ali Ibrahim * , Yadi Utama, Hardini Novianti
Fakultas Ilmu Komputer, Program Studi Sistem Informasi, Universitas Sriwijaya, Palembang, Indonesia Email: 1 herdiyantisitorus@email.com, 2, *aliibrahim@unsri.ac.id, 3 yadiutama@unsri.ac.id, 4 hardini79@gmail.com Email Penulis Korespondensi: aliibrahim@unsri.ac.id
Abstrak− Perkembangan  teknologi  informasi  memegang  peranan  penting  dalam  mendukung  bisnis,  termasuk  industri  kopi  seperti Softcoffee  Lintang.  Softcoffee  Lintang  menghadapi  tantangan  dalam  sistem  pemesanan  manual  dan  keterbatasan  promosi,  yang menyulitkan pelanggan menemukan informasi penting seperti harga, menu, dan promosi terkini. Penelitian ini menggunakan metode Design  Thinking untuk  merancang  antarmuka pengguna  (UI)  dan  pengalaman  pengguna  (UX)  berbasis  web  yang  inovatif, dengan tujuan  mengatasi  masalah  tersebut  dan  meningkatkan  pengalaman  pelanggan.  Pendekatan  kualitatif  melalui  wawancara  dengan manajemen dan kuesioner kepada pelanggan menunjukkan bahwa desain UI/UX yang dihasilkan memudahkan penggunaan aplikasi, termasuk fitur-fitur baru seperti metode pembayaran tambahan dan ulasan produk, yang memperoleh nilai Single Ease Question (SEQ) di atas 6. Metode Design Thinking terbukti efektif dalam meningkatkan efisiensi operasional Softcoffee Lintang melalui desain website yang menarik dan intuitif, memberikan solusi praktis untuk masalah yang dihadapi serta mendukung strategi bisnis secara keseluruhan.
Kata Kunci: User Interface; User Experience; Design Thinking; Single Ease Question (SEQ)
Abstract− The  advancement  of  information  technology  plays  a  crucial  role  in  supporting  businesses,  including  the  coffee  industry exemplified by Softcoffee Lintang. Softcoffee Lintang faces challenges with its manual ordering system and limited promotions, which hinder customers from easily accessing essential information such as prices, menus, and current promotions. This study employs the Design Thinking methodology to develop an innovative web-based User Interface (UI) and User Experience (UX) aimed at addressing these issues and enhancing the customer experience. A qualitative approach, involving interviews with management and questionnaires to  customers,  revealed  that  the  resulting  UI/UX  design  significantly  facilitates  application  use,  incorporating  new  features  such  as additional payment methods and product reviews, which received Single Ease Question (SEQ) scores above 6. The Design Thinking methodology  proved  effective  in  enhancing  Softcoffee  Lintang's  operational  efficiency  through  an  attractive  and  intuitive  website design, providing practical solutions to the identified problems and supporting the overall business strategy
Keywords : User Interface; User Experience; Design Thinking; Single Ease Question (SEQ)

## 1. PENDAHULUAN
Dengan  kemajuan  teknologi  informasi,  mungkin  lebih  mudah  untuk  mendapatkan  layanan  tertentu.  Di  Indonesia  pun Jumlah bisnis yang memanfaatkan teknologi informasi untuk meningkatkan produktivitas dan menciptakan produk digital terus meningkat [1]. Salah satu kedai kopi di Indralaya dan Gelumbang adalah Soft Coffee Lintang, yang menawarkan produk kopi berkualitas tinggi dengan pelayanan yang ramah. Namun, karena Soft Coffee Lintang masih menjalankan proses bisnisnya secara manual, mereka sering mencatat pesanan pelanggan di kertas. Selain itu, pemasaran dan promosi Soft  Coffee  hanya  menggunakan  media  sosial  Instagram.  Oleh  karena  itu,  sulit  bagi  konsumen  untuk  mendapatkan informasi tentang produk, promosi, dan harga.
Untuk menyelesaikan masalah ini, perlu dibuat aplikasi yang dapat membantu mengelola data dan media promosi penjualan.  Dengan  adanya  sebuah  sistem,  data  dapat  terstruktur  dengan  baik  dan  dapat  menyediakan  informasi  yang berkaitan  dengan  proses  bisnis  secara  lengkap,  cepat,  dan  tepat.  Aplikasi  tersebut  tentunya  membutuhkan  sebuah terobosan  baru  yaitu  aplikasi  yang  dapat  menunjang  bisnis  untuk  bisa  lebih  bersaing  dengan  Perusahaan  lainnya. Diharapkan desain antarmuka pengguna yang baik akan meningkatkan pengalaman pengguna pelanggan saat berinteraksi dengan situs website Soft Coffee Lintang dan meningkatkan efisiensi operasi bisnis.
Dalam  pengembangan  produk  digital,  pengalaman  pengguna  dan  tampilan  antarmuka  sangat  penting.  Menurut Nursanti dkk. penelitian tahun 2023, desain antarmuka pengguna sangat penting untuk pengembangan sistem karena UI berfungsi sebagai alat yang efektif untuk berkomunikasi antara manusia dan komputer [2]. Selain itu, menurut Juliasnyah dan  Paputungan penelitian  tahun  2023,  desain  antarmuka pengguna  sangat  penting  karena  alur  dan  tampilan  terhadap desain sangat penting [3].
Menurut  Danang  Haryuda  Putra,  pengaruh  antarmuka  pengguna  atau  UI  dan  pengalaman  pengguna  atau  UX sangat penting dalam desain prototype website agar pengguna merasa nyaman dan mendapatkan pengalaman yang baik saat  menggunakan  produk  tersebut  [4].  User  experience  berfokus  pada  keseluruhan  pengalaman  pengguna  ketika berinteraksi dengan produk untuk mengukur seberapa mudah dan efektif penggunaanya [5]. Dari penelitian Ali ibrahim dkk,  dimana  menggunakan  user  experience  questionnair  dan  system  usability  scale  untuk  mengetahui  menguji pengalaman pengguna aplikasi OVO.
Design  Thinking  adalah  sebuah  metodologi  yang  mengintegrasikan  pemikiran  kritis,  kreatif,  dan  keterampilan praktis. Penelitian ini memilih metode desain thinking sebagai kerangka kerja utama karena fokusnya pada memahami kebutuhan dan preferensi pengguna dan menghasilkan solusi inovatif melalui iterasi desain yang berkelanjutan. Menurut Firman  Kurnianto  [6],  Metode  ini  berfokus  pada  penelitian  masalah  untuk  merancang  solusi  bagi  pengguna  di  setiap tahapannya.  Proses  ini  melibatkan  calon  pengguna  mulai  dari  tahap  empati,  mendefinisikan,  mengidekan,  membuat prototipe,  hingga  pengujian.  Salah  satu  karakteristik  utama  Design  Thinking  adalah  bahwa  desainer  harus
Herdiyanti Ratiningsih Sitorus, Perancangan Prototype UI/UX Website Softcoffee Dengan Penerapan Metode Design Thinking
mempertimbangkan setiap aspek dari lingkungan pengguna . Dalam jurnalnya, Fellycia menyatakan bahwa metode Design Thinking memiliki elemen-elemen unik yang membedakannya dari metode lainnya. Metode ini berfokus pada pengguna atau  bersifat  user-centered  dengan  empat  unsur  utama:  Pertama,  People  Centered,  yang  berarti  berorientasi  pada kebutuhan pengguna. Kedua, Highly Creative, yang memungkinkan penggunaan kreativitas secara bebas. Ketiga, Hands On,  yang  menekankan  pada  praktik  langsung  daripada  sekadar  teori.  Terakhir,  Iterative,  yang  memungkinkan  proses berulang untuk terus berimprovisasi[7].
Pengguna merasa lebih mudah ketika proses design Thinking diterapkan, seperti yang diungkapkan Sri  Soedewi Thinking, Langkah-langkah dalam metode ini dapat dilanjutkan hingga hasil yang diinginkan tercapai. Ide dan desain website sebagian besar ditentukan oleh observasi dan wawancara yang dilakukan pada tahap empati[8]. Studi lain oleh Shirvanadi[9]  juga  menyelesaikan  karya  desain  UI/UX  berjudul  "Redesain  UI/UX  Situs  E-Learning  Amikom  Center Menggunakan  Metode  Design  Thinking".  Jurnal  tersebut  menyatakan  bahwa  untuk  mengumpulkan  umpan  balik pengguna dan mempelajari masalah yang dihadapi pengguna dengan situs web, desain ulang diterapkan dalam penelitian. setelah  memenuhi  semua  persyaratan  untuk  memahami  kebutuhan  dan  kebutuhan  pengguna.  Akibatnya,  situs  web Amikom Center dirancang untuk memberikan pengalaman terbaik untuk setiap acara dan kegiatan yang diadakan melalui platform  e-learninguntuk  memberikan  pengalaman  terbaik  untuk  setiap  acara  dan  kegiatan  yang  diadakan  melalui platform e-learning. Pada penelitian sebelumnya yang dilakukan Ratna, et al. pada tahun 2023 dengan tujuan perancangan design prototype ui/ux aplikasi reservasi restoran dengan menggunakan metode design thinking memberikan kemudahan kepada pengguna dengan menggunakan metode tersebut. Metode ini dinilai berhasil diterapkan dalam prosesnya yaitu menaruh konsentrasi yang berpusat pada pengguna dan membuat solusi dari kebutuhan penggunanya[10].
Penelitian  sebelumnya  menunjukkan  bahwa  metode  design  thinking  dapat  membantu  menyelesaikan  masalah pengguna, membuat aplikasi lebih mudah digunakan, dan membuat produk yang lebih baik[11]. Salah satu keuntungan metode design thinking adalah dapat membantu berpikir dari sudut pandang yang lain, membuat produk yang berfokus pada masalah pengguna, dan membuat produk yang lebih baik [12]. Penelitian sebelumnya telah banyak mengeksplorasi dampak desain UI/UX pada kepuasan pengguna, namun masih terdapat kekurangan dalam memahami bagaimana metode Design Thinking secara khusus dalam perancangan UI/UX untuk industri kopi. Khususnya, belum ada penelitian yang mendalam tentang bagaimana metode Design Thinking dapat digunakan untuk merancang prototype UI/UX website pada proses bisnis coffee shop. Penelitian ini bertujuan untuk mengisi celah tersebut dengan mengeksplorasi penerapan Design Thinking  pada  UI/UX  berbasis  web  di  Softcoffee  Lintang.  Berdasarkan  kajian  diatas  penelitian  ini  bertujuan  untuk mendapatkan  kebutuhan  proses  bisnis  pihak  Soft  Coffee  Lintang  dengan  metode  Design  Thinking  dan  diharapkan perancangan  desain  interface  berbasis  website  untuk  proses  bisnis  Softcoffee  lintang  dapat  memberikan  pengalaman pengguna yang mudah dan dapat memenuhi tujuan bisnis Soft Coffee Lintang sambil tetap menjaga kepuasan pelanggan.

## 2. METODOLOGI PENELITIAN

## 2.1 Tahapan Penelitian
Metode pada penelitian ini berisikan tahapan-tahapan penelitian untuk merancang prototype desain interface. Penelitian ini menggunakan metode design thinking dengan mengorientasikan user sebagai target masalah, karena bagian penting dari  solusi  ini  adalah  menyelesaikan  masalah  dari  pihak  pengguna  atau  orang  yang  menggunakan  website tersebut.Adapun 4 tahapan yang dilakukan terdiri dari perencanaan, implementasi dengan menggunakan tahapan pada metode design thinking, prototype, dan testing. Alur penelitian perancangan prototype ui/ux website softcoffee  seperti yang dapat dilihat pada gambar dibawah ini.
Pada Gambar 1 merupakan alur penelitian yang dimulai dengan Perancangan yang terdiri dari Studi literatur dan pengidentifikasian  masalah  yang  sedang  dialami  oleh  Softcoffee.  Selanjutnya  melakukan  implementasi  yang
Herdiyanti Ratiningsih Sitorus, Perancangan Prototype UI/UX Website Softcoffee Dengan Penerapan Metode Design Thinking
menggunakan  metode  Design  Thinking  dimulai  dari  Emphatize,  Define,  Ideate,  Prototype,  dan  Testing  yang  akan menggunakan metode Single Ease Question (SEQ).

## 2.2 Tahapan Perencanaan
Dalam  proses  ini,  beberapa  literatur  yang  relevan  tentang penelitian  yang  akan  dilakukan  akan  dipelajari,  baik  dalam bentuk buku maupun jurnal. Selanjutnya, pada tahapan perencaaan ini melibatkan identifikasi masalah yang mencakup beberapa metode:
a. Metode Pengamatan (Observasi)
Dengan  mengamati  langsung  aktivitas  yang  berlangsung  di  Softcoffee,  observasi  dimaksudkan  untuk mengumpulkan  data  dengan  memperhatikan  kegiatan  secara  akurat,  mencatat  setiap  keluhan  yang  muncul,  dan mempertimbangkan hubungan antar permintaan dengan keluhan yang ada [11]. Pada tahap observasi, penulis melakukan pengamatan bertujuan untuk mendapatkan informasi tentang proses bisnis yang terjadi pada Softcoffee
b. Metode Wawancara (Interview)
Pengumpulan  data  juga  dilakukan  dengan  cara  bertanya  langsung  kepada  pemilik  Soft  Coffee  Lintang  yaitu Sofwanari dengan menggunakan metode wawancara tak terstruktur (terbuka) yaitu tanya jawab secara langsung kepada pemilik  usaha  yang  mengenai  manajemen  usaha,  perkembangan  usaha,  sejarah  usaha,  dan  seluruh  informasi  yang diperlukan untuk sumber dalam menyusun jurnal.

## 2.3 Implementasi Design Thinking
Metodologi  penelitian  mencakup  langkah-langkah  yang  diambil  untuk  merancang  prototipe  UI/UX.  Penelitian  ini menggunakan metode design thinking yang ditujukan untuk mengatasi masalah yang dihadapi oleh pengguna. Design thinking adalah proses iteratif yang bertujuan untuk memahami pengguna secara mendalam dan mendefinisikan kembali masalah untuk menemukan strategi dan solusi alternatif yang mungkin tidak terlihat sebelumnya. Pendekatan ini berfokus pada pencarian solusi yang paling efektif dan efisien berdasarkan pengalaman pengguna[13]. Terdapat lima tahap dalam pendekatan  design  thinking  untuk  pengembangan  aplikasi,  yaitu:  berempati  (empathize),  mendefinisikan  (define), menghasilkan  ide  (ideate),  membuat  prototipe  (prototype),  dan  menguji  (test).  Kelima  tahapan  tersebut  dapat digambarkan seperti Gambar 2 dibawah ini.
Gambar 2. Tahapan Design Thinking [14]
Pada Gambar 2 menunjukan 5 tahapan dalam metode Design Thinking yang terdiri dari Empathize, Define, Ideate, Prototype dan Testing.

## 2.3.1 Tahapan Empathize
Tahap empati bertujuan untuk memperoleh pemahaman mendalam tentang masalah yang dihadapi pengguna. Pada tahap ini,  metode  yang  digunakan  bisa  berupa  berinteraksi  langsung  dengan  pengguna,  mengamati  perilaku  mereka,  atau metode  lain  yang  dapat  mengumpulkan  data  akurat[15].  Dalam  penelitian  ini,  peneliti  melakukan  observasi  melalui kuesioner  yang  diberikan  kepada  pengguna  dan  wawancara  dengan  stakeholder.  Pertanyaan  wawancara  disusun  agar relevan dengan tujuan penelitian, sehingga dapat mengungkap informasi yang berguna untuk memahami kebutuhan dan masalah pengguna.

## 2.3.2 Tahapan Define
Tahapan  kedua  dari  metode  ini  adalah  tahap  Define,  dan  tujuan  dari  tahap  define  adalah  untuk  mengevaluasi  dan merumuskan masalah berdasarkan wawasan yang diperoleh dari tahap empatize sebelumnya. Pada tahap ini, informasi dan data yang dikumpulkan dari proses  tahap esmpathize terhadap pengguna (user) akan diperiksa dan dianalisis atau dipahami secara mendalam mendalam [16]. Ini dilakukan untuk menentukan kebutuhan pengguna yang harus dipenuhi dan untuk menentukan masalah atau kebutuhan pengguna aplikasi yang sedang dirancang.

## 2.3.3 Tahapan Ideate
Pada tahapan Ideate dilakukan sebuah proses yang bertujuan untuk menghasilkan sebanyak mungkin ide yang berbeda untuk  menyelesaikan  masalah  yang  telah  diidentifikasi  pada  tahap  Define[17].  Pada  tahap  Ideate,  tujuannya  adalah
Herdiyanti Ratiningsih Sitorus, Perancangan Prototype UI/UX Website Softcoffee Dengan Penerapan Metode Design Thinking
menciptakan sebanyak mungkin ide yang beragam agar produk yang dikembangkan dapat memberikan manfaat optimal bagi pengguna

## 2.3.4 Prototype
Tahap keempat adalah membuat prototipe desain, yang bertujuan untuk menggambarkan ide dalam bentuk model yang lebih  terperinci,  sehingga  dapat  diberikan  umpan  balik  dan  umpan  balik  yang  akurat  berdasarkan  desain  yang  telah disusun.  Solusi  dengan  prototipe  digunakan  untuk  menguji  konsep  secara  realistis  dan  memperoleh  masukan  dari pengguna guna meningkatkan  atau  mengadaptasi  solusi  sesuai  kebutuhan.  Sebagai  versi  awal  dari  produk  yang  dapat ditunjukkan  kepada  pelanggan  (user)  atau  konsumen  untuk  memberi  mereka  pemahaman  dan  penggunaan  fitur-fitur produk [18].

## 2.3.5 Testing
Pada  tahap  sebelumnya,  prototipe  digunakan  untuk  melakukan  uji  coba pada  sepuluh  pelanggan  Lintang  Soft  Coffee. Metode Single Ease Question (SEQ) digunakan untuk mencapai tahap ini. dimana pengguna akan diajukan pertanyaan setelah menyelesaikan setiap tugas pada tahap pengujian. Hasil dari pengujian ini akan menunjukkan apakah desain yang dibuat telah dilakukan dengan baik berdasarkan nilai SEQ yang diperoleh. Satu Pertanyaan Kemudahan Memiliki skala penilaian dari 1 hingga 7 yang didasarkan pada aspek kemudahan, dimulai dengan sangat sulit, sulit, tidak mudah, cukup, tidak sulit, mudah, dan sangat mudah[16]. Selanjutnya, hasil dari setiap tugas akan dijumlahkan untuk menghasilkan nilai rata-rata. Keresponden akan diberi tugas seperti yang ada pada tabel dibawah ini.
Tabel 1. Task yang akan diuji kepada responden No Task Intruksi Pertanyaan 1 Menemukan Menu Minuman Silakan temukan halaman menu minuman di website ini. Seberapa mudah Anda merasa menemukan halaman menu minuman? 2 Mencari Informasi Lokasi Softcoffee Silakan cari informasi mengenai lokasi Softcoffee Seberapa mudah Anda merasa menemukan informasi lokasi kedai? 3 Mencari Informasi berita dan event Silakan cari Informasi mengenai berita dan event tentang soft coffee Seberapa mudah Anda menemukan berita dan event tentang Softcoffee ? 4 Membaca Artikel Blog Tentang Kopi Silakan temukan dan baca artikel blog terbaru tentang kopi di website ini Seberapa mudah Anda merasa menemukan dan membaca artikel blog tentang kopi? 5 Mencari foto atau gallery tentang Softcoffee Silakan temukan galeri tentang softcoffee Seberapa mudah Anda merasa menemukan cara untuk melihat gallery softcoffee? 6 Menemukan Promo atau Diskon Terbaru Silakan temukan informasi tentang promo atau diskon terbaru yang ditawarkan oleh softcoffee Seberapa mudah Anda merasa menemukan informasi promo atau diskon terbaru? 7 Memesan Kopi Favorit Silakan pesan kopi favorit Anda melalui website ini Seberapa mudah Anda merasa memesan kopi favorit Anda? 8 Melakukan Pembayaran Kopi Silahkan lakukan pembayaran kopi melalui website ini Seberapa mudah Anda merasa melakukan pembayaran kopi Anda?
Pada tabel 1 berisikan task, intruksi, dan pertanyaan yang akan diberikan kepada responden yang dilakukan untuk menguji prototype yang dirancang.

## 3. HASIL DAN PEMBAHASAN

## 3.1 Empathize
Penulis menggunakan tahap empathize untuk mengidentifikasi masalah dan kebutuhan yang terkait dengan pembuatan dan perancangan situs website Soft Coffee Lintang. Dalam tahap ini, peneliti melakukan penelitian kebutuhan pengguna dengan fokus pada masalah yang mereka alami, menggunakan observasi dan wawancara untuk mengidentifikasi temuan yang berpusat pada masalah tersebut untuk menghasilkan kesimpulan spesifik. Tabel 2 di bawah ini menunjukkan hasil observasi dan wawancara dengan pengguna(user).
Tabel 2. Permasalahan Pengguna
No Permasalahan 1 Pegawai menginginkan apikasi yang dapat membantu pekerjaan saat melakukan pencatatan pesanan
2 Para pengguna dan pegawai menginginkan aplikasi yang mudah dioperasikan dan ramah pengguna
3
4 5 Para pengguna menginginkan aplikasi dengan fitur-fitur dapat membuat pesanan lebih mudah
Para pengguna menginginkan aplikasi yang dapat menyediakan data informasi secara luas dan lengkap. Para pengguna menginginkan metode pembayaran yang mudah digunakan dan aman
Herdiyanti Ratiningsih Sitorus, Perancangan Prototype UI/UX Website Softcoffee Dengan Penerapan Metode Design Thinking
Pada  tabel  2  menjelaskan  tentang  permasalahan  yang  dihadapin  oleh  pengguna  yang  dilakukan  dari  hasil wawancara kepada pemilik softcoffee, pegawai, dan pelanggan Softcoffee.

## 3.2 Define
Pada tahapan define, proses membuat inti masalah dari data permasalahan yang sebelumnya digunakan. Dengan adanya permasalahan  tersebut  perlu  dilakukan  evaluasi  yang  akan  menjadi  gambaran  kebutuhan  user.  Berdasarkan  informasi yang dikumpulkan dari wawancara dengan pemilik usaha, barista, dan pelanggan lintang soft coffee, diidentifikasi tiga katagori umum masalah: masalah desain, masalah penggunaan, dan kebutuhan pengguna dan staf.
Salah satu metode untuk menemukan solusi untuk masalah saat ini adalah dengan mengumpulkan data pengguna untuk sistem yang diinginkan. Tabel 3 merupakan tabel how might we dibawah menjelaskan pendefinisi masalah.
Tabel 3. Tabel How Might We Problem Insight How Might Pegawai mengingkan aplikasi yang dapat membantu alur pekerjaan Pegawai  masih  mengolah data pesanan secara manual Bagaimana  aplikasi  yang dirancang dapat membantu  alur  pekerjaan pegawai ? Dengan membuat fitur pemesana  sehingga  pegawai dapat  menerima  informasi pemesan  dan  pesanan  secara lengkap Para pengguna dan pegawai menginginkan aplikasi yang mudah
dioperasikan atau user friendly Belum adanya sistem aplikasi yang dapat digunakan  oleh  pengguna maupun pegawaai Bagaimana  aplikasi  yang dibuat  dapat  memenuhi standar kenyamanan pengguna dan pegawai ? Dengan melakukan wawancara dan testing terhadap  aplikasi  sehingga memenuhi  standar  pengguna dan pegawai Pengguna  menginginkan aplikasi yang dapat memberikan Informasi lengkap terhadap produk Pengguna sulit mengetahui Informasi mengenai  harga,  menu, ataupun  potongan  harga yang ada Bagaimana  aplikasi  yang dirancang dapat menampilkan informasi seputar produk ? Dengan fitur artikel dan menu yang dimana dapat menampilkan Informasi terbaru seputar produk Pengguna  menginginkan pemilihan pembayaran yang bervariasi dan mudah diakses Pembayaran  yang  tersedia hanya dapat menggunakan cash Bagaimana pengguna dapat  melakukan  metode pembayaran yang berbeda? Dengan  menampilkan  menu pilihan  pembayaran  yang dapat dipilih secara langsung oleh pengguna

## 3.3 Ideate
Pada tahapan ideate dilakukan pengembangan ide-ide yang ditemukan pada tahap sebelumnya. Hasil ide-ide tersebut akan dibuat  dalam  diagram  afinitas,  yang  dibuat  dengan  mengelompokkan  data  informasi  yang  saling  berkaitan.  Dalam diagram afinitas, ada tiga kategori: reason (alasan), needs and likes (kebutuhan dan kesukaan), dan other features (fitur lainnya) [19]. Isi diagram afinitas didasarkan pada wawancara yang dilakukan penulis terhadap pemilik, karyawan, dan beberapa pelanggan Softcoffee lintang. Gambar 3 berikut menunjukkan diagram afinitas yang telah dibuat :
Herdiyanti Ratiningsih Sitorus, Perancangan Prototype UI/UX Website Softcoffee Dengan Penerapan Metode Design Thinking
Gambar 3. Diagram Afinitas
Gambar 3 menampilkan diagram afinitas yang terdiri dari beberapa bagian. Pada diagram afinitas katerogi reason terdapat beberapa point yang menjadi alasan terkait dibuatnya perancangan desain prototype perpustakaan digital yaitu efficiency  (efisiensi)  seperti  ;  pemesanan  produk  dapat  dilakukan  melalui  website.  Marketing  (pemasaran);  website menampilkan Informasi mengenai promo ataupun potongan harga produk. Interface (tampilan); tampilan website yang mudah dimengerti dan menarik. Pada diagram afinitas kategori needs and likes terdapat fitur-fitur mengenai needs and likes  yang  didapatkan  dari  tahapan  sebelumnya  seperti  :  Beranda  yang  menampilkan  beberapa  informasi  mengenai Softcoffee,  Artiker  yang  menampilkan  berbagai  artikel  seputar  Softcoffee,  Menu  yang  menampilkan  list  menu  dan produk, dan juga keranjang pemesanan. Katagori ketiga pada diagram afinitas yaitu kategori others features yang dimana terdapat  detail  menu,  galeri  yang  berisi  foto  dokumentasi,  ulasan  pelanggan,  dan  juga  terdapat  bagian  yang  berisikan informasi mengenai kontak Softcoffee.

## 3.4 Prototype
Prototype adalah tahapan keempat dari metode design thinking ini. Tahapan ini adalah versi awal dari produk atau solusi yang diinginkan dengan tujuan untuk memeriksa dan mengevaluasi ide desain yang  telah dibuat [20]. Sebelum produk akhir dibuat, proses prototipe membantu menemukan masalah dan menyelesaikannya. Dengan menggunakan prototipe, kita dapat berinteraksi dan menguji desain dengan pengguna (user) dan mendapatkan umpan balik dari mereka sehingga desain dapat disempurnakan dan diperbaiki untuk mencapai solusi terbaik. Pada titik ini juga dilakukan pembuatan desain
Herdiyanti Ratiningsih Sitorus, Perancangan Prototype UI/UX Website Softcoffee Dengan Penerapan Metode Design Thinking
akhir antarmuka aplikasi, yang mencakup interaksi yang memungkinkan pengklikan dan interaksi fitur aplikasi. Untuk menyelesaikan tahapan ini, dimulai dengan pembuatan site map, wireframe dan high fidelity prototype.
a. Sitemap
Sitemap adalah diagram yang menunjukkan struktur dan hierarki halaman dalam situs web atau aplikasi, penting dalam desain UI/UX untuk memberikan gambaran menyeluruh, membantu merancang navigasi, dan memastikan semua konten tercakup. Ini memfasilitasi desain yang efisien, memudahkan komunikasi tim, dan berguna untuk pengujian awal. Prosesnya meliputi pengumpulan dan analisis konten, pembuatan hierarki, visualisasi, serta tinjauan dan revisi, sehingga membantu merencanakan dan mengorganisasi konten serta navigasi untuk pengalaman pengguna yang optimal. Berikut gambar sitemap yang akan dirancang.

## Gambar 4 . Rancangan Sitemap
Gambar 4 yaitu Site Map dari perancangan prototype website Softcoffee. Pada halaman Landing Page merupakan halaman inti yang menampilkan secara ringkas semua informasi mengenai menu-menu yang ada. Dimulai dengan our jurney yang berisikan perkenalan singkat softcoffee, dan untuk beralih ke informasi yang lebih lengkap mengenai kedai kopi dapat dilakukan dengan menekan (on click) tulisan Learn More.
Selanjutnya  pada  landing  page,  terdapat  informasi  our  special  coffee,  yang  dimana  menampilkan  informasi tentang beberapa kopi yang menjadi signature atau menu kopi yang ada promo. Dan jika menekan (on click) Explore Menu maka akan terbuka halaman yang menampilkan semua menu menu yang ada di Softcoffee, dan jika ingin melihat detail menu, dapat dilakukan dengan menekan (on click) Read More, dan jika ingin menambahkan menu yang dipilih kedalam pesanan, dapat dilakukan dengan menekan (on click) add to cart.
Pada  landing  page  juga  terdapat  our  sweet  gallery  yang  menampilkan  beberapa  foto  dokumentasi  seputar Softcoffee. Dibawahnya terdapat what customer say yang menampilkan testimoni mengenai menu maupun pelayangan yang ada pada Softcoffee.
Pada News dan event, menampilkan potongan berita mengenai Softcoffee, terdapat judul artikel dan penjelaskan singkat,  jika  ingin  melihat  semua  artikel  yang  tersedia,  dapat  dilakukan  dengan  menekan  (on  click)  Read  More.  Jika ditekan,  akan  menampilkan  semua  list  artikel  yang  diunggah  oleh  Softcoffee,  semua  artikel  dapat  dibaca,  dan  untuk melihat mengenai detail salah satu artikel, dapat dilakukan dengan menekan (on click) Read More dan tampilan akan beralih ke detail artikel yang dipilih.
Pada bagian kanan atas terdapat icon keranjang yang dimana digunakan untuk melakukan pemesanan, jika kita menekan (on click) icon tersebut, akan ditampilkan halaman mengenai detail pesanan yang telah kita pilih sebelumnya. Untuk melakukan pembayaran, dapat dilakukan dengan menekan (on click) tulisan Check Out yang akan menampilkan total pembayaran dan beberapa metode pembayaran yang dapat dipilih. Untuk melakukan pembayan, dapat dilakukan dengan  menekan  (on  click)  tulisan  Pay,  dan  akan pembayaran  akan  diproses  dan  akan diberikan nomor  orderan  yang mana digunakan untuk mengambil pesanan.
Pada  bagian  Footer,  menampilkan  informasi  mengenai  jam  operasional  Softcoffee,  disampingnya  terdapat beberapa contact untuk menghubungi Softcoffee, dan juga terdapat alamat dan sosial media tentang Softcoffee.
b. Wireframe
Prototype low fidelity atau biasa disebut wiredrame adalah kerangka visual yang menyederhanakan representasi desain halaman atau aplikasi. Ini berfungsi sebagai panduan dasar yang menampilkan struktur dan tata letak elemen utama
Herdiyanti Ratiningsih Sitorus, Perancangan Prototype UI/UX Website Softcoffee Dengan Penerapan Metode Design Thinking
tanpa memasukkan detail visual atau estetika, atau sketsa awal desain produk yang belum mencapai tahap akhir. Dibawah ini adalah wireframe dari prototype website Softcoffee yang telah dirancang :

## Gambar 5. Wireframe
Gambar 5 diatas merupakan wireframe yang dirancang menggunakan warna netral yang belum ditentukan tetapi cukup menggambarkan bentuk desain sistem yang akan dibangun. Sketsa tampilan untuk landing page, halaman menu, halaman about, Halaman artikel, halaman menu detail, halaman cart, dan halaman checkout.
c. High Fidelity Prototype
High fidelity prototype adalah representasi canggih dan mendetail dari produk akhir, yang menampilkan desain interaktif, visual realistis, dan fungsi lengkap[10]. Prototype ini menyerupai website yang sebenarnya, memungkinkan pengguna untuk mengalami alur dan fitur dengan cara yang hampir identik dengan produk jadi. High fidelity prototype digunakan untuk menguji dan memvalidasi pengalaman pengguna dengan presisi tinggi, memastikan bahwa setiap elemen desain  dan  fungsionalitas  memenuhi  kebutuhan  dan  harapan  pengguna  sebelum  peluncuran  akhir.  Berikut  merupakan high fidelity prototype website Softcoffee menggunakan aplikasi Figma:

## Gambar 6. High Fidelity Prototype
Gambar 6 merupakan wireframe yang disesuaikan dan dibuat lebih realistis. Desain awal wireframe situs website Soft Coffee akan diperbarui, dengan tujuan dari perancangan ini adalah untuk menampilkan gambar produk yang sedang berkembang menuju versi akhir atau final. Seperti yang ditunjukkan pada gambar-gambar di atas, wireframe yang telah
Herdiyanti Ratiningsih Sitorus, Perancangan Prototype UI/UX Website Softcoffee Dengan Penerapan Metode Design Thinking
dibuat sebelumnya diberi warna yang lebih spesifik, dan setiap halaman memiliki informasi yang ditambahkan. Pada titik ini, ketika semua komponen website telah terhubung, desain berkualitas tinggi akan terlihat lebih menarik dan berfungsi dengan baik.

## 3.5 Testing
Tahap akhir dari metode ini yaitu testing. Testing adalah fase di mana solusi yang telah dirancang diuji dalam konteks nyata  untuk  mendapatkan  umpan  balik  dan  memahami  bagaimana  solusi  tersebut  berfungsi  di  dunia  nyata.  Testing melibatkan  pengguna  akhir  secara  langsung  untuk  melihat  apakah  solusi  memenuhi  kebutuhan  dan  ekspektasi mereka[21].  Pengguna  melakukan  testing  untuk menguji  keberhasilannya menggunakan  Single  Ease  Question  (SEQ). Pengujian dengan SEQ, atau Single Ease Question, adalah cara untuk mengevaluasi seberapa mudah pengguna merasa menggunakan suatu produk atau antarmuka setelah mereka menyelesaikan tugas tertentu.
Untuk setiap scenario, penguji meminta sepuluh orang untuk menilai secara keseluruhan seberapa mudah mereka menyelesaikan  tugas  yang  diberikan.  Mereka  diminta  untuk  memberikan  jawaban  mereka  pada  skala  Likert  dengan peringkat mulai dari 1 (sangat sulit) hingga 7 (sangat mudah). Hasil penilaiannya dimasukkan ke dalam dua kategori: nilai rendah berkisar antara 1 dan 4, dan nilai baik berkisar antara 5 dan 7. Berikut hasil dari pengujian yang dilakukan kepada responden :
Tabel 4. Hasil dari pengujian dengan metode SEQ Task Responden Rata-rata 1 2 3 4 5 6 7 8 9 10 1 6 6.2  6.5 6 6 5.8  6.8 6 6.5  6.3 6.21 2 5.3  5.5 6 5.8  5.6  5.3 5 5.8  6.2  5.8 5.63 3 6.5 6 6.8 6 6.2 6 6.3 6 6 6 6.18 4 6.5 6 6 5.5  6.5 6 6 6.5  6.5 6 6.15 5 6 6 6.5  6.2  6.5 6 6.3 6 6.5 6 6.20 6 5 5.5 6 5.5  5.8 6 6 5.5 6 5.8 5.71 7 6.5 6 6.5  6.5  6.5 6 6 6 6 6 6.20 8 6 5 6 6.5 5 6 5.5  5.5  5.5 6 5.70
Bisa  disimpulkan  dari  Tabel  4  diatas  bahwa  desain  website  Softcoffee  secara  umum  dianggap  sangat  mudah digunakan oleh pengguna, berdasarkan hasil Single Ease Question (SEQ) yang memiliki skor rata-rata di atas 6. Skor yang tinggi ini mengindikasikan bahwa kebanyakan pengguna merasa nyaman dan menikmati navigasi dan penggunaan fitur-fitur yang ditampilkan pada website tersebut. Hal ini menunjukkan bahwa antarmuka website dan desainnya telah berhasil memberikan pengalaman pengguna yang positif. Dengan demikian, website ini telah mencapai standar yang baik dalam hal kemudahan penggunaan.

## 4. KESIMPULAN
Menurut  penelitian  yang  dilakukan  dengan  pendekatan  menggunakan  metode  Design  Thinking,  proses  desain  dan pengujian  aplikasi  terhadap  responden  menunjukkan  bahwa  desain  ini  memudahkan  pengguna  dalam  menggunakan aplikasi  Proses  iteratif  yang  melibatkan  pemahaman  mendalam  terhadap  kebutuhan  dan  preferensi  pengguna  telah memungkinkan  pengembangan  desain  yang  benar-benar  berpusat  pada  pengguna.  Selama  pengujian,  pengguna  dapat menyelesaikan  tugas  yang  diberikan  setelah  memahami  alur  kerja  aplikasi.  Fitur-fitur  seperti  metode  pembayaran tambahan,  artikel  dan  lainnya  memperoleh  nilai  Single  Ease  Question  (SEQ)  secara  keseluruan  di  atas  6,  yang menunjukkan bahwa fitur tersebut berada dalam kategori nilai baik dan memenuhi kebutuhan pengguna. Metode design thinking,  yang  mencakup  tahap  empati,  define,  ideate,  prototipe,  dan  pengujian,  telah  terbukti  efektif  dalam menyelesaikan masalah dan membuat pengalaman yang sesuai dengan kebutuhan pengguna. Dengan demikian, website ini dapat menjadi alat yang unggul untuk mendukung operasional harian dan strategi promosi SoftCoffee, memastikan bahwa pelanggan mendapatkan pengalaman yang optimal setiap kali berinteraksi dengan platform ini.

## REFERENCES
[1] L. Baskoro and B. N. Haq, “Penerapan Metode Design Thinking Pada Mata Kuliah Desain Pengembangan Produk Pangan,” J. IKRA-ITH Hum. , vol. 4, no. 2, pp. 83–93, 2020.
[2] N. N. Arisa, M. Fahri, M. I. A. Putera, and M. G. L. Putra, “Perancangan Prototipe UI/UX Website CROWDE Menggunakan Metode Design Thinking,” Teknika , vol. 12, no. 1, pp. 18–26, 2023, doi: 10.34148/teknika.v12i1.549.
[3] I. Juliansyah, “Metodologi Design Thinking,” pp. 1–60, 2022.
[4] D.  Haryuda,  M.  Asfi,  and  R.  Fahrudin,  “Perancangan  UI/UX  Menggunakan  Metode  Design  Thinking  Berbasis  Web  Pada Laportea Company,” J. Ilm. Teknol. Infomasi Terap. , vol. 8, no. 1, pp. 111–117, 2021, doi: 10.33197/jitter.vol8.iss1.2021.730.
[5] Ali Ibrahim, Onkky Alexander, Ken Ditha Tania, Pacu Putra, and Allsela Meiriza, “Assessing User Experience and Usability in the  OVO  Application:  Utilizing  the  User  Experience  Questionnaire  and  System  Usability  Scale  for  Evaluation,” J.  RESTI (Rekayasa Sist. dan Teknol. Informasi) , vol. 7, no. 4, pp. 953–963, 2023, doi: 10.29207/resti.v7i4.5137.
[6] F. Kurnianto, “Perancangan User Interface User Experience Aplikasi Basis Data Sekar Kawung Menggunakan Metode Design
Herdiyanti Ratiningsih Sitorus, Perancangan Prototype UI/UX Website Softcoffee Dengan Penerapan Metode Design Thinking
Thinking”, 2022
[7] 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
[8] S. Soedewi, “Penerapan Metode Design Thinking Pada Perancangan Website Umkm Kirihuci,” Vis. J. Online Desain Komun. Vis. , vol. 10, no. 02, p. 17, 2022, doi: 10.34010/visualita.v10i02.5378.
[9] E. C. Shirvanadi and M. Idris, “Perancangan ulang UI/UX situs e-learning aminkom center metode design thinking (studi kasus: amikom center),” Automata , vol. 2, pp. 1–8, 2021, [Online]. Available:
https://journal.uii.ac.id/AUTOMATA/article/view/19438/11541
[10]  Ratna  Nur  Fadilah  and  Dhian  Sweetania,  “Perancangan  Design  Prototype  Ui/Ux  Aplikasi  Reservasi  Restoran  Dengan Menggunakan Metode Design Thinking,” J. Ilm. Tek. , vol. 2, no. 2, pp. 132–146, 2023, doi: 10.56127/juit.v2i2.826.
[11]  I. Ayu, D. Krisna, P. Desain, K. Visual, and J. N. Indah, “PERANCANGAN USER INTERFACE DAN USER EXPERIENCE PADA APLIKASI PENCARI PEKERJA DI PT KALMAN GROUP INDONESIA,” vol. 4, no. 2, pp. 256–265, 2023.
[12]  D. S. Bila and D. R. Indah, “Perancangan Ulang UI-UX Desain Website BKKBN Provinsi Sumatera Selatan dengan Metode Design Thinking,” KLIK Kaji. Ilm. Inform. dan Komput. , vol. 3, no. 6, pp. 746–753, 2023, doi: 10.30865/klik.v3i6.870.
[13]  R. Sucihati, T. Sutabri, J. Jenderal Ahmad Yani No, and S. Ulu, “Analisis dan Perancangan Model User Interface………,” p. 691, 2023
[14]  M.  J.  Narizki,  R.  A.  Widyanto,  and  N.  A.  Prabowo,  “Perancangan  UI  /  UX  Sistem  Penerimaan  Mahasiswa  Baru  Berbasis Perangkat Mobile dengan Metode Design Thinking,” vol. 4, no. 4, pp. 1127–1135, 2023, doi: 10.47065/josh.v4i4.3652.
[15]  I. Engineering et al. , “PERANCANGAN UI / UX APLIKASI OGAN LOPIAN DISKOMINFO,” vol. 7, no. 1, pp. 55–70, 2023.
[16]  E.  R.  Alfian,  I.  B.  Suardika,  and  R.  Septiari,  “Strategi  Customer Relationship Management  (Crm)  Dalam  Segmenting  Untuk Meningkatkan Daya Saing Pada Hotel Gemilang Muara Bulian,” J. Valtech , vol. 4, no. 2, pp. 149–156, 2021, [Online]. Available: https://ejournal.itn.ac.id/index.php/valtech/article/view/3845%0Ahttps://ejournal.itn.ac.id/index.php/valtech/article/download/3 845/2815
[17]  M. Design, T. Dalam, R. Design, and I. Aplikasi, “PENERAPAN METODE DESIGN THINKING DALAM RANCANGAN DESIGN INTERFACE APLIKASI,” vol. 8, no. 1, pp. 13–24, 2023.
[18]  W. S. L. Nasution and P. Nusa, “UI/UX Design Web-Based Learning Application Using Design Thinking Method,” ARRUS J. Eng. Technol. , vol. 1, no. 1, pp. 18–27, 2021, doi: 10.35877/jetech532.
[19]  R.  Agam,  A.  Achmad  Khan,  R.  Alsauqi,  M.  Darwis,  and  W.  Trisari,  “Perancangan  UI/UX  Aplikasi  Tanify  Berbasis  Mobile Menggunakan  Metode  Design  Thinking,” J.  Ilmu  Komput.  dan  Sist.  Inf. ,  vol.  7,  no.  1,  pp.  273–285,  2024,  doi: 10.55338/jikomsi.v7i1.2933.
[20]  K. H. Lim and N. Setiyawati, “Perancangan User Experience Aplikasi Mobile Majuli Menggunakan Metode Design Thinking,” J. Inf. Technol. Ampera , vol. 3, no. 2, pp. 108–123, 2022, doi: 10.51519/journalita.volume3.isssue2.year2022.page108-123.
[21]  S. A. Arnomo and Y. Yulia, “Metode Framework Application of System Thinking (FAST) Untuk Desain Sistem Pemesanan,” J. Desain Dan Anal. Teknol. , vol. 2, no. 1, pp. 121–128, 2023, doi: 10.58520/jddat.v2i1.29.