Jurnal Sistem Informasi dan Sains Teknologi Vol.
6 No.
Februari 2024
ISSN 2684-8260
Perancangan UI/UX Design Website Perpusatakaan SMPI ASA Bekasi Menggunakan Metode Design Thinking Betthree Anggia Burhan1.
Umar Al Faruq2 Program Studi Sistem Informasi Universitas Trilogi e-mail: betthree.
anggia@trilogi.
ABSTRAK
Di zaman digital ini, perkembangan teknologi informasi bergerak pesat dan menawarkan berbagai inovasi yang bertujuan untuk memberikan kemudahan bagi seluruh penggunanya.
Sebagai lembaga pengelola informasi, perpustakaan merupakan salah satu sektor yang harusnya berkembang pesat dalam pemanfaatan teknologi informasi.
SMP Islam Amanah Bangsa merupakan SMP swasta yang telah terakreditasi A dan siswa-siswi dengan latar ekonomi menegah keatas.
Namun kenyataannya dilapangan masih ada fasilitas sekolah yang belum memadai salah satunya adalah perpustakaan.
Untuk penyelesaian permasalahan perpustakaan SMPI ASA Bekasi, maka diperlukan perancangan desain UI/UX yang dapat dijadikan sebagai rujukan dalam pengembangan website perpustakaan SMPI ASA.
Metode yang digunakan dalam penyusunan skripsi ini adalah desain thinking.
Tahapannya adalah empathize, define, ideate, prototype, dan testing.
Hasil dari penelitian ini berupa prototype website dengan desain UI/UX yang telah disesuaikan dengan kebutuhan pengguna.
Penelitian ini mendapatkan nilai kelayakan sebesar 83,5 yang mana hasil pengujian telah memenuhi standar kelayakan untuk digunakan atau Acceptable yang ditentukan oleh Jeff Sauro, artinya perancangan pada penelitian ini sudah sesuai dengan kebutuhan pengguna serta dapat dijadikan rekomendasi untuk para perancang selanjutnya agar dapat mengembangkan sisi UI/UX dengan baik .
Kata Kunci : Desain thinking.
Perancangan UI/UX Design.
Perpustakaan.
Website.
PENDAHULUAN
Di zaman digital ini, perkembangan teknologi informasi bergerak pesat dan menawarkan banyak inovasi yang bertujuan untuk memberikan kemudahan bagi seluruh penggunanya.
Akibatnya, banyak sekali perkembangan teknologi yang menakjubkan.
Hal ini didukung dengan terus berkembangnya perangkat komputasi dan perangkat pendukung generasi digital.
Perpustakaan memegang peranan penting dalam proses belajar mengajar, seperti halnya perpustakaan sekolah SMPI ASA Bekasi yang menjadi bagian penting dalam menunjang kegiatan belajar di sekolah, karena perpustakaan merupakan gudang informasi yang menyediakan berbagai sumber informasi.
Menurut (Adrianto dan Wahyuni, 2.
, sebagai lembaga pengelola informasi, perpustakaan merupakan salah satu sektor yang berkembang dengan pesat dalam pemanfaatan teknologi informasi.
SMP Islam Amanah Bangsa merupakan SMP swasta yang telah terakreditasi A dan siswa-siswi dengan latar ekonomi menegah keatas.
Namun kenyataannya dilapangan masih ada fasilitas sekolah yang belum memadai salah satunya adalah perpustakaan.
Saat ini terdapat lebih dari 900 buku dalam buku referensi perpustakaan SMPI ASA Bekasi.
Namun proses sirkulasi di perpustakaan ini belum dimulai, karena aktivitas di perpustakaan sudah lama tidak aktif dan perpustakaan SMPI ASA terbengkalai.
Hal ini terlihat dari perpustakaan yang jarang dibuka.
Selain itu, dari hasil wawancara awal yang peneliti lakukan diketahui bahwa proses sirkulasi perpustakaan masih bersifat manual, meskipun transaksi yang berlangsung dalam satu hari bisa bertambah hingga lebih dari 13 transaksi.
Akibatnya, pustakawan sering kesulitan menelusuri informasi baik pada saat peminjaman, pengembalian maupun dalam pengecekan denda.
Sehingga kinerja perpustakaan kurang optimal karena membutuhkan waktu yang lama untuk mengambil seluruh informasi dan pelayanan yang dirasakan kurang memuaskan.
Untuk penyelesaian permasalahan perpustakaan SMPI ASA Bekasi, maka diperlukan desain UI/UX yang dapat dijadikan sebagai rujukan dalam pengembangan website di perpustakaan SMPI ASA.
II.
LANDASAN TEORI
1 Design Thinking Design thinking merupakan proses berulang yang mencoba untuk memahami keinginan pengguna, untuk mendorong penciptaan keinginan yang berbeda asumsi, mendefinisikan ulang masalah, dan menciptakan solusi terobosan untuk pembuatan prototype, pengujian produk dan layanan untuk menemukan cara baru untuk melakukan dengan kebutuhan Menurut (Fariyanto et al.
, 2.
Design Thinking merupakan salah satu cara untuk memecahkan masalah melalui berpikir kreatif.
2 Website Design Website design adalah antarmuka yang mengesankan saat membuka situs Web.
Situs tersebut awalnya ditampilkan secara visual kepada pengguna (Widyasari, 2.
Website design adalah istilah desain visual yang berlaku pada media digital, khususnya Website.
Dirancang untuk pengembangan dan desain informasi di internet, menyediakan fungsionalitas konsumen Jurnal Sistem Informasi dan Sains Teknologi Vol.
6 No.
Februari 2024
ISSN 2684-8260
berkualitas tinggi dan kualitas estetika.
3 Perpustakaan Perpustakaan sekolah merupakan tempat yang penting bagi siswa yang ingin menerima informasi, dan untuk budidaya minat siswa dalam berkunjung dan membaca.
Saat ini, perpustakaan bukan hanya sekedar tempat simpan dan cari buku sesuai kebutuhan pembelajaran saja, tetapi telah menjadi gudang informasi yang dapat dikunjungi dan dijadikan tempat mencari Menurut (Endarti, 2.
perpustakaan mempunyai misi pendidikan yang berarti perpustakaan sebagai satu kesatuan media dan alat juga dalam memberikan informasi sudut pandang ilmu pengetahuan.
4 Perancangan UI/UX Design UI adalah tampilan visual pada situs Web, aplikasi maupun platform online yang akan menjadi faktor penentu bagi pengguna untuk menjelajahi situs (Kurniawan & Romzi, 2.
UX adalah pengalaman pengguna saat akses website yang dievaluasi berdasarkan kenyamanan dan kepuasan setelah menggunakan website (Sirait & Hanifati, 2.
UI dan UX merupakan satu kesatuan yang memegang peranan penting sebagai kunci kesuksesan website karena merupakan faktor penentu untuk meningkatkan citra perusahaan.
5 Figma Figma merupakan salah satu tools atau aplikasi yang dapat digunakan pada Windows dan Mac OS untuk membuat prototype aplikasi dan model lainnya.
Aplikasi ini berbasis vektor sehingga sangat cocok untuk membuat user interface pada aplikasi atau website.
Menurut (Jubilee, 2023: .
Figma adalah aplikasi desain grafis untuk membuat prototipe dan mendesain antarmuka pengguna untuk produk digital seperti smartphone atau situs Web.
6 XAMPP
Dikutip dari situs website it.
XAMPP juga dapat didefinisikan sebagai software open source berbasis Web server yang mencakup berbagai program.
Fungsinya adalah sebagai server yang berdiri sendiri, yang terdiri atas program Apache HTTP Server.
MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl.
7 Penelitian Terdahulu Dalam penelitian sebelumnya milik Haque .
membahas mengenai AuPerancangan Prototype UI/UX Aplikasi ELIBRARY Menggunakan Metode Design Thinking (Studi Kasus: Dinas Perpustakaan Kabupaten Laha.
Ay.
Penelitian ini dilakukan menggunakan metode design thinking berdasarkan data dari hasil pengamatan dan wawancara terhadap dinas perpustakaan di kabupaten lahat.
Adapun tujuan dari penelitian ini adalah menghasilkan rekomendasi rancangan prototype UI/UX perpustakaan digital .
-Librar.
dengan menggunakan metode design thinking.
Penelitian yang dilakukan oleh Santoso .
dengan judul AuMembangun Desain UI/UX Untuk Website Perpustakaan Online (Studi Kasus Perpustakaan Di Yogyakart.
Ay.
Penelitian ini berfokus untuk pengembangan desain User Interface dan User Experience website perpustakaan online dengan menggunakan metode design thinking.
Hasil akhir dari penelitian ini berupa website prototype yang kemudian diuji kepada beberapa responden.
Penelitian lainnya oleh Nurkhoerunisa.
Mutohari & Awalaturrohmah .
dengan judul AuPerancangan Desain Tampilan Website Perpustakaan Cinta Baca Cirebon Menggunakan Metode Design ThinkingAy.
penelitian ini memanfaatkan teknologi informasi berbasis digital yang telah ada yaitu dengan membuat desain tampilan perpustakaan menggunakan metode design thinking.
Desain website perpustakaan akan dibuat di salah satu software yaitu Figma dengan desain yang menarik dan tidak monoton sehingga target audience akan tertarik pada desain tampilan website i.
METODE PENELITIAN
1 Kerangka Penelitian Gambar 1 adalah kerangka pada penelitian dan perancangan design UI/UX website Perpustakaan yang dilakukan.
Dimana alur tersebut telah disesuaikan dengan metode yang digunakan yaitu desain thinking.
Kerangka ini dibuat secara rinci dari ditemukannya masalah yang terjadi di lingkungan SMPI ASA sesuai dengan study case, hingga didapat feedback dan saran dari pengguna pada desain website yang dibuat.
Jurnal Sistem Informasi dan Sains Teknologi Vol.
6 No.
Februari 2024
ISSN 2684-8260
Gambar 1 Kerangka Penelitian 2 Instrumen Penelitian Dalam penelitian kualitatif, instrumen penelitian atau pengukurnya adalah peneliti itu sendiri.
Ketika fokus penelitian sudah jelas, instrumen penelitian dapat dikembangkan dengan bantuan observasi, survei dan wawancara dimana dilakukan dengan turun langsung ke lapangan, mengumpulkan informasi, menganalisis hingga menarik kesimpulan (Hardani et al.
, 2020:.
Dalam penelitian ini, peneliti bertindak sebagai sarana utama untuk mengumpulkan data dan informasi melalui alat penelitian yaitu lembar observasi, panduan wawancara dan Kuesioner disiapkan untuk melakukan survei, yang tujuannya adalah 10 responden dari berbagai latar belakang untuk mengutarakan pendapatnya terkait subjek desain dari perpusasa.
Responden akan diarahkan ke untuk buka website perpusasa.
com agar melihat user interface dan merasakan user experience sebelum mereka menyelesaikan survei.
3 Jenis dan Sumber Data Dalam penelitian ini digunakan dua sumber data yaitu data primer dan data sekunder.
4 Teknik Pengumpulan Data Menurut Sidiq dan choiri .
, teknik pengumpulan data merupakan suatu strategi untuk memperoleh domain pengetahuan yang dapat memberikan manfaat dan teori baru dalam penelitian.
Metode pengumpulan data yang digunakan dalam penelitian ini adalah observasi, wawancara, angket dan studi pustaka.
Seperti yang dijelaskan pada Bab 1 tentang metode yang digunakan untuk mengumpulkan semua informasi dan data yang diperlukan untuk desain, setelah menerima studi kasus, kuesioner disebar dan diteliti dengan mengamati beberapa aplikasi serupa dan mengamati beberapa desain yang dilakukan oleh peneliti-peneliti sebelumnya.
Berikut merupakan kegiatan yang diterapkan pada pengumpulan informasi terkait perancangan design UI/UX website perpustakaan SMPI ASA Bekasi :
Observasi .
Wawancara .
Angket .
Studi Pustaka 5 Metode Perancangan Sistem Pada tahap ini dilakukanlah tahapan dari design thinking, yaitu :
Empathize .
Define .
Ideate .
Prototype .
Testing Jurnal Sistem Informasi dan Sains Teknologi Vol.
6 No.
Februari 2024
ISSN 2684-8260
IV.
ANALISIS DAN HASIL PERANCANGAN
1 Analisis SMPI ASA Bekasi Dengan adanya pembagian peran dan tanggung jawab di SMPI ASA, maka diharapkan dapat mendukung adanya penyelesaian pekerjaan sesuai dengan porsinya sesuai dengan target yang diberikan.
Gambar 2 merupakan struktur organisasi di SMPI ASA Bekasi yang didapatkan langsung pada saat observasi ke SMPI ASA Bekasi.
Gambar 2 Struktur Organisasi 3 Analisis Kebutuhan Pengguna Kebutuhan pengguna berguna untuk menentukan sebuah aktor yang dibutuhkan dalam sebuah sistem untuk dapat menjalankan sistem tersebut dengan semestinya.
Dalam perancangan design UI dan UX website perpustakaan di SMPI ASA, terdapat dua pengguna yang akan terlibat untuk menyempurnakan sebuah sistem ini, yaitu :
Anggota perpustakaan, yang akan mengakses dan menggunakan website tersebut untuk melakukan transaksi di perpustakaan dan dapat melihat info tentang perpustakaan SMPI ASA.
Petugas perpustakaan, ialah pengelola semua data yang ada dan pengelola apapun yang akan terjadi pada website Mulai dari data peminjaman buku, pendaftaran anggota, pengembalian buku, denda dan lain-lainnya.
Petugas perpustakaan juga dapat mengubah data anggota dan transaksi peminjaman maupun pegambalian jika sewaktu-waktu website sedang mengalami kendala.
Petugas perpustakaan juga dapat melihat data dari keseluruhan anggota maupun buku yang sedang dipinjam atau yang sudah dikembalikan.
4 Analisis Kebutuhan Fungsional Kebutuhan fungsional mencakup proses yang akan dilakukan oleh sistem, juga berisi tentang informasi apa saja yang harus ada dan dihasilkan sistem.
Berikut merupakan kebutuhan fungsional dari perancangan design UI/UX dari website perpustakaan SMPI ASA :
Menu Dashboard Pada tampilan dashboard atau menu utama, anggota maupun petugas perpustakaan dapat melihat katalog buku yang tersedia di perpustakaan SMPI ASA.
Di halaman utama ini juga terdapat fungsi pencarian buku, mengelola profile dan mengelola Menu Profile Menu profile ini di khususkan untuk anggota perpustakaan, dimana halaman ini mereka dapat melihat daftar keanggotaan dan riwayat peminjaman.
Menu Admin Menu admin di khususkan untuk petugas perpustakaan, dimana pada halaman ini mereka dapat mengelola semua transaksi di perpustakaan mulai dari pendaftaran anggota, peminjaman buku, pengembalian, dan masih banyak lagi.
5 Perancangan Sistem 1 Perancangan Diagram Use Case Jurnal Sistem Informasi dan Sains Teknologi Vol.
6 No.
Februari 2024
ISSN 2684-8260
Diagram use case merupakan pemodelan untuk perilaku sistem informasi yang akan dibuat.
Sebuah use case menggambarkan interaksi antara satu atau lebih aktor.
Secara kasar.
Use Case digunakan untuk mendefinisikan fungsi apa yang dimiliki dan siapa yang mempunyai hak untuk menggunakan fungsi-fungsi ini.
Gambar 3 merupakan use case diagram pada perancangan design UI/UX website perpustakaan.
Gambar 3 Use Case Diagram 2 Perancangan Design Website 1 Empathize Tahap empathize dilakukan untuk mencari informasi menggunakan manusia sebagai alat utamanya.
Empathize diperlukan untuk memudahkan pengguna dalam mengakses website perpustakaan.
Dengan menggunakan observasi dan wawancara yang dilakukan ke SMPI ASA, maka akan dipahami kebutuhan, motivasi, dan kendala pengguna saat melakukan berbagai transaksi di perpustakaan.
Gambar 4 merupakan empathy map yang dihasilkan berdasar pengamatan perilaku tehadap pengguna.
Gambar 4 Empathy Map 2 Define Dengan hasil riset yang telah dilakukan, maka akan diketahui apa yang perlu dibuat, bagaimana cara pembuatannya hingga mengetahui siapa target penggunanya.
Pembuatan user persona juga dilakukan untuk menggambarkan seluruh data yang didapatkan pada kuesioner secara fiksi dan menghasilkan sebuah user story singkat.
User persona juga membantu desainer dalam menentukan ide apa yang akan dituangkan kedalam sistem yang ingin dirancang.
Gambar 5 merupakan user persona dari Perancangan UI .
ser interfac.
dan UX .
website perpustakaan SMPI ASA.
Jurnal Sistem Informasi dan Sains Teknologi Vol.
6 No.
Februari 2024
ISSN 2684-8260
Gambar 5 User Persona 3 Ideate Pada fase ideate dilakukan pendekatan kreatif dari hasil yang dicapai dalam fase empathize dan define.
Tahap ini berfokus pada kemampuan untuk menemukan semua jenis solusi secara out of the box yang dapat menyelesaikan permasalahan yang telah diamati pada langkah sebelumnya.
Pada tahap ini, pengelompokkan brainstroming atau ideate dibagi menjadi 2 .
kelompok, yaitu :
Task Flow .
Information Architecture 4 Prototype Tahap prototype dilakukan setelah menerima ide yang cukup dan memiliki gambaran kasar mengenai pembuatan dan pengoperasian halaman Web.
Representasi visual dari ide-ide yang diperoleh pada tahap sebelumnya diimplementasikan dalam beberapa cara mulai dari :
Wireframe Wireframe merupakan pembentukan low fidelity yang menggunakan warna, gambar, dan animasi.
Wireframe hanya berwarna hitam dan putih dengan garis, persegi, icon dan teks.
Gambar 6 merupakan wireframe dari design UI perpustakaan SMPI ASA.
Gambar 6 Wireframe .
Design System Design system bisa disebut gudang komponen yang mempunyai beberapa standar mulai dari tombol standar dan interaksi yang mudah, pengguna icon, panduan visual untuk komunikasi, seperti tombol call to action hingga font dan Untuk perancangan UI, digunakan aplikasi Figma dengan memanfatkan juga fitur prototype yang sudah disediakan di aplikasi tersebut.
Berikut beberapa fitur rancangan design UI perpustakaan SMPI ASA :
Dashboard Dashboard adalah tampilan awal saat pengguna membuka website perpustakaan SMPI ASA.
Terdapat menu untuk mencari buku, melihat profile dan menu admin untuk petugas perpustakaan.
Gambar 7 Jurnal Sistem Informasi dan Sains Teknologi Vol.
6 No.
Februari 2024
ISSN 2684-8260
merupakan Design Dashboard.
Gambar 7 Design Dashborad .
Login Menu Login adalah gerbang utama untuk dapat masuk ke dalam website.
Untuk login pengguna memasukkan username dan password.
Peminjaman Menu peminjaman ialah menu yang hanya dapat di akses oleh petugas perpustakaan.
Didalam menu ini petugas dapat mengelola semua data transaksi peminjaman.
Petugas juga dapat menginput data, mengahapus data, maupun edit data.
Pengembalian Sama dengan peminjaman, untuk menu pengembalianini hanya petugas perpustakaan yang dapat .
Profile Menu profile disediakan untuk para anggota perpustakaan.
Di dalam menu ini dapat melihat data keanggotaan dan list buku yang telah dibaca.
Prototyping Pada tahap ini, dibuatlah hasil dari desain akhir pada high fidelity sehingga pengguna dapat mengakses website maupun menekan tombol.
Meskipun desain akhir mendekati keinginan pengguna, prototype bukan produk akhir karena hanya berfungsi sebagai bahan percobaan.
Karena prototype perlu diakses secara digital, maka dibuatkan link prototype menjadi barcode seperti pada gambar 8.
Gambar 8.
Prototyping 5 Testing .
Usability System Usability testing pada perancangan design website ini menggunakan sistem Unmoderated Test dimana pengujian dilakukan pada website yang telah menyediakan layanan pengujian Usability Testing yaitu Maze.
Desainer hanya perlu membagikan link dari maze yang telah disusun sesuai dengan keperluan desainer kepada user.
Kemudian user atau responden dipersilahkan untuk mengerjakan case yang terdapat di maze dengan membaca clue pada tiap case.
Setelah menyelesaikan usability testing, maka diperoleh data durasi dari setiap pengguna ketika melakukan testing pada saat mengerjakan setiap tugas yang ada pada link maze.
Tabel 1 merupakan data durasi dari setiap pengguna.
Tabel 1 Data Durasi Jurnal Sistem Informasi dan Sains Teknologi Vol.
6 No.
Februari 2024
ISSN 2684-8260
System Usability Scale Proses pengujian dilanjutkan dengan pengumpulan feedback dari responden setelah menyelesaikan tes pada platform Maze.
Responden dibolehkan untuk memberi penilaian terhadap design website perpustakaan SMPI ASA melalui kuesioner yang telah dibagian secara langsung, dimana isi dari form tersebut berupa pernyataan yang telah disesuaikan dengan ketentuan yang ada pada metode pengujian System Usability Scale (SUS) menurut (Sauro, 2.
Tabel 2 merupakan daftar dari pernyataan yang diberikan kepada responden untuk mengumpulkan nilai SUS.
Tabel 2 Daftar Pertanyaan Berdasarkan konteks dari semua pernyataan yang ada pada Tabel 2.
Jadi, kesepuluh responden telah memberikan penilaian dan argumentasinya masing Ae masing dengan hasil sebagai berikut :
Score = (.
n Oe .
Oe x.
) y 2.
= (.
- .
- .
- .
- .
- .
- .
- .
- .
- .
- .
) x 2.
= .
3 3 1 2 3 3 3 3 .
= 29 x 2.
= 72,5
Penghitungan tersebut merupakan hasil dari penilaian yang diberikan oleh IA (Responden .
dengan hasil 72,5 yang mana menurut Sauro .
statusnya sudah Acceptable, dimana jika dikalkulasikan dari keseluruh responden maka didapatkan hasil sesuai dengan yang ada pada tabel 3.
Tabel 3 Hasil System Usability Scale Dari Tabel 3, kesepuluh responden telah melakukan tahap testing dan juga memberikan penilaian untuk kuesioner yang telah disebarkan dan didapatkan rata Ae rata nilai yaitu 83,5, dimana angka tersebut telah memenuhi standar Jurnal Sistem Informasi dan Sains Teknologi Vol.
6 No.
Februari 2024
ISSN 2684-8260
kelayakan untuk digunakan atau Acceptable berdasar pada Klasifikasi Skor SUS yang ditentukan oleh Jeff Sauro.
Angka 83,5 berada pada nilai A dengan kategori Excellent dan status Acceptable untuk presentil 90-95.
KESIMPULAN DAN SARAN
1 Kesimpulan Berdasarkan pembahasan yang telah diuraikan mengenai perancangan UI/UX design website perpustakaan dengan metode design thinking, maka dapat disimpulkan bahwa :
Proses perancangan telah menghasilkan tampilan antar muka berupa prototype yang siap dikembangkan menjadi website untuk dapat digunakan oleh perpustakaan SMPI ASA.
Pengujian pada penelitian ini dilakukan menggunakan usability testing dan System Usability Scale (SUS) untuk mengukur tingkat kelayakan dari sebuah sistem dengan 10 responden yang telah mengisi kuesioner dengan hasil rata Aerata indikator sebesar 83,5.
Hasil pengujian telah memenuhi standar kelayakan untuk digunakan atau Acceptable berdasarkan pada Klasifikasi Skor SUS yang ditentukan oleh Jeff Sauro, yang mana artinya perancangan pada penelitian ini sudah sesuai dengan kebutuhan dan dapat digunakan oleh user.
2 Saran Adapun saran yang dapat diberikan untuk pengembangan selanjutnya mengenai perancangan UI/UX website Perpustakaan SMPI ASA adalah sebagai berikut :
Proses pengujian dengan menggunakan usability testing dapat dilakukan kembali untuk lebih banyak responden agar bisa mendapatkan feedback serta saran yang lebih banyak lagi.
Proses perancangan ini hanya menghasilkan rujukan berupa desain UI/UX Website, prototype, dan hasil evaluasi desain.
Dengan melanjutkan perancangan ke desain mobile maka dapat menghadirkan sistem yang lebih inovatif dan sesuai dengan kebutuhan dari banyak pengguna.
DAFTAR PUSTAKA