DESIGN AND DEVELOPMENT OF AN UMKM E-COMMERCE MANAGEMENT SYSTEM INTERFACE USING A RESPONSIVE DESIGN APPROACH
Keywords:
E-Commerce, UMKM, Responsive Design, Tailwind CSS, User Interface, PrototypingAbstract
The rapid growth of the digital economy requires Micro, Small, and Medium Enterprises (UMKM) to adopt e-commerce platforms. However, high mobility and limited technical literacy often turn digital store management via mobile devices into a challenge, primarily because most existing management system interfaces are heavy, complex, and unresponsive. This study aims to design a lightweight, modern, and fully adaptive e-commerce management system interface specifically tailored to address the mobility needs of UMKM. The software development method used is Prototyping, which includes observation and requirements analysis, visual layout design (wireframing and mockup), interface implementation, and cross-device responsiveness testing. The system was built using a mobile-first approach through HTML5 semantic structures and the Tailwind CSS utility-first framework. The results show that utilizing Tailwind CSS is effective in designing essential management modules—including the main dashboard, product catalog management, order tracking, and customer records—that transition seamlessly across mobile, tablet, and desktop devices. The use of a dynamic breakpoint system not only ensures that the layout remains proportional without the need for manual screen zooming but also maintains design theme consistency to minimize the user's cognitive load. Furthermore, the utility-first architecture significantly reduces the website's file size, allowing the interface to load rapidly even on unstable cellular network conditions. The implementation of this responsive design is expected to optimize the managerial efficiency of UMKM actors, reduce potential administrative errors, and accelerate daily business operational workflows.
References
[1] A. A. Alfin, L. Kurniasari, and I. Yanuartanti, “INFORMASI (Jurnal Informatika dan Sistem Informasi) Volume 15 No.1 / Mei / 2023,” Inf. (Jurnal Inform. dan Sist. Informasi), vol. 15, no. 1, pp. 32–45, 2023.
[2] A. N. Albalkhi and R. Komalasari, “Sistem Informasi Penjualan (E-Commerce) UMKM DANISA Collection,” SisInfo J. Sist. Inf. dan Inform., vol. 6, no. 1, pp. 34–43, 2024, doi: 10.37278/sisinfo.v6i1.789.
[3] I. Maliki and A. Nudin, “SISTEM INFORMASI E-COMMERCE untuk UMKM SEPEDA MOTOR BERBASIS WEB,” INFOTECH J., vol. 9, no. 2, pp. 406–417, 2023, doi: 10.31949/infotech.v9i2.6355.
[4] M. D. Firmansyah and H. Herman, “Perancangan Web E- Commerce Berbasis Website pada Toko Ida Shoes,” J. Inf. Syst. Technol., vol. 4, no. 1, pp. 361–372, 2023, doi: 10.37253/joint.v4i1.6330.
[5] A. I. Musyaffa, Mulki Indana Zulfa, and Muhammad Syaiful Alim, “Rancang Bangun Purecompute Platform E-Commerce Untuk Belanja Laptop Berbasis Website,” J. SINTA Sist. Inf. dan Teknol. Komputasi, vol. 1, no. 1, pp. 21–29, 2024, doi: 10.61124/sinta.v1i1.9.
[6] S. A. Widiana, S. Sintaro, R. Arundaa, E. Alfonsius, and D. Lapihu, “Aplikasi Penjualan Baju Berbasis Web (E-Commerce) dengan Formulasi Penyusunan Kode,” J. Inf. Technol. Softw. Eng. Comput. Sci., vol. 1, no. 1, pp. 35–43, 2022, doi: 10.58602/itsecs.v1i1.11.
[7] M. Febima, L. Jamilah, and J. Juliana, “Rancang Bangun Sistem Informasi E-Commerce Berbasis Web Pada UMKM Raden Madura Distro,” J. Surya Inform., vol. 15, no. 2, pp. 83–90, 2025, doi: 10.48144/suryainformatika.v15i2.2159.
[8] E. F. Febri, B. Imran, and R. Muslim, “Sistem Informasi E-Commerce Penjualan Kerajinan Rotan Berbasis Website Pada Desa Loang Maka Kecamatan Janapria,” J. Comput. Technol., vol. 1, no. 1, pp. 32–40, 2023, doi: 10.69916/comtechno.v1i1.83.
[9] X. Astria, Firman., Wowor, Hans F., & Najoan, “Sistem Informasi Penjualan Online Berbasis Web,” J. Tek. Elektro dan Komput., vol. 5, no. 2, pp. 29–36, 2016.
[10] J. M. Butarbutar, D. Darmansah, and R. N. S. Amriza, “Perancangan Sistem Informasi E-Catalogue Berbasis Website Menggunakan Metode Waterfall,” J. Sist. Komput. dan Inform., vol. 3, no. 4, p. 438, 2022, doi: 10.30865/json.v3i4.4165.
[11] P. G. S. C. Nugraha, I. P. Y. Indrawan, and I. K. A. Asmarajaya, “Rancang Bangun Sistem Informasi E-Commerce Berbasis Website (Studi Kasus Toko Komputer Di Denpasar),” Inf. Syst. Emerg. Technol. J., vol. 3, no. 1, pp. 53–61, 2022.
[12] H. Yakub, B. Daniawan, A. Wijaya, and L. Damayanti, “Sistem Informasi E-Commerce Berbasis Website Dengan Metode Pengujian User Acceptance Testing,” JSITIK J. Sist. Inf. dan Teknol. Inf. Komput., vol. 2, no. 2, pp. 113–127, 2024, doi: 10.53624/jsitik.v2i2.362.
[13] T. Rizal, Misriati, “Perancanga Sistem Informasi Penjualan Pakaian Berbasis Web,” vol. 07, no. 3, pp. 9–15, 2018.
[14] M. H. Hibatullah, Tukino, and A. L. Hananto, “Perancangan Website E-Commerce Menggunakan Metode Waterfall Pada Penjualan Alat Komputer,” J. SINTA Sist. Inf. dan Teknol. Komputasi, vol. 2, no. 3, pp. 116–124, 2025, doi: 10.61124/sinta.v2i3.61.
[15] Indra Oktavian and Edy Susena, “Pengembangan Sistem E-Commerce Berbasis Web untuk Meningkatkan Daya Saing UMKM di Pasar Digital,” Switch J. Sains dan Teknol. Inf., vol. 3, no. 4, pp. 53–61, 2025, doi: 10.62951/switch.v3i4.516.
