<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE article PUBLIC "-//NLM//DTD JATS (Z39.96) Journal Publishing DTD v1.2 20190208//EN" "https://jats.nlm.nih.gov/publishing/1.2/JATS-journalpublishing1.dtd">
<article xmlns:xlink="http://www.w3.org/1999/xlink">
  <front>
    <article-meta>
      <title-group>
        <article-title>Lazismu Website UI/UX Development: Increasing Transparency, Accessibility, and Ease of Online Donations</article-title>
        <subtitle>Pengembangan UI/UX Website Lazismu: Meningkatkan Transparansi, Aksesibilitas, dan Kemudahan Donasi Online</subtitle>
      </title-group>
      <contrib-group content-type="author">
        <contrib contrib-type="person">
          <name>
            <surname>Ainurrochman</surname>
            <given-names>Naufal</given-names>
          </name>
          <email>rohman.dijaya@umsida.ac.id</email>
          <xref ref-type="aff" rid="aff-1"/>
        </contrib>
        <contrib contrib-type="person">
          <name>
            <surname>Dijaya</surname>
            <given-names>Rohman</given-names>
          </name>
          <email>rohman.dijaya@umsida.ac.id</email>
          <xref ref-type="aff" rid="aff-2"/>
        </contrib>
      </contrib-group>
      <aff id="aff-1">
        <institution>Program Studi Informatika, Universitas Muhammadiyah Sidoarjo1</institution>
        <country>Indonesia</country>
      </aff>
      <aff id="aff-2">
        <institution>Program Studi Informatika, Universitas Muhammadiyah Sidoarjo1</institution>
        <country>Indonesia</country>
      </aff>
      <history>
        <date date-type="received" iso-8601-date="2026-10-08">
          <day>08</day>
          <month>10</month>
          <year>2026</year>
        </date>
      </history>
    <pub-date pub-type="epub"><day>08</day><month>10</month><year>2026</year></pub-date></article-meta>
  </front>
  
  
<body id="body">
    <sec id="_heading-1">
      <title>Pendahuluan</title>
      <p id="_paragraph-9">Lazismu adalah lembaga zakat resmi yang didirikan oleh Muhammadiyah, salah satu organisasi Islam terbesar di Indonesia. LAZISMU berfungsi sebagai badan yang mengelola zakat, infaq, dan sedekah dari masyarakat untuk disalurkan kepada mereka yang membutuhkan sesuai dengan prinsip-prinsip syariah. Selama program magang di LAZISMU, penulis diberi tugas untuk mengembangkan sistem Infaq dan Shadaqah berbasis web yang terintegrasi, dari fokus utama perusahaan Di era digital ini [1]. Sistem ini dirancang untuk membantu mempermudah peningkatan transparansi dan akuntabilitas pengelolaan dana zakat, Pengelolaan dan penyaluaran secara manual yang dilakukan secara umum cenderung kurang efisien dan rentan terhadap kesalahan, yang pada akhirnya berdampak pada akurasi data dana yang terkumpul dan kelancaran penyalurannya, suatu keharusan untuk membangun kepercayaan pada masyarakat.</p>
      <p id="_paragraph-10">Dalam era digital yang semakin berkembang pesat, teknologi advanced memainkan peran yang sangat penting dalam mendukung kegiatan lembaga sosial. LAZISMU sebagai salah satunya yang merasakan dampak dari perkembangan teknologi, khususnya dalam hal sistem informasi. Penggunaan teknologi informasi, terutama sistem berbasis web, mampu memberikan kemudahan dan efisiensi dalam mengelola berbagai aspek sosial, termasuk proses donasi, inventarisasi,transparansi, dan manajemen penyaluran donasi. Sistem informasi berbasis web menjadi solusi yang semakin relevan bagi lembaga sosial di bidang ini untuk meningkatkan efektifitas [2].</p>
      <p id="_paragraph-11">Perkembangan sistem informasi donas berbasis web memberikan berbagai keunggulan, seperti aksesibilitas yang tinggi, integrasi data secara real-time, serta peningkatan efisiensi operasional. Penguna dapat dengan mudah mengakses informasi donasi dan melakukan donasi secara mandiri melalui platform yang tersedia kapan saja dan di mana saja [3]. Hal ini tidak hanya meningkatkan kepuasan penguna, tetapi juga memberikan kepercayaan bagi penguna dalam berdonasi serta meminimalkan kemungkinan ketidak tepatan penyaluran yang umum terjadi dalam proses manual [4].</p>
      <p id="_paragraph-12">Dalam penelitian ini, penulis mengembangkan sistem donasi berbasis web yang memudah penguna Beberapa penelitian menunjukkan bahwa sistem informasi berbasis web dapat menjadi solusi dalam menyederhanakan proses pengumpulan donasi dan meningkatkan kepercayaan publik. Dengan menggunakan teknologi yang tepat[5].</p>
      <p id="_paragraph-13">Sistem yang dikembangkan ini diharapkan dapat mempercepat proses pengumpulan dana, mengurangi kesalahan pencatatan, dan memberikan laporan yang transparan. Penelitian ini bertujuan untuk mengembangkan sistem informasi donasi berbasis web yang terintegrasi di Lazismu [6].</p>
    </sec>
    <sec id="sec-2">
      <title>Metode</title>
      <p id="_paragraph-14">Metode penelitian ini terdiri dari tahapan-tahapan sebagai berikut:</p>
      <list list-type="order" id="list-3d6fc4f3bc36b4cdbc1d7d6bfd12020a">
        <list-item>
          <p><bold id="_bold-16">Perancangan </bold><bold id="_bold-17">Sistem</bold>: Mengidentifikasi kebutuhan Lazismu dalam hal pengumpulan dan pelaporan donasi, serta menentukan fitur yang dibutuhkan, seperti integrasi pembayaran, laporan real-time, dan dashboard visualisasi data.</p>
        </list-item>
        <list-item>
          <p>Berdasarkan kebutuhan diatas, sistem dirancang menggunakan beberapa alat bantu visual, yaitu:</p>
        </list-item>
      </list>
      <list list-type="order" id="list-240feac5a34676740762fbbca60649b6">
        <list-item>
          <p>Use Case Diagram: Diagram ini menggambarkan interaksi antara pengguna dan sistem, memperjelas peran masing-masing pengguna, seperti admin dan pengguna lain, dalam menggunakan berbagai fitur sistem [7].</p>
        </list-item>
        <list-item>
          <p>Flowchart: Flowchart digunakan untuk mengilustrasikan alur utama dalam sistem, seperti proses manajemen stok, pencatatan transaksi, dan pembuatan laporan. Diagram ini membantu memperjelas proses yang terjadi di dalam sistem dan memudahkan pengembang dalam mengimplementasikan alur kerja yang sesuai [8].</p>
        </list-item>
      </list>
      <sec id="sec-2_1">
        <title>Usercase</title>
        <p id="_paragraph-15">Usercase Use case menggambarkan skenario interaksi antara pengguna dan sistem, memastikan setiap fitur memenuhi persyaratan fungsional. Pada use case ini, pengguna utama sistem meliputi penguna yang melakukan Login dan transaksi.</p>
        <p id="_paragraph-16">Diagram use case menunjukkan alur interaksi tipikal dalam sistem dan menggambarkan bagaimana pengguna dapat melakukan berbagai tindakan, seperti melakukan Login, memili menu, dan melakukan Transaksi [9].</p>
        <fig id="fig1">
          <label>Figure 1</label>
          <caption>
            <p id="_paragraph-17"/>
          </caption>
          <graphic id="_graphic-1" mimetype="image" mime-subtype="jpeg" xlink:href="image1.jpeg"/>
        </fig>
        <p id="_paragraph-18"><bold id="_bold-18">Gambar</bold><bold id="_bold-19">2.</bold>Usecase</p>
        <p id="_paragraph-19">Flowchart menggambarkan alur proses yang terjadi dalam sistem manajemen penjualan. Alur ini dimulai dari proses login penguna, yang kemudian memili menu, hingga melakukan transaksi. Setiap tahapan yang digambarkan dalam flowchart ini bertujuan untuk memastikan keakuratan proses operasional, yang pada akhirnya akan berdampak pada kecepatan dan keandalan manajemen penyaluran di lembaga [10].</p>
        <fig id="fig2">
          <label>Figure 2</label>
          <caption>
            <p id="_paragraph-20"/>
          </caption>
          <graphic id="_graphic-2" mimetype="image" mime-subtype="jpeg" xlink:href="image2.jpeg"/>
        </fig>
        <p id="_paragraph-21"><bold id="_bold-20">Gambar</bold><bold id="_bold-21">3.</bold>Flowchat sistem informasi donasi LAZISMU</p>
        <list list-type="order" id="list-83e6308690e04445db1e66f39810b308">
          <list-item>
            <p><bold id="_bold-22">Pengembangan Sistem</bold>: Sistem ini dikembangkan menggunakan metode <italic id="_italic-24">Agile Development </italic>dengan menerapkan bahasa pemrograman JavaScript dan framework React untuk tampilan antarmuka, serta Node.js untuk sisi server. Database yang digunakan adalah MongoDB untuk pengelolaan data donasi dan pengguna [11].</p>
          </list-item>
          <list-item>
            <p><bold id="_bold-23">Pengujian</bold><bold id="_bold-24">Sistem</bold>: Pengujian dilakukan dengan metode <italic id="_italic-25">Black</italic><italic id="_italic-26">Box</italic><italic id="_italic-27">Testing</italic>untuk memastikan bahwa setiap fungsi berjalan sesuai spesifikasi. Uji coba dilakukan pada modul-modul pembayaran, pencatatan donasi, dan pembuatan laporan [12].</p>
          </list-item>
          <list-item>
            <p><bold id="_bold-25">Implementasi dan Evaluasi</bold>: Sistem diuji coba pada Lazismu dan dievaluasi dalam hal peningkatan efisiensi proses donasi dan tingkat kepuasan pengguna. Pengukuran dilakukan melalui analisis kualitatif dan kuantitatif terhadap waktu pengelolaan data dan kesalahan dalam pencatatan donasi.</p>
          </list-item>
        </list>
      </sec>
    </sec>
    <sec id="sec-3">
      <title>Hasil dan Pembahasan</title>
      <p id="heading-0560127dc2c3409cd1ef3995f5098602">1. Hasil Pengembangan Site Lazismu Pengembangan site Lazismu telah menghasilkan sebuah stage advanced yang berfungsi sebagai sarana donasi online dan pusat informasi kegiatan sosial. Fitur utama yang berhasil diimplementasikan antara lain:</p>
      <p id="paragraph-b02a260aed8852f769219aa553374fbc">
        <bold id="bold-7c352b16492ea08dceac1f3fceab9fe6">Halaman Donasi Online:</bold>
      </p>
      <p id="_paragraph-22">Fitur ini memungkinkan pengguna melakukan donasi secara langsung melalui site dengan metode pembayaran yang mudah dijangkau. Informasi donasi, seperti pilihan program, jumlah donasi, dan opsi pembayaran, ditampilkan secara jelas sehingga memudahkan pengguna dalam proses berdonasi.</p>
      <p id="paragraph-dc94117ac5e73266117abe1c0885ab0a">
        <bold id="bold-067bbcabb7924576dfb02d9ece282272">Transparansi Laporan Keuangan:</bold>
      </p>
      <p id="_paragraph-23">Site memuat laporan penggunaan dana yang dapat diakses oleh publik. Laporan ini mencakup informasi dana yang diterima serta penyalurannya dalam berbagai program Lazismu, yang diupdate secara berkala. Fitur ini bertujuan untuk membangun kepercayaan dengan menyediakan informasi yang transparan kepada donatur [13].</p>
      <p id="_paragraph-25">Tersedia halaman khusus yang menampilkan deskripsi program, target penerima manfaat, serta capaian kegiatan Lazismu. Halaman ini memberikan wawasan kepada masyarakat mengenai dampak yang telah dihasilkan oleh program yang didukung donatur.</p>
      <p id="paragraph-74f36ccf706bf1dc7519c78f676423d7">
        <bold id="bold-5755361c32ae8f78fd4ae87fb10b7af4">Informasi Program dan Kegiatan:</bold>
      </p>
      <p id="paragraph-3999df702cea0ea7f2f1d5338378723a">2. Pengalaman Pengguna dan Aksesibilitas Berdasarkan uji coba yang melibatkan calon pengguna (donatur dan staf Lazismu), site memperoleh penilaian positif terkait kemudahan navigasi, kejelasan informasi, dan desain antarmuka yang menarik. Fitur-fitur inti, seperti donasi dan laporan transparansi, dirancang dengan tata letak yang sederhana dan intuitif sehingga pengguna merasa nyaman mengaksesnya. Pengguna juga mengapresiasi adanya beberapa pilihan metode donasi yang memudahkan transaksi.</p>
      <p id="paragraph-b84c24865cd5776481d011b4f4a1305b">3. Peningkatan Transparansi dan Kepercayaan Donatur Keberadaan laporan keuangan yang dapat diakses publik terbukti meningkatkan kepercayaan donatur. Pengguna yang telah mencoba site merasa lebih yakin dan terdorong untuk berdonasi karena mereka dapat melihat secara langsung bagaimana dana dikelola dan digunakan. Site ini tidak hanya menjadi sarana donasi, tetapi juga berperan sebagai jembatan komunikasi yang transparan antara Lazismu dan masyarakat.</p>
      <p id="paragraph-e348357b1d2d5b030cdd3ad50733f0d4">4. Kendala dan Solusi Salah satu kendala yang dihadapi dalam pengembangan adalah kebutuhan untuk menjaga keamanan information pengguna, terutama information donasi. Untuk mengatasi ini, diterapkan protokol keamanan, termasuk enkripsi information dan pengaturan autentikasi pengguna. Selain itu, perbaikan minor dilakukan berdasarkan hasil criticism dari uji coba, seperti memperbaiki kecepatan akses dan optimalisasi tampilan untuk perangkat portable.</p>
      <p id="paragraph-91eb460facd5d115138aaf9256377256">5. Implikasi Pengembangan Site bagi Lembaga Sosial Pengembangan site Lazismu ini menjadi show yang relevan bagi lembaga sosial lain yang ingin meningkatkan transparansi dan memfasilitasi donasi online. Integrasi teknologi computerized membantu lembaga sosial memperluas jangkauan layanan dan mengadaptasi perubahan perilaku masyarakat yang lebih menyukai transaksi online. Dengan menyediakan akses yang mudah dan informasi yang transparan, site dapat meningkatkan keterlibatan masyarakat dan memperkuat akuntabilitas lembaga<bold id="_bold-26">.</bold></p>
      <p id="_paragraph-26">User interface :</p>
      <p id="_paragraph-27">Pengembangan sistem ini memanfaatkan prinsip antarmuka yang user-friendly dan navigasi yang jelas untuk memudahkan pengguna dalam mengoperasikan sistem[14]. Dengan desain yang responsif, aplikasi ini dapat digunakan di berbagai perangkat, meningkatkan fleksibilitas penggunaan.</p>
      <p id="paragraph-2ff4aacd931976360db1169ae3a95a7f">1. Login</p>
      <fig id="fig3">
        <label>Figure 3</label>
        <caption>
          <p id="_paragraph-28"/>
        </caption>
        <graphic id="_graphic-3" mimetype="image" mime-subtype="jpeg" xlink:href="image3.jpeg"/>
      </fig>
      <p id="_paragraph-29"><bold id="_bold-27">Gambar</bold><bold id="_bold-28">1.</bold>Halaman login</p>
      <p id="_paragraph-30"><bold id="_bold-29">Gambar 1. </bold>Akan menampilkan halaman login untuk user. User Interface pada sistem dibuat dengan menggunakan html agar tampilan sistem bisa lebih interaktif dan user friendly. Tampilan ini terdapat 2 input untuk memasukkan email dan password. Jika email dan password terdaftar makaakan langsung diarahkan ke halaman Homepage. Jika email dan password tidak terdaftar akan menampilkan eror [15].</p>
      <p id="paragraph-f473a1b6e766a32c953071ccafee281b">2. Homepage</p>
      <fig id="fig4">
        <label>Figure 4</label>
        <caption>
          <p id="_paragraph-31"/>
        </caption>
        <graphic id="_graphic-4" mimetype="image" mime-subtype="jpeg" xlink:href="image4.jpeg"/>
      </fig>
      <p id="_paragraph-32"><bold id="_bold-30">Gambar</bold><bold id="_bold-31">2.</bold>Halaman Homepage</p>
      <p id="paragraph-7726bb7076b2a8fc171da162e5804274">3. Tentang kami</p>
      <p id="_paragraph-33"><bold id="_bold-32">Gambar</bold><bold id="_bold-33">2.</bold>Halaman homepage website Lazismu menampilkan informasi utama secara ringkas dan menarik. Di bagian atas, terdapat banner besar dengan ajakan untuk berdonasi dan pilihan program unggulan, seperti bantuan kesehatan, pendidikan, dan kemanusiaan..</p>
      <fig id="fig5">
        <label>Figure 5</label>
        <caption>
          <p id="_paragraph-34"/>
        </caption>
        <graphic id="_graphic-5" mimetype="image" mime-subtype="jpeg" xlink:href="image5.jpeg"/>
      </fig>
      <p id="_paragraph-35"><bold id="_bold-34">Gambar</bold><bold id="_bold-35">3.</bold>Halaman tentang kami</p>
      <p id="_paragraph-36"><bold id="_bold-36">Gambar 3. </bold>alaman ini menjelaskan komitmen Lazismu dalam membantu masyarakat melalui program-program sosial, kesehatan, pendidikan, dan pemberdayaan ekonomi. Selain itu, ditampilkan juga nilai-nilai dasar organisasi, pencapaian, serta pengenalan singkat tim yang bekerja untuk mengelola dana donasi dengan transparan dan profesional.</p>
      <p id="paragraph-cdf6ee988d3e553ae5092816b087f965">4. Donasi</p>
      <fig id="fig6">
        <label>Figure 6</label>
        <caption>
          <p id="_paragraph-37"/>
        </caption>
        <graphic id="_graphic-6" mimetype="image" mime-subtype="jpeg" xlink:href="image6.jpeg"/>
      </fig>
      <p id="_paragraph-38"><bold id="_bold-37">Gambar</bold><bold id="_bold-38">4.</bold>Halaman Donasi</p>
      <p id="_paragraph-39"><bold id="_bold-39">Gambar 4. </bold>Tampilan halaman Donasi ini menyajikan Halaman donasi Halaman donasi Lazismu dibuat sederhana agar mudah digunakan. Di sini, pengguna bisa memilih program yang ingin didukung, melihat tujuan dan dampaknya, serta memilih jumlah donasi dan metode pembayaran (transfer bank, e-wallet, atau kartu kredit).</p>
    </sec>
    <sec id="sec-4">
      <title>Simpulan </title>
      <p id="_paragraph-40">Penelitian ini berhasil mengembangkan sistem informasi donasi berbasis web yang mampu meningkatkan akurasi, kecepatan, dan transparansi dalam proses penerimaan dan pelaporan donasi di Lazismu. Lembaga zakat seperti Lazismu memiliki tantangan dalam memastikan efisiensi dan transparansi pengelolaan donasi. Sistem yang berhasil dikembangkan ini mampu mengintegrasikan berbagai metode pembayaran digital, memungkinkan otomatisasi proses pencatatan, dan menyediakan laporan berbasis data visualisasi yang mudah dipahami. Berdasarkan hasil uji coba, sistem menunjukkan peningkatan efisiensi hingga 30% dalam waktu pengelolaan donasi. Website ini diharapkan dapat menjadi solusi yang efektif dalam meningkatkan kinerja lembaga zakat, khususnya dalam pengelolaan dana masyarakat secara transparan dan efisien.</p>
      <p id="paragraph-3effaf36fb3a8005d7f892c019b67500">
        <bold id="bold-6284097048004c29d65a93c58c820c0c">Ucapan Terima Kasih</bold>
      </p>
      <p id="_paragraph-41">Terima Dengan penuh rasa syukur, kami mengucapkan terima kasih kepada Tuhan Yang Maha Esa atas segala rahmat dan karunia-Nya, sehingga laporan magang ini dapat diselesaikan dengan baik. Kami juga menyampaikan penghargaan yang sebesar-besarnya kepada mas Aditia Yudono, S.E , pembimbing magang di LAZISMU, yang telah memberikan bimbingan, arahan, serta kesempatan untuk mengembangkan keterampilan dan pengetahuan kami selama menjalani program magang. Pengalaman dan pengetahuan yang diberikan selama periode ini sangat berharga bagi kami. Terima kasih juga kepada semua pihak yang telah mendukung, baik secara langsung maupun tidak langsung,</p>
    </sec>
  </body><back/></article>
