Danang Haryuda Putra, Marsani Asfi, Rifqi Fahrudin Jurnal Ilmiah Teknologi Informasi Terapan Volume 8, No 1, 15 Desember 2021
E-ISSN : 2407 – 3911 P-ISSN : 2686 - 0333
PERANCANGAN UI/UX MENGGUNAKAN METODE DESIGN THINKING BERBASIS WEB PADA LAPORTEA COMPANY
Danang Haryuda Putra, Marsani Asfi, Rifqi Fahrudin Program Studi Sistem Informasi Universitas Catur Insan Cendekia Jl. Kesambi 202 Kota Cirebon, Jawa Barat, Indonesia danangharyuda22@gmail.com , rifqifhrdn@gmail.com , marsani.asfi@gmail.com

## Abstrak
Laportea  Company  merupakan  gerai  toko  yang menjual produk seperti pakaian,celana hingga sepatu. Namun  seiring  berkembangnya  teknologi  gerai  toko ataupun  distro  -  distro  lokal  ditinggalkan  masyarakat terutama  masyarakat  modern  dikarenakan  promosi pemasaran  nya  masih  terbilang  kuno.  Upaya  yang dilakukan  untuk  menjaga  agar  produk-produk  yang dijual agar diminati kembali salah satunya menggunakan  teknologi  yang  sekarang  sangat berkembang.  Banyak  online  shop  yang  menyediakan platform  nya  sendiri  namun  kebanyakan  tidak memperhatikan visual, kenyamanan pengguna hingga pengalaman  pengguna  dalam  setiap  fitur  yang digunakan. Maka dari itu pengaruh User Interface dan User Experience dalam perancangan desain prototype website  sangat  dibutuhkan  agar  pengguna  merasa nyaman dan pengalaman yang diberikan mendapatkan hasil  yang baik ketika menggunakan produk tersebut. Proses  dibuatnya  perancangan  ini  menggunakan metode  Design  Thinking  yang  terdapat  lima  tahapan yang harus
di
lalui yaitu emphatize,define,ideate,prototype dan test.
Kata  kunci  : Design Thinking , User Interface , User Experience .

## Abstract
Laportea Company is a store outlet that sells products such as clothing, pants to shoes. However, along with the  development  of  store  outlet  technology  or  local distributions,  the  community,  especially  modern society,  has  abandoned  it  because  the  marketing promotion  is  still  quite  old-fashioned.  Efforts  are being made to keep the products sold to be in demand again,  one  of  them  is  using  technology  that  is  now very developed. Many online shops provide their own
platforms,  but  most  do  not  pay  attention  to  visuals, user  convenience  to  user  experience  in  every  feature used.  Therefore,  the  influence  of  User  Interface  and User  Experience  in  designing  website  prototype designs  is  needed  so  that  users  feel  comfortable  and the experience provided gets good results when using these  products.  The  process  of  making  this  design uses  the  Design  Thinking  method  which  has  five stages that must be passed, namely empathize, define, ideate, prototype and test.
Keywords  :  Design  Thinking,  User  Interface,  User Experience.

## I. P ENDAHULUAN
Pesatnya  perkembangan  teknologi  dari  tahun  ke tahun, salah satunya pada bidang internet, tidak hanya mengubah  cara  berpikir  masyarakat,  tetapi  juga mengubah cara hidup yang dipengaruhi oleh pesatnya perkembangan teknologi. mulai dari cara berinteraksi, media  sosial  hingga  belanja.  UI  (User  Interface)  dan UX (User Experience) adalah salah satu perkembangan  teknologi  yang  dapat  memanfaatkan sarana  digital  maupun  internet  untuk  melakukan perancangan  suatu  produk  yang  dapat  dilihat  dan digunakan secara baik serta meningkatkan kenyamanan  dan  kemudahan  pengguna  dalam menggunakan  produk  atau  jasa  tersebut.  Jika sebelumnya  berbelanja  seperti  baju  dan  celana dilakukan  secara  offline,  namun  dengan  adanya internet  berbelanja  dapat  dilakukan  secara  online. Dengan    perkembangan  teknologi  belanja  dapat diakses secara online melalui website.
Laportea Company merupakan sebuah nama dari gerai  toko  atau  biasa  disebut  distro  dikalangan  anak muda  yang  menyediakan  serta  menjual  berbagai produk seperti pakaian, jaket, sepatu hingga aksesoris.
Danang Haryuda Putra, Marsani Asfi, Rifqi Fahrudin Jurnal Ilmiah Teknologi Informasi Terapan Volume 8, No 1, 15 Desember 2021

## E-ISSN : 2407 – 3911 P-ISSN : 2686 - 0333
Namun  dengan  banyaknya  produk  yang  dijual  pihak laportea  company  sendiri  belum  mempunyai  suatu rancangan  desain  prototype  e-commerce  apalagi website  itu  sendiri.  Untuk  merancang  sebuah prototipe situs web online shop, maka harus memiliki User  Interface  dan  User  Experience  pengguna  yang baik  sehingga  pengguna  tidak  kesulitan  dalam mengoperasionalkan produk yang telah dirancang dan mendapatkan  pengalaman  yang  mengesankan  oleh pengguna setelah menggunakan prototype tersebut..
Maka  dari  itu  tujuan  penelitian  ini  bermaksud untuk  membuat  model  perancangan  User  Interface dan  User  Experience  dengan  melakukan  inovasi dalam bentuk website e-commerce dengan menggunakan  metode  Design  Thinking.  Dengan adanya  metode  Design  Thinking,dirasa  mampu memecahkan masalah yang ada, seperti memudahkan pengguna  untuk  menggunakan  prototype  yang  telah dibuat,  dan  pengalaman  yang  diberikan  dapat membuahkan hasil yang baik (Zuhdi, H. I. 2020).

## II. K AJIAN L ITERATUR

## II.1 User Interface
User  interface  adalah  cara  program  dan pengguna untuk berinteraksi. User Interface juga bisa berbentuk  tampilan  visual  sebuah  produk  yang menjembatani sistem dengan user. Tampilan UI dapat berupa  bentuk, warna, icon dan tulisan  yang didesain semenarik  mungkin.  Secara  sederhana,  UI  adalah bagaimana  tampilan  sebuah  produk  dilihat  oleh pengguna (Lastiansyah, Sena. 2012).

## II.2 User Experience
User Experience adalah bagaimana pengalaman pengguna
dalam berinteraksi menggunakan produk ataupun jasa (Creative Business Jakarta. 2013).

## II.3 Design Thinking
Gambar 1 Design Thinking
Sebuah  metode  pemecah  suatu  masalah berbasis solusi yang hanya berfokus pada pengalaman dari  pengguna  yang  bersifat  pengulangan.  Pada metode  yang  digunakan  terdapat  lima  tahapan  yaitu Emphatize,  Define,  Ideate,  Prototype  dan  Test. Berikut  langkah  –  Langkah  dari  metode  Design Thinking (Aulia,N.Andryana,S. & Gunaryati,A. 2021) :
1. Emphatize
Empati  adalah  bagaimana  cara  kita  memahami emosi  yang  sama  dengan  emosi  yang  dirasakan orang lain. Melalui empati kita dapat merasakan perasaan  mereka  tentang  masalah,  situasi,  dan keadaan.
2. Define
Define  adalah  suatu  proses  cara  mendapatkan pandangan dari user serta memahami kebutuhan pengguna. Seperti halnya membuat user persona yang  nantinya  akan  menjadi  suatu  landasan dasar  dari  perancangan  pembuatan  produk ataupun aplikasi.
3. Ideate
Ideate  merupakan  proses  suatu  penggambaran suatu  solusi  dari  berbagai  ide  kemudian digambarkan melalui brainstorming.
4. Prototype
Proses terjadinya pembuatan rancangan tampilan website yang ingin dibangun kemudian mengimplementasikan  ide  agar  menghasilkan suatu prototype atau produk yang siap diuji.
5. Test
Tes  adalah  suatu  teknik  yang  digunakan  untuk melakukan  kegiatan  evaluasi,  yang  didalamnya terdapat  beberapa  pertanyaan  atau  rangkaian tugas yang  harus diselesaikan atau dijawab oleh peserta.

## III. A NALISIS DAN P ERANCANGAN
Berikut  pembahasan  analisis  dan  perancangan dari metode Design Thinking :

## III.1 Emphatize
Pada  tahap  emphatize  ini  merupakan  suatu proses  pemahaman  empatik  tentang  masalah  yang ingin diselesaikan, dengan cara melalui observasi atau
Danang Haryuda Putra, Marsani Asfi, Rifqi Fahrudin Jurnal Ilmiah Teknologi Informasi Terapan Volume 8, No 1, 15 Desember 2021
E-ISSN : 2407 – 3911 P-ISSN : 2686 - 0333
wawancara  dan  kuisioner.  Wawancara  dilakukan secara  online  (kuisioner)  yang  telah  disebarkan  pada pelanggan Laportea Company. Dengan begitu penulis mendapatkan  hasil  kuisioner  yang  telah  diisi  oleh pengguna sebagai berikut :
Setelah  diproses,  didapatkan  sudut  pandang dari  pengguna  mengenai  website  online  shop    secara umum yaitu:
a. Sebagian  pengguna  tertarik  akan  website  online shop.
b. Beberapa  pengguna  membutuhkan  wadah  untuk disediakannya suatu infomasi  mengenai produk- produk yang dijual online.
c. Desain yang kurang menarik.
d. Susah untuk diakses.

## III.2 Define
Proses define adalah proses mendapatkan opini pengguna dan memahami kebutuhan pengguna, maka dibuatkan  user  persona  dengan  target  pengguna sebanyak  3  orang.    Pada  setiap  persona  menjelaskan tentang  identitas  seperti  nama,  umur  dan  pekerjaan, Kemudian  berisikan  tujuan,frustration  keadaan  saat ini pada pengetahuan teknologi. Gambar 1 merupakan bentuk  dari  User  Persona  yang  didapatkan  dari  user atau calon pengguna.
Gambar 2 User Persona

## III.3 Ideate
Pada  tahap  ideate  ini  proses  terjadinya perancangan  solusi  yang  ditawakan  dari  berbagai  ide yang  telah  dikumpulkan,  berikut  adalah  solusi  yang rancanng pada Gambar 3.

## Gambar 3 User Flow

## III.4 Prototype
Tahap  prototype  yang  dimana  dilakukannya pembuatan  rancangan  tampilan  sebuah  website  dan mengimplementasikan  ide  agar  menghasilkan  suatu prototype tampilan visual berupa low dan high fidelity wireframe.  Gambar  3  merupakan  hasil  perancangan desain Low Fidelity Wireframe dari website Laportea Company.
Danang Haryuda Putra, Marsani Asfi, Rifqi Fahrudin Jurnal Ilmiah Teknologi Informasi Terapan Volume 8, No 1, 15 Desember 2021
E-ISSN : 2407 – 3911 P-ISSN : 2686 - 0333
Gambar 4 Prototype Lo-Fi
III.5 Test
Pada tahapan ini dilakukan pengujian menggunakan  15  orang  partisipan  yang  dibagi menjadi  tiga  indikator  yaitu  pengguna  awam,  biasa, dan  expert  dalam  mengenal  website.  Pengujian  ini menggukan usability testing  metode pengujian untuk mengevaluasi    user  experience  dari  sebuah  produk untuk  mengetahui  seberapa  besar  nilai  yang didapatkan  dari  suatu  antar  muka  sehingga  dapat digunakan oleh user pada saat menjalankan sistem.
Langkah-langkah yang dilakukan dalam usability testing pada penelitian ini adalah menyiapkan para penguji, membuat task usability test, melaksanakan  usability  test  dengan  maze  dan evaluasi.
Gambar 5 Prototype Hi-Fi
1. Skenario Halaman Register

## Gambar 6 Usability Breakdown Register
Berdasarkan  hasil  pengujian  pada  gambar  6 terdapat  nilai  usability  score  yang  cukup  baik  dari  3 screen yang diuji pada halaman register.

## 2. Skenario Halaman Landing Page Home

## Gambar 7 Usability Breakdown Landing Page Home
Berdasarkan  hasil  pengujian  usability  testing pada  gambar  7  halaman  landing page  home  terdapat bahwa  rata  rata  waktu  yang  digunakan  untuk menyelesaikan  tugas  tersebut  memakan  waktu  yang
Danang Haryuda Putra, Marsani Asfi, Rifqi Fahrudin Jurnal Ilmiah Teknologi Informasi Terapan Volume 8, No 1, 15 Desember 2021
E-ISSN : 2407 – 3911 P-ISSN : 2686 - 0333
cukup  lama  untuk  mencari  produk  kemudian  melihat deskripsi dan reviewnya, namun semua penguji dapat melalui nya.

## 3. Skenario Halaman Checkout

## Gambar 8 Usability Breakdown Checkout
Berdasarkan hasil pengujian pada Gambar 8, pengguna  dapat  dengan  mudah  melakukan  semua langkah dalam tugas yang diberikan.

## III.6 Hasil Akhir
Setelah  semua  tahapan  design  thinking terlewati  dan  prototype  akhir  diperoleh.  ada perubahan mendasar seperti warna dan posisi tombol, serta  perubahan  besar  pada  tampilan  yang  disajikan.. Maka  diperoleh  hasil  akhir  berupa  nilai  keseluruhan dari  setiap  tugas  yang  ada.  Berikut  gambaran  hasil akhir  dari  pengujian  usability  testing  pada  website laportea company.

## Gambar 9 Hasil Akhir Pengujian Menggunakan Maze
Setelah  mendapatkan  hasil  akhir  dari  nilai keseluruhan pada test usability testing, maka Langkah selanjutnya  dilakukan  analisis  data  yang  bertujuan untuk  mencari  nilai  dari  aspek  learnbility,  efficiency dan  memorability  atas  penggunaan  website  tersebut.
Berikut  hasil  analisis  data  yang  telah  didapatkan melalui kuisioner yang dibagikan kepada 3 evaluator :
Tabel 1. Hasil Kuisioner Analisis Data
No Pertanyaan P1 P2 P3 Ya (%) Tidak (%) Learnabbility 1 Apakah text website Laportea Company mudah  dan  jelas bagi anda? Y Y Y 100 0 2 Apakah website Laportea Company mudah dioperasikan? Y Y Y 100 0 3 Apakah tampilan  warna pada website Laportea Company  enak dilihat dan mudah dipahami? Y Y Y 100 0 4 Apakah menu yang  ada  cukup mudah dipahami? Y T Y 66,7 33,3
Total Nilai Learnabbility 91,7 8,3 Effeciency 5 Apakah saat diketikan pencarian mudah dan cepat? T Y Y 66,7 33,3 6 Apakah saat button  atau  fitur yang  anda  klik dapat menampilkan dengan cepat? Y Y Y 100 0 7
Apakah  mudah Y Y Y 100 0
Danang Haryuda Putra, Marsani Asfi, Rifqi Fahrudin Jurnal Ilmiah Teknologi Informasi Terapan Volume 8, No 1, 15 Desember 2021
E-ISSN : 2407 – 3911 P-ISSN : 2686 - 0333
dan  cepat  ketika mengakses transaksi  produk
yang  ada  pada menu laportea? Total Nilai Efficiency 88,9 11,1 Memmorability 8 Apakah icon - icon pada website mudah dipahami? Y Y Y 100 0 9 Apakah anda bisa  mengingat kembali halaman atau menu  yang  anda kunjungi? T Y Y 66,7 33,3
10 Apakah menu halaman website mudah diingat? Y Y T 66,7 33,3 Total Nilai Memorability 77,8 22,2 Total Keseluruhan 86.1 13,9

## IV. K ESIMPULAN DAN S ARAN
IV.1 Kesimpulan
Berdasarkan hasil penelitian berupa perancangan, pembuatan dan pengujian dari Perancangan  UI/UX  Menggunakan  Metode  Design Thinking  Berbasis  Web  Pada  Laportea  Company diperoleh  hasil  tes  usability  testing  sebesar  91,% dan hasil  dari  analisa  data  diperoleh  nilai  sebesar  86,1%. Maka  metode  dan  pengujian  yang  digunakan  dirasa dapat membantu dalam menghasilkan sebuah prototype  produk  yang  sesuai  oleh  calon  pengguna website  online  shop  laportea  company  ketika  ingin berbelanja.

## IV.2 Saran
Berdasarkan  kesimpulan  yang  telah  dibuat, maka  penulis  memberikan  beberapa  saran  yaitu memperluas  penelitian  untuk  kedepannya  dan  terus melakukan perbaikan dan pengembangan pada desain prototype  website  laportea  company,  Diharapkan
pengembangan  tidak  hanya  sebatas  perancangan desain  saja,  akan  tetapi  dapat  juga  diintegrasikan dengan  sistem-sistem  yang  lain  dengan  membuat multiplatform pada user yang membutuhkan.

## R EFERENSI
Zuhdi,  H.  I.  (2020).  Analisis  dan  Perancangan  User Interface/User  Experience  dengan  Metode Design  Thinking  pada  Sistem  Informasi Akademik  Universitas  Jenderal  Soedirman (Doctoral  dissertation,  Universitas  Jenderal Soedirman).
Lastiansyah,  Sena.  2012.  Pengertian  User  Interface. Jakarta: PT. Elex Media Komputindo.
Aulia,N.Andryana,S. & Gunaryati,A. (2021). Perancangan  User  Experience  Aplikasi Mobile Charity Menggunakan Metode Design Thinking. Jurnal SISFOTENIKA, 26- 36. Creative  Business  Jakarta.  2013.  Belajar  User Experience (UX) Strategy. [Online].
Tersedia: http://actdisain.com/belajar-user-
experience-ux-strategy/  [Diakses  :  17  Mei 2021].
F.  Muhammad,Nif’an.  “UI/UX  untuk  Pemula: Perbedaan  Icon  dan  Button  yang  Wajib untuk  Diketahui!”.  1  April  2020.  Online. Tersedia: https://nifanfatahillah.medium.com/ui-ux- untuk-pemula-perbedaan-icon-dan-button- yang-wajib-untuk-diketahui-ab3aec645036. [Diakses : 17 Mei 2021].
G.  Getto  and  J.  Cao,  “UX  Design  The  Definitive Beginner’s Guide,” UXPin, pp. 1–96, 2016.
Muhyidin,  M.  A.,  Sulhan,  M.  A.,  &  Sevtiana,  A. (2020). Perancangan UI/UX Aplikasi My Cic Layanan  Informasi  Akademik  Mahasiswa Menggunakan  Aplikasi  Figma.  Jurnal  Digit, 10(2), 208-219.
Kelley,  D.,  &  Brown,  T.  (2018).  An  introduction  to Design  Thinking.  Institute  of  Design  at Stanford.
Razi,  A.  A.,  Mutiaz,  I.  R.,  &  Setiawan,  P.  (2018).
Penerapan  Metode  Design  Thinking  Pada Model Perancangan UI/UX Aplikasi Penanganan Laporan Kehilangan Dan
Danang Haryuda Putra, Marsani Asfi, Rifqi Fahrudin Jurnal Ilmiah Teknologi Informasi Terapan Volume 8, No 1, 15 Desember 2021
E-ISSN : 2407 – 3911 P-ISSN : 2686 - 0333
Temuan Barang Tercecer. Desain Komunikasi Visual, Manajemen Desain Dan
Periklanan (Demandia), 3(02), 219-237.
Sabariah,  M.  K.  (2016).  Recommendation  of Information  Architecture  Design  on  Higher Education  Institution  Website  Using  Card Sorting  Approach  on  Goal-Directed  Design Method. International Journal on Information and  Communication  Technology  (IJoICT), 2(1), 45-56.
Vallendito,  B.  (2020).  Pemodelan  user  interface  dan user experience menggunakan Design
Thinking  (Doctoral  dissertation,  Universitas
Islam Negeri Maulana Malik Ibrahim).
Wedayanti,  N.  L.  P.  A.,  Wirdiani,  N.  K.  A.,  &
Purnawan,  I.  K.  A.  (2019).  Evaluasi  Aspek Usability pada Aplikasi Simalu
Menggunakan  Metode  Usability  Testing.
Jurnal  Ilmiah  Merpati  (Menara  Penelitian Akademika Teknologi Informasi), 113-124.
Wilbert  O.  Galitz,  The  Essential  Guide  to  User
Interface Design. Canada: Wiley
Publishing,Inc, 2007.
Darmawan,  Deni.,  &  Kunkun  Nur  Fauzi.  (2013). Sistem  Informasi  Manajemen.  Bandung:  PT Remaja Rosdakarya.