## PERANCANGAN WIREFRAME WEBSITE PELACAKAN PERSURATAN DI YAYASAN TARAKANITA

## Lina
Fakultas Teknologi Informasi, Universitas Tarumanagara, Jakarta, Indonesia Email Korespondensi : lina@untar.ac.id
Abstract Tarakanita Foundation is a Catholic Education Foundation which is engaged in educational services.  Tarakanita  Foundation  oversees  several  schools  operating  in  various  regions  in Indonesia. Along with the pandemic due to the Covid-19 virus, the Tarakanita Foundation has also complied with the Indonesian government's regulations regarding the enactment of restrictions on community activities. For this reason, Tarakanita Foundation also limits the number of personnel (leaders and staff) who are tasked with carrying out daily operational activities at the office location. As a result, the administrative activities of correspondence at Tarakanita Foundation which had been carried out in the form of manual recording by staff by being physically present at the office became somewhat hampered. Another way that has been  taken  by  the  Tarakanita  Foundation  is  to  use  social  media  such  as  the  Whatsapp application, using e-mail, and other applications to coordinate related to mail administration. However, all existing applications are only able to send or receive letters from one party to another without being able to search or record mail history. In fact, it is not uncommon for a letter to go through many stages of a process that involves more than two parties. Realizing the limitations it faces, the Tarakanita Foundation needs a new website-based media that will be designed to allow unit leaders and related staff to do online mail processing that can be done anytime and anywhere. As a first step, the community service activity team (PKM) will design a wireframe website for tracking letters for the Tarakanita Foundation. The process of creating  a  website  wireframe  will  allow  all  components  on  the  website  such  as  banners, headers,  content,  footers,  links,  forms,  and  others  to  be  arranged  according  to  the  desired layout. This stage is very important to do before the website will be transformed into a neater visual design and the development of a complete website application in the end.

## Keywords: Website, Wireframe, Tracking System

## 1. Pendahuluan
Seiring  dengan  perkembangan  teknologi  yang  sejalan  dengan  perkembangan kebutuhan  informasi,  penggunaan  komputer  sudah  sangat  pesat  bahkan  menjadi kebutuhan pokok bagi perusahaan, organisasi dan individu [1]. Hal ini melibatkan kinerja mereka  yang  diupayakan  melalui  komputer,  semakin  canggih  teknologi  yang  ada  dan adanya aplikasi yang menunjang maka dapat sangat membantu khususnya dalam efisiensi waktu dan tenaga, prosedur kerja yang teratur dan mempercepat proses kinerja.
Banyak  yang  dapat  dilakukan  melalui  perkembangan  teknologi  yang  sudah canggih ini, dengan kata lain melalui komputer dan aplikasi dapat terciptanya suatu hal
Madani: Jurnal Pengabdian Kepada Masyarakat P-ISSN: 2442-5931 / E-ISSN: 2723-5335 https://ejournal.upnvj.ac.id/index.php/madani Page: 30-39
yang  inovatif.  Sebagaimana  dari  yang  pengguna  yang  ada,  penggunaan  komputer  dan aplikasi sudah awam digunakan tepatnya pada perusahaan. Dari perkembangan teknologi yang  berjalan  semakin  pesat,  tentunya  pengguna  juga  berusaha  agar  dapat mengadaptasikan  dan  mengaktulisasikan  diri  beserta  lingkungan  sekitarnya.  Dalam perusahaan, luasnya bagian – bagian departemen akan sangat membantu satu departemen dengan  departemen  lainnya  dalam  pekerjaan,  khususnya  dalam  penyampaian  melalui surat menyurat.
Mitra pada kegiatan pengabdian kepada masyarakat  ini adalah Yayasan  Tarakanita yang  merupakan  Yayasan  Pendidikan  Katolik  yang  salah  satu  bentuk  pelayanan Kongregasi  Suster-Suster  Cintakasih  St.  Carolus  Borromeus,  bercita-cita  menjadi penyelenggara  karya  pelayanan  pendidikan  yang  menekankan  terbentuknya  pribadi manusia yang cerdas, utuh dan berbelarasa. Sekilas mengenai Tarakanita, pada tanggal 29  April  1952,  4  Suster  CB  (Sr.  Ursulia,  Sr.  Chatarinia,  Sr.  Bernardia,  dan  Sr.  Marie Johanna), 3 Awam (Ny. Hardjasoebrata, Tuan Marcus Manguntijoso, Tuan E. Soedarmo), dan  1  Pastor  (Romo  Van  Thiel,  SJ),  sepakat  mendirikan  sebuah  badan  hukum  yang bernama Yayasan Tarakanita. Yayasan Tarakanita secara resmi didirikan pada hari Senin, tanggal 7 Juli 1952 yang disahkan oleh Notaris R.M. Wiranto di Yogyakarta dengan Akte Notaris  nomor  3.  Dan  pada  awalnya,  berkedudukan  di  Yogyakarta  dengan  alamat  Jl. Terban Taman (sekarang: Jl. Cik Di Tiro) nomor 30 hingga sekarang Akte tersebut sudah terdaftar di Pengadilan Negeri Yogyakarta [2].

## Gambar 1. Kantor Yayasan Tarakanita
(sumber : istimewa)
Sejak awal didirikan, Yayasan Tarakanita bernaung dalam terang iman Katolik yang berazaskan  Pancasila,  turut  berpartisipasi/berperan  dalam  pembangunan,  khususnya dalam bidang pendidikan dan pengajaran serta pelayanan sosial  lainnya, mendidik  dan
mencerdaskan  serta  mempersiapkan  tenaga-tenaga  terampil  dalam  segala  bidang  yang kesemuanya itu dijiwai dengan semangat injili. Dalam naungan semangat Santo Carolus Borromeus dan Bunda Elisabeth Gruyters, Yayasan menyelenggarakan Sekolah-sekolah Umum  maupun  Kejuruan  sebagai  bentuk  keterlibatan  nyata  turut  dalam  upaya mencerdaskan generasi  muda bangsa dengan membantu terbentuknya pribadi utuh dan berbelarasa.
Yayasan Tarakanita sekarang bertempat di Jl. Salemba Tengah No. 23 Jakarta Pusat seperti  tertera  pada  Gambar  1.  Yayasan  Tarakanita  saat  ini  mengelola  dan  mencakup hingga  7  Wilayah,  yaitu:  Bengkulu  dengan  4  Sekolah  (TK,  SD,  SMP,  SMA  Santo Carolus), Lahat dengan 4 Sekolah (TK, SD, SMP, SMA Santo Yosef), Tangerang dengan 9 Sekolah (TK, SD, SMP, SMA Tarakanita Gading Serpong dan TK, SD, SMP, SMA Tarakanita  Citra  Raya,  TK  Tarakanita  Tulang  Bawang  Barat  di  Lampung),  Jakarta dengan  18  Sekolah  (5  TK  Tarakanita,  5  SD  Tarakanita,  5  SMP  Tarakanita,  2  SMA Tarakanita dan 1 SMK Tarakanita), Yogyakarta  dengan 8 Sekolah (TK-SD Tarakanita Bumijo, SD Tarakanita Ngembesan, SMP Stella Duce I dan II dan SMA Stella Duce I dan II), Jawa Tengah dengan 9 Sekolah (TK, SD, SMP Tarakanita Solo Baru, TK, SD, SMP, SMA Tarakanita Magelang, SMP Pendowo Ngablak, dan SMK Pius X Magelang), Surabaya dengan 8 Sekolah (TK, SD, SMP, SMA Santo Carolus, SD-SLTP Santo Yosef dan  TK-SD  Kartini).  Dengan  posisinya  sebagai  sentral  bagi  pengelolaan  sekolah  di berbagai  daerah,  tentunya  proses  persuratan  dalam  institusi  ini  cukup  kompleks  dan memerlukan pencatatan yang tertata rapi.
Seiring dengan terjadinya pandemi akibat virus Covid-19, Yayasan Tarakanita yang berlokasi  di  Jakarta  wajib  mematuhi  aturan  pemerintah  Indonesia  tentang  berlakunya pembatasan kegiatan masyarakat. Untuk itu, Yayasan Tarakanita juga membatasi jumlah personil (pimpinan maupun staf) yang bertugas melakukan kegiatan operasional sehari- harinya di lokasi kantor untuk menjamin kesehatan para stafnya. Dampak dari berlakunya pembatasan  kegiatan  ini,  mengakibatkan  kegiatan  administrasi  persuratan  di  Yayasan Tarakanita yang selama ini dilakukan dalam bentuk pencatatan manual oleh staf dengan hadir secara fisik di kantor menjadi agak terhambat. Berbagai cara juga telah ditempuh oleh Yayasan Tarakanita dengan memanfaatkan media sosial seperti aplikasi Whatsapp, menggunakan e-mail ,  dan  aplikasi  lainnya  untuk  berkoordinasi  terkait  administrasi persuratan. Namun demikian, keseluruhan aplikasi yang ada hanya mampu mengirimkan ataupun  menerima  surat  dari  satu  pihak  ke  pihak  lain  tanpa  mampu  melakukan penelusuran  ataupun  pencatatan history surat.  Padahal  tidak  jarang  sebuah  surat  perlu melalui  banyak  tahapan  proses  yang  melibatkan  lebih  dari  dua  pihak.  Menyadari keterbatasan  yang  dihadapinya,  Yayasan  Tarakanita  membutuhkan  sebuah  media  baru berbasis web yang akan dirancang memungkinkan pimpinan unit serta staf terkait untuk melakukan  pemrosesan  surat  secara  daring  yang  dapat  dilakukan  kapanpun  dan dimanapun.
Kegiatan pengabdian kepada masyarakat  (PKM) ini merupakan tahap  awal  dengan melakukan perancangan wireframe website pelacakan surat  untuk  Yayasan Tarakanita. Wireframe website merupakan sebuah framework yang dibuat dalam proses merancang sebuah media digital, yang menghubung isi atau komponen yang ada didalamnya berbasis
website .  Perancangan wireframe  website dapat  berupa  susunan  kotak  dan  atau  persegi yang  menggambarkan  komponen-komponen  tersebut  agar  dapat  mempermudah penyusunan  sebuah  konten  sesuai  dengan  model  informasi  yang  diinginkan user [3]. Proses  pembuatan wireframe  website akan  memungkinkan  semua  komponen  pada website seperti banner , header , konten, footer , link , form , dan lainnya diatur sesuai tata letak yang diinginkan. Tahap ini sangat  penting untuk  dilakukan untuk  menyelaraskan kebutuhan  dan  keinginan  pengguna  sebelum website akan  diwujudkan  menjadi  desain visual yang lebih rapi serta pembangunan aplikasi website yang utuh pada akhirnya.

## 2. Metode
Dalam bidang teknologi  informasi, terdapat  tahapan pengembangan terhadap suatu perangkat  lunak  termasuk  pengembangan website yang  dinamakan  dengan Software Development  Life  Cycle (SDLC)  [7].  SDLC  merupakan  tahapan  proses  yang  terdapat dalam  rekayasa  web  mencakup  perencanaan,  analisis,  perancangan,  pengujian,  serta implementasi  sistem.  Kegiatan  pengabdian  kepada  masyarakat  yang  diusulkan  ini merupakan tahap awal dari keseluruhan proses SDLC. Pada kegiatan pengabdian kepada masyarakat ini akan dilakukan dua tahap utama, yaitu:
1. Perencanaan: dilakukan diskusi terhadap kebutuhan mitra, estimasi waktu, biaya dan sumber daya yang diperlukan
2. Analisis:  dilakukan  diskusi  antara  mitra dengan  tim  pelaksana  untuk  memahami kebutuhan dan keinginan mitra dan solusi atas permasalahan yang dihadapi
3. Perancangan model: dilakukan pembuatan wireframe website secara rinci oleh project manager dan menjelaskan bagaimana urutan modul dikembangkan Rancangan akan dibuat oleh tim pelaksana kegiatan pengabdian kepada masyarakat dan dikomunikasikan dengan pihak Yayasan Tarakanita sebagai end user .

## 3. Hasil Dan Pembahasan
Kegiatan  pengabdian  kepada  masyarakat  pada  Yayasan  Tarakanita  telah  berjalan dengan  lancar,  yaitu  telah  berhasil  menghasilkan wireframe  website pelacakan  surat. Hasil wireframe  website ini  dapat  digunakan  untuk  mengevaluasi  proses  administrasi yang telah berjalan selama ini di Yayasan Tarakanita sekaligus membantu memberikan gambaran tampilan website yang akan dikembangkan.
Tampilan  rancangan wireframe  website pelacakan  surat  Yayasan  Tarakanita  yang dihasilkan adalah sebagai berikut:
Gambar 2. Tampilan wireframe website untuk halaman utama
Gambar 3. Tampilan wireframe website untuk halaman surat masuk/surat keluar
Gambar 4. Tampilan wireframe website untuk halaman kirim surat
Gambar 5. Tampilan wireframe website untuk halaman surat tembusan
Gambar 6. Tampilan wireframe website untuk halaman kotak surat – ketik draft surat
Gambar 7. Tampilan wireframe website untuk halaman kotak surat – daftar draft surat
Gambar 8. Tampilan wireframe website untuk halaman surat outstanding
Gambar 8. Tampilan wireframe website untuk halaman surat undangan
Gambar 9. Tampilan wireframe website untuk halaman monitoring progress surat
Gambar 10. Tampilan wireframe website untuk halaman pencarian surat
Keseluruhan  tampilan wireframe  website akan  dipergunakan  sebagai  dasar  untuk pembuatan user  interface dari website yang  akan  dikembangkan.  Secara  umum  sistem pelacakan surat yang dikembangkan akan meliputi pembuatan halaman utama, halaman pencatatan surat masuk dan keluar, halaman pengiriman surat, halaman pencatatan surat tembusan,  halaman  pembuatan  draf  surat,  halaman  pencatatan  draf  surat,  halaman pencatatan surat outstanding , halaman pencatatan surat undangan, halaman monitoring progress surat, serta halaman pencarian surat. Tampilan wireframe website merupakan hasil  dari  diskusi  bersama  dengan  tim  dari  Yayasan  Tarakanita  yang  siap  untuk dikembangkan ke tahap selanjutnya yaitu pembuatan website utama.

## 4. Kesimpulan
1. Kegiatan  pengabdian  kepada  masyarakat  yaitu  pembuatan wireframe  website pelacakan surat di Yayasan Tarakanita telah terlaksana dengan baik.
2. Luaran  kegiatan  berupa wireframe  website diharapkan  dapat  membantu  pihak Yayasan Tarakanita untuk pengembangan ke tahap selanjutnya yaitu pembuatan aplikasi  lengkap  yang  mencakup  proses  pembuatan  surat,  pengiriman  surat, pelacakan surat, dan pengarsipan surat secara digital.

## 5. Saran
1. Program  selanjutnya  adalah  pengembangan  aplikasi  berbasis website berdasarkan pada rancangan wireframe website yang telah dihasilkan.
2. Ada  kerjasama  secara  terus  menerus  dengan  melibatkan  mahasiswa  magang  untuk melakukan pemeliharaan sistem.

## 6. Ucapan Terima Kasih
Penulis  mengucapkan  terima  kasih  kepada  xxx  atas  dukungan  pendanaan  untuk kegiatan Pengabdian kepada Masyarakat (PKM) ini melalui xxx.

## 7. Daftar Pustaka
1. Ramadhan,  M.  F.  dan  Fajarita,  L.,  2018.  Pembuatan  Aplikasi  Sistem  Informasi Administrasi  Surat  Menyurat  Studi  Kasus:  Kesekretariatan  Badan  Eksekutif Mahasiswa Universitas Budi Luhur, Jurnal IDEALIS , 1(1), pp. 106-112.
2. Yayasan  Tarakanita  [Internet].  Yayasan  Tarakanita  [cited  2022  Jan  25].  Available from: https://tarakanita.sch.id/
3. Segara,  A.,  2019.  Penerapan  Pola  Tata  Letak  ( Layout  Pattern )  pada Wireframing Halaman Situs Web, Jurnal Magenta , 3(1), pp. 452-464.
4. Hartawan,  M.  S.,  2022.  Penerapan User  Centered  Design  (UCD) pada Wireframe Desain User Interface dan User Experience Aplikasi Sinopsis Film, Jurnal Elektro & Informatika , 2(1), pp. 43-47.
5. Zulkarnain, A., 2019. Penerapan Mobile-First Design pada Antarmuka Website Profil Sekolah  menggunakan  Metode  Human-Centred  Design, Jurnal  Ilmiah  Teknologi Informasi Asia , 13(2), pp. 125-136.
6. Rudiana,  R.  dan  Sutisna,  M.  A.,  2021.  Sistem  Pengelolaan  Administrasi  Simpan Pinjam Berbasis Web pada Koperasi Mitra, Jurnal Visualika , 7(2), pp. 70-83.
7. Susanto,  A.  dan  Asmira,  2017.  Perancangan  Website  Sebagai  Media  Promosi  dan Informasi Menggunakan Metode Web Engineering . Jurnal SIMKOM , 2 (3), pp. 9-17.