Designing the UI/UX of a Mobile-Based Library Catalog Application for the XYZ Community Using the Design Thinking Method

Keywords: Design Thinking, Figma, Library Catalog, Mobile Application, Prototype, System Usability Scale, UI/UX Design

Abstract

The XYZ Community library maintained a collection of over 800 book titles yet relied entirely on manual catalog management, which substantially impeded members from efficiently discovering and accessing available resources. This study designed a mobile-based library catalog application UI/UX for XYZ Community members by applying the Design Thinking method across five iterative stages: Empathize, Define, Ideate, Prototype, and Test. In the Empathize stage, data were collected through interviews and observations involving 20 community members. The Define stage produced problem statements derived from Point of View and How Might We frameworks. The Ideate stage produced 12 priority features derived from identified user pain points through participatory brainstorming. A high-fidelity prototype comprising six primary screens Splash Screen, Onboarding, Home, Catalog, Book Detail, and About Us was developed using Figma. Usability evaluation using the System Usability Scale (SUS) administered to 30 respondents yielded a mean score of 82,7, classified as Excellent (Grade B). All respondents confirmed that the interface was easy to learn and operate, and the prototype is deemed ready for the implementation stage.

Downloads

Download data is not yet available.

References

A. R. Dinazzah and R. Rahmi, “Mobile Library Application in Indonesia’s Digital Libraries,” Journal of Education Technology, vol. 6, no. 1, pp. 149–155, Mar. 2022, doi: 10.23887/jet.v6i1.43575.

B. P. Singh and Margam Madhusudhan, “Mobile Apps–Based Applications in Libraries and Information Centers: A Systematic Review of the Literature and Future Research Agendas,” International Journal of Librarianship, vol. 8, no. 3, pp. 83–102, Sep. 2023, doi: 10.23974/ijol.2023.vol8.3.294.

H. Ilham, B. Wijayanto, and S. P. Rahayu, “Analysis and Design of User Interface/User Experience with The Design Thinking Method in The Academic Information System of Jenderal Soedirman University,” Jurnal Teknik Informatika (Jutif), vol. 2, no. 1, pp. 17–26, Jan. 2021, doi: 10.20884/1.jutif.2021.2.1.30.

F. Zamakhsyari and A. Fatwanto, “A Systematic Literature Review of Design Thinking Approach for User Interface Design,” JOIV : International Journal on Informatics Visualization, vol. 7, no. 4, p. 2313, Dec. 2023, doi: 10.62527/joiv.7.4.1615.

R. Fitria, “Integrating Heuristic Evaluation and Cognitive Walkthrough in Usability Evaluation of Mobile Application,” Journal of Artificial Intelligence and Engineering Applications (JAIEA), vol. 3, no. 3, pp. 667–670, Jun. 2024, doi: 10.59934/jaiea.v3i3.488.

Tim Brown and Jocelyn Wyatt, “Design Thinking for Social Innovation,” https://ssir.org/articles/entry/design_thinking_for_social_innovation, 2010.

F. C. Wardana and I. G. L. P. E. Prismana, “Perancangan Ulang UI & UX Menggunakan Metode Design Thinking pada Aplikasi Siakadu Mahasiswa Berbasis Mobile,” Journal of Emerging Information System and Business Intelligence (JEISBI), vol. 3, no. 4, pp. 1–11, Jul. 2022, doi: 10.26740/jeisbi.v3i4.47740.

N. Nur Rifa and Darso, “Perancangan Ulang UI/UX Design Facebook Lite App Menggunakan Metode Design Thinking,” Storage: Jurnal Ilmiah Teknik dan Ilmu Komputer, vol. 3, no. 1, pp. 11–17, Feb. 2024, doi: 10.55123/storage.v3i1.3111.

N. Narizki, R. A. Widyanto, and N. A. Prabowo, “Perancangan UI/UX Sistem Penerimaan Mahasiswa Baru Berbasis Perangkat Mobile dengan Metode Design Thinking,” JOSH, vol. 4, no. 4, pp. 1127–1135, 2023. https://doi.org/10.47065/josh.v4i4.3652

M. I. Salam, A. Setiawan, and P. Sukmasetya, “Perancangan UI/UX Pada Sistem Perpustakaan dengan Pendekatan Design Thinking,” JOSH, vol. 5, no. 2, pp. 676–685, 2024. https://doi.org/10.47065/josh.v5i2.4654

Aminudin et al., “Implementasi Metode Design Thinking Pada Perancangan User Interface Aplikasi Rumah Baca Cerdas Library Mobile,” KLIK: Kajian Ilmiah Informatika dan Komputer, 2024. https://djournals.com/klik/article/view/1914

R. E. Putri et al., “UI/UX Design of a Digital Library Using Figma (Case Study: High School),” Jurnal Mandiri IT, vol. 13, no. 2, pp. 256–265, 2024. https://doi.org/10.35335/mandiri.v13i2.360

F. Risyda, Y. Gardenia, and M. Awaluddin, “Perancangan UI/UX Aplikasi Perpustakaan Digital Berbasis Web dengan Pendekatan Metode Design Thinking,” IKRA-ITH Informatika, vol. 9, no. 2, pp. 67–77, 2024. https://doi.org/10.37817/ikraith-informatika.v9i2.4391

R. F. A. Aziza, “Analisis Kebutuhan Pengguna Aplikasi Menggunakan User Persona dan User Journey,” Information System Journal (INFOS), vol. 3, no. 2, pp. 6–10, 2021. https://doi.org/10.24076/infosjournal.2020v3i2.420

N. P. Irrisandi and G. Erlianti, “Perancangan Ulang Tampilan Aplikasi Perpustakaan Digital ISOLOKKAB Berbasis Design Thinking,” ARZUSIN, vol. 4, no. 3, pp. 577–591, 2024. https://doi.org/10.58578/arzusin.v4i3.3081

Y. Febriyanto, P. Sukmasetya, and Maimunah, “Implementasi Design Thinking dalam Perancangan UI/UX Rumah Sampah Digital Banjarejo,” JOSH, vol. 4, no. 3, pp. 936–947, 2023. https://doi.org/10.47065/josh.v4i3.3135

World Wide Web Consortium (W3C), “Web Content Accessibility Guidelines (WCAG) 2.1,” W3C Recommendation, 2018. https://www.w3.org/TR/WCAG21/

J. Brooke, “SUS: A Quick and Dirty Usability Scale,” in Usability Evaluation in Industry, P. W. Jordan et al., Eds. London: Taylor & Francis, 1996, pp. 189–194. https://www.researchgate.net/publication/319394819

A. Bangor, P. T. Kortum, and J. T. Miller, “An Empirical Evaluation of the System Usability Scale,” International Journal of Human-Computer Interaction, vol. 24, no. 6, pp. 574–594, 2008. https://doi.org/10.1080/10447310802205776

T. Ridwan, R. Yulia, and N. Heryana, “Analisis Pengalaman Pengguna dengan Metode SUS dan UEQ pada Aplikasi Kampus Gratis,” Nuansa Informatika, vol. 18, no. 2, 2024. https://journal.fkom.uniku.ac.id/ilkom/article/view/154

M. Yusuf and D. P. Sari, “Perancangan User Interface Aplikasi CIRLIB Berbasis Android pada Perpustakaan Kota Cirebon,” G-Tech: Jurnal Teknologi Terapan, vol. 7, no. 1, pp. 336–345, 2023. https://doi.org/10.33379/gtech.v7i1.1975

M. R. Sulistyono, A. Setiawan, and Nuryanto, “Penerapan Metode Design Thinking untuk Perancangan UI/UX Sistem E-Marketplace Berbasis Website,” JOSH, vol. 4, no. 4, pp. 1364–1376, 2023. https://doi.org/10.47065/josh.v4i4.3534

Chandra et al., “Considering Color: Applying Psychology to Improve the Use of Color in Digital Interfaces,” Open Journal of Social Sciences, 2024. https://www.scirp.org/journal/paperinformation?paperid=137279

I. Rachmawati and R. Setyadi, “Evaluasi Usability Pada Sistem Website Absensi Menggunakan Metode SUS,” JOSH, vol. 4, no. 2, pp. 551–561, 2023. https://doi.org/10.47065/josh.v4i2.2868

E. P. Rachmawati, “Penerapan Metode Design Thinking dalam Perancangan Ulang UI&UX Aplikasi iPusnas,” Jurnal Informatika Polinema, vol. 11, no. 3, 2025. https://jurnal.polinema.ac.id/index.php/jip/article/view/7233

Published
2026-06-24
How to Cite
Emyu, F. B., & Astiti, S. (2026). Designing the UI/UX of a Mobile-Based Library Catalog Application for the XYZ Community Using the Design Thinking Method. JURNAL TEKNOLOGI DAN OPEN SOURCE, 9(1), 346 - 356. https://doi.org/10.36378/jtos.v9i1.5743
Abstract viewed = 8 times
PDF downloaded = 5 times