## DESAIN APLIKASI SOFTWARE AS A SERVICE SEBAGAI LAYANAN PERBELANJAAN ONLINE
Ninda Lutfiani 1 , Qurotul Aini 2 , Untung Rahardja 3 , Fitria Marwati Suryaman 4 , I Ketut Gunawan 5 1,2,3,4 Sistem Informasi, Fakultas Sains Dan Teknologi, Universitas Raharja
5 Teknologi Informasi, Fakultas Sains Dan Teknologi, Universitas Raharja corresponding author email: fitria.marwati@raharja.info 4

## Abstrak
Pada era teknologi 4.0 saat ini, masyarakat lebih cenderung menggunakan aplikasi perbelanjaan online sebagai media transaksi belanja mereka. Dalam pembuatan aplikasi pembelanjaan online , Software as a Service (SaaS) merupakan perangkat lunak yang dikenal sebagai layanan bersifat online yang  memiliki  peran  penting  dalam  merancang  desain  aplikasi  perbelanjaan online . iPanda merupakan sistem penjualan yang dapat diakses secara online melalui sebuah website yang menggunakan Software as a Service (SaaS) . Dalam pembuatannya diperlukan rancangan prototype guna  menghindari  kesalahan  fatal  yang  akan  terjadi  dalam  pembuatan  aplikasi Software as a Service (SaaS) iPanda. Penelitian ini bertujuan untuk merancang desain prototype aplikasi  perbelanjaan online berbasis Software  as  a  Service  (SaaS) iPanda.  Desain  aplikasi Software as a Service (SaaS) iPanda harus dibuat fleksibel agar siapa pun yang menggunakan aplikasi  tersebut  dapat  dengan  mudah  mengoperasikannya,  tetapi  tidak  banyak  vendor  yang membuat aplikasi berbasis Software as a Service (SaaS) ini dibuat dengan sangat fleksibel sesuai dengan  kebutuhan.  Metode  yang  digunakan  dalam  penelitian  ini  adalah mind  mapping dan prototyping .  Dengan  adanya  perancangan  desain  aplikasi  perbelanjaan online membuat desainer mengetahui kesalahan atau kekurangan sejak awal sebelum desain tersebut masuk ke dalam tahap penerapan dan evaluasi.
Kata kunci: desain aplikasi, iPanda, layanan perbelanjaan online , software as a service

## Abstract
In the current era of technology 4.0, people are more likely to use online shopping applications as a medium for their shopping transactions. In making online shopping applications, Software as a Service (SaaS) is a software known as an online service that has an essential role in designing online shopping applications. iPanda is a sales system accessed online through a website that uses Software as a Service (SaaS). In its design, a prototype design is needed to avoid fatal errors that will occur in making the iPanda Software as a Service (SaaS) application. This study aims to design an online shopping application prototype based on iPanda's Software as a Service (SaaS). The design of the iPanda Software as a Service (SaaS) application must be made flexible so that anyone who uses the application can efficiently operate it. However, only a few vendors make Software as a Service (SaaS) based applications flexible according to needs. The method used in this  research  is  mind  mapping  and  prototyping.  With  an  online  shopping  application  design, designers know  about errors or deficiencies before the design enters the implementation and evaluation stage.
Keywords : application design, iPanda, online shopping services, Software as a Service (SaaS)

## ANDHARUPA: Jurnal Desain Komunikasi Visual & Multimedia
http://publikasi.dinus.ac.id/index.php/andharupa/index
__________________ Received: 16 February 2022 _________________________ Available online at: bit.do/andharupa 12 June 2023 _________________________

## 1. PENDAHULUAN
Belanja merupakan kegiatan sekunder yang dilakukan guna untuk memenuhi kebutuhan sehari-hari. Seiring dengan berkembangnya zaman, saat ini kita tidak perlu repot untuk datang langsung ke tempat belanja tersebut. Hanya dengan duduk manis di rumah, kita bisa  mendapatkan  barang  yang  kita  inginkan  maupun  yang  kita  butuhkan.  Selain  itu, harga  yang  ditawarkan  juga  relatif  lebih  murah  daripada  harga  ketika  kita  membeli langsung (Andre and Dinata, 2018). Hal ini memberi bukti nyata bahwa sebagian besar manusia  khususnya  warga  negara  Indonesia  sudah  menggunakan  internet  setiap harinya (Zaili et al., 2021). Keadaan statis ekonomi negara di berbagai penjuru dunia saat ini sudah sangat bergantung pada hipotesis perencanaan yang efektif, dan manajemen e-commerce yang akurat (Babenko et al., 2019). Efek dari era disruptif ini mengakibatkan terjadinya perubahan yang signifikan secara mendasar dan melebar luas (Rahardja et al.,  2019).  Tidak  hanya  itu,  dalam  penyajian  informasi  yang  efektif  dan  efisien, memerlukan sebuah media yang dapat menampilkan informasi dengan ringkas sehingga dapat dengan mudah untuk dipahami (Rahardja et al., 2018).
iPanda  adalah  jasa  penyedia  nama domain baik domain Indonesia  & domain Internasional,  jasa web  hosting yang  meliputi shared  hosting , cloud  hosting , vps ,  dan reseller  hosting dengan  harga  terjangkau  disertai  dengan service terbaik  untuk kebutuhan pelanggan. iPanda menggunakan Software as a Service (SaaS) . Software as a Service  (SaaS) adalah  layanan  perangkat  lunak  dari  suatu  model  sebagai  media penyampaian  aplikasi  oleh supplier atau  penyedia  aplikasi  yang  dikembangkan  dan dioperasikan bagi para pengguna aplikasi tersebut melalui jaringan internet. Pelanggan yang menggunakan aplikasi tersebut bisa menikmati layanan gratis maupun berbayar yang  telah  disediakan  oleh  si  penyedia  aplikasi.  Pengguna  bisa  menggunakan  jasa layanan perangkat lunak tersebut melalui antarmuka maupun melalui web. Mereka juga bisa  menikmati  layanan  sesuai  dengan  kebutuhannya. Software  as  a  Service  (SaaS) merupakan salah satu bagian dari komputasi awan atau cloud computing penyimpanan data dan eksekusi aplikasi oleh penyedia layanan dengan ketentuan membayar sesuai dengan kebutuhan resource saja.
Publik Software as a Service (SaaS) ini banyak dikeluarkan oleh beberapa perusahaan besar  diantaranya  Amazon,  Google,  Microsoft,  atau  Rackspace. Cloud  computing dikembangkan  oleh  pendekatan  arsitektur  atau  yang  biasa  disebut Service  Oriented Architecture (SOA) , dimana layanan tersebut disediakan dengan berbasis web atau web service . Service  Oriented  Architecture  (SOA) merupakan  cara  pendekatan  dalam merancang  sebuah  aplikasi  dari  komponen-komponen  yang  sudah  ada  sebelumnya. Berikut  adalah  contoh  dari  layanan SaaS yaitu  layanan CRM  online  Salesforce.com, Foho.com, dengan harga yang sangat terjangkau, layanan yang cukup beragam, mulai dari layanan berbasis word processor seperti Google Docs, project management , hingga invoicing online .  Dalam  kondisi  yang  sama  antara  perusahaan  dengan  aplikasi perusahaan  yang  identik  memiliki  aplikasi  dengan  versi  dan  fungsionalitas  sama (Rodrigues  et  al.,  2021).  Selain  itu, Software  as  a  Service  (SaaS) memiliki  beberapa keuntungan untuk para penggunanya antara lain efektivitas biaya, pemanfaatan sumber daya yang efisien, kolaborasi, pemulihan bencana, dan kinerja tinggi (Dame, 2006).
Perancang aplikasi di dunia saat ini telah menerapkan pelaksanaan desain UI/UX pada perancangan  maupun  pengembangan  perangkat  lunak  mereka.  Dengan  pelaksanaan UI/UX membuat aplikasi tidak hanya sempurna dari segi tata letak, warna dan tipografi tapi juga bisa membuat pengguna atau pelanggan dengan mudah menggunakan aplikasi tersebut.  Pada  era  teknologi  4.0  ini,  UI/UX  telah  menghadirkan  perkembangan  yang sangat signifikan pada aplikasi seluler baik itu aplikasi berupa e-commerce atau aplikasi game. Pada dasarnya User Interface (UI) mempunyai prinsip yaitu tampilan desain yang menarik  dan  elegan  sehingga  dapat  menarik  perhatian  pengguna.  Sedangkan User Experience (UX) memiliki prinsip yaitu dapat memberikan kemudahan ketika memakai aplikasi tersebut (Suhaili, 2020; Muhyidin et al., 2020). UI dan UX merupakan singkatan dari User  Interface dan User  Experience dimana  UI/UX  adalah  sebuah  tampilan  visual dalam sebuah aplikasi mobile atau alat pemasaran digital dalam bentuk website yang dapat meningkatkan brand yang dilahirkan oleh bisnis atau perusahaan (Muhyidin et al., 2020).
Desain  UI/UX  bisa  dikatakan  sebagai  personal brand ing  dimana  itu  merupakan tantangan  besar  karena  biaya,  kualitas,  waktu  dan  yang  terpenting  adalah  kepuasan pelanggan.  Tantangan  lainnya  selain  itu  adalah  memilih  nama  merek,  warna, font , bentuk, dan gambar yang tepat untuk perancangan sebuah aplikasi mobile (Castellanos et al., 2020). Faktor penting dari pengalaman pengguna (UX) dan antarmuka pengguna (UI) adalah untuk menghadirkan produk secara digital yang sukses, di mana pengguna dapat  merasakan  emosi  positif  dalam  berinteraksi  dengan  produk  (Khast,  2017). Terdapat  berbagai  macam  pendekatan  untuk  merancang  aplikasi  berdasarkan User Interface Dan User  Experience untuk  sebuah  aplikasi  perangkat  bergerak  ataupun platform lain (Idris et al., 2021). Dari setiap penggunaan desain produk, faktor tak kalah pentingnya  yaitu  kegunaan  desain  merupakan  pertimbangan  utama  dalam  menilai kualitasnya  (Salim  dan  Putranto,  2020).  Desain  juga  memiliki  fungsi  sebagai  interaksi yang dapat digunakan pada proses pembuatan Produk Interaktif (Alomari et al., 2020).
Penelitian ini bertujuan untuk merancang desain prototype (Fauziah et al., 2021) aplikasi iPanda sebagai aplikasi perbelanjaan online berbasis Software as a Service (SaaS) . Desain aplikasi Software  as  a  Service  (SaaS) perlu  dibuat  fleksibel  agar  siapa  pun  yang menggunakan  terutama  orang  awam  yang  ingin  membuat  sistem  yang  dapat menggunakan sesuai kebutuhan terutama yang bergerak dalam bidang teknologi dan pendidikan sehingga dapat dengan mudah mengoperasikannya. Perancangan prototype untuk aplikasi perbelanjaan online berbasis Software as a Service (SaaS) masih sedikit sedikit dilakukan karena memakan lebih banyak waktu dalam pembuatannya (Raharja et  al.,  2018).  Namun  dengan  dengan  adanya  perancangan prototype desain  aplikasi perbelanjaan online membuat desainer  mengetahui  kesalahan  atau  kekurangan  sejak awal sebelum desain tersebut masuk ke dalam tahap penerapan dan evaluasi (Aini et al.,  2019).  Sehingga  dapat  disimpulkan  bahwa  dalam  membuat  perancangan  desain pada  aplikasi Software  as  a  Service  (SaaS) merupakan  hal  terpenting  yang  harus dilakukan (Rachmawati et al., 2017).

## 2. METODE PENELITIAN
Dalam  melakukan  penelitian  ini  ada  dua  tahapan  metodologi  yaitu  metode mind mapping dimana suatu model pembelajaran yang menggunakan dengan suatu strategi mencatat dengan kata kunci dan gambar dan metode Prototype dengan menggunakan interaksi antara pengembang sistem dengan pengguna sistem sebagai berikut:

## 2.1 Metode Mind Mapping
Mind mapping merupakan metode yang dapat meleburkan otak bagian kanan dan kiri (Saragih dan Zulkifli, 2019) untuk menerima atau menangkap berbagai macam ide baru yang disalurkan dan bisa menjadi inovasi baru di masa yang akan dating (Sujarwo dan Ratnasari, 2020).  Didasarkan pada cara kerja otak manusia bisa menyimpan miliaran informasi  (Humairah  et  al.,  2020),  lalu  dicatat  berdasarkan  riset  mengenai  cara  kerja otak yang sebenarnya (Raharja et al., 2019). Metode mind mapping penelitian ini bisa dilihat pada gambar 1.
Gambar 1. Metode Penelitian Mind mapping
[Sumber: Data Penulis]
Dari gambar 1, di atas terdapat empat karakteristik yang dimiliki oleh aplikasi Software as a Service (SaaS) yaitu: 1) Akses berbasis jaringan. Aplikasi Software as a Service (SaaS) ini memang harus memiliki koneksi jaringan internet yang memadai agar dapat diakses dan digunakan. 2) Harga berdasarkan pengguna. Dalam Software as a Service (SaaS) ini pengguna  aplikasi  dapat  menikmati  layanan  gratis  dan  juga  berbayar.  Jika  pengguna ingin menggunakan layanan sesuai dengan kebutuhan dan lebih lengkap lagi biasanya layanan  ini  mewajibkan  penggunanya  untuk  membayar  sesuai  dengan  layanan  yang mereka gunakan. 3) Pengiriman aplikasi yang memiliki arsitektur Multi-tenant. Software as a Service (SaaS) memiliki desain yang multi fungsi sehingga dapat memudahkan para penggunanya.  4)  Aktivitas  dikelola  dari  lokasi  pusat  memungkinkan  pelanggan  untuk mengakses  aplikasi  dari  jarak  jauh  melalui web. Selagi  pengguna  dapat  tersambung dengan  internet  maka,  dia  bisa  terhubung  dan  menggunakan Software  as  a  Service (SaaS) ini sepuasnya.

## 2.2 Metode Prototype
Prototype merupakan  suatu  metode  yang  digunakan  sebagai  mengotomatisasi  fase analisis dan definisi selain itu memiliki kelebihan yang dapat menciptakan syarat yang lebih baik dari produksi yang dikeluarkan oleh metode spesifikasi dalam bentuk tulisan (Punkastyo,  2018).  Dalam  perancangan  sistem  yang  memakai  pendekatan  sebagai membuat  suatu  aplikasi  dengan  bertahap  dan  sangat  cepat  sehingga  dengan  begitu dapat  segera  dievaluasi  oleh  pengguna  aplikasi, prototype ini  memang  sangat  cocok sekali untuk user yang awam dalam bidang IT (Asady, 2021).
Gambar 2. Alur Prototype SaaS [Sumber: Oktaviani et al., 2021]
Pada gambar 2, di atas terdapat empat tahapan alur prototype Software as a Service (SaaS) yaitu  tema,  warna,  tipografi, wireframe tampilan  beranda,  dan prototype tampilan beranda.

## 3. HASIL DAN PEMBAHASAN
Pada  penelitian  ini  menunjukan  jika  dengan  adanya  perancangan  desain  aplikasi perbelanjaan online membuat desainer  mengetahui  kesalahan  atau  kekurangan  sejak awal sebelum desain tersebut masuk ke dalam tahap penerapan dan evaluasi. Desain harus  dibuat  sedemikian  rupa  agar  penggunaannya  pun  bisa  sangat  fleksibel.  Tidak hanya itu, desain dan layout atau tata letak harus sesuai dengan standar agar siapapun yang  berkunjung  bisa  dengan  mudah  mengoperasikannya  sehingga  mereka  tertarik berlama-lama  disana  dan  bisa  menjadi  pelanggan  setia  dari  web  perbelanjaan online yang telah dirancang.
Web  perbelanjaan online saat  ini  memang  sangat  sesuai  sekali  mengingat perkembangan  jaman  yang  saat  ini  telah  memasuki  4.0.  Dalam  melakukan  kegiatan seperti  transaksi  barang  dan  jasa  dapat  dilakukan  secara  tidak  langsung  (elektronik) dengan bahasa kerennya e-commerce , dimana sistem belanja tersebut membutuhkan yang dinamakan jaringan internet agar dapat menghubungkan halaman website dengan tujuan memudahkan pembeli dalam memilih dana membayar produk secara elektronik serta jangkauan pasar yang kuasa tidak hanya di satu wilayah tetapi menjangkau wilayah lainnya  dalam  memasarkan  produknya  sehingga  meningkatkan  omset  penjualan  dan
pengerjaaannya dapat dilakukan dengan mudah tanpa memerlukan waktu karena dapat dilakukan kapan saja dan dimana saja dalam saat melakukan pelayanan dan pembelian tanpa bertemu secara langsung (Santoso dan Himawan, 2014; Husada, 2019).
Berikut adalah perancangan sistem aplikasi iPanda yang memakai pendekatan metode prototype yaitu:
1) Tema.  Hal  pertama  yang  dilakukan  adalah  menentukan  tema  apa  yang  akan digunakan untuk merancang sebuah aplikasi Software as a Service (SaaS) . Vendor dan perancang  aplikasi  harus  mengetahui  target  pasar  yang  ingin  dituju.  Setelah mengetahui target pasar yang dituju barulah kita bisa menebak apakah tema yang diusung cocok atau tidak dengan target pasarnya.
Gambar 3. Tema Aplikasi Software as a Service (SaaS) iPanda [Sumber: Dokumentasi Penulis]
Tema  di  atas  merupakan  tema  yang  diambil  pada  aplikasi  iPanda.  Vendor  dan perancang aplikasi mengambil tema penjualan online aplikasi domain atau database . Karena  pada  dasarnya target  yang  dituju adalah  orang awam  yang  ingin  membuat sistem yang dapat dipergunakan dalam kebutuhan mereka terutama yang bergerak dalam bidang teknologi dan pendidikan. Sebelum itu, vendor juga harus mengetahui tahapan  perancangan  perangkat  lunak  secara  umum.  Pada requirement  gathering atau sering disebut analisa kebutuhan adalah suatu tahapan dalam kegiatan untuk menghasilkan  apa  yang  dibutuhkan software (perangkat  lunak)  dengan  cara melakukan sebuah wawancara terhadap pengguna dengan mengajukan pertanyaan dan  melakukan  survei  dengan  keterkaitan  penelitian  tersebut  (Martono,  2019). Seperti  yang dikatakan Al  Bahra  Bin  Ladjamudin  bahwa dalam  melakukan tahapan untuk perancangan ( design ) tentunya memiliki tujuan alternatif sebagai solusi dalam mengatasi  permasalahan  pada  perusahaan  dalam  mencapai  sebuah  tujuan (Wantoro, 2018).
2) Warna.  Hal  kedua  yang  dilakukan  adalah  pemilihan  warna.  Karena  dengan  warna akan semakin kuat brand ing yang ingin ditampilkan. Biasanya orang awam yang tidak tahu  menahu  dengan  dunia  desain  atau  perancangan  aplikasi,  mereka  bisa mengetahui brand hanya  karena  dengan  melihat  warna  yang  ditonjolkan  pada sebuah  logo.  Keputusan  untuk  dapat  menetapkan  pilihan  desain  pada  logo dibutuhkan  pengetahuan  yang  tepat  dalam  pemilihan  karakteristik  apa  saja  yang dibutuhkan  agar  sesuai  dengan  pasar  tanpa  menimbulkan  masalah  kedepannya (Airey,  2014;  Krishna,  2013;  Luffarelli  et  al.,  2019).  Kegunaan software melakukan
perencanaan digunakan sebagai prosedur untuk dapat menggambarkan suatu sistem yang  bangun  agar  sesuai  dengan  kebutuhan  (Luffarelli  et  al.,  2019).  Merek merupakan  suatu  identitas  yang  menjadi  hak  milik  seseorang  dengan  terdapat sebuah ciri khas mengenai tampilan desain dan warna tentunya. Pada merek tersebut memiliki  makna  dari  setiap  gambar,  kata-kata,  dan  warna  yang  sesuai  dengan kepribadian  pemilik  sehingga  tidak  dapat  digunakan  pihak  lain  atau  ditiru  karena memiliki kualitas (Henderson dan Cote, 1998; Melewar dan Saunders, 1998) secara global  (Foroudi,  2019).  Biasanya  para  vendor  dan  perancang  aplikasi  menentukan warna aplikasi dari logo yang mereka buat untuk personal brand mereka.
Gambar 4. Logo iPanda

## [Sumber: Dokumentasi Penulis]
Di  atas  merupakan  logo  iPanda  yang  dimana  logo  tersebut  identik  dengan  warna hijau.  Inilah  yang  membuat  iPanda  memiliki  personal branding yang  kuat  hingga menjadikan  warna  hijau  sebagai branding mereka  di platform mana  pun.  Manajer menghadapi  belanja  dan  penjualan  secara  eksekutif  sebagai  penambahan  merek pribadi ke daftar rencana profesional yang telah dibuat mereka (Rangarajan et al., 2017).  Definisi  yang  diungkapkan  oleh  Peters  mengenai  personal branding yaitu sebagai  pemahaman,  penemuan,  dan  pemasaran  kerangka  unik  individu  (Amoako dan  Okpattah,  2018).  Menurut  (Jooste et  al.,  2009) definisi branding ialah  sebagai layanan  atau  penamaan  produk  untuk  menghasilkan  suatu  identitas, mengembangkan  sebuah  makna,  dan  memproyeksikan  citra  (Bergh  et  al.,  2017). Maka dari itu, pemilihan warna sangatlah penting pada pembuatan sebuah brand .
Gambar 5. Warna Brand iPanda [Sumber: Dokumentasi Penulis]
Selain untuk memperkuat personal branding , warna juga bisa menjadi harapan bagi vendor  dan  perancang  aplikasi  pada  aplikasi  yang  sedang  dibuatnya.  Pada  aplikasi iPanda  ini  mengambil  warna  hijau  yang  berarti  menenangkan  mata.  Diharapkan aplikasi  iPanda  ini  dapat  membuat  siapa  saja  yang  berkunjung  menjadi  betah berlama-lama  disana  hingga  membuat  mereka  jatuh  hati  lalu  memutuskan  untuk
berlangganan. Pemilihan warna memiliki peranan penting dalam desain yang dibuat pada sebuah logo ataupun aplikasi pada perusahaan. Karena warna memiliki tujuan penting  pada  suatu  perusahaan  dalam  menarik  pelanggan  untuk  dapat  menikmati tampilan desain dengan warna yang tidak terlalu norak dan berlebihan serta menjadi ciri  khas  sebuah  perusahaan  disaat  pelanggan  melihat  warna  tersebut  mereka langsung  mengenalinya  dengan  lebih  mudah  (Chandra,  2018).  Penggunaan  identic warna pada brand memberi impresi aplikasi pada pelanggan (Raja, 2020).
3) Tipografi. Faktor penting ketiga adalah penentuan format teks. Tipografi merupakan salah satu bagian yang harus diteliti oleh perancang aplikasi, karena gaya tulisan juga dapat  mempengaruhi  identikal  dari  suatu brand yang  mereka  keluarkan.  Tipografi adalah  seni  mekanistik  dalam  memproduksi  huruf,  angka,  simbol,  bentuk  dalam pemahaman  elemen,  prinsip  dan  atribut  desain  (Solomon,  1994).  Secara  umum tipografi  memakai  istilah  mekanisme  sebab  memang  pertama  kali  tipografi merupakan utama keahlian bagi para pencetak dan para desainer (Hananto, 2018). Sama  halnya  seperti  musik,  tipografi  adalah  konsep  yang  supranatural.  Seseorang dapat  mengetahui  suasana  hati  gembira,  optimisme,  romantis  ataupun  sedih, karakteristik,  dan  kesan  hanya  karena  mendengar  sebuah  alunan  lagu.  Peranan tipografi  juga  penting  untuk  keberhasilan  membentuk  komunikasi  visual (Sulistiyawati et al., 2017).
Gambar 6. Tipografi Brand iPanda [Sumber: Dokumentasi Penulis]
Pemilihan tipografi yang dipilih pada aplikasi iPanda adalah decorative atau teks yang di  dekorasi  sedemikian  rupa  untuk  membentuk  tulisan  yang  dinamis  dan  juga menyenangkan. Biasanya format teks ini dipakai pada saat membuat suatu kegiatan yang tujuannya santai dan menghibur serta dapat merilekskan mata dan juga otak.
Decorative dipilih iPanda bertujuan agar siapa pun yang berkunjung pada aplikasinya merasa  nyaman  dan  menyenangkan  jika  berlama-lama  berada  disana.  Tipografi dirancang  dan  didesain  untuk  menggambarkan  suatu  bentuk  benda  yang  dimana pemilihan warna dapat menyesuaikan benda yang telah diambil (Satriadi and Catherine n.d.).
4) Wireframe Tampilan  Beranda.  Hal  yang  tidak  kalah  pentingnya  yaitu  membuat Wireframe atau gambaran kasar dari aplikasi yang ingin dirancang. Karena dari sinilah kita  bisa  melihat  bagian  mana  yang  sudah  tepat  atau  belum. Wireframe pada perancangan aplikasi yang dibuat sketsa oleh perancang, dalam menghadapi variasi 4.0 membuat tahapan ini menjadi sangat bermanfaat bagi para pendiri perusahaan yang bergerak pada bidang start up (JIESHAN CHEN, Australian National University et
al.  n.d.). Wireframe merupakan  metode  desain User  Interface yang  dibentuk menyerupai  panduan  visual  yang  menampilkan  struktur  berupa  halaman  dalam aplikasi (Wardana, 2017).
Gambar 7. Wireframe Software as a Service (SaaS) iPanda
[Sumber: Dokumentasi Penulis]
Di atas merupakan Wireframe Software as a Service (SaaS) iPanda. Dimana disana sudah  tergambar  rancangan  kasar prototype Software  as  a  Service  (SaaS) iPanda. Wireframe ini juga dapat menjadi patokan bagi kita mengenai tata letak prototype iPanda. Dengan dibuatnya Wireframe ini, kesalahan yang terjadi akan sangat minim sekali karena kita tahu bagian mana saja yang terjadi kesalahan.
5) Prototype Tampilan Beranda. Pada tahapan terakhir ini adalah hasil dari 4 (empat) tahapan sebelumnya. Dimana tahapan prototype ini rangkaian yang telah terbentuk jadi  satu  menuju  tahap  evaluasi  atau  pengujian.  Dibentuknya  sebuah prototype sebagai  pengembangan  sistem  memiliki  tujuan  untuk  mengumpulkan  berbagai informasi dari para pengguna hingga pengguna dapat berhubungan dengan model prototype yang sedang dikembangkan, karena prototype menunjukan gambar awal dari sistem yang akan dilanjutkan ke pembentukan sistem sesungguhnya yang lebih besar lagi (Purnomo, 2017).
Gambar 8. Prototype Software as a Service (SaaS) iPanda [Sumber: Dokumentasi Penulis]
Tergambar jelas prototype iPanda di atas merupakan hasil dari tahapan satu sampai dengan empat. Terdapat produk apa yang ditawarkan oleh iPanda. Web market yang ditawarkan  ada  4  (empat)  kategori  yaitu domain ,  website,  aplikasi  dan  juga  script database .  Produk  yang  ditampilkan  juga  merupakan  produk  unggulan  yang  ada disana.  Pada  hasil  akhir prototype ini,  menjadi  patokan  para  vendor  dan  juga perancang aplikasi untuk mengevaluasi dan menguji kesiapan dari aplikasi yang telah dirancangnya  untuk  menjadi  percobaan  di  masyarakat.  Yanuarti  pada  tahun  2017, berkata  bahwa prototype merupakan  suatu  pendekatan  rekayasa software yang dilangsungkan untuk demonstrasi bagaimana sebuah software ataupun komponen software bekerja di dalam lingkungan sebelum masuk ke tahapan aktual konstruksi awal dilakukan. Prototype berguna sebagai indikator dari gambar yang telah dibuat dimasa  yang  akan  datang  dan  juga  membedakan  dua  fungsi  observasi  dan pertunjukan.
Adapun beberapa hal yang harus benar-benar diperhatikan dalam pembuatan prototype aplikasi  perbelanjaan online berbasis Software  as  a  Service  (SaaS) agar  tidak  terjadi kesalahan ketika akan memasuki tahap pengujian dan evaluasi. Tahap terpenting yaitu layout atau tata letak. Karena dari tata letak yang tepat lah sebuah web bisa beroperasi sesuai  dengan  prosedur  hingga  pesan  yang  ingin  disampaikan  oleh  desainer tersampaikan dengan baik ke pengguna aplikasi Software as a Service (SaaS) tersebut. Keberagaman pada tampilan di objek merupakan hasil dari ketentuan beberapa gambar yang terkumpul secara eksponensial dengan tata letak yang terlihat konsisten (Zhao et al., 2020).
Gambar 9. Layout Atas Beranda iPanda
[Sumber: Dokumentasi Penulis]
Dari gambar 9 di atas dapat dilihat layout atau tata letak pada tampilan atas dari beranda iPanda. Dimana sudah menjadi standar umum untuk para desainer membuat tampilan web Software as a Service (SaaS) dengan layout seperti di atas. Paling pojok kiri atas terdapat logo brand dari aplikasi, karena sebagai identitas dari web yang ditampilkan. Lalu lanjut pada tulisan beranda yang dimana disana menampilkan produk apa saja yang ditawarkan, keranjang disana berfungsi untuk menyimpan produk apa yang akan dibeli, pesanan saya berisikan produk yang telah dibeli dan telah berhasil melakukan transaksi, lalu terakhir adalah harga dimana disana menampilkan daftar harga dari produk yang ditawarkan. Tidak hanya produk yang berbayar, disana juga terdapat layanan gratis yang bisa  dinikmati  oleh  siapa  saja  sebelum  akhirnya  pengguna  tersebut  berlangganan. Definisi dari tata  letak  semantik adalah  struktur  dengan  suatu  adegan  seperti  contoh objek  dalam  menyampaikan  informasi  secara  halus  dari  adegan  yang  diperagakan dengan berupa jumlah objek serta kategori objek, lokasi, ukuran dan lainnya (Hong et al. 2018).
Terlihat  sangat  jelas  pada  gambar  8  terdapat ucapan  selamat datang  disertai dengan tema  warna  yang  senada  dengan  logo  dari brand iPanda.  Tak  hanya  itu,  tampilan beranda  juga  menampilkan  jenis  produk  apa  saja  yang  dijual  disana  beserta  dengan produk unggulan kebanggaan mereka. Dengan begitu, siapa pun yang membuka web iPanda  menjadi  mengetahui  produk  apa  yang  dijual  di  iPanda.  Selain  itu,  tampilan dengan layout tersebut  juga  dapat  mempermudah  pengguna  untuk  bisa  menjelajahi lebih  dalam  dari  web  iPanda  tersebut.  Manfaat  lainnya  adalah  pengguna  yang  pada awalnya  hanya  berkunjung  bisa  tertarik  lalu  kemudian  berlangganan  karena tampilannya yang fleksibel dan mudah dioperasikan.

## 4. KESIMPULAN
dapat  disimpulkan  bahwa  dalam  membuat  perancangan  desain  pada  aplikasi  iPanda menggunakan Software  as  a  Service  (SaaS) merupakan  hal  terpenting  yang  harus dilakukan. Karena dengan perancangan prototype vendor dan juga desainer mengetahui apa  yang  menjadi  kekurangan  dari  aplikasi  yang  sedang  mereka  rancang  sebelum selanjutnya akan masuk ke tahap pengujian dan evaluasi untuk menjadi bahan survei ke pengguna.  Sebaiknya  aplikasi  yang  dirancang  juga  bersifat  fleksibel  dan  mudah dioperasikan sehingga membuat pengguna aplikasi iPanda yang berkunjung betah jika berlama-lama  berada  di  aplikasi  atau  web  tersebut.  Tidak  hanya  itu,  pengguna  yang pada  awal  hanya  berniat  menikmati  layanan  gratis  saja  bisa  tertarik  berlangganan karena tampilan serta tools yang ada disana mudah mereka kuasai. Selain itu, produk- produk  yang  ditawarkan  juga  sesuai  dengan  target  pasar  yang  ada.  Penelitian  ini terdapat keterbatasan yaitu hanya terfokus pada spesifik prototype desain Software as a  Service  (SaaS) ,  diharapkan  penelitian  selanjutnya  dapat  membahas  mengenai tools apa saja yang harus ada ketika ingin merancang web perbelanjaan online .

## 5. UCAPAN TERIMAKASIH
Ucapan terima kasih ini penulis ingin berterima kasih kepada Perguruan Tinggi Raharja yang  telah  memberi  fasilitas,  finansial,  disertai  dukungan  yang  maksimal  sehingga penulis dapat menyelesaikan penelitian ini dengan baik dan tepat waktu.

## DAFTAR PUSTAKA
Aini,  Qurotul,  Po Abas  Sunarya,  dan  Adrian  Sean  Bein.  2019.  “The  Implementation  of Viewboard of The Head Of Department As A Media For Student Information Is Worth  Doing  Final  Research.” IAIC  Transactions  on  Sustainable  Digital Innovation 1(1): 18 – 25.
Alomari, Hakam W, Vijayalakshmi Ramasamy, James D Kiper, dan Geoff Potvin. 2020. “A User  Interface (UI)  and User  Experience (UX)  Evaluation  Framework  for Cyberlearning  Environments  in  Computer  Science  and Software Engineering Education.” Heliyon 6(5): e03917.
Amoako,  George  K.,  dan  Bernard  K.  Okpattah.  2018.  “Unleashing  Salesforce Performance: The Impacts of Personal Brand ing and Technology in an Emerging Market.” Technology in Society 54(February): 20 – 26.
Andre,  A.,  dan  H.  Dinata.  2018.  “Interaction  Design  to  Enhance  UX  of  University Timetable Plotting System on Mobile Version.” IOP Conference Series: Materials Science and Engineering 407(1).
Asady, Ardan Nizma. 2021. “Perancangan Database Inventaris Barang.” 8: 47– 61.
Babenko, Vitalina et al. 2019. “Factors of the Development of International E-commerce under the Conditions of Globalization.” SHS Web of Conferences 65: 04016. Bergh, L una et al. 2017. “Social Media, Permanence, and Tattooed Students: The Case for Personal, Personal Brand ing.” Critical Arts 31(4): 1 – 17.
Castellanos, Arturo, Monica Chiarini Tremblay, Roman Lukyanenko, dan Binny Samuel. 2020. “Basic Classes in Conceptual Modeling: Theory and Practical Guidelines.”
Journal of the Association for Information Systems 21(4): 1001 – 44. Chandra, Gracia Diva. 2018. “Pengaruh Warna Logo Brand Terhadap Brand Personality.”
Jurnal Ilmiah Mahasiswa Universitas Surabaya 7(2): 1804 – 20.
Da me, David. 2006. “ Software as a Service.” Dr. Dobb’s Journal 31(10): 10.
Fauziah, Zaleha et al. 2021. “Designing Student Attendance Information Systems Web - Based.” Aptisi Transactions on Technopreneurship (ATT) 3(1): 23 – 31. Foroudi, Pantea. 2019. 76 International Journal of Hospitality Management Influence of Brand Signature, Brand Awareness, Brand Attitude, Brand Reputation on Hotel Industry’s Brand Performance .
Hananto, Brian Alvin. 2018. “Melihat Keseimbangan Visual Dalam Tipografi (Studi Kasus Desain Lo gotype Pada Mata Kuliah Tipografi Dasar).” Titik Imaji 1(2): 76 – 82. Hong,  Seunghoon, Dingdong Yang, Jongwook  Choi, dan  Honglak  Lee.  2018.  “Inferring Semantic Layout for Hierarchical Text-to- Image Synthesis.” Proceedings of the IEEE Computer Society Conference on Computer Vision and Pattern Recognition (Figure 1): 7986 – 94.
Humairah,  Irfan  Darmawan,  dan  Oktariani  Nurul  Pratiwi.  2020.  “Analisis  Sentimen Ulasan  Produk  Toko Online Rubylicious  Untuk  Peningkatan  Layanan Menggunakan Algoritma Naive Bayes.” e-Proceeding of Engineering 7(2): 7026 – 34.
Husada, Fajar Robert Khoirul. 2019. “Perancangan Sistem Perbelanjaan Online Berbasis Web Menggunakan Metode V- Model.” 8(5): 55.
Idris,  Muhammad  Arif,  Galang  Prihadi  Mahardhika,  dan  Beni  Suranto.  2021. “ Perancangan  UI/UX  Aplikasi  Perangkat  Bergerak  Ivent  Menggunakan Pendekatan HCD (Human Centered Design).” Automata 2(1). JIESHAN  CHEN,  Australian  National  University,  Australia  et  al.  “ Wireframe -Based  UI Design Search through Image Autoencoder.”
Khast,  Peg ah.  2017.  “UX/UI  Design  Process  for  a  Peer  to  Peer  Financial Platform .” (February): 35.
Luffarelli,  Jonathan,  Antonios  Stamatogiannakis,  dan  Haiyang  Yang. 2019.  “The  Visual Asymmetry Effect: An Interplay of Logo Design and Brand Personality on Brand Equity .” Journal of Marketing Research 56(1): 89 – 103.
Luffarelli, Jonathan, Mudra Mukesh, dan Ammara Mahmood. 2019. “Let the Logo Do the Talking:  The  Influence  of  Logo  Descriptiveness  on Brand Equity.” Journal  of Marketing Research 56(5): 862 – 78.
Martono,  Marton o.  2019.  “Implementasi Prototype Aplikasi  Pengelolaan  Inventaris Barang.” Jurnal Ilmiah Media Sisfo 13(1): 38.
Muhyidin,  Muhammad  Agus,  Muhammad  Afif  Sulhan,  dan  Agus  Sevtiana.  2020. “Perancangan Ui/Ux Aplikasi My Cic Layanan Informasi Akademik Mahasiswa Menggunakan Aplikasi Figma.” Jurnal Digit 10(2): 208.
Punkastyo,  Dimas  Abisono.  2018.  “Perancangan  Aplikasi  Tutorial  Jurus  Dasar  Beladiri
Cimande  Menggunakan  Metode Prototype .” Jurnal  Informatika  Universitas Pamulang 3(2): 87.
Purnomo, Dwi. 2017. “Model Prototyping Pada Pengembangan Sistem Informasi.” J I M P - Jurnal Informatika Merdeka Pasuruan 2(2): 54 – 61.
Rachmawati, A., A. Nugraha, dan M. Awaluddin. 2017. “Desain Aplikasi Mobile Informasi Pemetaan  Jalur  Batik  Solo  Trans  Berbasis  Android  Menggunakan  Location Based Service.” Jurnal Geodesi Undip 6(2): 46 – 55.
Rahardja, Untung, Ninda Lutfiani, Arini Dwi Lestari, dan Edward Boris P Manurung. 2019. “Inovasi  Perguruan  Tinggi  Raharja  Dalam  Era  Disruptif  Menggunakan Metodologi ILearn ing.” Jurnal Ilmiah Teknologi Informasi Asia 13(1): 23.
Rahardja,  Untung,  Qurotul  Aini,  dan  Fitri  Faradilla.  2018.  “Implementasi  Viewboard Berbasis Interaktif Javascript Charts Pada Sistem Penilaian Perkuliahan.” Jurnal Ilmiah Teknologi Informasi Asia 12(2): 91.
Raharja,  Untung,  Ninda  Lutfiani,  dan  Wahyu  Setya  Wardana.  2018.  “Penjadwalan Agenda Pelaksanaan Tridharma Perguruan Tinggi Secara Online Menggunakan Google Calendar.” Jurnal Teknoinfo 12(2): 66.
Raharja, Untung, Ninda Lutfiani, Indri Handayani, dan  Fitria Marwati Suryaman. 2019.
“Motivasi  Belajar  Mahasiswa  Terhadap  Metode  Pembelajaran Online ILearning+ Pada Perguruan Tinggi.” Sisfotenika 9(2): 192. Raja,  Togar  Mulya.  2020.  “Kajian  Aplikasi Brand Identity Pada  Elemen  Desain  Interior Gourmet Café Petit enget.” Jurnal Arsitektur ARCADE 4(2): 186.
Rangarajan,  Deva,  Betsy  D.  Gelb,  dan  Amy  Vandaveer.  2017.  “Strategic  Personal Brand ing —And How It Pays Off.” Business Horizons 60(5): 657 – 66.
Rodrigues,  Jorge,  Pedro  Ruivo,  dan  Tiago  Oliveira.  2021.  “Mediation  Ro le  of  Business Value and Strategy in Firm Performance of Organizations Using Software -as-a- Service Enterprise Applications.” Information and Management 58(1): 103289. Salim, James, dan Leksmono Suryo Putranto. 2020. “Analisis Pengaruh Layanan Belanja
Online Terhadap  Perjalanan  Berbasis  Rumah  Dan  Tempat  Aktivitas  Dengan Metode Sem.” JMTS: Jurnal Mitra Teknik Sipil 3(4): 1017.
Saragih,  Lisa  Andriani,  dan  Zulkifli  Zulkifli.  2019. “Analisis  Kerajinan  Souvenir  Diorama
Berbahan  Limbah  Pada  Pengrajin  Dikraf  Berdasarkan  Prinsip- Prinsip  Desain.” Gorga: Jurnal Seni Rupa 8(1): 272.
Satriadi, Satriadi, dan Ruwina Aini Catherine. “Pemanfaatan Tipografi Untuk Anak Usia Dini Melalui Media Komunikasi Visual.”
Siswidiyanto, Ahmad Munif, Diah Wijayanti, dan Eko Haryadi. 2020 . “Sistem Informasi Penyewaan  Rumah  Kontrakan  Berbasis  Web  Dengan  Menggunakan  Metode Prototype .” Jurnal Interkom 15(1): 18 – 25.
Suhaili,  Muhammad.  2020.  “Desain  UI/UX  Layanan  Paspor Online .” Jurnal  RASSI 5(1):
14 – 19.
Sujarwo,  Yostian Ari,  dan  Anita  Ratnasari.  2020.  “Aplikasi  Reservasi  Parkir  Inap Menggunakan  Metode  Fishbone  Diagram  Dan  QR- Code.” Jurnal  Sisfokom (Sistem Informasi dan Komputer) 9(3): 302 – 9.
Sulistiyawati,  Puri,  Dwi  Puji  Prabowo,  dan  Dimas  Irawan  Ihya’  Ulumuddin.  2017.
“ Perancangan  Media  Pembelajaran  Berbasis  Audio  Visual  Untuk  Mata  Kuliah Tipografi  Pada  Program  Studi  Desain  Komunikasi  Visual  Universitas  Dian Nuswantoro.” ANDHARUPA:  Jurnal  Desain  Komunikasi  Visual  &  Multimedia 3(01): 69 – 80.
Wantoro,  Agus.  2018.  “ Prototype Aplikasi  Berbasis  Web  Sebagai  Media  Informasi Kehilangan Barang.” Jurnal Teknoinfo 12(1): 11.
Wardana,  Leonardus  Ari,  Suyoto,  dan  Pranowo.  2017.  “Design Mobile Application  of Marriage Counseling on the Catholic Church with UCD and Wireframe Method.” International Journal of u- and e- Service, Science and Technology 10(1): 153 – 62.
Zaili, Arman Haqqi Anna, Selly Anastassia, Amellia Kharis, dan Dian Lestari. 2021. “Jurnal Indonesia Sosial Sains.” Jurnal Indonesia Sosial Sains 2(1): 1 – 8. Zhao, Bo, Weidong Yin, Lili Meng, dan Leonid Sigal. 2020. “Layout2image: Image