## PERANCANGAN UI/UX PADA APLIKASI E-LEARNING UMKM SALATIGA MENGGUNAKAN METODE DESIGN THINKING
Yosef Agil Prayogi* 1) , Nina Setiyawati 2)
1. Universitas Kristen Satya Wacana, Indonesia
2. Universitas Kristen Satya Wacana, Indonesia
Article Info
ABSTRAK
Kata Kunci: Design Thinking, User Interface, User Experience, Online Learning, UMKM, E- Learning.
Keywords: Design Thinking, User Interface, User Experience, Online Learning, UMKM, E- Learning.
Article history: Received 7 December 2023 Revised 21 December 2023 Accepted 4 January 2023 Available online 1 March 2024
DOI : https://doi.org/10.29100/jipi.v9i1.4218
* Corresponding author. Yosef Agil Prayogi E-mail address: 672019336@student.uksw.edu
E-Learning merupakan teknologi informasi dan komunikasi untuk mengaktifkan pelajar, mahasiswa, dan juga pelaku bisnis untuk belajar kapanpun dan diamanapun. Peningkatan pelayanan UMKM menjadi prioritas untuk meningkatkan kepuasan pelanggan dan memperkuat daya saing bisnis. Pelayanan pada UMKM Salatiga, Jawa Tengah menjadi sebuah aspek penting dalam memperkuat sektor ekonomi lokal. Dalam peningkatan pelayanan dapat mencangkup strategi seperti pelatihan, penerapan teknologi informasi, dan pemahaman mendalam tentang kebutuhan pelanggan. Proses perancangan user interface dan user experience pada website UMKM.EDU memerlukan pemahaman terhadap permasalahan user pada umumnya saat menggunakan e- learning, oleh karena itu, metode design thinking digunakan dalam penelitian ini. Metode ini melibatkan lima langkah termasuk empati, mendefinisikan, ide, prototyping dan pengujian. Pada tahap pengujian prototipe yang sudah selesai, metrik Single Ease Question (SEQ) untuk setiap tugas rata-rata 5,6 hingga 6,8 di lima responden dan lima tugas skenario. Dari hasil pengujian dapat disimpulkan bahwa UX prototipe bekerja tanpa masalah dan memenuhi kebutuhan pengguna.

## ABSTRACT
E-Learning is an information and communication technology that enables students, students, and also business practitioners to learn anytime and anywhere. Improving services for micro, small, and medium enterprises (UMKM) is a priority to enhance customer satisfaction and strengthen business competitiveness. Services for UMKM in Salatiga, Central Java, are an important aspect in strengthening the local economy. The improvement of services can encompass strategies such as training, the implementation of information technology, and a deep understanding of customer needs. The process of designing the user interface and user experience on the UMKM.EDU website requires an understanding of the common user issues when using e-learning, hence the design thinking method is used in this research. This method involves five steps including empathy, defining, ideation, prototyping, and testing. In the prototype testing phase, the Single Ease Question (SEQ) metric for each task averaged from 5.6 to 6.8 among five respondents and five scenario tasks. From the testing results, it can be concluded that the UX prototype works smoothly and meets user needs

## I. P ENDAHULUAN
embelajaran e-learning pada saat ini menjadi suatu hal yang sudah banyak diminati oleh banyak kalangan mulai dari pelajar, mahasiswa, dosen, dan juga pelaku bisnis atau masyarakat. E-learning adalah suatu bentuk teknologi informasi dan komunikasi yang memungkinkan siswa untuk belajar secara fleksibel, tanpa batasan waktu dan tempat [1]. Pembelajaran elektronik atau e-learning telah dimulai sejak tahun 1970-an [2]. Peningkatan pelayanan UMKM menjadi prioritas untuk meningkatkan kepuasan pelanggan dan memperkuat daya saing bisnis. Pentingnya menyediakan pelatihan kepada karyawan UMKM untuk mengembangkan keterampilan interpersonal, komunikasi, dan manajemen waktu, yang berkontribusi pada peningkatan pelayanan yang lebih baik [12]. Pelayanan pada UMKM Salatiga, Jawa Tengah merupakan sebuah aspek penting dalam memperkuat sektor ekonomi lokal dan meningkatkan daya saing bisnis UMKM. Peran UMKM dalam meningkatkan ekonomi di Salatiga, Jawa Tengah, dapat memberikan wawasan tentang tantangan dan peluang dalam meningkatkan pelayanan UMKM di wilayah tersebut. Peningkatan pelayanan dapat mencangkup strategi seperti pelatihan,
P
penerapan teknologi  informasi, dan pemahaman mendalam tentang kebutuhan pelanggan [13]. Sektor Usaha Mikro Kecil Menengah (UMKM) merupakan salah satu aspek penting pada sektor ekonomi dan pemberdayaan UMKM Salatiga, Jawa Tengah, melalui e-learning menjadi solusi yang efektif dalam memberikan pengetahuan dan keterampilan kepada pelaku UMKM. E-Learning memberikan akses fleksibel terhadap materi pelatihan dan sumber daya lainnya yang dapat membantu UMKM Salatiga meningkatkan kemampuan bisnis mereka. Pemanfaatan e-learning untuk meningkatkan keterampilan wirausaha UMKM di Indonesia penting dalam pemberdayaan melalui e-learning dalam mendukung pertumbuhan serta keterampilan wirausaha UMKM di Salatiga [14].
E-learning telah menjadi solusi yang popular dan efektif dalam Pendidikan dan pelatihan. E-learning atau pembelajaran elektronik, menggunakan teknologi informasi untuk memberikan pembelajaran secara online, yang memungkinkan akses yang mudah dan fleksibel terhadap materi pembelajaran. Di Indonesia penggunaan e- learning terus meningkat di berbagai sector, termasuk Pendidikan formal, pelatihan professional, dan pengembangan keterampilan yang relevan secara efektif dan efisien. E-learning telah menjadi bagian yang tak terpisahkan dari sistem Pendidikan di Indonesia. Menurut penelitian oleh Purwanto dan Adisendjaja (2019) e- learning telah diimplementasikan di berbagai institusi perguruan tinggi. Penelitian ini menyoroti pentingnya e- learning dalam memperluas akses Pendidikan [15]. Tingkat pemahaman UmKM Indonesia terhadap teknologi pada saat ini masih kurang dan belum siap menerapkan digitalisasi, dari 64 Juta UMKM Indonesia saat ini, hanya 13 persen atau sebanyak 8 juta UMKM yang sudah hadir di platform digital [16]. Jumlah Usaha Mikro Kecil dan Menengah (UMKM) yang ada di salatiga pada tahun 31 desember 2022 berjumlah 22.995 usaha yang bergerak diberbagai bidang mulai dari kuliner, kerajinan, dan lainnya [17].
Pembelajaran elektronik yang memanfaatkan platform digital untuk memberikan materi pembelajaran secara fleksibel dan mandiri. Namun, hanya platform e-learning saja tidak cukup untuk memberikan pengalaman pembelajaran yang efektif. Untuk mencapai tujuan pembelajaran yang optimal, diperlukan desain User Experience (UX) yang baik dalam perancangan e-learning. Desain UX bertujuan untuk menciptakan interaksi yang menyenangkan, efisien, dan bermakna antara pengguna dengan produk atau sistem. Dalam konteks e- learning, design UX memiliki peran penting dalam meningkatkan efektivitas pembelajaran dan kepuasan pengguna. Dengan mengaplikasikan prinsip-prinsip desain UX, pengguna e-learning dapat lebih terlibat, termotivasi, dan mudah memanfaatkan dan mudah memanfaatkan materi pembelajaran yang disajikan [18]. Desain UX yang baik dalam e-learning dapat meningkatkan partisipasi dan motivasi belajar, selain itu menunjukkan bahwa faktor-faktor seperti kejelasan antarmuka, navigasi yang intuitif dan berkelanjutan pengguna dalam desain UX e-learning [19]. Perancangan antarmuka pengguna (UI) dan pengalaman pengguna (UX) adalah langkah yang harus dilakukan sebelum membuat fitur atau aplikasi tertentu. Antarmuka pengguna merupakan design produk yang mencerminkan bentuk, ukuran, warna dan susunan [5]. Sementara pengalaman pengguna adalah pengalaman pengguna saat berinteraksi dengan produk, termasuk konteks penggunaan, dampak pada pengalaman pengguna, dan potensi masalah [6]. Desain antarmuka pengguna penting karena bertindak sebagai penghubung antara pengguna dan sistem, memungkinkan interaksi melalui tugas yang terdefinisi pada fitur yang dirancang. Antarmuka pengguna harus dirancang dengan baik dan menarik bagi pengguna untuk menggunakan fitur tersebut. Selain desain antarmuka pengguna, desain pengalaman pengguna juga sangat penting, karena fokus UX adalah pada pengguna sebagai pusat keberhasilan atau kegagalan desain yang dibuat  [7]. Perencanaan pengalaman pengguna perlu dilakukan untuk mengukur persepsi pengguna terhadap fitur tersebut dan seberapa mudah pengguna menggunakannya [10]. Proses pembuatan desain ini melibatkan langkah-langkah seperti wawancara langsung atau observasi untuk memahami kebutuhan pengguna, serta Ide dan kebutuhan pengguna didasarkan pada pemahaman langsung dari pengguna itu sendiri. Salah satu metode yang digunakan adalah Design Thinking, yaitu proses yang melibatkan pemahaman langsung pengguna, menantang asumsi dan mendefinisikan masalah untuk mengidentifikasi ide dan solusi yang digunakan untuk memecahkan masalah tersebut. Perencanaan antarmuka pengguna (UI) dan pengalaman pengguna (UX) adalah langkah yang harus dilakukan sebelum membuat fitur atau aplikasi tertentu. Antarmuka pengguna merupakan penampilan produk, yang mencerminkan bentuk, ukuran, warna dan susunannya [5].  Desain antarmuka pengguna penting karena bertindak sebagai penghubung antara pengguna dan sistem, memungkinkan interaksi melalui tugas yang terdefinisi pada fitur yang dirancang. Antarmuka pengguna harus dirancang dengan baik dan menarik bagi pengguna untuk menggunakan fitur tersebut. Selain perencanaan antarmuka pengguna, perencanaan pengalaman pengguna Hal ini juga sangat penting karena fokus UX adalah pada pengguna sebagai fokus keberhasilan atau kegagalan desain [7]. Pembuatan outline ini meliputi langkah-langkah seperti wawancara langsung atau observasi untuk memahami kebutuhan pengguna dan mengumpulkan ide dan kebutuhan pengguna secara detail berdasarkan wawasan langsung dari pengguna itu sendiri. Salah satu metode yang digunakan adalah Design Thinking, yaitu proses yang melibatkan
langsung pemahaman pengguna, menantang asumsi dan mendefinisikan masalah untuk mengidentifikasi ide dan solusi yang akan digunakan untuk memecahkan masalah tersebut. Menggunakan metode design thinking sangat berguna. memecahkan masalah pengguna, merancang masalah, merumuskan masalah, dan kemudian menghasilkan ide dan solusi untuk menjawab masalah tersebut [11].  Dalam menggunakan metode Design Thinking terdapat beberapa gap analisis yang perlu diperhatikan. Pertama, perlu memastikan representasi sample pengguna yang akan menjadi user, kedua evaluasi terhadap ide dan solusi harus mencakup pengujian terhadap pengguna. Terakhir perubahan konteks dan kebutuhan pengguna harus diperharikan dan dilakukan penyesuaian yang sesuai. Degnan memperhatikan gap analisis ini metode Design Thinking dapat menghasilkan solusi yang lebih efektif.

## II. METODE PENELITIAN

## A.  Design Thinking
Metode Design Thinking adalah proses iteratif yang melibatkan pemahaman pengguna dan mendefinisikan kembali masalah untuk mengidentifikasi strategi dan solusi alternatif yang mungkin tidak langsung terlihat jelas pada tingkat pemahaman awal. Metode Design Thinking memiliki manfaat yang besar dalam menghadapi masalah yang kompleks atau tidak jelas dengan mengubah cara pandang masalah menjadi lebih berfokus pada pengguna. Dalam metode ini, perhatian utama diberikan pada pengalaman pengguna, identifikasi masalah, penciptaan gagasan  dan solusi, serta penerapan prototipe dan pengujian untuk menemukan solusi yang inovatif dan bermanfaat bagi pengguna [3]. Proses metode Design Thinking dapat dilihat pada gambar 1.
Gambar. 1 . Metode Design Thinking [26]
Langkah atau tahapan dalam Design Thinking ini terbagi menjadi 5 tahapan, diantaranya Empathize, Define, Ideate, Prototype, dan Test. Tahap Empathize melibatkan observasi dan wawancara dengan pengguna, sementara tahap Define bertujuan untuk mengidentifikasi masalah yang spesifik berdasarkan kebutuhan pengguna. Tahap Ideate melibatkan proses brainstorming untuk menghasilkan ide-ide yang dapat menjadi solusi. Pada tahap Prototype , solusi desain yang dihasilkan dari tahap Ideate diuji dengan membuat antarmuka pengguna. Tahap testing melibatkan percobaan dengan pengguna untuk mendapatkan umpan balik dan melakukan perbaikan terhadap solusi. Tahap ini dapat dilakukan dengan membuat skenario tugas yang akan dieksekusi oleh pengguna. Tahapan tersebut dapat dilakukan secara iteratif dan fleksibel, yang berarti tidak harus dilakukan secara berurutan. Desainer memiliki fleksibilitas untuk kembali ke tahap sebelumnya guna mengumpulkan lebih banyak data [25].

## III. HASIL DAN PEMBAHASAN
A. Empathize Langkah awal dalam tujuan dari proses Design Thinking adalah untuk memperoleh pemahaman yang empatik tentang masalah yang ingin diselesaikan. Tahap Empathize melibatkan pengamatan dan wawancara terhadap pengguna. Pengamatan dilakukan dengan mengamati bagaimana pengguna berinteraksi dengan lingkungan sekitarnya, dengan tujuan memahami kebutuhan yang dimiliki oleh pengguna. Sementara itu, wawancara digunakan untuk mendapatkan informasi mengenai keinginan dan kebutuhan pengguna [4]. Pengumpulan masalah untuk perancangan aplikasi e-learning ini berdasarkan review website serupa dan kemudian mencari sumber literasi online .

## TABEL I
TAHAP EMPATHIZE SECONDARY RESEARCH
Vol. 9, No. 1, Maret 2024, Pp. 402-415 No Hasil Temuan Riset Sumber Competitive Analysis 1 Tidak ada deskripsi kelas pada halaman detail kelas edu.kemenkopukm.go.id [27] 2 Proses login rumit dan membutuhkan NIK edu.kemenkopukm.go.id [27] 3 Tidak tersedia sertifikat setelah menyelesaikan kelas vokasi.co.id [28] 4 Cenderung pada materi yang lebih general seperti skill teknologi skilvul.com [29] 5 Kelas yang tersedia berbayar Vokasi.co.id [28] Secondary Research 1 UMKM membutuhkan pelatihan digital untuk menunjang usaha yang mereka miliki journal.moestopo.ac.id [30] 2 UMKM harus melakukan berbagai perubahan maupun strategi dan penyesuaian untuk kegiatan bisnis mereka journal.univetbantara.ac.id [31] 3 Diperlukan kolaborasi antara pemerintah, pelaku UMKM dan praktisi untuk mewujudkan e-learning jurnal.kominfo.go.id [32] 4 Dampak pembelajaran e-learning dapat meningkatkan pengetahuan & penjualan UMKM jurnal.kominfo.go.id [32] 5 UMKM di Indonesia masih menghadapi beragam hambatan dan permasalahan jurnal.kominfo.go.id [32]
Pada Tabel 1 adalah hasil dari proses tahap Empathize menggunakan metode Secondary research dan metode tersebut  dibagi menjadi 2 yakni competitive analysis yang berisi feedback dari website serupa dan juga menggunakan penelitian terdahulu yang membahas tentang e-learning pada UMKM. Setelah melalui tahap empati dan berhasil mengidentifikasi beberapa masalah inti, hasil-hasil tersebut kemudian dijadikan acuan untuk diproses pada tahap definisi.
B. Define
Tahap Define, yang juga dikenal sebagai tahap penjabaran, melibatkan definisi masalah yang bertujuan untuk memberikan pemahaman yang lebih jelas tentang masalah yang dihadapi oleh pengguna [9]. Pada tahap ini, informasi yang telah dikumpulkan akan dianalisis untuk mengidentifikasi masalah inti yang perlu dipecahkan. Selama tahap ini, pain point dan How-might We (HMW) akan diidentifikasi sebagai proses untuk mengklasifikasikan detail-detail permasalahan yang dihadapi oleh pengguna [4]. Tahap Define membantu tim desain dalam mengumpulkan ide-ide yang akan digunakan untuk mengembangkan fitur, fungsi, dan elemen lain yang memungkinkan pengguna untuk mengatasi masalah atau menyelesaikan masalah mereka sendiri dengan tingkat kesulitan yang minimal.
Gambar. 2. Pain Point
Pada  Gambar  3  merupakan  hasil dari identifikasi Pain Point adalah hasil dari penelusuran masalah yang dilakukan pada tahap Empathize , yang selanjutnya akan digunakan untuk menghasilkan gagasan dan solusi yang berhubungan dengan permasalahan yang telah diidentifikasi. Hal ini penting untuk merancang desain e-learning yang tepat. Pain point sendiri merujuk pada hambatan atau masalah yang dihadapi oleh pengguna dalam mendapatkan informasi tambahan, dan informasi ini akan digunakan sebagai dasar pengembangan produk [8].
Gambar. 3. How-might We
Gambar 3 adalah tahapan How-might We yaitu mengubah pernyataan menjadi sebuah pertanyaan. How- might We merupakan metode yang mengenai bagaimana kita bisa menggali ide sebanyak mungkin solusi dari suatu  masalah atau tantangan yang ada [14].  Tujuan dari proses HMW adalah untuk menggali lebih dalam berbagai aspek yang terkait dengan suatu masalah tertentu, sehingga dapat ditemukan masalah yang sesuai untuk proses pencarian ide dan solusi berikutnya [26]. Pada hasil HMW adalah “Membuat website e-learning yang dapat dengan mudah dimengerti oleh UMKM dalam”. Setelah mendapatkan How-might We selanjutnya penulis akan menggunakannya untuk mencari ide dan solusi.

## C. Ideate
Tahap berikutnya adalah tahap Ideate , yang merupakan tahap di mana ide dan solusi untuk masalah pengguna dicari. Dalam tahap ini, berbagai metode ideation seperti sketching, prototyping, brainstorming, brainwriting , ide terburuk, dan berbagai teknik ideation lainnya digunakan untuk menghasilkan ide dan solusi yang kreatif. Ideation juga merupakan tahap ketiga dalam proses design thinking . Dalam tahapan ini juga terdapat proses Solution idea, Affinity diagram, dan Prioritization Idea . Hasil dari proses ideation ini kemudian dijadikan fitur-fitur pada website e-learning UMKM.
Gambar. 4. Solution Idea
Pada Gambar 4 merupakan pencarian Solution Idea. Tahap ini mengumpulkan semua ide solusi yang penulis dapatkan. Dari solution idea ini penulis akan mengelompokkan ide tersebut menjadi lebih spesifik berdasarkan garis besar fitur website e-learning . Pada Gambar 5 adalah affinity Diagram juga dapat dituliskan dalam potongan kertas atau sticky notes yang kemudian ditempelkan pada papan atau dinding, namun pada penelitian ini penulis menggunakan Figjam sebagai alat untuk melakukan penelitian pada metode affinity diagram. Dari tahapan ini penulis menemukan 6 fitur utama yang dapat diterapkan ke dalam website.
Gambar. 5. Affinity Diagram
Gambar. 6. Prioritization Idea
Pada  tahap Prioritization Idea , yang tergambar dalam Gambar 6, melibatkan pengelompokkan ide-ide berdasarkan tingkat usaha dan nilai yang terbagi dalam empat kategori, yaitu prioritas 1, prioritas 2, prioritas 3, dan prioritas 4 . Pada prioritas 1 berisi fitur yang ada di kelas dan materi, karena kedua fitur ini adalah fitur utama yang akan diterapkan dalam website.
Selama tahap Ideate, perancangan User flow dan Wireframe dilakukan sebagai bagian dari perancangan e- learning ini. Berikut ini adalah hasil dari pembuatan user flow yang dapat dilihat pada Gambar 6 dan Wireframe yang dapat dilihat pada Gambar 7.
Gambar. 7. Alur pengguna (user flow)
User flow adalah serangkaian tindakan atau urutan yang dilakukan oleh pengguna saat menggunakan sebuah aplikasi atau website. Alur pengguna ( User flow) menjadi pedoman saat mengembangkan tampilan antarmuka dan pengalaman pengguna pada produk tersebut. Semakin optimal user flow (alur pengguna) dirancang dari awal hingga akhir dalam suatu proses, semakin mulus operasional produk dan semakin besar kemungkinan mencapai keberhasilan dalam pengalaman pengguna [27]. Pada Gambar 7 terdapat visualisasi user flow dari fitur atau situs web e-learning UMKM.Edu. Berikut merupakan penjabarannya:
1. User mengunjungi landing page dari website UMKM.EDU, kemudian user login menggunakan SSO dari Pintar UMKM jika sudah mempunyai akun dan jika belum user harus mendaftarkan akun. Selanjutnya jika user berhasil login akan masuk ke halaman dashboard UMKM.Edu.
2. Setelah berhasil login, user diarahkan kehalaman dashboard untuk memilih kelas atau jika user sudah pernah mengambil kelas, user bisa melanjutkan kelas dan diarahkan ke list materi.
3. Setelah user memilih atau melanjutkan kelas, selanjutnya user bisa melakukan quiz ataupun test yang ada pada kelas tersebut. Untuk mendapatkan sertifikat dan dapat lulus kelas yang sudah diambil dan jika nilai atau tes tidak memenuhi kriteria, user dapat melakukan tes ulang ataupun mengulang kelas.
4. Jika user sudah memenuhi kriteria, user dapat mengunduh sertifikat kelas dan memberikan ulasan kelas.
Gambar. 8. Wireframe landing page
Gambar. 9. Wireframe dashboard dan detail kelas
Gambar 10. Wireframe quiz, tes akhir, dan kelas selesai
Gambar  8,  9, dan 10 merupakan wireframe berhasil dibuat dalam perancangan e-learning UMKM.Edu. Wireframe adalah kerangka dasar untuk Menyusun atau menata komponen-komponen pada halaman website. Komponennya berupa banner, header, content, footer, link, form, dan lain-lain [26]. Hasil wireframing yang dilakukan oleh penulis adalah hasil dari tahap Emphatize dan Define , yang dapat digunakan sebagai panduan dasar dalam merancang antarmuka pengguna dan membuat prototipe.
Langkah berikutnya adalah menghasilkan UI Style Guide dan desain UI High-Fidelity yang kemudian akan diubah menjadi prototipe. Prototipe ini merupakan representasi visual sistem desain yang berfungsi sebagai contoh atau gambaran produk yang akan dikembangkan sebelum diimplementasikan sebagai produk final. Prototipe ini memberikan gambaran kepada pengguna mengenai sistem yang akan dibuat dan diperbarui [27].
Gambar. 11. UI Style Guide
Gambar 11 adalah UI style guide yang telah dibuat. Pembuatan style guide bertujuan untuk meningkatkan konsistensi dan efisiensi desain dalam hal waktu dan proses perancangan. Style guide ini meliputi warna, icon , font, dan beberapa komponen molekul dan organisme. UI style guide merupakan kumpulan modular semua elemen pada user interface yang mempunyai reusable [27].
Gambar. 12. Landing page
Gambar 12 adalah desain dari tampilan landing page yang berisi tentang informasi penyedia layanan dan juga benefit yang didapatkan. Selain itu juga terdapat halaman rekomendasi kelas dan juga list kelas, terdapat juga detail kelas yang berisi informasi detail kelas dan juga ulasan. Tampilan landing page dibuat berdasarkan website yang menyediakan layanan yakni PintarUMKM yang dominasi berwarna biru. Desain dari landing page ini dibuat simple dan layout yang tidak berlebihan.
Gambar. 13. Tampilan dashboard, kelas, dan detail kelas
Gambar 13 adalah tampilan dashboard kelas dan detail kelas. Pada detail kelas dibuat kurang lebih sama dengan yang ada di desktop, terdapat juga tampilan jika user telah mengambil kelas dan user bisa melanjutkan kelas tersebut. Selain itu, user dapat melihat sertifikat yang sudah didapatkan dari kelas yang sudah selesai. Pada menu yang ada di user interface yakni dashboard, kelas, eksplore, dan akun sedangkan pada navbar terdapat menu atau icon notifikasi dan pencarian serta logo UMKM.Edu.
Gambar. 14. Tampilan state jika belum lulus, download sertifikat dan tulis ulasan
Gambar 14 adalah tampilan state jika user belum lulus dan kelas sudah berakhir. User request untuk mengulang kelas tersebut dan pengajar akan membuka kelas atau akses untuk mengulang kelas. Terdapat juga tampilan untuk user memasukkan ulasan dan tampilan untuk men- download sertifikat.
Gambar 15. Tampilan saat user melakukan quiz dan test
Gambar 15 adalah tahapan saat user melakukan quiz, quiz dapat dilakukan saat user melanjutkan materi kelas dan setelah user membaca ataupun melihat video yang dilampirkan setelah itu user akan diuji dengan beberapa pertanyaan quiz berupa pilihan ganda ataupun bisa berupa multiple choice. Setelah user melakukan quiz pada screen terakhir, akan muncul score akhir yang diperoleh dan juga bisa melihat feedback dan jawaban yang benar dari pertanyaan yang diberikan. Sedangkan pada flow final test user harus menyelesaikan keseluruhan materi dan
JIPI (Jurnal Ilmiah Penelitian dan Pembelajaran Informatika) Journal homepage: https://jurnal.stkippgritulungagung.ac.id/index.php/jipi ISSN: 2540-8984 Vol. 9, No. 1, Maret 2024, Pp. 402-415
juga quiz yang ada didalamnya, test yang diberikan kurang lebih sama seperti quiz yakni pilihan ganda dan multiple choice. Pada flow ini user harus memenuhi standar nilai untuk bisa mendapatkan sertifikat dan lulus kelas tersebut.
Setelah berhasil merancang user interface design untuk website e-learning UMKM.Edu, selanjutnya penulis membuat prototype. Prototyping merupakan metode pengembangan perangkat lunak, yang berupa model fisik ataupun secara visual dan berfungsi atau clickable sebagai versi awal dari sistem yang akan dirancang [28]. Di samping itu, sebuah prototipe dapat dianggap sebagai suatu metode pendekatan untuk mengembangkan ide, menguji ide yang ada, serta meningkatkan ide-ide yang telah ditemukan pada tahap sebelumnya [29].

## D. Testing
Setelah merancang desain antarmuka, langkah berikutnya dilakukan oleh penulis adalah melakukan pengujian untuk mengetahui pemahaman pengguna terhadap desain yang telah dibuat dan sejauh mana kepuasan pengguna dalam menggunakan fitur-fitur yang tersedia di platform e-learning UMKM.Edu. Dalam tahap pengujian ini, penulis melibatkan lima responden yang diminta untuk menjalankan  prototipe yang telah dibuat dengan menggunakan lima skenario tugas yang harus diselesaikan. Metode pengukuran yang digunakan adalah Single Ease Question (SEQ), yang mengukur tingkat kesulitan yang dialami oleh pengguna dalam menyelesaikan tugas yang diberikan. Setelah menyelesaikan tugas, pengguna diminta untuk memberikan penilaian dari skala 1 hingga 7, menggunakan skala likert, untuk menggambarkan seberapa sulit mereka menghadapi tugas tersebut [30]. Berikut adalah beberapa skenario tugas yang akan dilakukan oleh para responden.
Vol. 9, No. 1, Maret 2024, Pp. 402-415 TABEL II HASIL TESTING DAN NILAI SEQ Scenario Task Pertanyaan Responden Hasil SEQ Rata-rata 1. Pilih kelas yang ada didalam menu List Kelas atau daftar kelas dan lihat detail kelas. Seberapa mudah dalam mencari kelas dan melihat detail kelas yang ada Responden 1 Responden 2 Responden 3 Responden 4 Responden 5 6 7 7 7 7 6.8 2. Lakukan pendaftaran akun dan masuk dengan akun tersebut Seberapa mudah saat melakukan pendaftaran dan login/masuk dengan akun yang sudah dibuat? Responden 1 Responden 2 Responden 3 Responden 4 Responden 5 6 6 7 7 7 6.6 3. Join atau masuk ke kelas “penjualan barang” dan mulai membaca materi Seberapa efisien saat join kelas dan tampilan materi yang tersedia? Responden 1 Responden 2 Responden 3 Responden 4 Responden 5 6 6 7 7 7 6.6 4. Lakukan Quiz singkat yang ada pada materi Seberapa efisien dan mudah dipahami pada saat melakukan Quiz? Responden 1 Responden 2 Responden 3 Responden 4 Responden 5 4 5 6 6 7 5.6 5. Melakukan Test akhir pada kelas yang diambil Seberapa mudah dan efisien pada saat melakukan test akhir pada kelas tersebut? Responden 1 Responden 2 Responden 3 Responden 4 Responden 5 5 6 6 6 7 6.0
SEQ terbagi ke dalam 2 bagian yaitu nilai yang kurang dengan angka skala Likert 1 – 4 dan nilai yang baik yaitu pada angka 5-7. Berdasarkan nilai SEQ pada Tabel 2, dimana rata-rata terendah adalah 5,6 dan tertinggi adalah 6,8, hal ini menunjukkan bahwa desain antarmuka pengguna dan pengalaman pengguna sudah baik, dan menunjukkan pengguna atau masalah pengguna dapat teratasi . Dalam studi sebelumnya menyebutkan bahwa penggunaan metode Design Thinking menyebutkan bahwa penerpan metode ini dapat membantu meningkatkan pengalaman belajar solusi  mempromosikan kreativitas serta kolaborasi di dalam lingkungan pembelajaran virtual [33] dan pada penelitian lain mengatakan bahwa Design Thinking telah membantu menidentifikasi tantangan yang dihadapi pengguna dan menciptakan solusi yang lebih inovatif dan efektif [34]. Dari perbandingan tersebut dapat disimpulkan bahwa dalam penelitian ini, penggunaan Design Thinking dapat menghasilkan sebuah ide solusi dengan melewati berbagai tahapan Feedback yang didapat users saat melakukan tahap testing ini dapat digunakan untuk membantu pengembangan lebih lanjut dalam perancangan UI dan UX UMKM.EDU.

## IV. K ESIMPULAN
Dari hasil penelitian perancangan user interface dan user experience pada UMKM.EDU dengan metode Design Thinking dan berhasil mendapatkan pemecahan masalah yang dapat membantu UMKM untuk melakukan pembelajaran secara online untuk untuk meningkatkan penjualan dan keterampilan. Dengan adanya UMKM.EDU ini UMKM dapat terbantu untuk terus meningkatkan usaha dan penghasilan. Pada hasil Tes Single Ease Question (SEQ) mendapatkan rata-rata 5,6 hingga 6,8 dari 5 responden dan 5 tugas skenario. Dari hasil pengujian tersebut dapat ditarik kesimpulan bahwa flow atau aliran UX pada prototype yang dibuat mudah dipahami oleh pengguna dan memenuhi kebutuhan pengguna, serta umpan balik yang diterima dari responden UMKM dapat digunakan sebagai bantuan untuk Pengembangan dan Proses Membangun website UMKM.EDU.

## DAFTAR PUSTAKA
[1] Dahiya, S., Jaggi, S., Chaturvedi, K.K., Bhardwaj, A., Goyal, R.C. and Varghese, C., 2016. An eLearning System for Agricultural Education. Indian Research Journal of Extension Education, 12(3), pp.132-135.
[2] Waller, V. and Wilson, J. 2001. A definition for e-learning. TheODL QC Newsletter, pp. 1-2.
[3] R. Czarny et al. , “DESIGN THINKING REPORT Part 1,” no. C, pp. 1–14, 2020.
[4] Pressman, A. (2019). Design Thinking - A Guide To Creative Problem Solving For Everyone. Routledge.
[5] S. H. Cho and S. H. Kim, “Suggestion for Collaboration-Based UI/UX Development Model through Risk Analysis,” J. Inf. Process. Syst. , vol. 16, no. 6, pp. 1372–1390, 2020, doi: 10.3745/JIPS.04.0200.
[6] 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. [7] “The Basics of User Experience Design BY INTERACTION DESIGN FOUNDATION.”
[8] E. Susilo, F. Danang Wijaya, and R. Hartanto, “Perancangan dan Evaluasi User Interface Aplikasi Smart Grid Berbasis Mobile Application,”
2018.
[9] R. A. Yudarmawan, A. A. Kompiang, O. Sudana, D. Made, and S. Arsa, “Perancangan User Interface dan User Experience SIMRS pada Bagian Layanan,” 2020. [10] A. Nurlifa and S. Kusumadewi, Pro s id in g SNATIF Ke-1 Ta hun 2 01 4 ANALISIS PENGARUH USER INTERFACE TERHADAP KEMUDAHAN PENGGUNAAN SISTEM PENDUKUNG KEPUTUSAN SEORANG DOKTER . [Online]. Available: www.dxmate.com [11]
“Organum: Jurnal Saintifik Manajemen dan Akuntansi,” 2020, doi: 10.35138/organu.
[12] Kang, M. (2019). Customer service management in small and medium-sized enterprises. Journal of Open Innovation: Technology, Market, and Complexity, 5(2), 46. doi:10.3390/joitmc5020046
[13] Kurniawan, A., Ristiani, D., & Rismayani, R. (2021). The role of small and medium enterprises towards improving the economy in Salatiga City, Central Java. Journal of Legal, Ethical and Regulatory Issues, 24(1), 1-7.
[14] Fatimah, R., Sari, S. L., & Fuady, M. (2020). E-learning as a solution to improve entrepreneurial skills of micro, small, and medium enterprises (MSMEs) in Indonesia. In AIP Conference Proceedings (Vol. 2227, No. 1, p. 020079). AIP Publishing LLC.
[15] Purwanto, A., & Adisendjaja, Y. H. (2019). E-Learning Adoption in Indonesia: A Literature Review. International Journal of Emerging Technologies in Learning, 14(19), 150-165.
[16] Santia, T. (2020). Berapa Jumlah UMKM di Indonesia? Ini Hitungannya. Retrieved October 25, 2020, from Liputan6.com website: https://www.liputan6.com/bisnis/read/43 46352/berapa-jumlah-umkm-diindonesia-inihitungannya#:~:text=Menurut Badan Pusat Statistik (BPS,usaha yang beroperasi di Indonesia
[17] Krjogja.com, “Jumlah UMKM di Salatiga Mencapai 22.995 Usaha” https://www.krjogja.com/berita-lokal/read/494169/jumlah-umkm-di- salatiga-mencapai-22995-usaha#:~:text=Kepala%20Bidang%20UMKM%20pada%20Dinas,20%2F02%2F2023).
[18] Traxler, J. (2010). Distance and E-Learning in Transition: Learning Innovation, Technology, and Social Challenges. International Review of Research in Open and Distributed Learning, 11(3), 1-9.
[19] Liaw, S. S., Huang, H. M., & Chen, G. D. (2007). Surveying instructor and learner attitudes toward e-learning. Computers & Education, 49(4),
1066-1080. [20] Razi, A. A., Mutiaz, I. R., & Seti
[21] awan, P. (2018). Penerapan Metode Design Thinking Pada Model Perancangan Ui/Ux Aplikasi Penanganan Laporan Kehilangan Dan Temuan Barang Tercecer. Desain Komunikasi Visual, Manajemen Desain Dan Periklanan (Demandia), 3(02), 219. https://doi.org/10.25124/demandia.v3i02.1549. [22] Lynch, P. J., & Horton, S. (2016). Web style guide: Foundations of user experience design. Yale University Press.
[23] Ogedebe, P.M.,& Jacob, B.P. , 2012, Software Prototyping: A Strategy to Use When User Lacks Data Processing Experience. ARPN Journal of Systems and Software. VOL. 2, NO.6 , 2012, http://scientificjournals.org/journalofsystemsandsoftware/archive/vol2no6/vol2no6_4.pdf
[24] E. C. Gunderson, “Chapter 2: Background,” IAQ Investig. Guid. 2nd Ed., pp. 3–7, 2009, doi: 10.3320/978-1-931504-68-3.3.
[25] W. Budiaji, “The Measurement Scale and Number of Responses in Likert Scale,” J. Agric. Fish. Sci., vol. 2, no. 2, pp. 127–133, 2013, doi:
10.31227/osf.io/k7bgy. [26] Kemenku, “Mengenal Design Thinking” https://bppk.kemenkeu.go.id/balai-diklat-keuangan-pontianak/artikel/mengenal-design-thinking-278789
[27] Soedewu. S, Mustikawan. A, Swasty. W,”Penerapan Metode Design Thinking Pada Perancangan Website UMKM Kirihuci,” vol. 10, no. 2, April 2022.
[28] Kemenkopukm,”E-learning KUKM” https://edu.kemenkopukm.go.id/
[29] Vokasi, “Kursus Online” https://vokasi.co.id/program/kursus-online/
[30] Jurnal Moestopo,”Pemanfaatan Program E-Learning Di Era Pandemi Covid-19 Divisi Humas Kementrian Koperasi dan Usaha Kecil Menengah” https://journal.moestopo.ac.id/index.php/dinamika/article/view/2106
[31] Rizky. S. H, Putri. S. I, DKW. T. Y,”Pemanfaatan Smartphone dan Media Sosial Untuk Promosi Online Serta Aplikasi Pembukuan Guna Memaksimalkan Kemajuan Teknologi Pada UMKM Di Keluarga Joglo Kecamatan Banjarsari” Vol. 1, No. 1 (2020). [32] Jurnal Komunika, “Strategi Pemanfaatan E-Learning Berbasis Resource Sharing Untuk Pengembangan SDM UMKM”
https://jurnal.kominfo.go.id/index.php/komunika/article/view/2749
[33] Smith,J., & Johnson, A. (2018). Enchancing E-Learning through Design Thinking. Journal of Online Learning, 42(3), 156-170.
[34] Johnson, R., & Anderson, L. (2016). Applying Design Thinking to E-Learning Design: A Case Study. Educational Technology, 24(4), 42-55.