PERANCANGAN KONSEP DAN LAYOUT APLIKASI BERBASIS WEBSITE E-CANTEEN UPN VETERAN JAWA TIMUR
DOI:
https://doi.org/10.35886/nawalavisual.v5i2.593Keywords:
Progressive Web Application, Canteen, UI/UX DesignAbstract
The canteen is a place that we often encounter in various locations, one of which is in educational institutions such as campuses or universities. One of them is the East Java UPN Veterans canteen called "Warung NKRI". According to research results, this canteen has several problems related to the efficiency of the buying and selling transaction process. Existing problems have their own impact on the smooth teaching and learning process. Therefore the authors designed an application based on the e-canteen website to overcome the problems that exist in the UPN Veteran East Java canteen. The design chosen by the author was obtained from research results and adapted to current developments, namely the era of the industrial revolution 4.0. Where everything related to life undergoes a digitalization process. The type of application used in this design was chosen based on the results of the author's research, where the research results show that website-based applications are in accordance with the target audience of this design. In this design, we discuss how the author designed the concept and layout for the UPN Veterans East Java e-canteen application.
References
[1] “Arti kata kantin - Kamus Besar Bahasa Indonesia (KBBI) Online.” https://kbbi.web.id/kantin (accessed Oct. 06, 2022).
[2] J. Hairunisa and A. Hade, “Pengertian Administrasi Layanan Khusus, Jenis-jenis Layanan Khusus dan Pengelolaannya dan Peran Guru dalam Administrasi Layanan Khusus,” 2020.
[3] H. H. Nawawi, “Penggunaan E-wallet di Kalangan Mahasiswa,” Jurnal Emik, vol. 3, no. 2, pp. 189–206, 2020, Accessed: Oct. 08, 2022. [Online]. Available: http://ejournals.umma.ac.id/index.php/emik/article/view/697/615
[4] D. M. Rangkuty, “Apakah Penggunaan E-wallet Masa Pandemi Covid-19 Semakin Meningkat di Indonesia?,” Prosiding Konferensi Nasional UNUI, vol. 1, no. 1, pp. 251–261, 2021, Accessed: Sep. 24, 2022. [Online]. Available: http://journal.unusia.ac.id/index.php/Conferenceunusia/article/view/205/155
[5] P. F. Arifianto, “Pendidikan Desain Komunikasi Visual dalam Era Society 5.0,” DeKaVe, vol. 15, no. 1, pp. 37–45, May 2022, Accessed: Mar. 29, 2023. [Online]. Available: https://journal.isi.ac.id/index.php/dkv/article/view/6167
[6] A. C. Nugroho, G. R. Putra, and D. Fitriati, “Implementasi e-Kantin di Fakultas Teknik Universitas Pancasila,” SEMNATI, vol. 1, no. 1, pp. 301–306, 2019, Accessed: Oct. 08, 2022. [Online]. Available: http://prosiding.uika-bogor.ac.id/index.php/semnati/article/view/310/189
[7] R. Rotikan, J. G. Melaira, R. R. Rarumangkay, and O. Lengkong, “Penerapan PWA Untuk Aplikasi E-Voting Pemilihan Pengurus BEM dan Senat di Universitas Klabat,” CogITo Smart Journal, vol. 6, no. 2, pp. 190–203, Dec. 2020, Accessed: Sep. 13, 2022. [Online]. Available: http://202.62.11.57/index.php/cogito/article/view/272
[8] Y. Yonata, E. M. Sipayung, and N. Theresa, “Analisis User Interface Sistem Informasi Akademik Berbasis Mobile pada Aspek Usability (Studi Kasus: Aplikasi XYZ),” Jurnal Telematika, vol. 15, no. 1, pp. 55–62, Dec. 2020, Accessed: Oct. 09, 2022. [Online]. Available: https://journal.ithb.ac.id/telematika/article/view/355
[9] Ovan and A. Saputra, CAMI: Aplikasi Uji Validitas dan Reliabilitas Instrumen Penelitian Berbasis Website, 1st ed., vol. 1. Takalar: Yayasan Ahmar Cendekia Indonesia, 2020. Accessed: Oct. 18, 2022. [Online]. Available: https://www.google.co.id/books/edition/CAMI_Aplikasi_Uji_Validitas_dan_Reliabil/mZgMEAAAQBAJ?hl=id&gbpv=1&dq=aplikasi+berbasis+web+adalah&pg=PA5&printsec=frontcover
[10] T. Steiner, “What is in a Web View? An Analysis of Progressive Web App Features When the Means of Web Access is not a Web Browser,” Google Germany GmbH, 2018, doi: 10.1145/3184558.3188742.
[11] A. Tripathy, P. Mishra, C. Monisha, S. S. Nanda, and K. Gupta, Demystifying UI/UX - Google Books, 1st ed., vol. 1. Presear Software, 2020. Accessed: Oct. 19, 2022. [Online]. Available: https://www.google.co.id/books/edition/Demystifying_UI_UX/w691EAAAQBAJ?hl=id&gbpv=1&dq=ui/ux&pg=PA16&printsec=frontcover
[12] A. Marcus and E. Rosenzweig, Design, user experience, and usability : case studies in public and personal interactive systems : 9th International Conference, DUXU 2020, held as part of the 22nd HCI International Conference, HCII 2020, Copenhagen, Denmark, July 19-24, 2020, Proceedings. Part III, vol. 3. 2020.
[13] “Understanding layout - Material Design.” https://m2.material.io/design/layout/understanding-layout.html (accessed Nov. 28, 2022).
[14] F. M. Lachinsky, “Perancangan Ulang User Interface Dan User Experience Aplikasi Comrades Menjadi Aplikasi Chatbot,” Universitas Komputer Indonesia., Bandung, 2020. Accessed: Dec. 17, 2021. [Online]. Available: http://elibrary.unikom.ac.id
[15] T. N. Auliyaa, “Memahami User Flow pada UX Design – School of Information Systems,” Binus University , Apr. 14, 2020. https://sis.binus.ac.id/2020/04/14/memahami-user-flow-pada-ux-design/ (accessed Oct. 23, 2022).
[16] M. I. Z. Alfarid, B. Halim, and H. Iswandi, “PERANCANGAN KOMUNIKASI VISUAL EKSPLORASI SISTEM TATA SURYA BERBASIS NEW MEDIA UNTUK ANAK REMAJA USIA 12-18 TAHUN DI PALEMBANG,” Besaung : Jurnal Seni Desain dan Budaya, vol. 7, no. 2, Oct. 2022, Accessed: Mar. 25, 2023. [Online]. Available: http://ejournal.uigm.ac.id/index.php/Besaung/article/view/2485
[17] A. B. Wibisono, Riset Desain : Pengumpulan Data dan Analisa, vol. 1. Surabaya: CV. PUTRA MEDIA NUSANTARA (PMN), 2020.
[18] D. E. Valentino, “Pengantar Tipografi,” Tematik : Jurnal Teknologi Informasi Komunikasi (e-Journal), vol. 6, no. 2, pp. 152–173, Dec. 2019, doi: 10.38204/TEMATIK.V6I2.254.
[19] “Sejarah - UPN ‘Veteran’ Jawa Timur.” https://www.upnjatim.ac.id/sejarah/ (accessed Mar. 26, 2023).
[20] H. Santosa and N. Fauziah, Pencitraan Visual Kawasan Urban: Teknik Pengembangan Sistem Multimedia Spasial 3D, 1st ed., vol. 1. Malang: Universitas Brawijaya Press, 2019. Accessed: Dec. 17, 2021. [Online]. Available: https://books.google.co.id/books/about/Pencitraan_Visual_Kawasan_Urban.html?id=eATQDwAAQBAJ&redir_esc=y
[21] Widyasari, A. Sutejo, and A. N. Yunisya, “Efektivitas Penggunaan Infografis Pada Perancangan Buku Profil Universitas (Studi Objek Universitas Pembangunan Nasional ‘Veteran’ Jawa Timur),” Jurnal Desain Idea: Jurnal Desain Produk Industri Institut Teknologi Sepuluh Nopember Surabaya, vol. 17, no. 2, pp. 27–31, Oct. 2018, Accessed: Dec. 17, 2021. [Online]. Available: https://iptek.its.ac.id/index.php/idea/article/view/4683
[2] J. Hairunisa and A. Hade, “Pengertian Administrasi Layanan Khusus, Jenis-jenis Layanan Khusus dan Pengelolaannya dan Peran Guru dalam Administrasi Layanan Khusus,” 2020.
[3] H. H. Nawawi, “Penggunaan E-wallet di Kalangan Mahasiswa,” Jurnal Emik, vol. 3, no. 2, pp. 189–206, 2020, Accessed: Oct. 08, 2022. [Online]. Available: http://ejournals.umma.ac.id/index.php/emik/article/view/697/615
[4] D. M. Rangkuty, “Apakah Penggunaan E-wallet Masa Pandemi Covid-19 Semakin Meningkat di Indonesia?,” Prosiding Konferensi Nasional UNUI, vol. 1, no. 1, pp. 251–261, 2021, Accessed: Sep. 24, 2022. [Online]. Available: http://journal.unusia.ac.id/index.php/Conferenceunusia/article/view/205/155
[5] P. F. Arifianto, “Pendidikan Desain Komunikasi Visual dalam Era Society 5.0,” DeKaVe, vol. 15, no. 1, pp. 37–45, May 2022, Accessed: Mar. 29, 2023. [Online]. Available: https://journal.isi.ac.id/index.php/dkv/article/view/6167
[6] A. C. Nugroho, G. R. Putra, and D. Fitriati, “Implementasi e-Kantin di Fakultas Teknik Universitas Pancasila,” SEMNATI, vol. 1, no. 1, pp. 301–306, 2019, Accessed: Oct. 08, 2022. [Online]. Available: http://prosiding.uika-bogor.ac.id/index.php/semnati/article/view/310/189
[7] R. Rotikan, J. G. Melaira, R. R. Rarumangkay, and O. Lengkong, “Penerapan PWA Untuk Aplikasi E-Voting Pemilihan Pengurus BEM dan Senat di Universitas Klabat,” CogITo Smart Journal, vol. 6, no. 2, pp. 190–203, Dec. 2020, Accessed: Sep. 13, 2022. [Online]. Available: http://202.62.11.57/index.php/cogito/article/view/272
[8] Y. Yonata, E. M. Sipayung, and N. Theresa, “Analisis User Interface Sistem Informasi Akademik Berbasis Mobile pada Aspek Usability (Studi Kasus: Aplikasi XYZ),” Jurnal Telematika, vol. 15, no. 1, pp. 55–62, Dec. 2020, Accessed: Oct. 09, 2022. [Online]. Available: https://journal.ithb.ac.id/telematika/article/view/355
[9] Ovan and A. Saputra, CAMI: Aplikasi Uji Validitas dan Reliabilitas Instrumen Penelitian Berbasis Website, 1st ed., vol. 1. Takalar: Yayasan Ahmar Cendekia Indonesia, 2020. Accessed: Oct. 18, 2022. [Online]. Available: https://www.google.co.id/books/edition/CAMI_Aplikasi_Uji_Validitas_dan_Reliabil/mZgMEAAAQBAJ?hl=id&gbpv=1&dq=aplikasi+berbasis+web+adalah&pg=PA5&printsec=frontcover
[10] T. Steiner, “What is in a Web View? An Analysis of Progressive Web App Features When the Means of Web Access is not a Web Browser,” Google Germany GmbH, 2018, doi: 10.1145/3184558.3188742.
[11] A. Tripathy, P. Mishra, C. Monisha, S. S. Nanda, and K. Gupta, Demystifying UI/UX - Google Books, 1st ed., vol. 1. Presear Software, 2020. Accessed: Oct. 19, 2022. [Online]. Available: https://www.google.co.id/books/edition/Demystifying_UI_UX/w691EAAAQBAJ?hl=id&gbpv=1&dq=ui/ux&pg=PA16&printsec=frontcover
[12] A. Marcus and E. Rosenzweig, Design, user experience, and usability : case studies in public and personal interactive systems : 9th International Conference, DUXU 2020, held as part of the 22nd HCI International Conference, HCII 2020, Copenhagen, Denmark, July 19-24, 2020, Proceedings. Part III, vol. 3. 2020.
[13] “Understanding layout - Material Design.” https://m2.material.io/design/layout/understanding-layout.html (accessed Nov. 28, 2022).
[14] F. M. Lachinsky, “Perancangan Ulang User Interface Dan User Experience Aplikasi Comrades Menjadi Aplikasi Chatbot,” Universitas Komputer Indonesia., Bandung, 2020. Accessed: Dec. 17, 2021. [Online]. Available: http://elibrary.unikom.ac.id
[15] T. N. Auliyaa, “Memahami User Flow pada UX Design – School of Information Systems,” Binus University , Apr. 14, 2020. https://sis.binus.ac.id/2020/04/14/memahami-user-flow-pada-ux-design/ (accessed Oct. 23, 2022).
[16] M. I. Z. Alfarid, B. Halim, and H. Iswandi, “PERANCANGAN KOMUNIKASI VISUAL EKSPLORASI SISTEM TATA SURYA BERBASIS NEW MEDIA UNTUK ANAK REMAJA USIA 12-18 TAHUN DI PALEMBANG,” Besaung : Jurnal Seni Desain dan Budaya, vol. 7, no. 2, Oct. 2022, Accessed: Mar. 25, 2023. [Online]. Available: http://ejournal.uigm.ac.id/index.php/Besaung/article/view/2485
[17] A. B. Wibisono, Riset Desain : Pengumpulan Data dan Analisa, vol. 1. Surabaya: CV. PUTRA MEDIA NUSANTARA (PMN), 2020.
[18] D. E. Valentino, “Pengantar Tipografi,” Tematik : Jurnal Teknologi Informasi Komunikasi (e-Journal), vol. 6, no. 2, pp. 152–173, Dec. 2019, doi: 10.38204/TEMATIK.V6I2.254.
[19] “Sejarah - UPN ‘Veteran’ Jawa Timur.” https://www.upnjatim.ac.id/sejarah/ (accessed Mar. 26, 2023).
[20] H. Santosa and N. Fauziah, Pencitraan Visual Kawasan Urban: Teknik Pengembangan Sistem Multimedia Spasial 3D, 1st ed., vol. 1. Malang: Universitas Brawijaya Press, 2019. Accessed: Dec. 17, 2021. [Online]. Available: https://books.google.co.id/books/about/Pencitraan_Visual_Kawasan_Urban.html?id=eATQDwAAQBAJ&redir_esc=y
[21] Widyasari, A. Sutejo, and A. N. Yunisya, “Efektivitas Penggunaan Infografis Pada Perancangan Buku Profil Universitas (Studi Objek Universitas Pembangunan Nasional ‘Veteran’ Jawa Timur),” Jurnal Desain Idea: Jurnal Desain Produk Industri Institut Teknologi Sepuluh Nopember Surabaya, vol. 17, no. 2, pp. 27–31, Oct. 2018, Accessed: Dec. 17, 2021. [Online]. Available: https://iptek.its.ac.id/index.php/idea/article/view/4683
Downloads
Published
2023-10-28
How to Cite
Pradanti, I. D. M. A. A., Widyasari, W., & Nisa, D. A. (2023). PERANCANGAN KONSEP DAN LAYOUT APLIKASI BERBASIS WEBSITE E-CANTEEN UPN VETERAN JAWA TIMUR. Jurnal Nawala Visual, 5(2), 58–68. https://doi.org/10.35886/nawalavisual.v5i2.593
Issue
Section
Articles
