DESAIN PROTOTYPE ANTARMUKA WEBSITE E-COMMERCE MENGGUNAKAN FIGMA

Brily Nodian; Minda Wiarsih; Afifah Riezky Adinda

Authors

Brily Nodian Politeknik Pertanian Negeri Payakumbuh
Minda Wiarsih Politeknik Pertanian Negeri Payakumbuh
Afifah Riezky Adinda Politeknik Pertanian Negeri Payakumbuh

Keywords:

Figma, User Interface, Prototype, System Design, E-Commerce

Abstract

The interface design stage (User Interface) is an essential foundation before a digital system is implemented, as the quality of design at this stage determines the usability and functional completeness of the system. This study aims to design a prototype of an e-commerce website interface using the local product Keripik Sanjai Payakumbuh as a visual case study, using the Figma application. The development method adopts the Waterfall model, including literature data collection, display requirement analysis, interface design, and result compilation. The results consist of a blueprint and a static mid-fidelity prototype of an e-commerce website integrating essential features such as a digital product catalog, shopping cart, omnichannel integration, and an administrator dashboard. This research is limited to the design stage and does not yet include implementation or real-user testing, so the results serve as a technical blueprint for further research.

References

[1] S. Auliaddina, A. A. Puteri, and I. F. Anshori, “Perbandingan Analisa Usability Desain User Interface Pada,” J. Ilm. “Technologia,” vol. 12, no. 3, pp. 188–192, 2021, doi: https://doi.org/10.31602/tji.v12i3.5183.

[2] M. A. Muhyidin, M. A. Sulhan, and A. Sevtiana, “Perancangan Ui/Ux Aplikasi My Cic Layanan Informasi Akademik Mahasiswa Menggunakan Aplikasi Figma,” J. Digit, vol. 10, no. 2, p. 208, 2020, doi: 10.51920/jd.v10i2.171.

[3] D. Haryuda, M. Asfi, and R. Fahrudin, “Perancangan UI/UX Menggunakan Metode Design Thinking Berbasis Web Pada Laportea Company,” J. Ilm. Teknol. Infomasi Terap., vol. 8, no. 1, pp. 111–117, 2021, doi: 10.33197/jitter.vol8.iss1.2021.730.

[4] A. A. S. W. Amarcia, L. Selvia, O. La O.P., and Y. E. Achyani, “Perancangan UI/UX aplikasi daftar acara siaran (DAS) LPP RRI Purwokerto menggunakan figma,” J. Saintekom, vol. 12, no. 2, pp. 189–199, 2022, [Online]. Available: https://ojs.stmikplk.ac.id/index.php/saintekom/article/view/324?

[5] A. A.-Z. Ibrahim and I. Lestari, “Perancangan UI/UX Pada Website Rumah Tahfidz Akhwat Menggunakan Metode Design Thinking,” Teknika, vol. 12, no. 2, pp. 96–105, 2023, doi: 10.34148/teknika.v12i2.599.

[6] Ratna Nur Fadilah and Dhian Sweetania, “Perancangan Design Prototype Ui/Ux Aplikasi Reservasi Restoran Dengan Menggunakan Metode Design Thinking,” J. Ilm. Tek., vol. 2, no. 2, pp. 132–146, 2023, doi: 10.56127/juit.v2i2.826.

[7] A. Pratama Putra, M. Z. Zikriandika, and Helmina, “DESAIN UI / UX HALAMAN LOGIN WEB MENGGUNAKAN FIGMA DENGAN PENDEKATAN DESAIN,” vol. 4, no. 2, pp. 72–84, 2025.

[8] K. Fahrezi, A. R. Mulana, S. Melinda, N. Nurhaliza, and S. Mulyati, “Penerapan Model Waterfall dalam Pengembangan Sistem Informasi Akademik Berbasis Web sebagai Sistem Pengolahan Nilai Siswa,” J. Teknol. Sist. Inf. dan Apl., vol. 4, no. 2, p. 98, 2021, doi: 10.32493/jtsi.v4i2.10196.

[9] A. Mustajib and I. Kurniawati, “Implementasi Metode Design Thinking Dalam Rancang Bangun UI/UX Pada Website Rumah Sakit Pusdikkes Puskesad Menggunakan Figma,” JoMMiT J. Multi Media dan IT, vol. 7, no. 1, pp. 048–057, 2023, doi: 10.46961/jommit.v7i1.805.

[10] M. N. M. Al-Faruq, S. Nur’aini, and M. H. Aufan, “Perancangan Ui / Ux Semarang Virtual Tourism,” Walisongo J. Inf. Technol., vol. 4, no. 1, pp. 43–52, 2022.

[11] M. F. Santoso, “Implementation Of UI/UX Concepts And Techniques In Web Layout Design With Figma,” J. Teknol. Dan Sist. Inf. Bisnis, vol. 6, no. 2, pp. 279–285, 2024, doi: 10.47233/jteksis.v6i2.1223.

[12] Rully Pramudita, Rita Wahyuni Arifin, Ari Nurul Alfian, Nadya Safitri, and Shilka Dina Anwariya, “Studi Teknik Informatika Stmik Tasikmalaya,” J. Buana Pengabdi., vol. 3, no. 1, pp. 149–154, 2021.

[13] I. P. Sari, F. Ramadhani, A. Satria, D. Apdilah, and M. Basri, “Rancangan UI/UX Aplikasi Analytics pada Toko Online Wao Sneakers Menggunakan Figma Berbasis Mobile,” Fact. J. Ind. Manaj. dan Rekayasa Sist. Ind., vol. 1, no. 3, pp. 93–101, 2023, doi: 10.56211/factory.v1i3.265.

[14] D. F. Surianto et al., “PKM Pelatihan Figma untuk Desain Prototipe Sistem Informasi,” Vokatek J. Pengabdi. Masy., vol. 1, no. 2, pp. 57–63, 2023, doi: 10.61255/vokatekjpm.v1i2.88.

[15] S. D. Pratama, L. Lasimin, and M. N. Dadaprawira, “Pengujian Black Box Testing Pada Aplikasi Edu Digital Berbasis Website Menggunakan Metode Equivalence Dan Boundary Value,” J-SISKO TECH (Jurnal Teknol. Sist. Inf. dan Sist. Komput. TGD), vol. 6, no. 2, p. 560, 2023, doi: 10.53513/jsk.v6i2.8166.