## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 462~468 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085

## PERANCANGAN UI/UX APLIKASI MOBILE PENJUALAN PADA TOKO UP STORE MENGGUNAKAN FIGMA
1 Ardi Mandani, 2 Ahmad Mutatkin Bakti
1,2 Fakutlas Sains dan Teknologi, Universitas Binadarma Palembang, Indonesia
1 mandani25@gmail ; 2 mutakin.bakti@binadarma.ac.id ;
Article Info ABSTRAK Article history: Received, 2023-09-15 Revised, 2023-11-07 Accepted, 2023-11-29 Dalam  lingkungan  digital  saat  ini,  aplikasi  seluler  sangat  penting untuk meningkatkan pengalaman pengguna dan jangkauan penjualan.
Studi  ini  akan  menggunakan  desain  perangkat  lunak  Figma  untuk menciptakan  antarmuka  pengguna  (UI)  dan  pengalaman  pengguna (UX)  untuk  penjualan  aplikasi  seluler  di  Up  Store.  Figma,  platform prototyping  online,  dapat  digunakan  untuk  membuat  aplikasi  web atau  seluler.  Pemrogram  dapat  berkontribusi  pada  proyek  figma dengan  menulis  kode  mereka  sendiri.  Proses  yang  digunakan  untuk membuat  desain  ini  disebut  Design  Thinking.  Design  Thinking berfokus  pada  pemahaman  pengguna,  pengembangan  ide,  dan pengujian solusi melalui siklus berulang. Strategi ini akan membantu dalam  mendefinisikan  kebutuhan  pengguna,  memahami  konteks penggunaan,  dan  menciptakan  desain  yang  dapat  diterima  dan efisien.  Penelitian  ini  menghasilkan  desain  UI  /  UX  aplikasi  seluler yang  sesuai  dengan  prinsipprinsip  desain  suara  dan  menggunakan tren  penjualan  saat  ini  di  Up  Store.  Jika  antarmuka  pengguna dirancang  dengan  baik,  pengguna  akan  berinteraksi  dengan  aplikasi secara  lebih  positif,  meningkatkan  retensi  dan  penjualan  pengguna. Figma  juga  memungkinkan  desainer  UI  /  UX  dan  pengembang aplikasi untuk berkomunikasi lebih berhasil selama fase desain . ”
Kata Kunci:
Design Thinking, UI, UX

## ABSTRACT
Keywords: Design Thinking, UI, UX Today's digital environment, mobile applications are essential for improving user experience and sales reach. This study will use Figma software design to create a user interface (UI) and user experience (UX) for mobile app sales on  Up Store.  Figma, an  online  prototyping  platform,  can  be  used  to  create web  or  mobile  applications.  Programmers  can  contribute  to  the  figma project by writing their own code. The process used to create this design is called  Design  Thinking.  Design  Thinking  focuses  on  understanding  users, developing ideas, and testing solutions through iterative cycles. This strategy will  help  in  defining  user  needs,  understanding  the  context  of  use,  and creating  an  acceptable  and  efficient  design.  This  research  resulted  in  a mobile application UI/UX design that complies with sound design principles and  uses  current  sales  trends  in  the  Up  Store.  If  the  user  interface  is  well designed,  users  will  interact  with  the  app  more  positively,  increasing  user retention and sales. Figma also allows UI/UX designers and app developers to communicate more successfully during the design phase.
This is an open access article under the CC BY-SA license.
Penulis Korespondensi:
Ahmad Mutatkin Bakti, Program Studi Teknik Informatika, Universitas Bina Darma, Email: mutakin.bakti@ binadarma.ac.id

## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 462~468 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085

## 1. PENDAHULUAN
Saat  ini,  kemajuan  teknologi  telah  meningkat  secara  signifikan,  khususnya  di  sektor  informasi. Seharusnya  tidak  mengherankan  bahwa  informasi  telah  menjadi  komponen  penting  bagi  semua kalangan,  baikindividu,  organisasi,  atau  bisnis,  karena  kebutuhan  akan  informasitumbuh  seiring dengan perkembangan penyedia informasi teknologi. Dengan penggunaan teknologi digital berupa aplikasi  dalam  proses  jualbeli  menjadi  akrab,  individu  mulai  merasakan  dampak  positif daripenggunaannya untuk mencari informasi tentang barang atau jasa. Mayoritas aplikasi penjualan yang tersedia saat ini dapat memberikan pilihan produk yang ditampilkan sebagai foto atau katalog. Tujuannya  dibuat  jelas sehingga  pelanggan  dapat  dengan  cepat  mengidentifikasi  hal  yang mereka butuhkan  dan  membandingkannya  dengan  item  lain  dalam  aplikasi  [1]-[5].  Penggunaan  aplikasi tersebut  tidak  diragukan  lagi  diharapkan  dapat  mempermudah  proses  penjualan  dan  dapat membantu  dalam  mengolah  data  penjualan  selain  memudahkan  pencarian.Toko  Up  Store  adalah retailer online pakaian pria yang telah menjual barang melalui Instagram sejak tahun 2017. Produk termasuk t-shirt, hoodie, crewneck, dan celana pendek. Menurut fungsi yang dimaksudkan, media sosial  tidak  dimaksudkan  untuk  promosi  suatu  produk  Sebagai  gantinya,  aplikasi  penjualan diperlukan, yang memperhitungkan bagaimana antarmuka pengguna terlihat dan betapa mudahnya bagi pelanggan untuk menggunakannya [6]-[8].
Aplikasi  yang  akan  dibuat  secara  tegas  untuk  penjualan  barang  dari  Online  Up  Store  ini  sedang diteliti  dari  segi  User  Interface  dan  User  Experience  untuk  memudahkan  pelanggan  dalam menyelesaikan  transaksi.  Pengalaman  Pengguna  (UX)  mengacu  pada  reaksi,  persepsi,  perilaku, emosi,  dan  ide  yang  dimiliki  pengguna  saat  menggunakan  aplikasi,  sedangkan  Antarmuka Pengguna  (UI)  mengacu  pada  waktu  ketika  pengguna  dan  aplikasi  berinteraksi  satu  sama  lain. Antarmuka  pengguna  mencakup  segala  macam  interaksi  yang  terjadi  di  layar  [9]-[13].  Design thinking  adalah  teknik  yang  akan  digunakan  karena  untuk  menciptakan  desain  pengalaman pengguna  yang  sukses,  kita  harus  mendekati  pengguna  secara  langsung.  Pendekatan  ini berkonsentrasi  pada  pengguna  dan  persyaratannya  di  setiap  level.  Pendekatan  untuk  memahami masalah pengguna secara mendalam, menghasilkan solusi inovatif untuk kesulitan ini, dan berhasil menerapkan jawaban tersebut adalah pemikiran desain. Tujuan dari desain UI/UX berbasis Figma untuk  penjualan  aplikasi  seluler  di  platform  Up  Store  adalah  untuk  menghasilkan  produk  yang ramah  pengguna  dan  estetis  yang  dapat  memenuhi  kebutuhan  pelanggan  dan  meningkatkan penjualan Up Store. Figma digunakan dalam desain antarmuka pengguna berdasarkan pengalaman pengguna dengan pendekatan pemikiran desain ini, dan ini akan menunjukkan produk jadi tentang bagaimana antarmuka aplikasi seluler penjualan ini akan terlihat [14].
Figma  berguna  karena  tidak  memerlukan  instalasi dan  dapat  diakses  melalui  internet.  Figma  juga merupakan  solusi  penyimpanan  berbasis  cloud  yang  menyimpan  file  di  server  Figma  daripada penyimpanan  komputer  lokal.  Ini  juga  menyederhanakan  presentasi  antarmuka  pengguna  dengan menyertakan opsi berbagi file melalui tautan sehingga berbagi langsung dapat mencapainya dengan cepat  [15].  Figma  dapat  digunakan  pada  sistem  operasi  Windows,  Linux,  atau  Mac  dengan menghubungkan  ke  internet.  Figma  banyak  digunakan  oleh  para  profesional  di  bisnis  UI  /  UX. Pada  akhirnya  aplikasi  ini  diharapkan  menjadi  sebuah  media  yang  tepat  bagi  Up  Store  untuk melakukan proses penjulan secara online yang memiliki tampilan dan alur yang mudah dan dapat dimengerti dengan baik dari sisi pengguna, dimana pengguna bukan hanya Up Store saja, Pembeli juga merupakan pengguna dari aplikasi ini dimana pembeli dapa melihat semua informasi produk dari toko upstore. Alhasil penulis mengambil judul Perancangan UI/UX Aplikasi Mobile Penjualan Pada Toko Up Store Menggunakan Figma.

## 2. METODE PENELITIAN

## Desaign Thinking
Teknik  Design  Thinking  adalah  metodologi  desain yang  berfokus  pada  mendapatkan  pemahaman menyeluruh tentang pengguna, mengeksplorasi ide-ide inovatif, dan menguji solusi melalui iterasi. Empati,  definisi,  ideasi,  prototyping,  dan  pengujian  adalah  lima  tahap  utama  dari  proses.  Tahap empati  melibatkan  pengumpulan  informasi  dan  pemahaman  terhadap  pengguna,  termasuk kebutuhan,  tujuan,  dan  masalah  yang  dihadapi[4].  Tahap  definisi  melibatkan  penguraian permasalahan  yang  telah  diidentifikasi  dan  merumuskan  pernyataan  masalah  yang  jelas.  Tahap

## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 462~468 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085
ideasi  memerlukan  ide-ide  unik  dan  berpikir  di  luar  kotak  untuk  mengatasi  kesulitan.  Tahap prototipe melibatkan pembuatan model atau representasi visual dari desain yang dihasilkan. Tahap pengujian melibatkan pengujian prototipe dengan pengguna untuk mendapatkan umpan balik yang berharga. Metode Design Thinking akan digunakan dalam penelitian ini untuk memastikan desain UI/UX  aplikasi  mobile  penjualan  pada  Toko  Up  Store  berfokus  pada  kebutuhan  pengguna  dan menciptakan solusi yang efektif.

## Tahapan Penelitian
Dalam  membangun  desain  aplikasi  mobile  penjualan  untuk  Up  Store,  strategi  desain  UI/UX menggunakan  pendekatan  Design  Thinking.  Design  Thinking  adalah  metode  yang  berpusat  pada pengguna  yang  berfokus  pada  pemahaman  pengguna  yang  mendalam,  eksplorasi  konsep  kreatif, dan  pengujian  berulang  untuk  mencapai    desain  yang  optimal.  Tahapan  perancangan  desain menggunakan Design Thinking adalah sebagai berikut:
1. Empati : Pada tahap ini, penelitian dilakukan untuk lebih memahami target pengguna, tujuan mereka,  serta  masalah  dan  kebutuhan yang  mereka  alami  saat  memanfaatkan  aplikasi  seluler penjualan.
2. Definisi  :  Tahap  definisi  berusaha  merumuskan masalah  yang  akan  dipecahkan  dalam  desain setelah mempelajari pengguna dan tantangan yang dihadapi. Berdasarkan hasil penelitian dan pemahaman  terhadap  pengguna,  merumuskan  pernyataan  masalah  yang  jelas  dan  spesifik yang ingin dipecahkan melalui desain aplikasi mobile penjualan. Pernyataan masalah ini akan menjadi panduan dalam proses perancangan.
3. Ideasi  :  Langkah  ideasi  memerlukan  solusi  inventif  untuk  tantangan  yang  telah  ditentukan. Yang  pertama  Adakan  pertemuan  brainstorming  dengan  tim  desain  untuk  menciptakan sebanyak mungkin ide tentang tantangan yang harus dipecahkan. Tidak ada batasan jumlah ide yang  dapat  dihasilkan;  Semua  ide  berguna,  selanjutnya  Menghubungkan  ide-ide  yang dihasilkan  dengan  masalah  yang  ingin  dipecahkan  dan  melihat  hubungan  antara  ide-ide tersebut.  Hal  ini  dapat  membantu  dalam  mengidentifikasi  ide-ide  yang  paling  menjanjikan untuk diimplementasikan.
4. Prototype : Prototipe awal dari desain aplikasi mobile penjualan akan dibangun pada tahap ini menggunakan perangkat lunak desain seperti Figma.
5. Pengujian  :  Tahap  pengujian  dilakukan  untuk  menguji  prototipe  desain  aplikasi  dengan pengguna target.

## 3. HASIL DAN PEMBAHASAN

## Prototype
Setelah  ide-ide  desain  dihasilkan,  tahap  Prototipe  melibatkan  pembuatan  prototipe  awal  aplikasi menggunakan  perangkat  lunak  Figma.  Prototipe  ini  merupakan  representasi  visual  sederhana  dari antarmuka  pengguna  yang  mencerminkan  ide  desain  yang  dihasilkan[5].  Dalam  tahap  ini,  desain UI/UX  akan  dieksplorasi  lebih  lanjut  dan  kemudian  diujikan  dengan  pengguna.  Pengguna  akan berinteraksi  dengan  prototipe  untuk  memberikan  umpan  balik  lebih  lanjut  tentang  desain  yang diusulkan.
1. Wirefarm
Setelah menentukan persyaratan desain, desain wireframe dilakukan menggunakan perangkat lunak Figma.  Tanpa  menghormati  karakteristik  visual  yang  tepat,  wireframe  ini  menggambarkan  tata letak,  struktur,  dan  hierarki  informasi  aplikasi[6].  Tujuan  dari  desain  wireframe  adalah  untuk menciptakan struktur aplikasi yang jelas dan pengalaman pengguna yang positif.

## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 462~468 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085
Gambar 1. Rancangan Wirefarm
2. Mockup
Mockup  adalah  langkah  selanjutnya  setelah  mengembangkan  wireframe.  Mockup  adalah penggambaran  visual  antarmuka  pengguna  (UI)  produk  atau  aplikasi[7].  Metode  ini  sangat bermanfaat  untuk  menawarkan  citra  pekerjaan  yang  lebih  realistis.  Skenario  di  mana  aplikasi penjualan  toko  atas  akan  diuji  untuk  tujuan  adalah  sebagai  berikut.  Terdapat  karakteristik  pada desain aplikasi yang memudahkan pengguna dalam melakukan pemesanan produk.
a. Halaman  Login  :  Pada  halaman  ini  akan  muncul  pertama  kali  disaat  user  menggunakan aplikasi  Up  Store,  yang  dimana  user  harus  login  dengan  menggunakan  akun  google  dan facebook sehingga user bisa menggunakan aplikasi tersebut.

## Gambar 2. Halaman Login
b. Halaman Home : Pada halaman ini berisi tampilan produk yang menampilkan banner produk, benner  diskoun  dan  jenis  produk  yang  tersedia  untuk  dibeli  oleh  konsumen.  Konsumen  bisa melihat berbagai macam produk yang di tawarkan pada aplikasi tersebut.

## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 462~468 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085

## Gambar 3. Halaman Home
c. Halaman Pemesanan : Pada tampilan halaman ini terdapat informasi produk yang akan dibeli dan  user  tinggal  klick  button  add  to  cart  setelah  itu  user  langsung  melakukan  chekout  dan pembayaran.

## Gambar 4. Halaman Pemesanan
d. Halaman Pembayaran : Pada tampilan halaman pembayaran terdapat detail pesanan,informasi alamat  user  dan  pemilihan  metode  pembayaran,  setelah  user  memilih  metode  pembayaran langgsung  klick  button  lanjut  pembayaran  user  akan  di  minta  untuk  kirim  bukti  transfer setelah klick button selesai bayar pesanan akan di proses.

## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 462~468 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085
Gambar 6. Halaman Pembayaran

## 3. Testing
Langkah Pengujian memerlukan interaksi dengan pengguna untuk menguji desain prototipe. Tes ini dimaksudkan  untuk  mengumpulkan  masukan  dan  mengkonfirmasi  desain  yang  telah  dibuat. Pengguna  yang  berpartisipasi  dalam  pengujian  dapat memberikan  ide-ide  yang  berguna  mengenai kegunaan, kejelasan informasi, dan bagian lain dari desain yang perlu ditangani. Dan, pada titik ini, pengujian  pengguna  dilakukan  dengan  empat  calon  pengguna.  Pada  tahap  ini,  desain  figma dievaluasi melalui desktop atau smartphone untuk menjalankan prototipe dan aplikasi labirin untuk mengumpulkan informasi pengguna. Pada tingkat ini, prototipe dievaluasi dengan dua skenario:
a. variabel task 1 melakukan login
b. variabel task 2 melakukan pemesanan produk
Hasil  pada  penelitian  ini  akan  dinilai  oleh  user  menggunakan  Teknik  Dimensi  Pertanyaan berdasarkan metode EUCS
1. Content (Isi)
• Aplikasi android penjualan memberikan informasi yang memenuhi kebutuhan anda.
• Aplikasi android penjualan menyediakan informasi yang lengkap
• Aplikasi android penjualan memberikan informasi yang berguna bagi anda.
2. Accuracy (Akurat)
• Aplikasi android penjualan memberikan informasi yang akurat.
• Aplikasi android penjualan sering tidak terjadi error.
• Tombol Aplikasi android penjualan sesuai dengan fungsi
3. Format (Tampilan)
• Design Informasi yang ditampilkan sangat jelas
• Desain user interfacenya sangat menarik
• Desain tombolnya sa ngat menarik
• Kombinasi warnanya sangat menarik.
4. Ease of Use (Kemudahan Penggunaan)
• Aplikasi android penjualan sangat mudah digunakan
• Aplikasi android penjualan tidak membutuhkan waktu untuk mempelajarinya.
• Aplikasi android penjualan sangat mudah dalam berinteraksi
• Aplikasi android penjualan sangat mudah digunakan oleh orang awam.
Berdasrkan  hasil  penelitian  yang  terlah  dilakukan  maka  didapatkan  hasil  Pengguna  merasa  puas dengan desain user interface aplikasi android sciencom. Hal ini ditunjukkan berdasarkan persentase sebesar 92,5% pengguna sangat setuju dengan desain user interface saat ini.

## JSAI: Journal Scientific and Applied Informatics
Vol. 06, No. 03, November 2023, hal. 462~468 E-ISSN: 2614-3054; P-ISSN: 2614-3062, accredited by Kemenristekdikti, Sinta 4 DOI: 10.36085

## 4. KESIMPULAN
Berdasarkan  data  dari  pembuatan  UI/UX  mobile  app  sales  di  up  store  menggunakan  Figma  dan proses  Design  Thinking.  Kesimpulan  berikut  dapat  dibentuk  berdasarkan  langkah-langkah  desain yang telah diselesaikan: Design Thinking adalah strategi yang efisien untuk mengembangkan UI / UX  aplikasi  seluler  penjualan.  Metode  ini  memungkinkan  pemahaman  menyeluruh  tentang kebutuhan  pengguna  serta  penciptaan  solusi  yang  relevan  dan  efektif.  Pengguna  dapat mengidentifikasi masalah dan kebutuhan dengan lebih baik dengan mengumpulkan data pengguna, menganalisis masalah, dan menentukan tuntutan desain. Hal ini memungkinkan pengembang untuk membuat  desain  yang  lebih  responsif  terhadap  tuntutan  dan  preferensi  konsumen.  Penggunaan perangkat  lunak  Figma  sebagai  alat  perancangan  memungkinkan  pembuatan  wireframe,  desain visual,  dan  prototipe  desain  yang  dapat  diuji  dengan  pengguna.  Hal  ini  membantu  dalam menggambarkan dan memvalidasi desain sebelum implementasi. Serta berdasarkan hasil penilaian Teknik dimensi EUCS maka hasil penelitian yang telah dilakukan maka didapatkan hasil Pengguna merasa  puas  dengan  desain  user  interface  aplikasi  android  sciencom.  Hal  ini  ditunjukkan berdasarkan persentase sebesar 92,5% pengguna sangat setuju dengan desain user interface saat ini.

## REFERENSI
[1] A. Purnomo (2018). Desain User Experience (Ux) dan User Interface (UI) untuk aplikasi Ibeauty   berbasis Android. 6(3), 201-210, JSTIE (Jurnal Sarjana Teknik Informatika) (E-Journal)
[2] Cavanaugh, A. B. (2021. TA: Analisis dan Perancangan UI/UX dengan Metode  UserCentered Design pada Website DLU Ferry. Ph.D. Dissertation Inversitas Dinamika.
[3] Darwis, D., Ferico Octaviansyah, A., Sulistiani, H., & Putra, R. (2020). Aplikasi Sistem   Informasi Geografis Pencarian Puskesmas Di Kabupaten Lampung Timur. Jurnal Komputer  Dan  Informatika , 15 (1), 159–170.
[4] Ferdy Budi Setiawan. (2019). Analisis dan Perancangan User nterface dan User  Experience pada Website E- Learning  STIKES  YAYASAN  RUMAH  SAKIT  DR.  SOETOMO  Surabaya menggunakan Metode  Webuse.
[5] Fariyanto dan F. Ulum (2021). Membuat Aplikasi Pemilihan Kepala Desa Menggunakan  Metode Design   Thinking  Ux  (Studi  Kasus:  Desa  Kuripan).  Jurnal  Teknologi  dan  Sistem  Informasi (JTSI),2(2), 52-  60. http://jim.teknokrat.ac.id/index.php/JTSI
[6] Multazam,  M.  (2020).  Perancangan  User  Interface  dan  User  Experience  pada  Placeplus menggunakan pendekatan User Centered Design. Universitas Islam Indonesia , 1 ,8. https://journal.uii.ac.id/AUTOMATA/article/view/15528/10233
[7] K. Nadhif, D. T. W. Jati, M. F. Hussein, dan I. S. Widiati (2021). Aplikasi penjualan desain UI/UX menggunakan metodologi design thinking. 7(1), 44-55, Jurnal Ilmiah IT CIDA. https://doi.org/10.55635/jic.v7i1.146TSI
[8] Multazam,  M.  (2020).  Perancangan  User  Interface  dan  User  Experience  pada  Placeplus menggunakan pendekatan User Centered Design. UniversitasIslamIndonesia , 1 ,8. https://journal.uii.ac.id/AUTOMATA/article/view/15528/10233
[9] Alatas, H. (2013). Responsive Web Design dengan PHP & Bootstrap. Yogyakarta: Lokomedia.
[10] Alexander F.K, S. (2013). Web Programing Power Pack. Yogyakarta: mediaKom
[11] Arizona, N. (2017). Aplikasi Pengolahan Data Anggaran Pendapatan dan Belanja Desa ( APBDES ) Pada Kantor Desa Bakau Kecamatan Jawai Berbasis Web. CN, 01 (02), 105-119
[12] Dhanta , S. (2015). Materi Pembelajaran Pembuatan Aplikasi dan Web. Yogyakarta: Amikom.
[13] Kadir, A. (2003). Pengenalan Sistem Informasi. Penerbit Andi, Yogyakarta.
[14] Kotler, P., & Gary , A. (2001). Prinsip - Prinsip Pemasaran. Jakarta: Erlangga
[15] Lupiyadi, R. (2001). Manajemen Pemasaran Jasa Teori dan Praktik. Jakarta: Salemba Empat