## JURNAL TEKNIK INFORMATIKA
Halaman Jurnal: http://jurnal.stmik-dci.ac.id/index.php/jutekin Halaman LPPM STMIK DCI : http://lppm.stmik-dci.ac.id
PERANCANGAN DESAIN ANTARMUKA APLIKASI PEMBELAJARAN ONLINE BERBASIS MOBILE MENGGUNAKAN METODE DESIGN THINKING
Akik Hidayat 1 , Hana Meilina Fauziyyah 2
Prodi Teknik Informatika, Universitas Padjadjaran Email : akik@unpad.stmik-dci.ac.id 1 , hana18003@mail.unpad.ac.id 2

## ABSTRAK
Aplikasi pembelajaran online sangat dibutuhkan oleh masyarakat yang ingin belajar. Banyak aplikasi pembelajaran online yang  tidak memperhatikan tampilan, sehingga  banyak yang tidak  tertarik dengan  aplikasinya.  Salah  satu  metode  untuk membuat  tampilan  adalah  menggunakan Design  Thinking.  Design  thinking juga merupakan sebuah framework atau model cara berpikir kreatif untuk memecahkan permasalahan yang dihadapi dan berfokus pada pengguna. Terdapat 5 tahap yang memungkinkan untuk memperoleh keluaran yang inovatif.
Kata Kunci : Pembelajaran online , desain antarmuka, user experience.

## I. PENDAHULUAN
Teknologi informasi terus berkembang dengan pesat.
Perkembangan  teknologi  ini  tentunya memberi perubahan pada gaya hidup manusia.  Berbagai  solusi  teknologi informasi  terbukti  mampu  berperan dalam meningkatkan layanan
pendidikan  dan  pembelajaran.  Salah satu  solusi  teknologi  informasi  yang cukup  populer  adalah  pembelajaran online
(online course) atau pembelajaran elektronik (e-learning).
Secara  umum,  pembelajaran online  mampu  mengatasi  berbagai persoalan, seperti jarak, waktu, biaya, dan terbatasnya sumber daya pengajar.  Karakteristik  kepraktisan online  course  yang  dapat  dibawa
kemanapun  menjadi  daya  tarik  bagi pengguna untuk memudahkan pembelajaran.  Hal  ini  berhubungan dengan tujuan dikembangkannya online  course  berbasis  mobile  untuk mempermudah masyarakat yang ingin belajar dimanapun dan kapanpun.
Sebagai  perusahaan  di  bidang teknologi informasi edukasi, PT Impact Byte  Teknologi  Edukasi  (Skilvul)  ingin membuat  sebuah  aplikasi  berbasis mobile  yang  dapat  memudahkan masyarakat  yang  ingin  belajar  di bidang Programming, Digital
Marketing,  UI/UX  Design,  Product Management,  dan  masih  banyak  lagi. Oleh  karena  itu,  pada  kegiatan penelitian ini penulis ditugaskan untuk menganalisis  dan  merancang  desain
antarmuka aplikasi online course yang lebih  user  friendly  dengan  tampilan yang menarik dan dapat meningkatkan motivasi  belajar  ketika  menggunakan platform tersebut.

## II. LANDASAN TEORI

## 2.1 User Interface
User  interface  atau  tampilan antarmuka  ini  memiliki  desain  yang berbeda beda berdasarkan fungsi dan kebutuhannya. Terkadang dalam suatu aplikasi  pembelajaran  online  tidak begitu memperhatikan desain antarmuka  sehingga  membuat  para penggunanya  merasa  tidak  nyaman dan sulit dalam menggunakan aplikasi tersebut.

## 2.2 User Experience
User experience (UX) merupakan  persepsi  seseorang  dan reaksi  seseorang  dalam  penggunaan sebuah produk, sistem, atau jasa.

## 2.3 Design Thinking
Design  thinking  adalah  metode kolaborasi yang mengumpulkan banyak  ide  dari  disiplin  ilmu  untuk memperoleh  sebuah  solusi.  Design thinking  juga  merupakan  sebuah framework  atau  model  cara  berpikir kreatif
untuk memecahkan
permasalahan  yang  dihadapi  dan berfokus  pada  pengguna.  Framework ini  dikenal  ketika  dipopulerkan  oleh David  Kelley  dan  Tim  Brown.  Dalam metode  ini  terdapat  5  tahap  yang memungkinkan  untuk  memperoleh keluaran yang inovatif.

## 1. Empathize
Pada  tahap  ini  melakukan analisis data analitis, melakukan survey
pengguna, dan melakukan FGD. Tujuan dari empathize adalah untuk membantu  desainer  dalam  mencari tahu  pandangan  dan  kebutuhan  dari target  penggunanya  dengan  research sebelum mendefinisikan problem statement dan melakukan ideation.
2. Define Proses pendefinisian akan membantu  desainer  dalam  tim  untuk mengumpulkan ide yang akan digunakan dalam pencarian ide terkait fitur, fungsi, dan elemen-elemen yang akan  memungkinkan  kita  untuk memecahkan  masalah  yang  ada. Proses  ini  memiliki  hasil  sebuah pernyataan singkat dan jelas atas hasil pemahaman aktivitas riset dan
inspirasi. 3. Ideate Ideate adalah tahap pengembangan ide atau biasa disebut dengan brainstorming. 4. Prototype Prototype menurut bahasa Indonesia  merupakan  rupa  awal  yang dibuat untuk mewakili skala sebenarnya  sebelum  dikembangkan sebelum dibuat dalam skala sebenernya. 5. Testing
Tahap  testing  atau  pengujian tidak  dapat  dipisahkan  dengan  tahap prototype  sebelumnya.  Prototype yang  sudah  dibuat  selanjutnya  akan diuji coba dengan cara mendemonstrasikannya kepada
pengguna.  Tahap  pengujian  memiliki tujuan  untuk  mendapatkan  umpan balik  dari  pengguna.  Testing  adalah
tahapan dimana akan didapat kesempatan  untuk  dapat  mengerti pengguna secara lebih dalam lagi.

## 2.4 Wireframe
Wireframe adalah  kerangka dasar  untuk  menyusun  atau  menata komponen-komponen  pada  laman website. Komponennya berupa banner,  header,  content,  footer,  link,
form , dan lain-lain.

## 2.5 Usability Testing
Usability  testing adalah  salah satu  kategori metode yang digunakan untuk  mengevaluasi  sebuah  produk dengan  mengujinya  langsung  pada pengguna.

## 2.6 In-Depth Interview
In-depth  interview merupakan metode pengumpulan data yang sering digunakan dalam penelitian kualitatif.
2.7 Single Ease Question (SEQ)
Single ease question merupakan salah  satu  metode  pengujian  yang digunakan untuk mengukur kemudahan  dan  kepuasan  yang dirasakan pengguna setelah
menyelesaikan semua task.
Tabel 2.1 Skala Likert Single Ease Question Nilai Interpretasi 1 Sangat Sulit 2-2,9 Sulit 3-3,9 Cukup Sulit 4-4,9 Cukup Mudah 5-5,9 Cukup Mudah 6-6,9 Mudah Nilai Interpretasi 7 Sangat Mudah
III. ANALISIS  DAN  PERANCANGAN SISTEM 3.1 Target Pengguna Aplikasi Target  pengguna  aplikasi  Learn App adalah masyarakat Indonesia yang berumur 18-55 tahun. Profesi pengguna  yang  diharapkan  yaitu pelajar, mahasiswa, atau karyawan/karyawati karena umumnya profesi ini membutuhkan peningkatan keterampilan  dan  wawasan.  Level ekonomi  yang  diharapkan  yaitu menengah keatas karena pada aplikasi ini  terdapat  beberapa  kelas  yang berbayar  dan  juga  membutuhkan jaringan internet yang cukup memadai.

## 3.2 Analisis Kebutuhan Aplikasi
Aplikasi  pembelajaran  online merupakan  aplikasi  yang  bertujuan untuk meningkatkan keterampilan dan wawasan  penggunanya.  Pada  aplikasi ini terdapat kelas-kelas yang diberikan dalam berbagai bidang. Berikut
perancangan  desain  aplikasi  yang dibutuhkan oleh pengguna :
1. Membuat desain halaman landing page 2. Membuat desain halaman login 3. Membuat desain halaman register 4. Membuat desain halaman homepage 5. Membuat desain halaman detail kelas 6. Membuat desain halaman sertifikat 7. Membuat desain halaman keranjang 8. Membuat desain halaman pembayaran 9. Membuat desain halaman notifikasi 10. Membuat desain halaman profil
IV. IMPLEMENTASI SISTEM 4.1 Proses Desain 1. Empathize Tujuan  dari  empathize  adalah untuk  membantu  desainer  dalam mencari tahu pandangan dan kebutuhan  dari  target  penggunanya dengan  riset  sebelum  mendifinisikan masalah.
2. Define Pada bagian ini penulis
membuat  pain  points  dan  how  might we  pada  FigJam.  Kemudian  di  analisa dan didapat hasil seperti berikut :
a. Pain Points
Berikut pain points yang penulis dapat adalah :
• Tampilan  aplikasi  yang  tidak menarik
• Aplikasi rumit untuk digunakan
• Materi  tidak  menarik  untuk dipelajari
• Tidak ada waktu untuk belajar
• Tidak ada hadiah ketika menyelesaikan kelas
• Banyak kelas yang berbayar
• Loading yang lama
• Aplikasi  sering  down  atau maintenance
• Soal yang diberikan  tidak diberi penjelasan ketika salah
b. How Might We
Berikut how  might  we yang penulis dapat :
• Memberikan variasi belajar
• Memberikan fitur yang menarik selain belajar
• Memberikan kelas gratis
• Memberikan materi yang mudah  dimengerti  oleh  semua kalangan

## 3. Ideate
Desain  awal  dibuat  dengan metode Crazy-8’s yang  masih  berupa gambaran kasar, lalu dibuat wireframe dan  UI-nya  menggunakan  Figma  dan didapat hasil sebagai berikut :
a. Solution Idea
Berikut  solusi  ide  yang  penulis dapat :
• Membuat sistem point
• Membuat fitur leaderboard bagi point tertinggi
• Membuat  kuis  di  setiap  akhir kelas
• Memberikan  sertifikat  setiap menyelesaikan kelas
• Membuat ice breaking ditengah pembelajaran
• Membuat  materi  yang  menarik dan disertai ilustrasi
• Dalam  satu  kelas  terdapat  2 macam materi yaitu berupa teks dan video
• Membuat  kualitas  video  bisa diatur oleh pengguna
• Membuat fitur download materi
• Membuat fitur pengingat untuk belajar
• Memberikan  giveaway  kelas gratis
b. Affinity Diagram
Dari solution idea, didapatkan 5 kelompok yaitu:
• Gamifikasi
• Materi Pembelajaran
• Promo
• Pengaturan Video
• Penyimpanan/Pengingat
c. Prioritization Diagram
Berikut prioritization diagram yang penulis buat :
Gambar 4.1

## Prioritization Idea
d. Crazy-8’s
Berikut Crazy-8’s yang  penulis buat:
Gambar 4.2 Crazy-8’s Halaman Pertama Gambar 4.3 Crazy-8’s Halaman Kedua

## 4. Prototype
Pada  proses  ini,  yang  dilakukan adalah mendesain interface dari Crazy- 8’s , menyusun UI menjadi sebuah flow proses  yang  sesuai  dengan  ide  solusi,
dan  membuat  prototype  yang  dapat digunakan untuk testing.
a. User Flow
Terdapat  3 user  flow pada pembuatan aplikasi Learn App :
Gambar 4.4
User Flow Login  dan Daftar Akun Gambar 4.5
User Flow Proses Pembelajaran
Gambar 4.6 User Flow Proses Transaksi
Pembelian Kelas
b. Wireframe
Wireframe dikenal sebagai low- fidelity design karena hanya berwarna hitam  putih  saja.  Berikut  beberapa halaman wireframe :
• Halaman login
Gambar 4.7 Wireframe Halaman Login
• Halaman register
Gambar 4.8
Wireframe Halaman Register
• Halaman homepage
Gambar 4.9
Wireframe Halaman Homepage
• Halaman detail kelas
Gambar 4.10
Wireframe Halaman Detail kelas
c. UI Design
Berikut  beberapa  halaman UI design :
• Halaman login
Gambar 4.11
UI Halaman Login
• Halaman register
Gambar 4.12
UI Halaman Register
• Halaman homepage
Gambar 4.13
UI Halaman Homepage
 Halaman detail kelas
Gambar 4.14 UI Halaman Detail Kelas

## 5. Testing
Pada tahap testing ini dilakukan evaluasi  setiap  ide  solusi  dan  juga
melakukan  interview  atau  online survey kepada pengguna.
a. Membuat Stimulus User Research b. Membuat Record Stimulus User Research
c. Melakukan Tahap Testing

## 4.2 Hasil Testing
Berdasarkan usability  testing yang sudah dilakukan dengan beberapa pengguna, penulis
mendapatkan  respon  yang  baik  dari pengguna.  Pengguna  juga  berhasil menyelesaikan  semua  task  dengan menjalankan figma  prototype dengan baik,  tetapi  pengguna  memberikan beberapa saran sebagai berikut :
• Pada halaman homepage sepertinya bisa ditambahkan fitur filter  atau  sorting,  sehingga pengguna  bisa  mencari  kelas berdasarkan harga atau
berdasarkan rating.
• Pada  halaman  homepage  juga bisa  ditambahkan  kategori  kelas gratis,  sehingga  pengguna  dapat mencoba  kelas  gratis  terlebih dahulu sebelum membeli kelas.
• Pada halaman kelas, bisa ditambahkan sesuatu seperti pop up atau notifikasi ketika pengguna belum selesai menonton
videonya.  Misal  video  berdurasi 30  menit  tetapi  pengguna  hanya baru menonton selama 5 menit.
• Pada  halaman  kelas  juga  bisa ditambahkan fitur deskripsi kelas. Bisa juga untuk materi pertamanya (introduction) jangan di  kunci,  sehingga  pengguna  bisa mencoba  materi.  Karena  misal pada  kelas  web  developer,  tidak
semua  orang  tahu  tentang  web developer  itu  seperti  apa  jadi pengguna harus tahu dulu materi awalnya  seperti  apa  sebelum membeli atau bergabung kelas.
• Selebihnya  sudah  cukup  bagus dan userflow-nya dapat
dimengerti oleh pengguna.

## 4.3 Iterasi Desain
Berikut iterasi desainnya :
Gambar 4.15
Penambahan Fitur Filter pada Homepage
Gambar 4.16 Penambahan Kategori Kelas Gratis
Gambar 4.17 Penambahan Pop Up untuk Menyelesaikan Video

## Gambar 4.18
Penambahan Deskripsi pada Halaman
Detail Kelas V. KESIMPULAN DAN SARAN 5.1 Kesimpulan Berdasarkan  berbagai  hal  yang telah disampaikan pada bab
sebelumnya serta perancangan desain antarmuka  yang  sudah  dilakukan penulis, maka dapat diambil simpulan sebagai berikut:
1. Metode  design  thinking  dapat memaksimalkan proses perancangan  desain  antarmuka aplikasi  Learn  App  karena menggunakan  sudut  pandang target pengguna aplikasi. Metode  ini  juga  membuat aplikasi Learn App menjadi lebih user  friendly.  Sehingga  hasil desain  lebih  tepat  dan  dapat langsung diberikan kepada frontend developer untuk diaplikasikan ke program. 2. Dengan  adanya  fitur  point,  ice breaking, dan leaderboard
dapat  memotivasi  pengguna agar lebih semangat belajar.
3. Berdasarkan hasil usability testing  menggunakan  penilaian single ease question, responden pertama memberikan nilai sebesar 7 dan responden kedua memberikan  nilai  6,5.  Oleh karena  itu,  aplikasi  Learn  App berhasil memberikan
pengalaman pengguna dan desain  yang  baik  untuk  aplikasi pembelajaran online.

## 5.2 Saran
Berdasarkan  hasil  penelitian yang  dilakukan,  penulis  memberikan saran sebagai berikut: 1. Pada  tahap  empathize,  dapat ditambahkan  responden  untuk mendapatkan lebih banyak
peran  pengguna  dan  memiliki data pertanyaan yang lebih luas. Dengan cara ini, pada penelitian selanjutnya  akan  dihasilkan  ide yang lebih inovatif.
2. Pada  proses  pengujian  usability disarankan  untuk  menambah instrumen  penilaian  lain  untuk mendapatkan hasil yang lengkap dan memenuhi setiap aspek. 3. Disarankan untuk mencari responden  yang  lebih  banyak berbicara sehingga dapat mengumpulkan  ide  yang  lebih inovatif lagi.

## DAFTAR PUSTAKA
AMALINA,  Sabika,  WAHID,  Fathul,
SATRIADI, Vebri, FARHANI,
Fionna  Saphira  and  SETIANI,
Novi, 2017. Rancang Purwarupa Aplikasi  UniBook  Menggunakan Metode  Pendekatan  Design Thinking. Seminar Nasional Aplikasi  Teknologi  Informasi (SNATi).  2017.  No.  Oktober,  p. 50–55.
FAHRUDIN,  Rifqi  and  ILYASA,  Reza, 2021.  PERANCANGAN  APLIKASI
"  NUGAS  "  MENGGUNAKAN METODE DESIGN THINKING DAN
AGILE  DEVELOPMENT.  .  2021.
Vol. 8, no. 1, p. 35–44. KARNAWAN, Gusti, 2021. Implementasi  User  Experience Menggunakan  Metode  Design Thinking Pada Prototype Aplikasi Cleanstic. Jurnal Teknoinfo. 2021.  Vol.  15, no. 1, p. 61. DOI 10.33365/jti.v15i1.540. LINARWATI, Mega, FATHONI, Azis and MINARSIH, Maria M, 2016. Studi Deskriptif Pelatihan Dan Pengembangan Sumberdaya Manusia Serta Penggunaan Metode Behavioral Event Interview Dalam Merekrut Karyawan  Baru  Di  Bank  Mega Cabang  Kudus.  Journal  of Management.  2016.  Vol.  2,  no.
2, p. 1.
LUH PUTRI ARI WEDAYANTI, Ni, KADEK AYU  WIRDIANI,  Ni  and  KETUT ADI  PURNAWAN,  I,  2019.
Evaluasi  Aspek  Usability  pada Aplikasi  Simalu  Menggunakan Metode Usability Testing. Jurnal Ilmiah Merpati (Menara Penelitian Akademika Teknologi Informasi). 2019. Vol. 7, no. 2, p. 113. DOI 10.24843/jim.2019.v07.i02.p03.

## NUNUNG  DWI  SUPRIYONO,ABDUL
AZIZ,  Wahyudi  Harianto,  2019. Analisis User Interface Dan User Experience  Pada  Game  Perang Komando Menggunakan Metode  Heuristic  Evaluation. Jurnal Pengembangan Teknologi Informasi  dan  Ilmu  Komputer.
2019. Vol. 2, p. 95–101.
PRADANA,  Aditya  Raka  and  IDRIS, Moh,  2021.  Implementasi  User
Experience  Pada  Perancangan User Interface Mobile E-learning Dengan  Pendekatan  Design Thinking.  Automata  [online]. 2021. Vol. 2, no. 2.
PUTRA,  M  Yusril  Nugraha  and  HUDA, Sheila  Nurul,  2021.  Literatur
Review  dengan  Pendekatan Pengembangan Design Thinking untuk  Sistem  Informasi  Studi Kasus SPP dan Beasiswa. Automata. 2021. Vol. 2, no. 2. RAZI, Aria Ar, MUTIAZ, Intan Rizky and SETIAWAN, Pindi, 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).  2018. Vol. 3, no. 02, p. 219.
SHIRVANADI,  Elda  Chandra  and  IDRIS, Moh,  2021.  Perancangan  Ulang UI/UX  Situs  E-Learning  Amikom Center  Dengan  Metode  Design Thinking  (Studi  Kasus:  Amikom Center). Automata. 2021.