Perancangan UI/UX Aplikasi Portal Informasi dan Pendaftaran Turnamen E-Sports

Juniarto Christiawan Hartono(1*),Nina Setiyawati(2)
(1) Universitas Kristen Satya Wacana
(2) Universitas Kristen Satya Wacana
(*) Corresponding Author
DOI : 10.35889/jutisi.v12i2.1320

Abstract

E-sports are growing rapidly and there are more and more enthusiasts. Some players with a competitive spirit want to participate in a lot of tournaments, more and more people also want to organise tournaments. However, many players find it difficult to find information and register for e-sports tournaments, which is directly proportional to tournament organizers who often find it difficult to get participants. Therefore, the authors created a solution by designing a UI/UX design for a web-based application called POG (Portal of Gamers) which produces a prototype application interaction. The results of this design are expected to be a reference for developing applications that connect tournament organizers and players in organizing e-sports tournaments or competitions. The design method used in this research is Design Thinking. This method has 5 stages, namely empathize, define, ideate, prototype, and test. Usability test with the SEQ method, got a score of 6.67, which means that the Portal of Gamers can make it easy for players and organizers to support e-sports tournaments.

Keywords: E-Sports Tournament; User interface; User experience; Design Thinking; Prototype  

 

Abstrak

E-sports berkembang dengan pesat dan semakin banyak peminatnya. Sebagian pemain yang berjiwa kompetitif ingin mengikuti banyak turnamen, dan banyak juga orang yang ingin menyelenggarakan turnamen. Namun, banyak pemain yang merasa kesulitan mencari informasi dan melakukan pendaftaran turnamen e-sports, hal ini berbanding lurus dengan para penyelenggara turnamen yang sering kali sulit untuk mendapatkan peserta. Karena itu, penulis menciptakan solusi dengan merancang desain UI/UX aplikasi berbasis web yang bernama POG (Portal of Gamers) yang menghasilkan sebuah interaksi aplikasi prototype. Hasil rancangan ini diharapkan bisa menjadi acuan untuk pembangunan aplikasi yang menghubungkan penyelenggara turnamen dan juga pemain dalam penyelenggaraan turnamen atau kompetisi e-sports. Metode perancangan yang digunakan dalam penelitian ini adalah Design Thinking. Metode ini memiliki 5 tahapan yaitu emphatize, define, ideate, prototype, test. Pengujian usability dengan metode SEQ mendapatkan skor 6.67 yang artinya Portal of Gamers dapat memberikan kemudahan terhadap pemain dan penyelenggara untuk mendukung diselenggarakannya turnamen e-sports.

 

Keywords


Turnamen E-Sports; User interface; User experience; Design Thinking; Prototype

References


K. V. Vlasenko et al., “UI/UX Design of Educational On-line Courses,” CTE Work. Proc., vol. 9, pp. 184–199, 2022, [Online]. Available: https://acnsci.org/journal/index.php/cte/ article/view/114.

I. O. for Standardization, “ISO 9241-210: Ergonomics of human–system interaction - Human-centred design for interactive systems,” International Organization for Standardization. https://www.iso.org/obp/ui/#iso:std:iso:9241:-210:ed-2:v1:en (accessed Apr. 29, 2023).

N. Setiyawati, H. D. Purnomo, and E. Mailoa, “User Experience Design on Visualization of Mobile-Based Land Monitoring System Using a User-Centered Design Approach,” Int. J. Interact. Mob. Technol., vol. 16, no. 3, pp. 47–65, 2022, doi: 10.3991/IJIM.V16I03.28499.

I. Darmawan, M. S. Anwar, A. Rahmatulloh, and H. Sulastri, “Design Thinking Approach for User Interface Design and User Experience on Campus Academic Information Systems,” Int. J. Informatics Vis., vol. 6, no. 2, pp. 327–334, 2022, [Online]. Available: https://www.joiv.org/index.php/joiv/article/view/997/461.

V. K. Reynaldi and N. Setiyawati, “Perancangan UI/UX Fitur Mentor on Demand Menggunakan Metode Design Thinking Pada Platform Pendidikan Teknologi,” JIPI (Jurnal Ilm. Penelit. dan Pembelajaran Inform., vol. 7, no. 3, pp. 835–849, 2022, doi: 10.29100/jipi.v7i3.3109.

A. Mursyidah, I. Aknuranda, and H. Muslimah Az-Zahra, “Perancangan Antarmuka Pengguna Sistem Informasi Prosedur Pelayanan Umum Menggunakan Metode Design Thinking (Studi Kasus: Fakultas Ilmu Komputer Universitas Brawijaya),” J. Pengemb. Teknol. Inf. dan Ilmu Komput., vol. 3, no. 4, pp. 3931–3938, 2019, [Online]. Available: http://j-ptiik.ub.ac.id.

M. Multazam, I. V Paputungan, and B. Suranto, “Perancangan User Interface dan User Experience pada Placeplus menggunakan pendekatan User Centered Design,” Automata, vol. 1, no. 2, pp. 234–241, 2020, [Online]. Available: https://journal.uii.ac.id/AUTOMATA/ article/view/15528/10233.

F. Fernando, “Perancangan User Interface (Ui) & User Experience (Ux) Aplikasi Pencari Indekost Di Kota Padangpanjang,” TANRA J. Desain Komun. Vis. Fak. Seni dan Desain Univ. Negeri Makassar, vol. 7, no. 2, pp. 101–111, 2020, doi: 10.26858/tanra.v7i2.13670.

A. Purnomo and Ardiansyah, “Pengembangan User Experience (Ux) Dan User Interface (Ui) Aplikasi Ibeauty Berbasis Android,” JSTIE (Jurnal Sarj. Tek. Inform., vol. 6, no. 3, pp. 18–27, 2018.

A. A. Razi, I. R. Mutiaz, and P. Setiawan, “Penerapan Metode Design Thinking Pada Model Perancangan Ui/Ux Aplikasi Penanganan Laporan Kehilangan Dan Temuan Barang Tercecer,” Desain Komun. Vis. Manaj. Desain dan Periklanan, vol. 3, no. 02, pp. 75–93, 2018, doi: 10.25124/demandia.v3i02.1549.

E. C. Shirvanadi and M. Idris, “Perancangan Ulang UI/UX Situs E-Learning Aminkom center Metode Design Thinking (Studi Kasus: Amikom Center),” Automata, vol. 2, pp. 1–8, 2021, [Online]. Available: https://journal.uii.ac.id/AUTOMATA/article/view/19438/11541.

M. Azmi, A. Putra Kharisma, and M. A. Akbar, “Evaluasi User Experience Aplikasi Mobile Pemesanan Makanan Online dengan Metode Design Thinking (Studi Kasus GrabFood),” J. Pengemb. Teknol. Inf. dan Ilmu Komput., vol. 3, no. 8, pp. 7963–7972, 2019, [Online]. Available: http://j-ptiik.ub.ac.id.

I. P. Sari, A. H. Kartina, A. M. Pratiwi, F. Oktariana, M. F. Nasrulloh, and S. A. Zain, “Implementasi Metode Pendekatan Design Thinking dalam Pembuatan Aplikasi HapSari, I. P., Kartina, A. H., Pratiwi, A. M., Oktariana, F., Nasrulloh, M. F., & Zain, S. A. (2020). Implementasi Metode Pendekatan Design Thinking dalam Pembuatan Aplikasi Happy Cl,” Edsence J. Pendidik. Multimed., vol. 2, no. 1, pp. 45–55, 2020.

S. Doorley, S. Holcomb, P. Klebahn, K. Segovia, and J. Utley, “Design Thinking Bootleg,” Des. Think. Bootleg, p. 90, 2018, [Online]. Available: https://dschool.stanford.edu/ resources/design-thinking-bootleg.

L. Rajaobelina, I. Brun, N. Kilani, and L. Ricard, “Examining emotions linked to live chat services: The role of e-service quality and impact on word of mouth,” J. Financ. Serv. Mark., vol. 27, no. 3, pp. 232–249, 2022, doi: 10.1057/s41264-021-00119-8.

K. H. Lim and N. Setiyawati, “Perancangan User Experience Aplikasi Mobile Majuli Menggunakan Metode Design Thinking,” J. Inf. Technol. Ampera, vol. 3, no. 2, pp. 108–123, 2022, doi: 10.51519/journalita.volume3.isssue2.year2022.page108-123.

D. Kelley and T. Brown, “An introduction to Design Thinking,” Iinstitute Des. Stanford, p. 6, 2018, [Online]. Available: https://dschool-old.stanford.edu/sandbox/groups/ designresources/wiki/36873/attachments/74b3d/ModeGuideBOOTCAMP2010L.pdf.

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,” J. Tek. Inform., vol. 2, no. 1, pp. 17–26, 2021, doi: 10.20884/1.jutif.2021.2.1.30.

R. I. Syabana, P. Y. Saputra, and N. Anugrah, “Penerapan Metode Design Thinking Pada Perancangan User Interface,” e-conversion - Propos. a Clust. Excell., pp. 40–60, 2020, [Online]. Available: http://jurnalti.polinema.ac.id/index.php/SIAP/article/view/719.

F. R. Isadora, B. T. Hanggara, and Y. T. Mursityo, “Perancangan User Experience Pada Aplikasi Mobile HomeCare Rumah Sakit Semen Gresik Menggunakan Metode Design Thinking,” J. Teknol. Inf. dan Ilmu Komput., vol. 8, no. 5, p. 1057, 2021, doi: 10.25126/jtiik.2021844550.

Sarah Gibbons, “UX Mapping Methods Compared: A Cheat Sheet,” nngroup.com, 2017. https://www.nngroup.com/articles/ux-mapping-cheat-sheet/.

R. F. Dam and Y. S. Teo, “What is Design Thinking and Why Is It So Popular?,” Interact. Des. Found., pp. 1–6, 2021, [Online]. Available: https://www.interaction-design.org/ literature/article/what-is-design-thinking-and-why-is-it-so-popular.

N. Babich, “The Beginner’s Guide to Information Architecture in UX,” xd.adobe.com, 2020. https://xd.adobe.com/ideas/process/information-architecture/information-ux-architect/ (accessed May 16, 2023).

A. Segara, “Penerapan Pola Tata Letak (Layout Pattern) pada Wireframing Halaman Situs Web,” J. Magenta, STMK Trisakti, vol. 3, no. 1, pp. 452–464, 2019.

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.

S. Soedewi, “Penerapan Metode Design Thinking Pada Perancangan Website Umkm Kirihuci,” Vis. J. Online Desain Komun. Vis., vol. 10, no. 02, p. 17, 2022, doi: 10.34010/visualita.v10i02.5378.

L. C. Wijaya, “Analisis Usabilitas pada Sistem Monitoring Dan Otomasi Greenhouse untuk,” vol. 6, no. 2, pp. 60–67, 2019.

N. R. Riyadi, “Pengujian Usability Untuk Meningkatkan Antarmuka Aplikasi Mobile myUMM Students,” Sistemasi, vol. 8, no. 1, p. 226, 2019, doi: 10.32520/stmsi.v8i1.346.


The PDF file you selected should load here if your Web browser has a PDF reader plug-in installed (for example, a recent version of Adobe Acrobat Reader).

If you would like more information about how to print, save, and work with PDFs, Highwire Press provides a helpful Frequently Asked Questions about PDFs.

Alternatively, you can download the PDF file directly to your computer, from where it can be opened using a PDF reader. To download the PDF, click the Download link above.

Fullscreen Fullscreen Off

Full Text: File PDF (Indonesian)

How To Cite This :

Refbacks

  • There are currently no refbacks.