Terakreditasi SINTA Peringkat 4 Surat Keputusan Direktur Jenderal Pendidikan Tinggi, Riset, dan Teknologi, Nomor: 158/E/KPT/2021 masa berlaku mulai Volume 5 Nomor 2 Tahun 2018 sampai Volume 10 Nomor 1 Tahun 2023
Terbit online pada laman web jurnal: https://jurnal.plb.ac.id/index.php/tematik/index
Jurnal Tekn olo gi I nforma si Komu ni kasi ( e-Jo urn al)
Vol. 9 No. 1 (2022) 70 - 78 ISSN Media Elektronik: 2443-3640

## Desain UI UX Aplikasi Penjualan dengan Menyelaraskan Kebutuhan Bisnis menggunakan Pendekatan Design Thinking
Sales Application UI UX Design by Aligning Business Needs using Design Thinking Approach
Kristin Angelina 1 , Erwin Sutomo 2 , Vivine Nurcahyawati 3
1,2,3 Sistem Informasi, Fakultas Teknologi dan Informatika, Universitas Dinamika
1 kristin.santos2012@gmail.com, 2 sutomo@dinamika.ac.id, 3 vivine@dinamika.ac.id*

## Abstract
Alignment between business needs and Information Technology (IT) strategy is one of the main factors for the success of a business. One of them is about the interface design of the application used by the user. The current condition in the company is that marketing and sales activities only use social media such as WhatsApp and Facebook. These cause problems in two business activities, namely a less broad market coverage, frequent barriers to communication, less efficient delivery, and an obstacle  to  the  recording by  employees. This  research  aims  to design a  sales  application  user  interface  that  suits  business needs using a Design Thinking approach by collecting user characteristics using the User Persona tool. The test uses Usability Testing  by  giving  4  User  Scenarios  to  each  respondent  to  run  and  complete  on  the  prototype.  The  test  results  show  that respondents can complete all User Scenarios in the first iteration by 100%. Based on the test results, the design is good, in line with business needs, and accepted by potential users.
Keywords: UI UX, User Persona, Design Thinking, Usability Testing

## Abstrak
Keselarasan antara kebutuhan bisnis dan strategi Teknologi Informasi (TI) adalah salah satu faktor utama keberhasilan suatu bisnis. Salah satunya tentang desain aplikasi yang digunakan oleh pengguna yang diharapkan membantu perusahaan mencapai tujuan bisnisnya. Kondisi saat ini yang terjadi di perusahaan adalah kegiatan pemasaran dan penjualan hanya memanfaatkan sosial media seperti WhatsApp dan Facebook. Hal tersebut menimbulkan masalah pada dua aktivitas bisnis yaitu cakupan pasar yang dirasa kurang luas, sering terjadi hambatan dalam komunikasi, pengiriman kurang efisien, serta terdapat masalah pada pencatatan  oleh  karyawan.  Tujuan  penelitian  ini  adalah  untuk  merancang  desain  antarmuka  aplikasi  penjualan  yang  sesuai kebutuhan bisnis menggunakan pendekatan Design Thinking dengan menghimpun karakteristik pengguna memanfaatkan tool User Persona. Pengujian menggunakan Usability Testing dengan memberikan 4 User Scenario pada setiap responden untuk dijalankan dan diselesaikan pada prototype. Hasil pengujian menunjukkan bahwa responden dapat menyelesaikan seluruh User Scenario pada iterasi pertama sebesar 100%. Berdasarkan hasil pengujian dapat disimpulkan bahwa desain sudah baik, selaras dengan kebutuhan bisnis, serta dapat diterima oleh para calon pengguna.
Kata kunci: UI UX, Persona pengguna, Design Thinking, Usability Testing

## 1. Pendahuluan
Perancangan  desain  aplikasi  perlu  memperhatikan kebutuhan  pengguna  agar  mampu  menyesuaikan tampilan  fitur  dan  fungsi  sesuai  motivasi  dan karakteristik  user.  Selain  itu,  perlu  juga  penyelarasan antara  desain  aplikasi  dengan  kebutuhan  bisnis  agar mampu  mempermudah  dan  membantu  suatu  bisnis dalam  memperoleh  tujuan  bisnis  melalui  bantuan strategi  TI  yang  berbentuk  desain  tersebut.  Meski
begitu,  secara  umum  masih  banyak  perancang  desain UI UX yang memperhatikan kebutuhan bisnis sehingga menyebabkan  kegagalan  dalam  peluncuran  sebuah aplikasi  dengan  penyebab  tingkat  pertama  sebanyak 42%  aplikasi  gagal  karena  tidak  adanya  pasar  yang membutuhkan  dan  tingkat  kesembilan  sebanyak  14% disebabkan oleh tidak memperhatikan kebutuhan bisnis pengguna [1]. Penyebab kegagalan sebuah desain ialah
Tematik : Jurnal Teknologi Informasi Komunikasi (e-Journal) Vol. 9 No. x (2022)
tidak  terpenuhinya  ataupun  alur  desain  yang  tidak berbeda dengan kebutuhan bisnis [2].
Kondisi  pada  studi  kasus  yang  diangkat  adalah pemasaran dan penjualan dengan memanfaatkan sosial media  WhatsApp  dan  Facebook.  Pada  proses pemasaran, karyawan membuat promosi 3 hari sebelum panen  pada  kedua  sosial  media  tersebut.  Sedangkan proses  penjualan  dilakukan  melalui  panggilan  suara WhatsApp,  mulai  dari  persetujuan  jumlah  pesanan, tanggal pengiriman, hingga lokasi terminal pengambilan  pesanan.  Tidak  jarang  terdapat  beberapa masalah  yang ditimbulkan  seperti cakupan pasar  yang kurang  luas,  hambatan  dalam  komunikasi  pelanggan dengan  pihak  karyawan,  pengiriman  yang  kurang efisien, dan masalah dibidang pencatatannya.
Penelitian  ini  dilakukan  karena  dibutuhkannya informasi  karakteristik  pelanggannya  agar  membantu bisnis dalam melakukan pendekatan kepada pelanggannya, memerlukan branding dilayanan digital sehingga  mampu  meningkatkan  terciptanya  asumsi kesan pertama yang positif dari pelanggan, dan mampu memberikan  pengalaman  pengguna  dan  kepuasan pelanggan yang baik dalam berinteraksi dengan UI UX yang disuguhkan sehingga dapat meningkatkan jumlah konsumen. Pengembangan UI UX  merupakan tahapan yang penting karena mempresentasikan kesan pertama bagi calon pengguna [3].
Penelitian  desain  ini  dilakukan  dengan  memanfaatkan tool User Persona untuk penentuan fokus karakteristik target calon pengguna pada penelitian ini. Penyusunan User  Persona  mampu  membantu  dalam  menentukan karakteristik  pengguna  dikarenakan  penelitian  ini membutuhkan desain yang sesuai dengan karakteristik target calon pengguna.
Alasan  utama  pentingnya  pendesainan  UI  UX  adalah untuk  mempertimbangkan  hal-hal  yang  dibutuhkan pengguna  serta  memastikan  bahwa  pengguna  mampu memiliki  pengalaman  yang  baik  saat  menggunakan sebuah  aplikasi.  Saat  pengembangan  desain  aplikasi, sering  ditemui  bahwa  pengembang  tidak  melakukan tahap observasi terhadap target sehingga menimbulkan berbagai  kesalahan  pada  hasil  akhirnya  seperti ketersediaan  fitur  yang  tidak  diperlukan  bahkan menyulitkan  pengguna.  Perancangan  UI  (desain  antar muka)  dan  UX  (pengalaman  pengguna)  yang  tidak sesuai dengan  kebutuhan dapat  menimbulkan  masalah baru  dikemudian  hari  setelah  aplikasi  jadi,  seperti adanya kemungkinan pengguna memalingkan diri pada aplikasi lain yang mirip tetapi dengan alur dan tampilan yang  lebih  sederhana.  Oleh  karena  itu,  penelitian  ini melibatkan  pengguna  nya  (karyawan  dan  pelanggan) secara  langsung  agar  mampu  didapatkan  masukan terkait  komponen-komponen  utama  nya  yaitu  fungsi dan  kegunaan  dalam  peningkatan  kepemahaman pengguna dalam pengoperasiannya.
Untuk  menunjang  pembuatan  UI  UX  tentunya diperlukan  metode  yang  mampu  digunakan  untuk mempertimbangkan  sisi  tampilan  dan  pengalaman target pengguna sesuai dengan kebutuhan mereka, salah satunya  adalah  metode  Design  Thinking.  Thinking merupakan  sebuah  pemikiran  seorang  desainer  yang memanfaatkan  pendekatan  dengan  berpusat  atau berpacu pada objek responden dalam proses pemecahan masalah yang ditemuinya [4]. Manfaat yang didapatkan dari penggunaan metode tersebut ialah dapat digunakan untuk menyelesaikan sejumlah problem, dari pengembangan  teknologi,  desain  dari  sebuah  produk dan pemasaran, hingga perancangan fasilitas [5].
Ditinjau dari sisi UI, kegunaan metode Design Thinking adalah  memperindah  tampilan  visual  produk  yang ditawarkan  pada  pengguna.  Sedangkan  dari  sisi  UX adalah  untuk  menunjang  tampilan  visual  dengan mengoptimalkan  performa  dan  penggunaan  aplikasi secara  mudah  bagi  pengguna. Selain  itu  UI  UX memiliki  peran  penting  dalam  pengembangan  suatu aplikasi,  yaitu  agar  mampu  mempermudah  pengguna saat  penggunaan  aplikasi,  memperoleh  respon  dari setiap  interaksi  antara  pengguna  dan  aplikasi,  serta mengetahui kebutuhan pengguna [6].
Berdasarkan  pemaparan  penjelasan  di  atas,  maka penelitian ini akan menghasilkan sebuah rancangan UI UX  aplikasi  penjualan  berbasis  mobile  menggunakan pendekatan Design Thinking.

## 2. Metode Penelitian
Metodologi  penelitian  adalah  kajian  ilmu  yang mengupas  terkait  berbagai  metode  penelitian  ilmu termasuk alat-alat yang digunakan dalam penelitian [7].
Dalam  poin  ini,  dimanfaatkan  berbagai  kriteria  untuk memecahkan permasalahan penelitian sehingga terdapat beberapa tahapan-tahapan metodologi penelitian  yang  dilakukan  dalam  perwujudan  hasil akhir. Tahapan-tahapan tersebut tertera di Gambar 1.
Dalam pelaksanaan tahap awal, dilakukan pengumpulan data secara mandiri yang bertujuan untuk membantu  penyelesaian  penelitian  berdasarkan  data- data  yang  akan  didapatkan  dengan  melakukan  tahap empathize  dari  metode  Design  Thinking  dan  studi litetatur.  Pada  tahap  Empathize,  penulis  melakukan kegiatan  pengumpulan  data  dengan  menggunakan teknik  wawancara  tertulis.  Wawancara  dilakukan terhadap  pengguna  sebagai  targetnya,  yaitu  beberapa sampel  pelanggan  dan  karyawan  internal.  Tahap  ini menghasilkan  draft  hasil  wawancara  terhadap  sampel pelanggan dan karyawan internal. Setelah pelaksanaan tahap  empathize,  maka  selanjutnya  ialah  tahap  studi literatur  dengan  mencari  informasi-informasi  dari sejumlah buku, jurnal, dan situs-situs di internet terkait penelitian  yang  sedang  dilakukan,  yaitu  perancangan desain UI UX menggunakan metode Design Thinking.
Tematik : Jurnal Teknologi Informasi Komunikasi (e-Journal) Vol. 9 No. x (2022)

## Gambar 1. Metodologi Penelitian

## Penelitian  ini  memanfaatkan  pendekatan  Design
Thinking  untuk  memecahkan  permasalahan  pada pengembangan  aplikasi  menggunakan  pendekatan user-centered.  Pendekatan  ini  memiliki  5  tahapan pengerjaan, yaitu tahap empathize, tahap define, tahap ideate, tahap prototype, dan tahap test. Tahapan ini akan menghasilkan sebuah rekomendasi prototype UI UX.
Berdasarkan proses wawancara, pengguna menginginkan aplikasi dengan tampilan yang interaktif, mudah  digunakan,  data  terbaharui  tiap  saat,  serta mampu  menjadi  media  komunikasi  antara  kedua  sisi pengguna. Sehingga, penulis mendapatkan solusi yaitu pembuatan  sebuah  desain  aplikasi  dengan  fitur  yang mampu  melakukan  proses  penyampaian  informasi antara  dua  sisi  pengguna  sekaligus  membantu  proses pencatatan  bagi  karyawan  berbasis  mobile  yang dibangun sesuai kebutuhan pengguna.
Selanjutnya  ialah  pengerjaan  tahap  define.  Tahap  ini menganalisa inti permasalahan secara detail agar pada tahap  berikutnya  dapat  dikemukakan  jawaban  untuk pemecahan masalah [8]. Berdasarkan data wawancara, target pengguna berusia sekitar 25-35 tahun dan berasal dari  kalangan  akademis  serta  masyarakat  umum  yang kesehariannya  menggunakan  gawai.  Ruang  lingkup fungsional  sistem  karyawan  pada  pendesainan  UI  UX terdapat di Tabel 1 dan Tabel 2 sedangkan Tabel 3 dan Tabel 4 untuk sisi pelanggan.

## Tabel 1 User Journey Map (Karyawan-1)
Explore Pencatatan Beranda Hasil Panen Transaksi
Goals Mencari menu pencatatan sesuai kebutuhan Mencatat jumlah kacang Mencatat seluruh transaksi pembelian Actions Memilih menu pencatatan sesuai kebutuhan Memasukan data hasil panen Mencatat transaksi pembelian Expect ation Menemukan menu pencatatan sesuai kebutuhan Mengetahui data pemanen Mengetahui jumlah pemasukan Touchp oints Beranda Form hasil panen Form transaksi Feelings
☺
Tabel 2 User Journey Map (Karyawan-2) Produk Iklan Support Customer Service Goals Menampilkan data produk sesuai kenyataan Menyampaikan informasi terkini Membantu pelanggan menyelesaika n masalah Actions Memasukan data produk Mengatur foto iklan yang tampil Menjawab pertanyaan pelanggan Expect ation Data dapat tampil sesuai kenyataan Dapat menyampaikan informasi terkini Mempertahan kan customer relationship Touchp oints Form produk Form iklan Support center Feelings ☺ ☺ ☺ Tabel 3 User Journey Map (Pelanggan-1) Menjelajahi Membeli Produk Beranda Detail Produk Cart Checkout Goals Mencari produk yang dibutuhk an. Mengeta hui detail produk. Mengetahui produk yang telah dipilih. Memutuska n untuk membeli produk. Action Melihat penawara n & memilih produk. Melihat detail produk. Melihat daftar produk dalam keranjang. Melihat riwayat pesanan & isi data penerima. Expect ation Menemu kan produk incaran dan iklan. Masih ada stok produk yang dilihat. Melihat daftar produk pilihan. Mengkonfir masi pesanan. Touchp oints Beranda Produk Cart Checkout Feelings ☺ Tabel 4 User Journey Map (Pelanggan-2) Membeli Produk Support Pembayaran Riwayat Pembelian Customer Service Goals Membayar produk kacang yang telah dibeli. Melihat riwayat pembelian. Mendapatkan jawaban dari pihak penjual Action Memilih metode & melakukan Melihat invoice pembayaran. Mengirimkan pesan &
Tematik : Jurnal Teknologi Informasi Komunikasi (e-Journal) Vol. 9 No. x (2022)
Membeli Produk Support Pembayaran Riwayat Pembelian Customer Service proses pembayaran. menerima jawaban penjual Expect ation Tersedia beberapa metode pembayaran. Mendapatkan informasi produk yang telah dibeli. Untuk mendapatkan bantuan dari pihak penjual Touchp oints Form Bayar Histori pembelian Service chat Feelings ☺
Berdasarkan  data-data  dari  wawancara  dan  hasil pemetaan  ruang  lingkup,  maka  selanjutnya  ialah pembuatan  User  Persona.  Suatu  metode  kebendaan yang  berfungsi  mendata  keperluan  dan  pendekatan hubungan  antara  komputer  dan  manusia  sebagai akibatnya sang developer dapat mengetahui behaviour dan  ciri  dari  pengguna  yang  memiliki  kaitan  pada permasalahan disebut User Persona [9]. Terdapat target pengguna  sebanyak  4  kelompok,  yaitu  pemilik, sekretaris,  pengawas,  serta  pelanggan.  Setiap  User Persona  berisikan  identitas  pengguna,  harapan  dan kendala  dalam  penggunaan  aplikasi  yang  akan dirancang kedepannya.
Agar  pemetaan  calon  pengguna  lebih  optimal, disusunlah  user  scenarios  yang  berisikan  empat aktivitas atau aliran cerita dan konteks terkait masing- masing  pengguna.  User  scenarios  merupakan  sebuah media yang menjelaskan sekumpulan skenario kegiatan interaksi  secara  tekstual  [10].  Setiap  skenario mendefinisikan  urutan  langkah  yang  dilakukan  oleh aktor  saat  mereka  berinteraksi  dengan  sistem.  Jumlah user  scenarios  yang  akan  dibuat  berjumlah  4 menyesuaikan  dengan  jumlah  User  Persona  yang disusun pada tahap sebelumnya.
Selanjutnya  ialah  pelaksanaan  tahap  ideate  dengan mengumpulkan  ide  dan  solusi  untuk  mengeksplorasi kemungkinan  ide  solusi  terhadap  permasalahan  yang sedang dihadapi oleh karyawan yang telah didefinisikan pada  tahap  empathize  dengan  menggambarkannya dalam  bentuk  user  flow  yang  berisikan  alur  aplikasi pada  tiap  pengguna  dengan  mengabaikan  faktor eksternal. User flow  mendefinisikan alur atau langkah yang  memiliki  kemungkinan  dapat  dilalui  oleh pengguna  saat  menggunakan  suatu  produk  atau aplikasi, baik secara tertulis maupun digital [11]. User flow  yang  dirancang  oleh  penulis  diwujudkan  dalam bentuk  task  flow  yang  akan  menggambarkan  tahapan aktivitas diaplikasi yang akan dirancang menggunakan UI  UX.  Penerapan  tahap  ideate  menggunakan  tools digital Draw.io yang diakses melalui website laptop.
Langkah  terakhir  dalam  pelaksanaan  tahap  desain adalah pembuatan prototype dalam rupa kerangka alur aplikasi berdasarkan hasil pemetaan kebutuhan aplikasi yang  telah  diperoleh  pada  tahapan  sebelumnya. Prototype  yang  disusun  dalam  2  bentuk,  yaitu  low
fidelity  wireframe  dan  high  fidelity  wireframe. Wireframe  adalah  sebuah  cara  yang  digunakan  untuk merancang desain dari suatu aplikasi, baik aplikasi yang menggunakan  platform  pada  website  ataupun  mobile pada  tingkat  structural  [12]. Wireframe  merupakan dasar dalam pembuatan sebuah prototype secara cepat sehingga  menjadi  awal  ide  pendesainan  yang  nyata [13].  Disamping  itu,  prototype  adalah  media  untuk menghimpun informasi dari user yang mengoperasikan prototype  yang  sedang  dikembangkan  dikarenakan  ia menyuguhkan sistem dalam bentuk sederhana daripada yang sebenarnya [14].
Langkah terakhir dalam pelaksanaan tahap desain ialah pelaksanaan  testing  menggunakan  Usability  Test dengan mempresentasikan prototype yang telah dibuat pada  tahap  sebelumnya  dengan  memanfaatkan  user scenarios sebagai panduan pengguna dalam melakukan testing.  Testing  adalah  metode  untuk  melakukan pengujian  uraian  dan  memperhitungkan  tingkat kemudahan  user  saat  berinteraksi  bersama  tampilan aplikasi  [15].  Presentasi  bertujuan  untuk  memperoleh feedback  atau  timbal  balik  dari  pihak  penjual  serta sampel pelanggan. Selain itu tahapan ini juga berfungsi untuk  menentukan  bahwa  suatu  output  telah  selaras dengan kebutuhan pengguna.
Testing merupakan kegiatan pengujian dan pengukuran terhadap desain-desain yang telah dibuat agar pengguna mampu  memperoleh desain dengan  versi  terbaik [16]. Batas minimal keberhasilannya adalah 75%. Pada saat testing, pengguna akan menjalankan alur user scenarios pada  prototype.  Setelah  proses  testing  selesai,  maka akan dihitung jumlah persentase keberhasilan menyelesaikan setiap skenario. Jika ada pengguna yang tidak  memenuhi  batas  minimal  keberhasilan  Usability Test  ataupun  munculnya  saran  dari  responden  bagi desain  prototype,  maka  akan  dilakukan  perevisian terutama  pada  fitur-fitur  pada  user  scenarios  yang kurang  dipahami  oleh  pengguna.  Lalu  pengguna  akan melakukan  testing  ulang  dan  penulis  akan  melakukan Usability  Test  kembali  untuk  melihat  perkembangan dari hasil perevisian prototype.
Tahap  terakhir  dari  penelitian  ini  adalah  melakukan evaluasi  pencapaian  tujuan  berdasarkan  hasil  testing yang telah dilakukan sebelumnya. Pada pengevaluasian akan  dijabarkan  hasil  testing  para  responden  di penelitian ini terhadap prototype yang telah disuguhkan sehingga  mampu  menarik  kesimpulan  dan  melakukan kajian ulang jika terdapat suatu hal yang masih belum memenuhi  standar  atau  jika  permasalahan  belum terselesaikan dengan baik.

## 3.   Hasil dan Pembahasan
Tahap  awal  dilaksanakan  dengan  mengumpulkan  data untuk  membantu  penyelesaian  penelitian  berdasarkan data-data  yang  akan  didapatkan  dengan  melakukan wawancara  dan  studi  literatur.  Berdasarkan  hasil
Tematik : Jurnal Teknologi Informasi Komunikasi (e-Journal) Vol. 9 No. x (2022)
wawancara  terhadap  pelanggan  dapat  disimpulkan bahwa  sampel  customer  menginginkan  tampilan  yang interaktif,  mudah  digunakan,  mampu  berinteraksi dengan penjual, serta dapat selalu menampilkan jumlah stok  kacang  yang  tersedia  sesuai  dengan  keadaan sebenarnya.  Sedangkan  berdasarkan  hasil  wawancara terhadap  pegawai  dapat  disimpulkan  bahwa  karyawan internal menginginkan aplikasi ini dapat mempermudah  aktivitas  bisnis  dengan  tampilan interaktif yang mudah dipahami dan digunakan. Selain itu,  karyawan  pun  meletakan  beberapa  ekspektasi terhadap  aplikasi  yang  digagaskan,  yaitu  mampu menyerdehanakan  pekerjaan  mereka,  melakukan perhitungan, menyimpan
data, dan mendokumentasikan aktivitas bisnis utama dengan rapi.
Tahap  emphatize  dilaksanakan  secara  daring  dengan mengajukan  pertanyaan  melalui  suatu  media  sehingga responden  dapat  mmberikan  jawaban  dari  pertanyaan tersebut  secara  mandiri.  Daftar  pertanyaan  dibuat berdasarkan  kebutuhan  akan  karakteristik  pengguna dan kebutuhan untuk menyesuaikan antara tujuan bisnis (business  goal)  bersama  tujuan  pengguna  (user  goal) dalam bentuk sebuah desain, selain itu digunakan juga referensi  dari  pedoman  pertanyaan  wawancara  User Persona yang disusun oleh Santosa (2020) [17].
Setelah  tahap  emphatize  selesai  dilakukan  dengan mendapatkan hasil wawancara, maka selanjutnya ialah pelaksanaan  studi  literatur.  Sesuai  dengan  penjabaran masalah dan analisa kebutuhan  yang sudah dilakukan, diperoleh sebuah penyelesaian yaitu dengan memanfaatkan pendekatan berbasis User Persona dan teknik pengujian Usability Testing.
Tahap  desain  dilaksanakan  dengan  pembuatan  desain aplikasi  melalui  4  tahap,  yaitu  tahap  define,  tahap ideate,  tahap  prototype,  dan  tahap  test.  Tahap  define memetakan  calon  pengguna  dari  desain  yang  disusun pada  penelitian  ini  dengan  memanfaatkan  tool  User Persona dan User Scenarios. Berdasarkan seluruh data jawaban  dari  hasil  wawancara  yang  telah  dilakukan sebelumnya,  maka  penulis  mulai  menyusun  User Persona  sebanyak  jumlah  tipe  pengguna  pada penelitian.  Berikut  merupakan  hasil  pembuatan  User Persona  untuk  pemilik  pada  Gambar  2.  dan  User Persona untuk pelanggan pada Gambar 3.
Tahap  selanjutnya  adalah  pembuatan  User  Scenarios dengan setiap pengguna memiliki 4 skenario berisikan suatu  aktivitas  atau  cerita  yang  memungkinkan dilakukan  oleh  setiap  pengguna.  Daftar  kolom  pada User  Scenarios  beserta  penjelasannya  terdapat  pada Tabel 5.
Gambar 2 User Persona Pemilik
Gambar 3 User Persona Pelanggan
Tabel 5 Daftar Kolom User Scenarios Beserta Penjelasan
Nama Kolom Isi Kolom Nama Nama dari suatu skenario. Tujuan Tujuan dari skenario tersebut dilakukan. Aktor Nama, jabatan, panggilan, atau nickname dari pengguna skenario. User Scenario yang berkaitan Nama dari User Scenario yang memiliki keterkaitan secara langsung dengan skenario terkait. Kondisi Awal Kondisi awal dari skenario terkait yang nampak terhadap aktor secara langsung. Aksi Aktor (Skenario Utama) Aktivitas yang akan dilakukan oleh aktor terkait pada saat menjalankan skenario dan jika skenario belum menemukan suatu kegagalan. Aksi Aktor (Skenario Alternatif) Aktivitas yang akan dilakukan oleh aktor terkait jika skenario utama gagal atau tidak berhasil dijalankan sampai langkah terakhir. Kondisi Akhir Kondisi akhir saat aktor telah menyelesaikan sebuah skenario.
Kemudian  ialah  pelaksanaan  tahap  ideate  dengan membuat User Flow dalam bentuk diagram flow yang
Tematik : Jurnal Teknologi Informasi Komunikasi (e-Journal) Vol. 9 No. x (2022)
menjelaskan  alur  dari  proses  atau  aktivitas  dari  calon pengguna dalam mengoperasikan desain aplikasi yang dirancang.  User  Flow  milik  karyawan  terdapat  di Gambar  4  sementara  User  Flow  milik  pelanggan terdapat di Gambar 5. Alur User Flow milik karyawan dimulai ketika user melakukan login dihalaman Masuk. Jika ia adalah pengguna baru sehingga belum memiliki akun,  ia  akan  masuk  ke  proses  pendaftaran  akun dihalaman  Daftar.  Jika  pengguna  telah  masuk menggunakan  akunnya,  maka  user  akan  membuka tampilan  halaman  Beranda.  Pada  halaman  Beranda, user dapat memilih salah satu halaman tujuan diantara 5 menu yang disediakan pada sisi karyawan, yaitu menu Customer  Support,  Pengaturan  Iklan,  Pengaturan Produk,  Pencatatan  Transaksi,  dan  Pencatatan  Hasil Panen.

## Gambar 4 User Flow Karyawan
Sedangkan proses User Flow pelanggan dimulai ketika user melakukan login dihalaman Masuk. Jika ia adalah pengguna baru sehingga belum memiliki akun, ia akan masuk  ke  proses  pendaftaran  akun  dihalaman  Daftar. Jika  pengguna  telah  masuk  menggunakan  akunnya, maka user akan membuka tampilan halaman Beranda. Pada halaman Beranda, user dapat memilih salah satu halaman tujuan diantara 4 menu yang disediakan pada sisi  pelanggan,  yaitu  Riwayat  Pembelian,  Customer Support, Keranjang, dan Memilih Produk.
Pada  proses  tahap  Ideate  yang  telah  dilakukan sebelumnya, maka diperoleh hasil kerangka alur. Pada tahap  prototype  ini  mulai  digambarkan  kerangka  alur aplikasi berdasarkan hasil pemetaan kebutuhan aplikasi yang  telah  diperoleh  pada  tahapan  sebelumnya. Prototype  yang  disusun  dalam  2  bentuk,  yaitu wireframe  dan  prototype.  Low  fidelity  wireframe (wireframe)  adalah  kerangka  rancangan  sketsa  kasar dari  suatu  aplikasi  yang  sedang  digagaskan  dalam penelitian. Penyusunan low fidelity wireframe menggunakan tools digital berupa Figma yang diakses
melalui  laptop.  Pembuatan  low  fidelity  wireframe bertujuan untuk menampilkan sketsa dasar, mempresentasikan  konten  atau  isi  utama,  serta menentukan  garis  besar  struktur  dari  aplikasi  yang dirancang menggunakan UI UX dalam penelitian ini

## Gambar 5 User Flow Pelanggan
Low  Fidelity  Wireframe  pada  penelitian  ini  terdapat total 22 halaman dengan pembagian 6 halaman sebagai halaman  utama  wireframe  dan  16  halaman  sebagai halaman  pelengkap  wireframe.  Gambar  6  merupakan tampilan  Halaman  Beranda  yang  dapat  diakses  oleh karyawan.  Halaman  ini  menampilkan  ringkasan  data dari setiap pencatatan berbentuk diagram donat dalam sebuah slide show dan mencantumkan beberapa pilihan menu yang terletak pada bagian footer.
Gambar 6 Wireframe Karyawan - Halaman Beranda
Tematik : Jurnal Teknologi Informasi Komunikasi (e-Journal) Vol. 9 No. x (2022)
Gambar 7 merupakan tampilan Halaman Beranda yang dapat diakses oleh pelanggan. Halaman ini menampilkan  iklan  bisnis  dan  daftar  produk  yang dijual.
Gambar 7 Wireframe Pelanggan - Halaman Beranda
Gambar  8  merupakan  tampilan  Halaman  Percakapan Customer  Service  yang  dapat  diakses  oleh  karyawan. Pada halaman ini, karyawan  dapat melihat daftar chat dari pelanggan.
Gambar 8 Wireframe Karyawan - Halaman Percakapan Customer Servivce
Setelah  low  fidelity  wireframe  disetujui,  maka  tahap selanjutnya adalah pengerjaan high fidelity wireframe. High  fidelity  wireframe  atau  prototype  ini  bersifat interaktif  sehingga  pengguna  mampu  berinteraksi dengan  fitur-fitur  yang  akan  diletakan  dalam  aplikasi yang  dirancang  berdasarkan  dengan  low  fidelity wireframe. Tahap pembuatan High Fidelity Wireframe dilakukan  dengan  mengikuti  acuan  dari  Low  Fidelity Wireframe.  Pada  penelitian  ini,  terdapat  total  35 halaman prototype dengan pembagian 6 halaman utama prototype  dan  29  halaman  pelengkap.  Gambar  9 merupakan  tampilan  Halaman  Beranda  untuk  Hasil Panen yang dapat diakses oleh karyawan. Halaman ini merupakan halaman beranda utama yang menampilkan ringkasan  setiap  pencatatan  dalam  diagram  donat dengan  rincian  perbandingan  pencatatan  hasil  panen serta tombol yang dapat diklik jika ingin melihat detail dari  pencatatan  hasil  panen  dihalaman  Read  Hasil Panen.  Pengguna  dapat  menekan  arah  panah  kiri  dan kanan untuk pergi ke Halaman Beranda Transaksi. Pada bagian  footer  terdapat  4  menu,  yaitu  Beranda, Pengaturan  Produk,  Pengaturan  Iklan  dan  Customer Service.  Terdapat  gambar  lonceng  yang  menampung seluruh notifikasi.
Gambar 9 Prototype Karyawan - Halaman Beranda
Gambar  10  merupakan  tampilan  Halaman  Beranda yang  dapat  diakses  oleh  pelanggan.  Halaman  ini menampilkan iklan bisnis dan daftar produk yang dapat dibeli  oleh  pelanggan.  Jika  pelanggan  ingin  melihat iklan yang lain, mereka dapat menggeser slide iklan ke kiri dan  ke  kanan. Jika pelanggan ingin  melihat detail dari  suatu  produk,  maka  ia  dapat  menekan  gambar produk  lalu  diarahkan  pada  Halaman  Detail  Produk. Pada  pojok  kanan  atas  terdapat  gambar  user  yang
Tematik : Jurnal Teknologi Informasi Komunikasi (e-Journal) Vol. 9 No. x (2022)
apabila  ditekan  akan  memunculkan  sebuah  dropdown untuk pengaturan dan keluar. Terdapat gambar lonceng yang menampung seluruh notifikasi. Pada bagian footer terdapat  4  submenu,  yaitu  Beranda,  Keranjang, Riwayat, dan Customer Service.
Gambar 10 Prototype Pelanggan - Halaman Beranda
Gambar  11  merupakan  tampilan  Halaman  Percakapan Customer  Service  yang  dapat  diakses  oleh  karyawan. Karyawan dapat berinteraksi langsung dengan pelanggan  melalui  chat.  Pengguna  dapat  mengetikan percakapan  dikotak  isian  percakapan,  menambahkan file  pendukung  dengan  menekan  tombol  "+", mengirimkan emoticon dengan menekan gambar smiley di  sebelah  kanan  dalam  kotak  isian  percakapan,  dan mengirimkan  pesan  dengan  menekan  tombol  send berwarna  hijau  di  sisi  luar  kanan  kotak  isian percakapan.
Tahap  testing  dilakukan  menggunakan  Usability Testing  dengan  memanfaatkan  User  Scenarios  yang telah disusun sebelumnya. Tahap test dilakukan secara online  atau  daring,  maka  dari  itu  file  prototype disampaikan  kepada  responden  melalui  link  Figma. Tingkat  keberhasilan dari Usability Testing pelanggan adalah sebesar 100% karena ia berhasil menyelesaikan 4  dari  total  4  User  Scenario  yang  telah  disajikan. Berdasarkan  aktivitas  testing  yang  telah  dilakukan, seluruh  responden  pada  penelitian  ini  berhasil menjalankan dan menyelesaikan User Scenarios hingga langkah akhir sebesar 100% pada iterasi 1.
Meski  semua  User  Scenario  telah  berhasil  dilakukan oleh seluruh responden, pihak pemilik memberi catatan bahwa  beliau  meras  tombol  “kirim”  pada  halaman Percakapan Customer Service susah untuk ditemukan. Maka,  penulis  memperbaiki  tampilan  tombol  “kirim” pada  halaman  Customer  Service  kemudian  gambar
tampilan  tersebut  diserahkan  kembali  kepada  pihak pemilik  untuk  ditinjau  ulang.  Hasil  dari  halaman Customer Service yang telah disesuaikan dan disetujui terdapat pada Gambar 12.
Gambar 11 Prototype Karyawan - Halaman Percakapan Customer Service
Gambar 12 Prototype Karyawan - Halaman Percakapan Customer

## Service yang telah disesuaikan
Sesuai dengan output testing yang sudah dilaksanakan, dapat  dinyatakan  bahwa  tujuan  penelitian  sudah tercapai.  Pencapaian  tujuan  penelitian  dapat  dilihat pada  dihasilkannya  suatu  media  branding  baru  pada layanan  digital  dalam  bentuk  desain  UI  UX  dengan memanfaatkan  tool  User  Persona.  User  Persona berisikan karakteristik pengguna dan tingkat
Tematik : Jurnal Teknologi Informasi Komunikasi (e-Journal) Vol. 9 No. x (2022)
pemenuhan kebutuhan responden yang didapatkan saat testing adalah puas terhadap desain yang telah disusun.

## 4.   Kesimpulan
Berdasarkan  hasil  dari  pelaksanaan  seluruh  tahapan pada  Tugas  Akhir  ini,  dapat  disimpulkan  bahwa  telah dihasilkan karakteristik pengguna dengan memanfaatkan  tool  User  Persona  pada  tahap pengerjaan  Define  yang  digunakan  sebagai  pedoman untuk  membuat  kerangka  tampilan  desain.  Pada pelaksanaan  Usability  Testing,  diperoleh  kesimpulan bahwa seluruh responden telah berhasil menyelesaikan 4  User  Scenarios  yang  disuguhkan  kepada  tiap responden dengan persentase sebesar 100% pada iterasi pertama.  Penelitian  ini  pun  menghasilkan  prototype aplikasi penjualan berbasis mobile untuk sisi karyawan dan  sisi  pelanggan  sesuai  dengan  target  pengguna berdasarkan User Persona dan kebutuhan bisnis.
Hasil  dari  penelitian  ini  dapat  diperbaharui  dan dikembangkan dikemudian hari untuk penerapan dalam pembuatan aplikasi. Saran untuk penelitian selanjutnya ialah  dapat  disusun  rancangan  tampilan  berbasis website,  desktop  atau  multiplatform  sehingga  dapat digunakan  pada  segala  tipe  device  serta  menghasilkan rancangan desain tampilan yang lebih bagus. Selain itu, lingkup  tampilan  dapat  dikembangkan  berdasarkan proses  bisnis  yang  lebih  luas  dan  mendetail  serta lingkup  responden  dapat  diperbesar  sehingga  mampu memperdalam masukan yang diterima untuk pembuatan tampilan desain.

## Daftar Rujukan
[1]   C.  Insights,  The  Top  20  Reasons  Why  Startups  Fail,  CB Insights, 2018.
[2]   T.  Eisenmann,  Why  Startups  Fail:  A  New  Roadmap  for Entrepreneurial  Success,  Canada:  Harvard  Business School, 2021.
[3]   M.  Multazam,  I.  V.  Paputungan  and  B.  Suranto, "Perancangan  User  Interface  dan  User  Experience  pada Placeplus  menggunakan  pendekatan  User  Centered Design," Automata, 2020.
[4]   W.  Darmalaksana,  Metode  Design  Thinking  Hadis Pembelajaran,  Riset  &  Partisipasi  Masyarakat,  Bandung: Fakultas  Ushuluddin  UIN  Sunan  Gunung  Djati Bandung, 2020.
[5]   D.  Nusyirwan,  "Design  Thinking  sebagai  Bridge  of Innovation  Perguruan  Tinggi  dan  Industri  di  Jurusan Teknik  Elektro  Universitas  Maritim  Raja  Ali  Hajri (UMRAH),"  Jurnal  Sustainable:  Jurnal  Hasil  Penelitian dan Industri Terapan, vol. 07, pp. 86-94, 2018.
[6]   A.  Anggoro  and  A.  B.  L.  Mailangkay,  "Perancangan UI/UX  Aplikasi  Android  Online  Monitoring  Kualitas  Air (ONLIMO) di BPPT Menggunakan Metode User Centered Design," Perbanas Institut, pp. 24-26, 2021.
[7]   A.  Anggito  and  J.  Setiawan,  Metodologi  Penelitian Kualitatif, Sukabumi: CV Jejak, 2018.
[8]   Y.  Yulius  and  E.  Pratama,  "Metode  Design  Thinking Dalam  Perancangan  Media  Promosi  Kesehatan  Berbasis Keilmuan  Desain  Komunikasi  Visual,"  Jurnal  Seni, Desain, dan Budaya, pp. 111-116, 2020.
[9]   A. W. Ananda, W. A. Kusuma, I. Iftitah and N. Widyasari, "Penggunaan User Persona untuk Evaluasi Kebutuhan dan Meningkatkan  Pengalaman  Perangkat  Lunak,"  SENTRA: Seminar Teknologi dan Rekayasa, vol. 6, pp. 21-31, 2020.
[10]  T. A. Kurniawan, "Pemodelan Use Case (UML): Evaluasi Terhadap  beberapa  Kesalahan  dalam  Praktik,"  Jurnal Teknologi Informasi dan Ilmu Komputer, vol. 05, pp. 77- 86, 2018.
[11]  A.  Kathleen,  R.  P.  Sutanto  and  A.  P.  K.,  "Analisis Perbandingan  User  Flow  dari  Aplikasi  E-CATALOGUE INFURHOLIC," Jurnal DKV Adiwarna, 2021.
[12]  M. A. Irwansyah, H. Novriando and R. Apriandi, "Analisis User  Experience  Aplikasi  Bujang  Kurir  Menggunakan Google  Analytics  (GA),"  JEPIN  (Jurnal  Edukasi  dan Penelitian Informatika), pp. 64-69, 2021.
[13]  H. Ajie, M. Zulfikar and V. Oktaviani, "Penerapan Konsep User Experience (UX) Pada Perancangan Dashboard Profil Mahasiswa  Baru  Universitas  Negeri  Jakarta,"  PINTER: Pendidikan Teknik Informatika dan Komputer, vol. 03, pp. 88-97, 2019.
[14]  D.  Purnomo,  "Model  Prototyping  pada  Pengembangan Sistem Informasi," Jurnal Informatika Merdeka Pasuruan, vol. 02, pp. 54-61, 2017.
[15]  M. A. S. F. Ridwan and F. Rahma, "Pengujian Usabilitas Halaman  Cart  pada  Website  E-Commerce  Paperlust  di Krafthaus Indonesia," Automata, 2021.
[16]  R. H. Wijaya, H. Tolle and H. M. Az-Zahra, "Perancangan User  Experience  Aplikasi  Pemesanan  Katering  Sekolah dengan  Menggunakan  Metode  Human-Centered  Design," Jurnal  Pengembangan  Teknologi  Informasi  dan  Ilmu Komputer, vol. 03, pp. 3086-3093, 2019.
[17]  S. S. J. Santosa, Analisis UI UX Maximom Berbasis User Persona dengan Menggunakan Pendekatan Google Design Sprint, Surabaya: Universias Dinamika, 2020, pp. 22-23.