E-Catalog Development and User Interface Design at PT. Madina Mentari Teknologi Using Figma
Pengembangan E-Katalog dan Desain Antarmuka Pengguna di PT. Madina Mentari Teknologi Menggunakan Figma
DOI:
https://doi.org/10.21070/f1rwvn95Keywords:
internship, e-catalog, user interface, figma, user interactionAbstract
General Background: Digital transformation in the modern professional landscape necessitates that universities cultivate innovative, skilled, and technologically adept graduates. Specific Background: PT. Madina Mentari Teknologi, a provider of fintech and payment system solutions, requires a robust digital presence to improve product visibility and client engagement. Knowledge Gap: While the company offers sophisticated financial technology services, it lacked a comprehensive, interactive, and aesthetically intuitive e-catalog to effectively showcase its product portfolio to potential clients. Aims: This internship project aimed to develop a professional e-catalog and an intuitive user interface (UI) for the company's web platform, madinapay.co.id. Results: Utilizing Figma and a prototyping development method, the project successfully delivered a minimalist, flat-design-based e-catalog and a fully optimized website interface that integrates consistent color palettes, strategic typography, and responsive grid layouts to enhance user experience and engagement. Novelty: This study integrates modern UI/UX design principles with practical business requirements by creating a standardized design system that facilitates seamless navigation and improves information accessibility for fintech products. Implications: The developed interface and e-catalog serve as a strategic asset for the company, streamlining the browsing experience for clients, reducing information search time, and reinforcing the brand’s professional digital identity within the competitive technology sector.
Highlights:
-
Prototype development using cloud-based collaborative design tools significantly streamlines the iterative interface refinement process.
-
Minimalist design principles and intuitive navigation structures are pivotal for improving information accessibility for fintech clients.
-
Standardized design systems guarantee visual consistency while optimizing front-end development efficiency for complex web platforms.
Keywords: E-Catalog, User Interface, Figma, Prototyping, User Interaction
References
A. P. Pambajeng, S. Sumartik, dan H. M. Kumala, “Pengaruh Pengalaman Magang, Motivasi Kerja, dan Soft Skill Terhadap Kesiapan Kerja Mahasiswa Dalam Memasuki Dunia Kerja,” Journal of Economic, Bussines and Accounting (COSTING), vol. 7, no. 2, hlm. 2864–2875, Jan. 2024, doi: 10.31539/costing.v7i2.7338.
S. Fauzia, F. Eka, U. Syaripudin, dan Y. Ichsani, “PERANCANGAN PROTOTYPE TAMPILAN ANTARMUKA PENGGUNA APLIKASI WEB KAMARDAGANG.COM DENGAN TEKNIK FLAT DESIGN PADA PT. SELARAS UTAMA INTERNASIONAL,” J. Teknik Inform., vol. 9, no. 2, Jan. 2018, doi: 10.15408/jti.v9i2.5606.
R. N. Fadilah dan D. Sweetania, “PERANCANGAN DESIGN PROTOTYPE UI/UX APLIKASI RESERVASI RESTORAN DENGAN MENGGUNAKAN METODE DESIGN THINKING,” Jurnal Ilmiah Teknik, vol. 2, no. 2, Mei 2023, doi: 10.56127/juit.v2i2.826.
Creating-Flat-Design-Websites.pdf. Diakses: 4 Oktober 2024. [Daring]. Tersedia: https://www.programmer-books.com/wp-content/uploads/2020/06/Creating-Flat-Design-Websites.pdf
M. N. M. Al-Faruq, S. Nur’aini, dan M. H. Aufan, “PERANCANGAN UI/UX SEMARANG VIRTUAL TOURISM DENGAN FIGMA,” Walisongo Journal of Information Technology, vol. 4, no. 1, Agu. 2022.
R. Pramudita, R. W. Arifin, A. N. Alfian, N. Safitri, dan S. D. Anwariya, “PENGGUNAAN APLIKASI FIGMA DALAM MEMBANGUN UI/UX YANG INTERAKTIF PADA PROGRAM STUDI TEKNIK INFORMATIKA STMIK TASIKMALAYA,” JURNAL BUANA PENGABDIAN, vol. 3, no. 1, Jul. 2021, doi: 10.36805/jurnalbuanapengabdian.v3i1.1542.
A. Nfh dan E. S. Rahman, “PERANCANGAN E-KATALOG OBJEK WISATA MAMMINASATA,” Metrik, vol. 18, no. 2, hlm. 6, Mar. 2021, doi: 10.26858/metrik.v18i2.20748.
B. Kurniawan dan M. Romzi, “PERANCANGAN UI/UX APLIKASI MANAJEMEN PENELITIAN DAN PENGABDIAN KEPADA MASYARAKAT MENGGUNAKAN APLIKASI FIGMA,” JSIM: Jurnal Sistem Informasi Mahakarya, vol. 5, no. 1, hlm. 1–7, Jul. 2022.
M. Fadhli dan A. Marion, “Penerapan Metode Prototyping Pada Aplikasi Sentra Pelayanan Kepolisian Terpadu Berbasis Web,” Journal of Applied Computer Science and Technology, vol. 3, no. 1, Jun. 2022, doi: 10.52158/jacost.v3i1.267.
A. Widodo et al., “Workshop Dan Pelatihan Pembuatan E-Katalog Sebagai Media Penjualan Online Dan Cloud Application Untuk UMKM Saat WFH Covid-19,” Charity, vol. 5, no. 1, hlm. 1, Feb. 2022, doi: 10.25124/charity.v5i1.2991.
B. Oktaviani, R. M. Chandra, M. Irsyad, dan P. Pizaini, “Desain Sistem Pemasaran Produk UMKM dengan Konsep UI/UX Menggunakan Metode Design Thinking,” Journal of Information System Research (JOSH), vol. 4, no. 3, Apr. 2023, doi: 10.47065/josh.v4i3.3387.
M. A. Suminto dan P. F. Arifianto, “Perancangan E-Catalog Ardent Signature Sebagai Media Pemasaran Digital Produk Kursi Kantor Premium,” 2024.
D. R. Setiawan dan P. E. Mountaines, “Perancangan Tampilan Antarmuka Situs Web UMKM Tupai Tech Menggunakan Figma,” Jurnal Teknik Komputer, vol. 1, no. 3, Des. 2022.
R. Dewi Indahsari dan E. Setyati, “DESAIN SIMPLE DAN MODERN DALAM PERANCANGAN WEBSITE PENJUALAN,” Mei 2017. Diakses: 4 Oktober 2024. [Daring]. Tersedia: https://jurnal.stmikasia.ac.id/index.php/jitika/article/view/85
I. W. M. P. Tunas, P. Pratiwi, J. Prestiliano, dan M. Bezaleel, “Desain Antar Muka Website Oemah Djari dengan Pendekatan User Centered Design,” J.DES, vol. 10, no. 3, hlm. 475, Jun. 2023, doi: 10.30998/jd.v10i3.14869.
“View of Pengaruh Warna, Tipografi, dan Layout pada Desain Situs.” Diakses: 4 Oktober 2024. [Daring]. Tersedia: https://journal.binus.ac.id/index.php/Humaniora/article/view/2887/2281
V. A. R. Turnip, H. Tolle, dan D. C. A. Nugraha, “Perancangan Implementasi Tampilan Baru Web ‘Sambat’ Kota Malang menggunakan Metode Design Thinking,” Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer, vol. 7, no. 3, Mar. 2023.
Suliswaningsih, A. P. Kuncoro, A. N. Ikhsan, M. T. Jamil, dan S. Sani, “Penerapan Multi-Palette Color untuk Pemberian Saran Pemilihan Warna Tema Desain Visual Vektor,” Infotekmesin, vol. 15, no. 1, Jan. 2024, doi: 10.35970/infotekmesin.v15i1.2081.
M. M. Salam dan R. Lalensang, “Perancangan Ulang Tampilan Pengguna Dari Website Perusahaan Central Spring Bed,” 2024.
K. N. L. Mastra dan R. F. Dharmawan, “TINJAUAN USER INTERFACE DESIGN PADA WEBSITE E-COMMERCE LAKU6,” 2018.
Downloads
Published
Issue
Section
Categories
License
Copyright (c) 2026 Wahyu Karobby, Istian Kriya Almanfaluti
This work is licensed under a Creative Commons Attribution 4.0 International License.
