Volume 5 Nomor 2, Desember 2022 e-ISSN : 2614-1574 p-ISSN : 2621-3249

## PENGEMBANGAN UI / UX PADA APLIKASI BUANA ONLINE COURSE MENGGUNAKAN METODE DESIGN THINKING (STUDI KASUS: UNIVERSITAS BUANA PERJUANGAN KARAWANG)

## UI / UX DEVELOPMENT BUANA ONLINE COURSE APPLICATION USING DESIGN THINKING METHOD (CASE STUDY: BUANA PERJUANGAN KARAWANG UNIVERSITY)
Aurel Adhitya Anwar 1 , Baenil Huda 2 , Elfina Novalia 3 , Tukino Paryono 4 , Seia Piantara 5 1,2,3,4 Universitas Buana Perjuangan Karawang, 5 Politeknik Tri Mitra Karya Mandiri si19.aurelanwar@mhs.ubpkarawang.ac.id 1

## ABSTRACT
E-learning is one of the most significant transformations carried out by almost all educational institutions. The outbreak of the Covid-19 pandemic has forced educational institutions to adjust their learning models. Buana Perjuangan Karawang University implements online learning. This of course cannot be separated from UI / UX, an user interface is defined as everything contained in an operating system that can be seen, touched, and can be understood directly by user. While user experience is everything related to the user experience in using services contained in a system. To get a UI / UX that can be easily understood by users visually and meet user needs, researchers designed a prototype with one of the methods of determining and designing a design, namely Design Thinking. Design Thinking is a method that repeatedly identifies problems and user needs in order to produce a design that is able to understand and offer innovative solutions  to users. Based on the test result, the prototype made for the Buana Onlince Course application answers the needs and problems of users. The final product that has passed direct testing by the user has presented a display that is not confusing, responsive, and represent the identify of Buana Perjuangan Karawang University.
Keywords: UI / UX, Design Thinking, Covid-19, E-learning

## ABSTRAK
Pembelajaran e-learning merupakan salah satu transformasi paling signifikan yang dilakukan oleh hampir seluruh lembaga pendidikan. Merebaknya pandemi Covid-19 membuat dan memaksa lembaga pendidikan menyesuaikan model pembelajaran mereka. Universitas Buana Perjuangan Karawang menerapkan pembelajaran secara online atau daring. Hal ini tentunya tidak lepas dari UI / UX, user interface didefinisikan merupakan segala sesuatu yang terdapat  dalam  sebuah  system  operasi  yang  dapat  dilihat,  disentuh,  dan  dapat  dimengerti  secara  langsung  oleh pengguna. Sementara user experience adalah segala sesuatu yang berkenaan dengan pengalaman pengguna dalam menggunakan layanan yang terdapat pada suatu system . Untuk mendapatkan UI / UX yang dapat mudah dipahami user secara visual dan memenuhi kebutuhan user , peneliti merancang sebuah prototype dengan salah satu metode penentuan  dan  perancangan  desain  yaitu design  thinking . Design  thinking merupakan  metode  yang mengidentifikasi permasalahan serta kebutuhan pengguna secara berulang agar menghasilkan suatu desain yang mampu memahami serta menawarkan solusi inovatif bagi pengguna. Berdasarkan hasil pengujian, prototype yang dibuat  untuk  aplikasi  Buana  Online  Course,  menjawab  kebutuhan  serta  permasalahan  pengguna.  Hasil  produk akhir  yang  melewati  pengujian  langsung  oleh user telah  menghadirkan  tampilan  yang  tidak  membingungkan, responsive, dan mewakili identitas Universitas Buana Perjuangan Karawang.
Kata Kunci: UI / UX, Design Thinking, Covid-19, E-learning

## PENDAHULUAN
Pembelajaran e-learning merupakan salah  satu  transformasi  paling  signifikan yang  dilakukan  oleh  hampir  seluruh lembaga pendidikan. Akhir-akhir  ini perkembangan teknologi semakin cepat dan berdampak  besar  pada  semua  lapisan masyarakat. (Tukino, 2019). Merebaknya
pandemi Covid-19 membuat dan memaksa lembaga  pendidikan  menyesuaikan  model pembelajaran  mereka. E-  learning dalam pendapat  Khan,  merupakan  inovasi  dari suatu pendekatan yang memusatkan peserta didik dalam pembelajaran interaktif, distribusi desain yang baik, serta memberikan  sarana  dan  prasarana  bagi
lingkungan pembelajaran. (Khan, 2005).
E-learning yang  mengintegrasikan kegiatan  pembelajaran  secara  daring, tentunya  tidak  terlepas  dari  desain  dan rancangan baik system maupun tampilannya. E-learning yang pada umumnya berbasis website, tentunya tidak terlepas  dari user  interface dan user experience.  User  interface didefinisikan merupakan  segala  sesuatu  yang  terdapat dalam  sebuah  sistem  operasi  yang  dapat dilihat,  disentuh,  dan  dapat  dimengerti secara langsung oleh pengguna (Interaction Design  Foundation,  t.t.).  Sementara User Experience adalah  segala  sesuatu  yang berkenaan  dengan  pengalaman  pengguna dalam menggunakan layanan yang terdapat pada suatu sistem(ISO, 2010; Muhyidin et al., 2020).
Penggunaan  desain  pada e-learning tentunya memerhatikan beberapa pedoman serta kaidah- kaidah dalam desain. Karena UI  dan  UX  yang  tepat  akan  mampu mengkomunikasikan  maksud  dan  tujuan para user atau penggunanya. Dalam hal ini adalah kegiatan pembelajaran, maka desain dengan kesan yang sesuai dengan kegiatan pembelajaran sangat sesuai diterapkan pada platform e-learning . (Muslim, 2018).
Salah  satu  metode  penentuan  dan perancangan desain adalah design thinking . Design  thinking merupakan  metode  yang mengidentifikasi permasalahan serta kebutuhan  pengguna  secara  berulang  agar menghasilkan  suatu  desain  yang  mampu memahami serta menawarkan solusi inovatif  bagi  pengguna. Design  thinking melakukan reframing permasalahan  agar prototype yang  dihasilkan  sesuai  dengan kebutuhan  dan  menjawab  permasalahan pengguna. (Swarnadwitya, 2020).
Design Thinking selain dapat menjawab  kebutuhan  pengguna  serta mendefinisikan  masalah  para  pengguna, juga  dapat  menghadirkan  desain  solusi yang sesuai dengan keadaan para penggunanya.  Beberapa  penelitian  yang menggunakan design thinking telah banyak dilakukan seperti (Chin dkk., 2019), (Razi dkk.,  2018),  dan  (Elsbach  &  Stigliani,
2018).
Maka  tujuan  dari  penelitian  kali  ini adalah  memahami  prosedur  penerapan metode design thinking pada aplikasi Buana Online Course serta meninjau dan memberikan  penilaian  apakah prototype design yang telah dibuat sudah sesuai untuk Buana Online Course.

## METODE
Ketika melakukan perancangan, prototype  design  untuk  aplikasi  Buana Online Course menggunakan metode design thinking maka tahapan-tahapan berdasarkan acuan  metode design  thinking yang dilakukan oleh peneliti dalam penelitian kali ini adalah sebagai berikut:
Gambar 1. Alur metode Design Thinking Dari model konspetual tersebut, maka penelitian kali ini dimulai dengan melakukan studi kepustakaan mengenai user interface,  user  experience, dan  metode design  thinking dari  referensi-referensi berupa artikel, jurnal, buku, ataupun sumber dari  internet  yang  relevan  serta  kredibel. Kemudian  informasi  tersebut  digunakan sebagai  bahan  kajian  dalam  penelitian. Adapun studi kepusatakaan yang digunakan
dalam  penelitian  kali  ini  antara  lain pedoman-pedoman dalam penentuan desain seperti teori warna, tata letak menu website, dan lain-lain yang menyesuaikan dan sesuai dengan  tujuan  ataupun  maksud  aplikasi Buana Course Online.

## Tahap Pengumpulan Data
1. Perancangan Desain Solusi
Dalam metode design thinking , tahap ini  merupakan  tahap  yang  paling  krusial karena  ide  ataupun  solusi  yang  telah dibentuk  sebelumnya  mulai  diwujudkan. Pada  tahap  kali  ini  dilakukan  pembuatan prorotype desain  yang  disesuaikan  dengan kebutuhan serta fungsi yang ditawarkan oleh e-learning Buana Online Course.
2. Pengujian Desain Solusi Pengujian dilakukan
dengan memberikan  syarat  kepada  para  pengguna untuk menjalankan prototype sesuai dengan prosedur kemudian melakukan penilaian.
Dari tahap ini dapat diketahui, apakah pengguna merasa kesulitan dalam mengoperasikan  serta  dapat  mengetahui kelemahan desain yang telah dibuat dari sisi pengguna.
3. Analisis Hasil
Fase  analisis  hasil  dilakukan  untuk mengetahui  apakah  metriks-metriks  yang ditentukan belum atau sudah tercapai.
4. Kesimpulan dan Saran Penulisan  kesimpulan  dan  saran dilakukan ketika hasil dari ujicoba pengujian  desain  solusi dan  hasil  analisis telah  sesuai  dengan  yang  diharapkan.  Isi kesimpulan  berisi  mengenai  hasil  analisis yang dilakukan pada fase pengujian desain solusi dan analisis hasil

## HASIL DAN PEMBAHASAN
Hasil  penelitian  yang  dilakukan dengan  menggunakan  metode Design Thinking mengidentifikasikan elemen- elemen krusial yang harus ditetapkan dalam merancang prototype aplikasi  Buana Online Course, yaitu:

## 1. Empati
Pada tahap ini, dilakukan pemahaman terhadap  masalah  yang  dihadapi  oleh pengguna.  Pada  tahap  empati  peneliti mengumpulkan informasi tentang ketersediaan sumber daya, kebiasaan pengguna,  permasalahan  yang  terjadi,  dan sebagainya  guna  mendefinisikan  masalah serta membuat desain solusi. Oleh karena itu pada tahao ini dilakukan pengumpulan data untuk  menunjang  proses  yang  akan dilakukan selanjutnya.

## 2. Pengumpulan Data
Dalam pembangunan aplikasi, metode yang  digunakan  dalam  tahap  pengumpulan data  adalah  studi  literatur.  Studi  Literatur adalah proses pencarian referensi atau acuan teori  yang  berhubungan  dengan  kasus permasalahan yang dihadapi. Referensi bisa didapatkan  dari  buku,  jurnal,  artikel,  dan situs  –  situs  di  internet.  Hasil  penelitian studi  literatur  ini  merupakan  kumpulan referensi untuk rumusan masalah. Tujuannya  adalah  untuk  mendapatkan landasan  teori  untuk melakukan  penelitian dan  landasan  untuk  perencanaan  desain prototype mobile application Buana Online Course.

## 3. Definisi Masalah
Keluhan  mengenai  desain  website e- learning yang  telah  dibuat  Universitas Buana  Perjuangan  Karawang  dianggap kurang responsive dan  menarik  untuk mobile .  Maka  pengembangan  aplikasi Buana Online Course terutama untuk mobile dianggap penting untuk dilakukan.

## 4. Analisis Masalah Pengguna
Definisi  masalah  berdasarkan  data yang  didapat  dari  tahap  empati,  dapat menyimpulkan  permasalahan  yang  dialami pengguna.  Permasalahan  umum  yang dihadapi  oleh  pengguna  adalah  desain e- learning yang  telah  tersedia  dianggap kurang mewakili kebutuhan mereka terutama jika diakses menggunakan mobile . Pengguna mengeluhkan desain yang kurang responsive,  kurang  menarik,  dan  tidak
praktis untuk mobile .

## 5. Analisis Kebutuhan Pengguna
Dari  permasalahan  tersebut,  dapat disimpulkan  kebutuhan  yang  sesuai  untuk para pengguna adalah aplikasi yang mudah digunakan,  mudah  dipahami  dan  tidak membingungkan, menarik, serta menjamin keamanan data pengguna.

## 6. Penentuan Ide atau Solusi
Permasalahan
yang telah didefinsikan  oleh  peneliti  maka  ide  atau solusi yang dapat dirumuskan oleh peneliti disajikan dalam tabel berikut ini:
Gambar 2. Tampilan UI dan UX Halaman Login pada Apliasi Buana Online Course
Gambar 3. Tampilan UI dan UX Halaman Home pada Aplikasi Buana Online Course
Gambar 4. Tampilan UI dan UX Halaman Account pada Aplikasi Buana Online Course
Gambar 5. Tampilan UI dan UX Halaman Course pada Aplikasi Buana Online Course
Gambar 6. Tampilan UI dan UX Halaman Calendar pada Aplikasi Buana Online Course

## Gambar 7. Tampilan UI dan UX Nilai pada
Aplikasi Buana Online Course
Setelah  dibuat prototype desain  UI untuk  aplikasi Buana Online Course, maka dibuat  scenario  sederhana  penggunaan aplikasi  untuk  menjelaskan  UX  yang didesain  untuk  aplikasi  Buana  Online Course. Skenario sederhana tersebut
disajikan  dalam  langkah-langkah  sebagai berikut :
1. Pengguna (mahasiswa) melakukan login dengan input username atau email serta  password  agar  dapat  mengakses aplikasi Buana Online Course.
2. Setelah  berhasil  login,  pengguna  akan dialihkan  menuju  halaman  home  yang menampilkan  beberapa course yang diikuti  mahasiswa  dan  beberapa  menu yang dapat diakses melalui ikon bar di bagian bawah tampilan menu home
3. Terdapat  4  menu  yang  dapat  diakses mahasiswa  yakni  menu  Account, Course, Calendar, dan Nilai.
4. Jika pengguna memilih menu Account maka  tampilan  yang  muncul  adalah data  diri  pengguna  Buana  Online Course  berupa  detail  pengguna  yang berisi alamat email, kelas yang diikuti, dan  nomor  handphone.  Sementara tampilan yang lainnya adalah aktivitas login yang menunjukkan aktivitas login pengguna.
5. Lalu jika memilih menu Course, maka yang  muncul  adalah  seluruh  mata kuliah  yang  diikuti  oleh  mahasiswa. Selain menampilkan secara
keseluruhan, terdapat tampilan mendetail mata kuliah yang dibagi tiap pertemuan. Pada menu course pengguna dapat  melakukan  pengumpulan  tugas, pengunduhan  materi,  serta  mengisi daftar hadir mengikuti perkuliahan pada minggu sesuai dengan jadwal.
6. Menu Calendar berisi calendar akademik  yang  berlaku  selama  masa perkuliahan dan tahun ajaran berlangsung. Selain itu terdapat reminder  atau  pengingat  mengenai deadline  yang  dimiliki  oleh  pengguna berupa  nama  mata  kuliah,  pengerjaan tugas, serta absensi kehadiran.
Menu terakhir adalah menu Nilai yang dapat diakses pengguna untuk mengetahui nilai atas mata kuliah yang telah ditempuh. Tampilan menu Nilai ini dihadirkan dalam bentuk tabel yang memuat informasi nama mata  kuliah  dan  nilai  yang  diberikan.serta nilai yang diberikan oleh dosen.

## 7. Pengujian Desain Solusi
Pengujian desain solusi dilakukan oleh peneliti yang berperan sebagai user aplikasi Buana  Online  Course  lalu  menguji  atau menggunakan semua fungsi dan memberikan feedback berupa  pengalaman user dalam  menggunakan  aplikasi  Buana Online  Course.  Fungsi  dari feedback ini ialah untuk mendapatkan hasil serta solusi selanjutnya  demi  meningkatkan  aplikasi Buana Online Course.
Setelah  semua  selesai  dilakukan, didapatkan  analisis  hasil atas  umpan  balik oleh user bahwa  semua  tombol  dan  menu aplikasi  diarahkan  ke halaman yang benar dan berfungsi. Selain dari itu desain  tampilan  atau  UI  dari  aplikasi Buana  Online  Course  dinilai  sudah minimalis  dan  nyaman  di  mata  serta mewakili  identitas  Universitas  Buana Perjuangan Karawang .

## SIMPULAN
Pengembangan UI / UX pada aplikasi Buana  Online  Course  dengan  metode Design  Thinking  dimaksudkan  untuk memfasilitasi  kebutuhan  pengguna  serta
memberikan  solusi  atas  permasalahan pengguna melalui desain solusi. Implementasi metode design thinking pada penelitian  kali  ini  terdiri  atas  empati, definisi  masalah,  menentukan  ide  atau solusi,  rancangan  desain  solusi,  dan pengujian  desain  solusi.  Prototype  yang dibuat untuk aplikasi Buana Online Course sudah  cukup  menjawab  kebutuhan  serta permasalahan  pengguna.  Hasil  produk akhir  yang  melewati  pengujian  langsung oleh user telah  menghadirkan  tampilan yang  tidak  membingungkan,  responsive, dan  menarik.  Oleh  karena  itu  pengujian aplikasi Buana Online Course telah berjalan dengan baik.

## DAFTAR PUSTAKA
Chin,  D.  B.,  Blair,  K.  P.,  Wolf,  R.  C.,
Conlin,  L.  D.,  Cutumisu,  M., Pfaffman,  J.,  &  Schwartz,  D.  L. (2019).  Educating  and  measuring choice: A test of the transfer of design thinking  in  problem  solving  and learning. Journal  of  the  Learning Sciences , 28 (3), 337-380.
Chin,  D.  B.,  Blair,  K.  P.,  Wolf,  R.  C., Conlin,  L.  D.,  Cutumisu,  M., Pfaffman,  J.,  &  Schwartz,  D.  L. (2019).  Educating  and  measuring choice: A test of the transfer of design thinking  in  problem  solving  and learning. Journal  of  the  Learning Sciences , 28 (3), 337-380.
Elsbach,  K.  D.,  &  Stigliani,  I.  (2018). Design  thinking  and  organizational culture: A review and framework for future research.
Journal of
Management, 44 (6), 2274-2306. Interaction Design Foundation. (T.T.). User Interface  (UI)  Design .  Interaction Design Foundation.
ISO. (2010). Ergonomics Of Human System Interaction  -  Part  210:  Human- Centered  Design  For  Interactive System . ISO.
Khan,  B.  (2003).  Managing  e-learning strategies: Design, delivery. Englewood Clis: Educational Technology
Publications .
Kristiadi,  D.  P.,  Udjaja,  Y.,  Supangat,  B., Prameswara, R. Y., Warnars, H. L. H. S.,  Heryadi,  Y.,  &  Kusakunniran, W. (2017,  November).  The  effect  of  UI, UX and GX on video games. In 2017 IEEE  International  Conference  on
Cybernetics and Computational Intelligence  (CyberneticsCom) (pp.
158-163). IEEE.
Muhyidin,  M.  A.,  Sulhan,  M.  A.,  & Sevtiana,  A.  (2020).  Perancangan Ui/Ux  Aplikasi  My  Cic  Layanan
Informasi Akademik Mahasiswa Menggunakan Aplikasi Figma. Jurnal Digit, 10 (2), 208-219.
Muslim,  M.  (2018).  Desain  Aplikasi  E- learning  pada  Platform  Facebook
Menggunakan  Facebook  Application Programing Interface. Jurnal MEKOM (Media Komunikasi Pendidikan Kejuruan) , 5 (2), 81-86.
Pramudita, R., Arifin, R. W., Alfian, A. N.,
Safitri, N., & Anwariya, S. D. (2021). Penggunaan  Aplikasi  Figma  Dalam Membangun  Ui/Ux  Yang  Interaktif
Pada Program Studi Teknik Informatika Stmik Tasikmalaya. Jurnal Buana Pengabdian, 3 (1), 149- 154.
Razi,  A.  A.,  Mutiaz,  I.  R.,  &  Setiawan,  P.
(2018).  Penerapan  Metode  Design Thinking  Pada  Model  Perancangan Ui/Ux  Aplikasi  Penanganan  Laporan Kehilangan  Dan  Temuan  Barang Tercecer. Demandia:  Jurnal  Desain Komunikasi Visual,
Manajemen Desain,  dan  Periklanan , 3 (02),  219-
237.
Swarnadwitya, A. (2020). Design Thinking: Pengertian,  Tahapan  dan  Contoh Penerapannya. sis. binus. ac. id , 17 . Tukino,  R.  &.  (2019).  Penggunaan  website sebagai media promosi. Jurnal Pengabdian
Masyarakat Multidisiplin , 2 (2), 113–118.