INNOVATIVE: Journal Of Social Science Research Volume 4 Nomor 2 Tahun 2024 Page 5737-5748 E-ISSN 2807-4238 and P-ISSN 2807-4246
Website: https://j-innovative.org/index.php/Innovative

## Penerapan Desain UI/UX Pada Sistem Penjualan Berbasis Web Dengan Metode Desain Thingking
Dennisa Avriel Ismail 1 ✉ , Baenil Huda 2 , Shofa Shofia Hilabi 3 , Bayu Priyatna 4
Sistem Informasi Universitas Buana Perjuangan Karawang Email: si20.dennisaismail@mhs.ubpkarawang.ac.id 1 ✉

## Abstrak
Di era teknologi saat ini, kita mengalami banyak kemudahan yang secara besar-besaran bermanfaat bagi kita. Seiring berjalannya waktu , teknologi informasi berkembang dengan cepat, memberikan keuntungan yang tidak dapat disangkal bagi masyarakat dalam berbagai aspek kehidupan contohnya adalah sistem terkomputerisasi, menjadi ilustrasi dalam ranah sistem penjualan. User interface merupakan apa yang  terlihat selama operasi suatu  program,  sementara  pengalaman  pengguna  mencakup  sensasi  yang  dirasakan  oleh  pengguna  saat berinteraksi  dengan  program  tersebut.  Proses-proses  dalam  metode  Design  Thinking  bertujuan  untuk mengidentifikasi masalah dan menentukan kebutuhan pengguna, memungkinkan mereka untuk diatasi dalam konteks UI/UX. Dengan memanfaatkan informasi yang dikumpulkan dari masalah yang diidentifikasi, sebuah antarmuka UI/UX  akan  dibuat  untuk  mengatasi  dan  meningkatkan  proses  pemesanan.  Design  thinking berfungsi sebagai salah satu pendekatan untuk menentukan dan merancang antarmuka.
Kata Kunci: Teknologi, UI/UX, User Interface

## Abstract
In  this  era  of  technology,  we  experience  many  conveniences  that  are  massively  beneficial  to  us.  As  time progresses, information technology advances rapidly, providing undeniable advantages for society in various aspects of life, such as computerized systems, which serve as an illustration in the realm of sales systems. The user interface is what is visible during the operation of a program, while user experience encompasses the sensations felt by users when interacting with the program. Processes in the Design Thinking method aim to identify problems and determine user needs, enabling them to be addressed in the context of UI/UX. By utilizing information gathered from identified problems, a UI/UX interface will be created to address and enhance the ordering process. Design thinking functions as one approach to determining and designing interfaces. Keyword: Techonology , UI/UX, User Interface

## PENDAHULUAN
Di  era  teknologi  saat  ini,  kita  mengalami  banyak  kemudahan  yang  secara  besar- besaran  bermanfaat  bagi  kita.  Teknologi  memainkan  peran  yang  luas,  memfasilitasi pengumpulan  informasi  baik  di  tingkat  domestik  maupun  internasional,  memengaruhi transportasi, pendidikan, ilmu kedokteran, dan kehidupan sehari-hari(Nadhif et al., 2021). Seiring  berjalannya  waktu,  teknologi  informasi  berkembang  dengan  cepat,  memberikan keuntungan yang tidak dapat disangkal bagi masyarakat dalam berbagai aspek kehidupan sehari-hari(Huda et al., 2023). Salah satu contohnya adalah system komputerisasi, menjadi ilustrasi dalam ranah sistem penjualan. Untuk meningkatkan efisiensi dan efektivitas, penting bagi setiap perusahaan untuk tetap mengikuti perkembangan teknologi terkini. Pengelolaan pelanggan sangat penting bagi perusahaan perdagangan, karena pelanggan merupakan fokus  utama  dari  bisnis  semacam  itu  dalam  perusahaan.  Sistem-sistem  ini  memberikan keuntungan  seperti  peningkatan  keamanan  untuk  mengatur  dan  mengakses  dokumen. Selain itu, sistem penjualan ini harus dibuat dengan efektivitas maksimal untuk memastikan pengguna mengalami sedikit kesulitan selama penggunaan(Damayanti et al., 2022).
User  interface  atau  antarmuka,  merupakan  apa  yang  terlihat  selama  operasi  suatu program,  sementara  pengalaman  pengguna  mencakup  sensasi  yang  dirasakan  oleh pengguna saat berinteraksi dengan program tersebut. Kemudahan atau kesulitan interaksi pengguna  dengan  elemen  antarmuka  yang  dibuat  oleh  desainer  UI  menentukan pengalaman  pengguna.  Pemanfaatan  metode  Design  Thinking  secara  signifikan memengaruhi  desain  antarmuka  pengguna  dan  pengalaman  pengguna  dalam  suatu aplikasi.  Metode  ini  mencakup  serangkaian  proses,  seperti  proses  IDEAL  (Identifikasi Masalah, Deskripsikan Solusi, Empati pada Pengguna, Tawarkan pada Bisnis, Kesepakatan Terkunci), Prototype, dan Uji. Proses-proses dalam metode Design Thinking bertujuan untuk mengidentifikasi masalah dan menentukan kebutuhan pengguna, memungkinkan mereka untuk diatasi dalam konteks UI/UX(Ichwani et al., 2022).
Industri  penjualan  telah  terpengaruh  oleh  teknologi  digital,  yang  terlihat  dari munculnya aplikasi sistem penjualan. Sistem-sistem ini umumnya menampilkan beragam produk  melalui  katalog,  meningkatkan  kemudahan  bagi  perusahaan  untuk  memilih  dan membandingkan produk yang tersedia. Selain itu, aplikasi penjualan turut berperan dalam menyederhanakan dan mengoptimalkan proses penjualan, terutama dalam hal pengolahan data penjualan(Sintaro, 2022). Penggunaan smartphone atau laptop untuk memesan barang dan  internet  sebagai  media  koneksi  memerlukan  pertimbangan  hati-hati  terhadap pengalaman  pengguna  dalam  desain  sistem  penjualan.  Untuk  tetap  sejalan  dengan kemajuan teknologi, disarankan untuk beralih dari sistem manual ke sistem terkomputerisasi,
memanfaatkan teknologi terkini untuk mempermudah dan mempercepat transfer data dan proses pengambilan keputusan(Warjiyono et al., 2020).
Dengan memanfaatkan informasi yang dikumpulkan dari masalah yang di identifikasi, sebuah  antarmuka  UI/UX  akan  dibuat  untuk  mengatasi  dan  meningkatkan  proses pemesanan.  Pemanfaatan  metode  online  dalam  pemasaran  memainkan  peran  penting dalam  meningkatkan  keuntungan  penjualan  bisnis(Ichwani  et  al.,  2021).  Design  thinking berfungsi sebagai salah satu pendekatan untuk menentukan dan merancang antarmuka. Ini adalah metode yang secara konsisten mengidentifikasi masalah dan kebutuhan pengguna, bertujuan  untuk  membuat  desain  yang  memahami  dan  memberikan  solusi  inovatif  bagi pengguna. (Anwar et al., 2022).

## METODE PENELITIAN
Metode  Penelitian  ini  menggunakan  metode  Desain  Thingking  sebagai  metode penelitiannya.  Penelitian ini disusun bedasarkan hasil dari  Tahapan Penelitian dan secara sistematis  menggunakan  metode  pemikiran  desain  untuk  menjelaskan  keterhubungan antara berbagai proses(Huda & Apriyanto, 2019).

## Gambar 1. Proses Metode Penelitian(Huda & Apriyanto, 2019)

## Design Thingking
Design  Thinking  adalah  pendekatan  dalam  menyelesaikan  masalah  yang menempatkan  pengguna  sebagai  fokus  utama.  Tujuan  utamanya  adalah  menciptakan produk  yang  benar-benar  dapat  menyelesaikan  masalah  yang  ada  dan  sesuai  dengan
kebutuhan  dan  preferensi  pengguna.  Penerapan  metode  Design  Thinking  menawarkan solusi untuk masalah pengguna, dimulai dengan tahap empati untuk memahami tantangan dan  perilaku  pengguna  dalam  situasi  yang  dirasakan.  Keunggulan  utama  dari  metode Design  Thinking  terletak  pada  penghasilan  ide  yang  lebih  inovatif  dan  pengembangan produk yang memenuhi keinginan dan kebutuhan pengguna(Sulistyono & Setiawan, 2023).
Gambar 2. Diagram Desain Thingking(Sulistyono & Setiawan, 2023) Pada metode design thinking terdapat 5 tahapan proses yaitu sebagai berikut:
1. Empathize
Design thinking adalah sebuah metodologi yang berputar di sekitar desain berpusat pada  pengguna,  dengan  menekankan  proses  berpikir  pada  kebutuhan  pengguna. Dengan memasukkan empati, desain inovasi menjadi sangat sesuai dengan kebutuhan pengguna. Oleh karena itu, memberikan solusi langsung terhadap kebutuhan pengguna menjadi bagian integral dari proses tersebut.
2. Define
Setelah memahami nilai-nilai yang dibutuhkan melalui empati, penting untuk memulai proses  mengartikulasikan  masalah  yang  berasal  dari  informasi  yang  dikumpulkan melalui  observasi  empatik  pada  tahap  awal.  Selama  tahap  ini,  kebutuhan  tersebut diorganisir ke dalam kategori-kategori yang lebih sempit yang menawarkan perspektif yang lebih terkonsentrasi.
3. Ideate
Ideate  adalah  mewakili  fase  penghasilan  ide,  sering  disebut  sebagai  brainstorming.
Selama tahap ini, antisipasinya adalah agar ide-ide muncul yang berpotensi menjadi solusi untuk masalah saat ini. Metode ini melibatkan pengembangan kreativitas dengan menghasilkan berbagai ide.
4. Prototype
Selama tahap ini, sebuah prototipe dibuat sebagai hasil sementara dari desain (User Interface).  Sebuah  prototipe  berfungsi  sebagai  representasi  awal  yang  dibuat  untuk mencerminkan skala sebenarnya sebelum pengembangan lebih lanjut atau disesuaikan untuk tujuan pengembangan sebelum produksi dalam skala sebenarnya.

## 5. Testing
Selama tahap pengujian, hal tersebut erat terkait dengan tahapan sebelumnya, yaitu pembuatan prototipe. (Gani et al., 2021).

## User Interface
User Interface (UI) berfungsi sebagai elemen  yang berinteraksi  dengan  pengguna dan memainkan peran penting dalam membantu mereka memenuhi kebutuhan informasi. Ini dapat dianggap sebagai representasi mesin atau komputer yang langsung berinteraksi dengan pengguna. User Interface tidak terbatas hanya pada warna dan bentuk tapi juga melibatkan  penyajian  alat-alat  yang  tepat  secara  akurat  untuk  membantu  pengguna mencapai  tujuan  mereka(Zukhri,  2022).  User  Interface  yang  dirancang  dengan  baik seharusnya  menciptakan  keseimbangan  yang  mulus  antara  estetika  yang  menarik  dan interaktivitas  yang  tanpa  usaha  tambahan,  memikat  pengguna  untuk  tinggal  tanpa memerlukan upaya ekstra sehingga membuat pengguna merasa nyaman(Hamdandi et al., 2022).

## User Experience
User  Experience  adalah  impresi  atau  pengalaman  yang  diperoleh  pengguna  saat berinteraksi  dengan  User  Interface,  faktor  krusial  dalam  menentukan  informasi  yang disajikan.  Interaksi  pengguna  dengan  User  Interface  sistem  menghasilkan  evaluasi berdasarkan pengalaman mereka. User Experience tidak hanya sebatas elemen visual dari User Interface tapi juga melibatkan seluruh proses yang dilalui pengguna saat berinteraksi dengan sistem(Shirvanadi & Idris, 2021). Merancang User Experience dengan pendekatan berorientasi  pada  pengguna  menjamin  kenyamanan  dan  kemudahan  selama  interaksi pengguna dengan sistem. User Experience yang dirasakan memengaruhi kemudahan dan kenyamanan yang dirasakan pengguna saat menggunakan berbagai fitur yang ditawarkan oleh sistem. Pengguna dengan User Experience yang positif akan mengoperasikan aplikasi dengan lancar tanpa perlu menjelajahi kegunaan berbagai fitur atau menu. Untuk mencapai User Experience yang baik, perlu dilakukan evaluasi terhadap berbagai aspek sistem untuk mengidentifikasi solusi yang sesuai dengan kebutuhan pengguna(Adha et al., 2023).

## HASIL DAN PEMBAHASAN

## Implementasi Design Thinking
1) Emphatize (Empati)
Pada tahap kita melakukan pengamatan dengan cara menentukan dan mengamati dari
beberapa kasus yang sudah ada sebelumnya.
2) Define (Penentuan)
Tahap penentuan ini, Selama fase penentuan, masalah yang di identifikasi dalam proses empati  berpusat  pada  sistem  yang  masih  mengandalkan  pencatatan  manual  untuk pembelian  barang.  Solusi  yang  diusulkan  mencakup  pengenalan  media  alternatif, khususnya sistem penjualan berbasis web, yang disesuaikan dengan pengguna target dan dapat menggunakan teknologi Internet untuk memfasilitasi pertukaran informasi. Selain  itu,  pengenalan  sistem  penjualan  berbasis  web  ini  memungkinkan  membeli produk  secara  online,  menyederhanakan  proses  bagi  pengguna  untuk  menemukan produk  yang  perusahaan  inginkan,  dan  memungkinkan  mereka  mengatur  waktu pengiriman barang yang sesuai keinginan mereka dalam hal waktu, hari, dan keuangan. sistem  ini  meningkatkan  efisiensi  manajemen  keuangan  perusahaan  dan  pelacakan inventaris  otomatis.  Sistem  penjualan  berbasis web  dapat lebih ditingkatkan dengan mempertimbangkan umpan balik dan pendapat dari pengguna online.
3) Ideate (Ide)
Ideate dari tahap sebelumnya berfokus pada pengembangan sistem yang mengatasi tantangan  yang  terkait  dengan  pengambilan  produk  secara  manual  dan  pembelian produk  secara  offline,  dengan  tetap  mempertimbangkan  keterbatasan  waktu  dan preferensi  orang-orang  yang  tidak  suka  menunggu.  Setelah  pengguna  mempelajari sistem penjualan, diharapkan dapat memberikan feedback, oleh karena itu, tujuan kami adalah  merancang  pengalaman  pengguna  yang  membangun  kepercayaan  di  antara calon  pengguna  saat  menggunakan  sistem  penjualan  tersebut.  Kelompok  sasaran sistem  ini  mencakup  perusahaan  besar  atau  vendor,  kami  telah  membuat  sistem sesederhana mungkin dan fokus pada kemudahan penggunaan.
4) Prototype (Prototipe)
Pada  tahap  ini,  kita  harus  menata  kembali  alur  sistem  penjualan  berbasis  web  dan menjadikan pola dalam membuat filtur yang ada dalam sistem. Digital Prototype yang digunakan sebagai acuan dari proses desain simulasi  sistem penjualan berbasis web. Pada gambar 3 berupa alur proses pembuatan sistem menggunakan Digital Prototype menggunakan aplikasi Figma.
Gambar 3. pada menu utama dan menu login
Gambar 5. pada
menu penjualan berbasis website
Gambar 6. pada invoice pembayaran barang

## 5) Test (Pengujian)
Selama  tahap  terakhir,  proses  pengujian  aplikasi  dilakukan  menggunakan  prototype digital yang tersedia dalam aplikasi Figma. Pengujian dilakukan dengan menggunakan metode  dimana  penulis  mencari  responden  untuk  diwawancarai  tentang  sistem tersebut. Responden diajak untuk mencoba fitur - fitur prototipe yang dihasilkan, dan evaluasi dilakukan melalui Google form. Hasil pengujian menunjukkan kepuasan yang memuaskan  dari  pengguna  yang  mencoba  sistem  penjualan  berbasis  web.  Selama pengujian, penulis memilih  18 responden  untuk mencoba sistem penjualan  web dan mengisi  Formulir  Google  untuk  mengevaluasi  kepuasan  pengguna  terhadap  sistem tersebut.
Di bawah ini tercantum nama-nama individu yang telah melakukan uji coba untuk setiap fitur dari prototype yang dihasilkan dan mengisi formulir penilaian kepuasan melalui Google Form:
Gambar 7. Nama responden yang memberi penilaian
Tabel 1. Tabel hasil dari penilaian kepuasan respondenmenggunakan google form
No Daftar Pertanyaan
1. Seberapa nyaman anda dengan antarmuka pengguna (UI) saat menggunakan
sistem penjualan ini?

## 2.
Bagaimana tanggapan anda
terhadap struktur dan
pengaturan informasi dalam antarmuka pengguna(UI)
yang telah di buat?

## 3.
Apakah anda menemukan
elemen - elemen visual (ikon,gambar,dll) mudah di
pahami dan dapat dengan
mudah di indetifikasi
fungsinya 4. Bagaimana pendapat anda tentang warna dan kontras yang di gunakan dalam antarmuka pengguna?
5. Seberapa mudah anda memahami navigasi antarmuka pengguna(UI)
kami?
Umpan balik yang diterima dari survei kepuasan pengguna mengenai penggunaan Sistem Penjualan  Berbasis  Web  secara  umum  sangat  positif.  Setelah  dievaluasi  oleh  para responden,  penulis  juga  menggali  wawasan  lebih  lanjut  dari  umpan  balik  mereka,  yang dapat  menjadi  referensi  berharga  untuk  meningkatkan  desain  sistem  penjualan  berbasis web. Berikut adalah hasil yang disediakan oleh para responden. Pertanyaan yang diajukan kepada  responden  : Apakah  ada  fitur  -  fitur  tambahan  yang  anda  inginkan  di  dalam antarmuka pengguna (UI) sistem  penjualan berbasis web ini?
Jawab Responden :
Gambar 8. Hasil saran dari responden

## SIMPULAN
Penerapan desain UI/UX pada sistem penjualan berbasis web dengan metode desain thinking bertujuan untuk memfasilitasi kebutuhan bisnis pada perusahaan dan memberikan solusi  permasalahan bisnis perusahaan melalui desain solusi. Penerapan metode berpikir desain dalam penelitian ini terdiri dari empati, definisi masalah, penentuan ide atau solusi, perencanaan  desain  solusi,  dan  pengujian  desain  solusi.  Dari  penelitian  ini  dapat disimpulkan  bahwa  sistem penjualan  berbasis web mempunyai antarmuka yang menarik dan  mudah  digunakan  oleh  responden,  selain  itu,  terdapat  beberapa  masukan  dari responden yang dapat dijadikan referensi untuk penelitian selanjutnya. Hasil penelitian ini diharapkan dapat menjadi landasan  pengembangan lebih lanjut sebagai acuan pembuatan sistem. Harapannya dengan menambahkan fitur-fitur lainnya yang hilang atau memperbaiki tampilannya, sistem yang dianggap terlalu sederhana menjadi lebih menarik dan berkualitas.

## DAFTAR PUSTAKA
Adha, I. A., Voutama, A., & Ali Ridha, A. (2023). Perancangan UI/UX Aplikasi Ogan Lopian Diskominfo  Purwakarta  Menggunakan  Metode  Design  Thinking. JOISIE  Journal  Of Information System And Informatics Engineering, 7(1), 55 – 70.
Anwar, A. A., Huda, B., Novalia, E., Paryono, T., & Piantara, S. (2022). Pengembangan UI / UX Pada  Aplikasi  Buana  Online  Course  Menggunakan  Metode  Design  Thinking  (Studi Kasus: Universitas Buana Perjuangan Karawang). INTECOMS: Journal of Information Technology and Computer Science, 5(2), 119 – 124. https://doi.org/10.31539/intecoms.v5i2.4988
Damayanti,  C.,  Triayudi,  A.,  &  Sholihati,  I.  D.  (2022).  Analisis  UI/UX  Untuk  Perancangan Website Apotek dengan Metode Human Centered Design dan System Usability Scale. Jurnal Media Informatika Budidarma, 6(1), 551. https://doi.org/10.30865/mib.v6i1.3526
Gani, R. P., Puspita, I. A., & Tripiawan, W. (2021). Perancangan Ui/ux Design Pada Dashboard Monitoring Proyek Menggunakan Metode Design Thinking Untuk Penerapan Sistem Earned Value Management Pada Pt. Xyz. Jurnal Teknologi Dan Sistem Informasi (JTSI), 8(5), 8465 – 8480.
Hamdandi,  M.,  Chandra,  R.,  Bachtiar,  F.,  Lais,  N.,  Sastika,  D.  A.,  &  Pribadi,  M.  R.  (2022). Perancangan  UI  /  UX  Pada  Aplikasi  Bapakkost  Idemopet  dengan  Menggunakan Metode Design Thinking. MDP Student Conference 2022, 1(1), 504 – 511.
Huda, B., Amin, A. S., Nurapriani, F., Damuri, A., Buana, U., Karawang, P., Informasi, S., & Dini,
A.  U.  (2023). APLIKASI  MONITORING  PERKEMBANGAN  EDUKASI  ANAK  USIA  DINI BERBASIS WEB ( Studi Kasus : pada Paud Al Qudwah Kecamatan Klari ). 1(1), 1 – 10.
Huda,  B.,  &  Apriyanto,  S.  (2019).  Aplikasi  Sistem  Informasi  Lowongan  Pekerjaan  Berbasis
Android dan Web Monitoring. Buana Ilmu, 4(1), 11 – 24. https://journal.ubpkarawang.ac.id/index.php/BuanaIlmu/article/view/808
Ichwani, A., Anwar, N., Karsono, K., & Alrifqi, M. (2021). Sistem Informasi Penjualan Berbasis Website  dengan  Pendekatan  Metode  Prototype. Prosiding  SISFOTEK,  5(1),  1 – 6. https://scholar.google.com/citations?view_op=view_citation&hl=en&user=FOwZ8hU AAAAJ&pagesize=100&citation_for_view=FOwZ8hUAAAAJ:F9fV5C73w3QC
Ichwani, A., Anwar, N., Karsono, K., Alrifqi, M., Web, B., Kasus, S., Sehati, S. M. K., Herfandi,
H., Yuliadi, Y., Zaen, M. T. A., Hamdani, F., Safira, A. M., Warjiyono, W., Fandhilah, F., Rais, A. N., Ishaq, A., Zukhri, Z., Huda, B., Amin, A. S., … Nabila, G. (2022). MDP STUDENT CONFERENCE (MSC) 2022 Penerapan UI/UX Dengan Metode Design Thinking Pada Aplikasi  Jaya  Indah  Perkas. INTECOMS:  Journal  of  Information  Technology  and Computer Science, 1(1), 337 – 344. https://doi.org/10.30700/jst.v11i1.1066
Nadhif, A. K., Jati, D. T. W., Hussein, M. F., & Widiati, I. S. (2021). Perancangan UI/UX Aplikasi Penjualan  Dengan  Pendekatan  Design  Thinking. Jurnal  Ilmiah  IT  CIDA,  7(1),  44 – 55. https://doi.org/10.55635/jic.v7i1.146
Shirvanadi,  E.  C.,  &  Idris,  M.  (2021).  Perancangan  ulang  UI/UX  situs  e-learning  aminkom center  metode  design  thinking  (studi  kasus:  amikom  center). Automata,  2,  1 – 8. https://journal.uii.ac.id/AUTOMATA/article/view/19438/11541
Sintaro, S. (2022). Permodelan Sistem Informasi Pembelian dan Penjualan Berbasis Website. Jurnal  Ilmiah  Informatika  Dan  Ilmu  Komputer  (JIMA-ILKOM),  1(1),  25 – 32. https://doi.org/10.58602/jima-ilkom.v1i1.5
Sulistyono,  M.  R.,  &  Setiawan,  A.  (2023). Penerapan  Metode  Design  Thinking  untuk Perancangan  UI  /  UX  Sistem  E-Marketplace  Berbasis  Website.  4(4). https://doi.org/10.47065/josh.v4i4.3534
Warjiyono,  W.,  Fandhilah,  F.,  Rais,  A.  N.,  &  Ishaq,  A.  (2020).  Metode  FAST  &  Framework PIECES : Analisis & Desain Sistem Informasi Penjualan Berbasis Website. Indonesian Journal on Software Engineering (IJSE), 6(2), 172 – 181. https://doi.org/10.31294/ijse.v6i2.8988
Zukhri, Z. (2022). Implementasi Metode Design Thinking Pada Perancangan UI/UX Website Tracking GPS Tiara Track. 101 – 110.
https://journal.uii.ac.id/AUTOMATA/article/view/24213