Penerapan Metode Design Thinking dalam Perancangan UI/UX Website CV. Lokal Industri

Naafi' Ramadhan(1),Ruth Ema Febrita(2*),Junaedi Adi Prasetyo(3)
(1) Politeknik Negeri Banyuwangi
(2) Politeknik Negeri Banyuwangi
(3) Politeknik Negeri Banyuwangi
(*) Corresponding Author
DOI : 10.35889/jutisi.v13i3.2106

Abstract

This study focuses on designing the User Interface (UI) and User Experience (UX) for a web-based ordering system at CV. Lokal Industri in Banyuwangi, and evaluating the developed prototype. The company faces operational challenges due to manual ordering processes that are susceptible to cancellations. By employing the design thinking method, which encompasses the stages of empathize, define, ideate, prototype, and testing, the research seeks to understand user needs and develop an intuitive and functional design. The design system incorporates consistent UI elements like vivid red, black, and white colors, Montserrat font, and Font Awesome icons, ensuring good contrast, readability, and reinforcing brand identity. The results demonstrate a successful design, with a 100% success rate in usability testing and an average System Usability Scale (SUS) score of 95, reflecting very high user satisfaction. This approach effectively meets user needs, enhances operational efficiency, and provides a positive user experience.

Keywords: Design thinking; UI/UX design; Web-based ordering system; Usability testing; User experience.

Abstrak

Penelitian ini bertujuan untuk mengembangkan antarmuka pengguna (UI) dan pengalaman pengguna (UX) sistem informasi pemesanan konveksi berbasis web pada CV. Lokal Industri di Banyuwangi dan menguji prototipe yang dikembangkan. CV. Lokal Industri mengalami kendala operasional akibat proses pemesanan manual yang rentan dibatalkan. Metode design thinking diterapkan melalui tahap empathize, define, ideate, prototype, dan testing, untuk memahami kebutuhan pengguna dan menciptakan desain yang intuitif dan fungsional. Desain sistem melibatkan komponen UI konsisten, seperti warna vivid red, hitam, putih, font Montserrat, dan icon Font Awesome, untuk memastikan kontras dan keterbacaan serta memperkuat identitas merek. Hasil penelitian menunjukkan keberhasilan desain dengan tingkat keberhasilan usability test 100% dan skor rata-rata System Usability Scale (SUS) sebesar 95, menunjukkan kepuasan pengguna yang sangat tinggi. Pendekatan ini berhasil memenuhi kebutuhan pengguna, meningkatkan efisiensi operasional, dan memberikan pengalaman yang positif.

 

Keywords


Design thinking; Perancangan UI/UX; Sistem informasi; Usability testing; User experience

References


M. Furqan, S. Sudriyanto, and M. R. U. Albab, “Analisis Dan Perancangan Ui/Ux E-Konveksi Menggunakan Metode Prototype (Studi Kasus: Brand Lokal Probolinggo Ghazlan.Co),” NJCA (Nusantara J. Comput. Its Appl., vol. 7, no. 2, pp. 84–92, 2022, doi: 10.36564/njca.v7i2.271.

M. Zidhan, F. Okmayura, H. U. Anjani, N. F. Achmad, and F. Wilyani, “Perancangan UI / UX Pada AplikasiSayur Mayur Online (SAMARON) menggunakan Metode Design Thinking,” 1st MDP Student Conf. 2022, vol. 1, no. 2022, pp. 406–412, 2024.

P. Putra, N. N. P. Irfa, Y. Sazaki, D. Y. Hardiyanti, and H. Novianti, “Penerapan Metode Design Thinking Terhadap Perancangan User Interface Marketplace BuildID Untuk User,” Indones. J. Comput. Sci., vol. 12, no. 5, pp. 2834–2846, 2023, doi: 10.33022/ijcs.v12i5.3398.

R. A. Tambunan, “UI/UX Design Web-Based Livestock Sale Using Design Thinking to Rapid Prototyping,” Int. J. Multidiscip. Res. Anal., vol. 06, no. 03, pp. 869–878, 2023, doi: 10.47191/ijmra/v6-i3-03.

K. B. Kahn, “Understanding innovation,” Bus. Horiz., vol. 61, no. 3, pp. 453–460, 2018, doi: 10.1016/j.bushor.2018.01.011.

D. Kelley and T. Brown, “An Introduction to Design Thinking PROCESS GUIDE,” Inst. Des. Stanford, 2018, doi: 978-1-4302-6181-0.

E. M. Albay and D. V. Eisma, “Performance task assessment supported by the design thinking process: Results from a true experimental research,” Soc. Sci. Humanit. Open, vol. 3, no. 1, p. 100116, 2021, doi: 10.1016/j.ssaho.2021.100116.

P. C. Vinh, Context-Aware Systems and Applications (ICCASA 2018) and Nature of Computation and Communication (ICTCC 2018), vol. 24, no. 1. 2019. doi: 10.1007/s11036-018-1137-5.

M. Pande and S. V. Bharathi, “Theoretical foundations of design thinking – A constructivism learning approach to design thinking,” Think. Ski. Creat., vol. 36, no. October 2019, p. 100637, 2020, doi: 10.1016/j.tsc.2020.100637.

C. Bradley, L. Oliveira, S. Birrell, and R. Cain, “International Journal of Human - Computer Studies A new perspective on personas and customer journey maps : Proposing systemic UX,” Int. J. Hum. - Comput. Stud., vol. 148, no. October 2019, p. 102583, 2021, doi: 10.1016/j.ijhcs.2021.102583.

S. P. Gautama, S. Fajarwati, and A. Hamdi, “UI / UX Design on Prototype Attendance Using the Design Thinking Method,” vol. 2, no. 1, pp. 10–18, 2023.

M. Qtishat, “The Status Quo of Crisis Management Implementation in Jordanian Public Secondary Schools in Amman, According to Impact Effort Matrix, from the Point of View of its School Leaders,” J. Educ. Pract., vol. 11, no. 20, pp. 22–29, 2020, doi: 10.7176/jep/11-20-04.

W. Suci, L. Nasution, and P. Nusa, “RESEARCH ARTICLE UI / UX Design Web-Based Learning Application Using Design Thinking Method,” vol. 1, no. 1, pp. 18–27, 2021.

T. Albert, J. A. Nugroho, and R. W. Hapsari, “Perancangan Ulang UI/ UX Website sebuah Perusahaan Farmasi,” J. Rupaka, vol. 4, no. 1, pp. 90–96, 2021.

M. A. Kushendriawan, H. B. Santoso, P. O. H. Putra, and M. Schrepp, “Evaluating User Experience of a Mobile Health Application ‘Halodoc’using User Experience Questionnaire and Usability Testing,” J. Sist. Inf., vol. 17, no. 1, pp. 58–71, 2021.

K. T. Nugroho, B. Julianto, and D. F. Nur MS, “Usability Testing pada Sistem Informasi Manajemen AKN Pacitan Menggunakan Metode System Usability Scale,” J. Nas. Pendidik. Tek. Inform., vol. 11, no. 1, pp. 74-83, 2022, doi: 10.23887/janapati.v11i1.43209.


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

How To Cite This :

Refbacks

  • There are currently no refbacks.