## PERANCANGAN PROTOTIPE MILESTONE WEBSITE OK OCE MENGGUNAKAN DESIGN THINKING PADA FIGMA

## M. Huannur Asyary Muryanto, Apriade Voutama
Sistem Informasi, Universitas Singaperbangsa Karawang Jl. HS. Ronggo Waluyo Karawang, Indonesia 2110631250047@student.unsika.ac.id

## ABSTRAK
Perkembangan  era  digital  menuntut  keberadaan  website  sebagai  elemen  penting  dalam  memperluas jangkauan bisnis dan meningkatkan aksesibilitas pengguna. Penelitian ini berfokus pada perancangan milestone website OK OCE menggunakan metode Design Thinking dan aplikasi figma. Tujuan penelitian ini adalah untuk meningkatkan fungsionalitas dan efektivitas website OK OCE melalui pengembangan milestone yang berorientasi pada pengguna. Metode Design Thinkin g digunakan dalam lima tahap, yaitu Empathize , Define, Ideate, Prototype, dan Test , untuk memahami kebutuhan pengguna, merumuskan solusi, menghasilkan ide, membuat prototipe, dan menguji  desain.  Hasil  pengujian  dengan  metode Usability  Testing  (UT )  dan System  Usability  Scale  (SUS ) menunjukkan bahwa prototipe milestone website OK OCE berhasil meningkatkan fungsionalitas dan efektivitas website, dengan nilai rata-rata sebesar 82, yang masuk dalam kategori Best Imaginable dengan grade B. Namun, pengujian lanjutan dengan melibatkan pengguna aktual diperlukan untuk memastikan kesesuaian dan kepuasan pengguna.  Kesimpulannya,  prototipe  ini  menunjukkan  potensi  untuk  menjadi  solusi  yang  lebih  efektif  dalam memenuhi kebutuhan pengguna dan mencapai tujuan yang ditetapkan.
Kata kunci :  Website, Milestone, OK OCE, Design Thinking, Figma, Prototipe

## 1. PENDAHULUAN
Pada era digital yang semakin berkembang pesat, keberadaan website telah  menjadi  salah  satu  elemen penting  dalam  memperluas  jangkauan  bisnis  dan menyediakan  aksesibilitas  yang  lebih  baik  bagi pengguna  [1].  Dalam  konteks  ini,  perancangan milestone pada sebuah website memiliki peranan yang signifikan dalam memastikan kelancaran pengembangan  serta  meningkatkan  pengalaman pengguna[2]. Salah satu platform yang menjadi fokus dalam  perancangan  ini  adalah  OK  OCE,  yang merupakan sebuah website yang menawarkan berbagai layanan terkait pelatihan dan pengembangan kewirausahaan. Dalam upaya meningkatkan fungsionalitas dan efektivitas website ini, penelitian ini akan menggunakan metode perancangan menggunakan aplikasi figma [3].
Dalam  penelitian  ini,  pendekatan  perancangan akan  digunakan  untuk  mengembangkan milestone pada website OK OCE menggunakan platform figma. Metode  perancangan  ini  memungkinkan  untuk menggambarkan  secara  visual  berbagai  konsep  dan iterasi  desain  yang  akan  diimplementasikan  dalam pengembangan website .  Dengan  pendekatan  ini, diharapkan  dapat  memperoleh  hasil  yang  optimal dalam  meningkatkan  kualitas  dan  fungsionalitas website OK OCE.
Meskipun  OK  OCE  telah  memberikan  platform yang  bermanfaat  bagi  pelaku  usaha,  beberapa hambatan dan kekurangan muncul dalam penggunaannya.  Penerapan milestone diharapkan dapat  mengatasi  beberapa  masalah  ini,  seperti peningkatan  navigasi,  pengoptimalan  performa,  dan peningkatan interaktivitas aplikasi [4].
Tujuan  dari  penelitian  ini  adalah  untuk mengembangkan milestone yang efektif dan
berorientasi  pada  pengguna  pada website OK  OCE melalui penerapan metode perancangan menggunakan aplikasi  figma.  Dengan  demikian,  diharapkan  dapat meningkatkan  navigabilitas,  fungsionalitas,  dan kepuasan pengguna dalam menggunakan layanan yang disediakan oleh website tersebut.
Penelitian ini membangun pada temuan dan hasil penelitian terdahulu yang terkait dengan pengembangan aplikasi dan peningkatan pengalaman pengguna. Beberapa penelitian yang relevan mencakup strategi pengembangan aplikasi e- commerce , penerapan milestone dalam desain UI/UX, dan peningkatan performa aplikasi berbasis bisnis.
Dari  pembahasan  tersebut,  peneliti  terdorong untuk membuat rancangan prototipe milestone website OK  OCE  menggunakan  figma,  dimana  penelitian  ini mencakup konsep-konsep dasar mengenai pengembangan  aplikasi,  prinsip  desain  UI/UX,  dan konsep milestone dalam  pengembangan  perangkat lunak.  Dengan  memahami  landasan  teori  ini, penelitian  ini  dapat  merumuskan  langkah-langkah yang  tepat  dalam  penerapan milestone pada  aplikasi OK OCE menggunakan figma.

## 2. TINJAUAN PUSTAKA

## 2.1. Figma
Figma  merupakan  salah  satu  alat  desain  yang sering digunakan untuk menciptakan tata letak aplikasi mobile,  desktop,  situs  web,  dan  lainnya.  Aplikasi  ini dapat diakses melalui sistem operasi Windows, Linux, atau  Mac  dengan  koneksi  internet.  Salah  satu kelebihan  utama  figma  adalah  kemampuannya  untuk memungkinkan  beberapa  orang  bekerja  bersama dalam  proyek  yang  sama,  meskipun  berada  di  lokasi yang berbeda. Ini memfasilitasi kolaborasi tim secara efektif, memungkinkan pekerjaan yang sama
dilakukan  secara  bersama-sama  dengan  cepat. Kemampuan  ini  membuat  figma  menjadi  pilihan populer bagi desainer UI/UX untuk membuat prototipe situs web atau aplikasi dengan cepat dan efisien [5].

## 2.2. UI
Menurut Wilbert O. Galitz (2007), user interface (UI)  merujuk  pada  bagian  dari  komputer  dan perangkat  lunak  yang  dapat  diakses  oleh  manusia melalui tampilan visual, suara, sentuhan, atau bahkan interaksi verbal. Ini mencakup teknik dan mekanisme yang  digunakan  dalam  tampilan  antarmuka  untuk berinteraksi  dengan  pengguna.  Dengan  demikian,  UI mengatur  cara  tampilan  antarmuka  sistem  komputer dan  perangkat  lunak  disusun  untuk  memfasilitasi interaksi  yang  menyenangkan  antara  pengguna  dan sistem.  UI  juga  merupakan  hasil  akhir  dari  user experience (UX) yang terlihat.
Desain UI/UX dari sebuah website , aplikasi, dan sistem  harus  dirancang  sedemikian  rupa  sehingga memudahkan  pengguna  dalam  pengoperasiannya. Desain  UI/UX  yang  efektif  akan  menciptakan kenyamanan  bagi  pengguna  dan  mendorong  mereka untuk  menggunakan  aplikasi  tersebut  dalam  jangka waktu yang lebih lama [6].

## 2.3. UX
Menurut  ISO  9241-210  (2009),  UX  adalah respons  dan  persepsi  pengguna  yang  muncul  sebagai hasil  dari  penggunaan  produk,  sistem,  atau  layanan. UX  mencakup  bagaimana  pengguna  merasakan kesenangan  dan  kepuasan  saat  menggunakan  produk tersebut atau berinteraksi dengannya. UX tidak dapat direncanakan  oleh  desainer,  tetapi  desainer  dapat merancang  produk  yang  mampu  menghasilkan pengalaman pengguna yang positif.
Desain  Pengalaman  Pengguna  (UX  Design) adalah  proses  merancang  produk  yang  bermanfaat, mudah digunakan, dan menyenangkan untuk digunakan, menurut Miklos Philips (2019). Proses ini bertujuan untuk meningkatkan keseluruhan pengalaman  pengguna  saat  berinteraksi  dengan produk, dan memastikan bahwa pengguna menemukan  nilai,  kepuasan,  dan  kesenangan  dalam penggunaannya [6].

## 3. METODE PENELITIAN
Perancangan website dalam  penelitian  ini mengadopsi  metode  Design  Thinking,  dengan  fokus pada  pemikiran,  perasaan,  dan  perilaku  pengguna. Terdapat lima tahapan dalam metode Design Thinking , yaitu emphatize , define , ideation , prototype , dan test . Dengan memahami dan menerapkan lima tahapan ini dalam  proses  perancangan,  masalah  kompleks  yang dihadapi oleh pengguna dapat diatasi (Dam & Siang, 2020) [7].
Gambar 1. Metode Design Thinking
Pada  gambar  1,  dapat  dilihat  bahwa  metode design  thinking  terdiri  dari  5  tahapan.  Berikut penjelasan mengenai 5 tahap metode design thinking.

## 3.1. Empathize
Fase  Empathize  bertujuan  untuk  memahami pengalaman  pengguna  serta  masalah  yang  dihadapi pada website atau  aplikasi,  dan  menggunakan informasi  yang  diperoleh  dari  pengalaman  pengguna untuk  menghasilkan  solusi  yang  lebih  sesuai  dengan kebutuhan  pengguna  [8].  Pada  tahap  ini  penulis melakukan  wawancara  yang  berkaitan  dengan perancangan milestone pada website OK  OCE, berdasarkan kendala yang dialami oleh pengguna.

## 3.2. Define
Tahap  define  bertujuan  untuk  menciptakan desain  UI/UX  yang  lebih  efektif  dan  efisien,  serta memastikan  bahwa  desain  tersebut  sesuai  dengan kebutuhan  pengguna.  Pada  fase  ini,  data  yang diperlukan  untuk  meningkatkan  desain  UI/UX dikumpulkan,  termasuk  identifikasi  masalah  yang dihadapi pengguna saat menggunakan sistem tersebut [9].  Dari  permasalahan  yang  dialami  sebelumnya, kemudian  muncul beberapa solusi  yang  ditambahkan agar  memudahkan  pengguna  dalam  menggunakan website OK OCE.

## 3.3. Ideate
Dalam tahapan ideate, akan dilakukan pengembangan  ide  solusi  berdasarkan  masalah  yang telah diidentifikasi dari tahapan define. Ide-ide solusi yang dihasilkan akan kemudian diimplementasikan ke dalam  rancangan  user  interface  dan  prototipe  [10]. Dalam tahap ini, penulis membuat alur bagan, sebagai gambaran  awal  dari  pembuatan  prototipe  dari perancangan milestone pada website OK OCE.

## 3.4. Prototipe
Pada  tahap  Prototyping,  ide-ide  solusi  yang dihasilkan  dari  tahap  Ideate  dikumpulkan  dan digunakan  untuk  membuat  prototipe.  Pembuatan prototipe  merupakan  langkah  penting  dalam  menguji dan  memvalidasi  ide-ide  solusi,  serta  menciptakan desain UI/UX yang lebih efektif dan efisien [11]. Pada tahap  ini,  penulis  membuat prototipe dari  kebutuhan
pengguna, agar kendala yang sebelumnya dialami oleh pengguna dapat terselesaikan.

## 3.5. Test
Tahapan  pengujian  juga  memiliki  tujuan  yang serupa  dengan  tahapan  sebelumnya,  yaitu  untuk memastikan  desain  UI/UX  yang  lebih  sesuai  dengan kebutuhan  pengguna.  Ini  mencakup  identifikasi masalah yang dihadapi oleh pengguna saat menggunakan  sistem  UI/UX  [12].  Metode Usabiliy Testing (UT) dan System  Usability  Scale  (SUS) merupakan metode yang digunakan oleh penulis dalam menyebarkan kuesioner.

## 4. HASIL DAN PEMBAHASAN
4.1. Empathize Fase emphatize dalam penelitian ini mencerminkan pengumpulan informasi tentang pengalaman pengguna serta identifikasi masalah yang dihadapi  oleh  mereka.  Dalam  konteks website OK OCE,  masalah  pengguna  telah  teridentifikasi  melalui bukti  bahwa  sejumlah  pengguna  tidak  mengisi  data pribadi dan tidak bergabung ke penggerak. Kondisi ini mengakibatkan pengguna mengalami kesulitan dalam menggunakan website OK OCE dengan efektif.
Tabel 1. Tabel Daftar Pertanyaan
No. Daftar Pertanyaan 1 Kenapa  banyak  dari  pengguna  yang  tidak melengkapi data pribadi?
2 Bagaimana agar pengguna bisa melengkapi data pribadi pada website OK OCE?
3 Apa  yang  menyebabkan  pengguna  tidak bergabung ke penggerak OK OCE?
4 Bagaimana  agar  pengguna  bergabung  ke penggerak OK OCE?

## 4.2. Define
Dalam  konteks  penelitian  ini,  tahap  define bertujuan untuk  merumuskan  pemahaman  yang lebih mendalam  tentang  masalah  yang  dihadapi  pengguna. Berdasarkan  bukti  bahwa  sebagian  pengguna  tidak mengisi data pribadi dan profil usahanya, tahap define akan  menggali  lebih  dalam  tentang  akar  masalah tersebut.  Langkah  selanjutnya  adalah  memetakan masalah  dengan  lebih  spesifik  dan  merumuskan kebutuhan  pengguna  yang  mendasar.  Hal  ini memungkinkan  perancang  untuk  memahami  secara lebih rinci tantangan yang dihadapi oleh pengguna dan merancang  solusi  yang  sesuai  dengan  kebutuhan mereka.
Tabel 2. Tabel Daftar Kebutuhan
No.

## Daftar Kebutuhan
1 Penambahan  fitur milestone pada  halaman beranda
2 Adanya milestone untuk memudahkan
pengguna dalam melengkapi data pribadi 3 Adanya milestone untuk memudahkan pengguna  dalam  bergabung  ke  penggerak  OK OCE
4 Penggunaan aplikasi ysng responsif

## 4.3. Ideate
Dalam  proses  ini,  dilakukan  brainstorming  dan generasi  berbagai  ide  untuk  menemukan  solusi  yang paling  sesuai  dengan  kebutuhan  pengguna.  Ide-ide solusi  ini  kemudian  direalisasikan  ke  dalam  desain user interface dan prototype.
Gambar 2. Alur Milestone Website OK OCE
Pada  gambar  2,  merupakan  alur milestone website OK  OCE.  Pengguna  dimulai  dengan mengakses  dashboard,  di  mana  mereka  wajib  untuk untuk  melengkapi  data  pribadi  mereka.  Selanjutnya, mereka diberi opsi untuk mengisi profil usaha mereka. Setelah  itu,  mereka  dapat  bergabung  dengan  usaha yang tersedia di platform.

## 4.4. Prototipe
Prototipe  ini  dibuat  berdasarkan  ide-ide  solusi yang  muncul  dari  tahap  Ideate.  Tujuannya  adalah untuk menguji dan memvalidasi ide-ide tersebut serta menciptakan  desain  UI/UX  yang  lebih  efektif  dan efisien.

## 4.5. Tampilan Beranda
Gambar 3. Tampilan Beranda OK OCE
Pada  gambar  3,  pengguna  dapat  melihat milestone yang telah dibuat.

## 4.6. Tampilan Data Pribadi
Gambar 4. Tampilan Data Pribadi Sebelum Submit
Gambar 5. Tampilan Data Pribadi Setelah Submit
Pada gambar 4, pengguna dapat mengakses menu Lengkapi  Data  Pribadi.  Sedangkan  pada  gambar  5, pengguna  sudah  melakukan  pengisian  data  pribadi, kemudian melakukan submit .

## 4.7. Tampilan Profil Usaha
Gambar 6. Tampilan Profil Usaha
Pengguna mempunyai opsi dalam mengisi profil usaha.

## 4.8. Tampilan Penggerak
Gambar 7. Tampilan Penggerak
Setelah itu, pengguna supaya bergabung dengan penggerak.

## 4.9. Test
Pengujian  dilakukan  dengan  metode  System Usability  Testing  (SUS).  Kuesioner  dengan  10 pertanyaan dibuat untuk mengukur persepsi pengguna terhadap  kegunaan  aplikasi.  Pengguna  diminta memberikan  penilaian  menggunakan  skala  1-5  dari "sangat tidak setuju" hingga "sangat setuju" terhadap berbagai  aspek  pengalaman  pengguna,  mulai  dari kemudahan  penggunaan,  kejelasan  informasi,  hingga kepuasan  keseluruhan  dalam  menggunakan  website OK  OCE.  Responden  merupakan  narasumber  yang diwawancarai  pada  tahap  empathize.  Prototipe aplikasi  akan  diberikan  kepada  responden  untuk mencoba semua fitur dari aplikasi.
Tabel 3. Kuesioner No Pertanyaan 1 Saya merasa mudah untuk menavigasi
website OK OCE.
2 Informasi yang disajikan di website OK OCE jelas dan mudah dipahami.
3 Milestone yang ditambahkan membantu saya dalam melengkapi data pribadi.
4 Desain antarmuka pengguna (UI) dari website OK OCE efektif dalam membantu saya mencapai
tujuan saya.
5 Saya puas dengan pengalaman menggunakan OK OCE.
6 Milestone membuat interaksi saya dengan website lebih terarah.
7 Saya merasa mudah untuk melengkapi data pribadi dan profil usaha di website ini.
8 Website OK OCE berhasil mendorong saya untuk bergabung ke penggerak.
9 Saya merasa milestone yang dibuat memiliki fitur- fitur yang berguna
10 Saya merasa milestone pada website OK OCE sudah responsif
Hasil  skor  dari  5  responden  yang  telah melakukan survei SUS dapat dilihat pada table berikut.
Tabel 4. Skor SUS Pertanyaan R1 R2 R3 R4 R5 P1 4 3 3 4 3 P2 3 4 3 3 3 P3 3 3 4 3 3 P4 3 3 4 2 3 P5 4 2 3 4 3 P6 4 3 3 3 4 P7 3 2 4 3 3 P8 3 5 3 5 3 P9 3 3 3 3 4 P10 4 3 3 3 4 Jumlah 34 31 33 33 33 Nilai *2,5 85 77,5 82,5 82,5 82,5
Keterangan : P = Pertanyaan R = Responden
Selanjutnya,  hasil  tersebut  akan  dimasukkan  ke dalam rumus, yang akan menghasilkan nilai akhir dari pengujian  System  Usability  Testing  (SUS).  Rumus yang digunakan adalah sebagai berikut:
𝑥̅ = 𝛴𝑥 𝑛 …………………...…………..……………(1)
𝑥̅
= Skor rata-rata 𝛴𝑥
= Jumlah skor SUS 𝑛 = Jumlah responden
Dengan menggunakan rumus tersebut, perhitungan  skor SUS untuk website OK  OCE memperoleh  nilai  rata-rata  sebesar  82,  yang  masuk dalam kategori Best Imaginable dengan grade B. Hal ini menunjukkan bahwa dari segi kegunaan, penilaian berdasarkan  data  tersebut  dapat  diterima  dan  layak. Penilaian ini dapat dilihat dari indeks pada gambar 8.
Gambar 8. Pengukuran Skor SUS

## 5. KESIMPULAN DAN SARAN
Penelitian  ini  berhasil  merancang  prototipe milestone pada website OK  OCE  menggunakan metode Design Thinking dengan aplikasi figma, yang menunjukkan peningkatan signifikan dalam fungsionalitas  dan  efektivitas website ,  berdasarkan hasil Usability Testing ( UT )  dan System  Usability Scale  (SUS )  yang  memperoleh  nilai  rata-rata  82, masuk dalam kategori Best Imaginable dengan grade B. Namun, untuk memastikan kesesuaian dan kepuasan  pengguna  secara  menyeluruh,  diperlukan pengujian  lanjutan  yang  melibatkan  lebih  banyak pengguna  aktual.  Saran  untuk  pengembangan selanjutnya  adalah  terus  melakukan  iterasi  desain berdasarkan feedback pengguna, serta mengintegrasikan  fitur-fitur  tambahan  yang  dapat
lebih  mendukung  kebutuhan  dan  pengalaman pengguna di platform OK OCE.

## DAFTAR PUSTAKA
[1]  A.  Voutama,  “Sistem  Antrian  Cucian  Mobil Berbasis  Website  Menggunakan  Konsep  CRM dan  Penerapan  UML,” Komputika :  Jurnal Sistem  Komputer ,  vol.  11,  no.  1,  pp.  102–111, Feb. 2022, doi: 10.34010/komputika.v11i1.4677.
[2]  L. Edgar, C. Sydney McLean, M. O. Sean Hogan, S. Hamstra, and E. S. Holmboe, “The Milestones Guidebook.” [Online]. Available: https://www.acgme.org/What-We-
Do/Accreditation/Milestones/Resources.
[3]  J.  Pendidikan  and  D.  Konseling,  “Perancangan User  Interface/User  Experience  Pada  Aplikasi Baby Spa Berbasis Mobile Untuk User Customer Dan  Terapis  Menggunakan  Metode  User Centered Design,” 2022.
[4]  I.  Adhiya  Adha et  al. ,  “PERANCANGAN UI/UX
APLIKASI OGAN LOPIAN DISKOMINFO PURWAKARTA MENGGUNAKAN METODE DESIGN THINKING,” JOISIE  Journal  Of  Information System And Informatics Engineering , vol. 7, no. 1, 2023.
[5]  M.  N.  M.  Al-Faruq,  S.  Nur’aini,  and  M.  H. Aufan,
“PERANCANGAN
UI/UX

## SEMARANG VIRTUAL TOURISM DENGAN
FIGMA,” Walisongo  Journal  of  Information Technology , vol. 4, no. 1, pp. 43–52, Aug. 2022, doi: 10.21580/wjit.2022.4.1.12079.
[6]  Budi  Kurniawan,  “PERANCANGAN  UI/UX APLIKASI MANAJEMEN PENELITIAN DAN PENGABDIAN   KEPADA  MASYARAKAT MENGGUNAKAN APLIKASI FIGMA,” 2022.
[7]  S.  Soedewi,  A.  Mustikawan,  and  W.  Swasty, “Penerapan  Metode  Design  Thinking  Pada Perancangan Website UMKM Kirihuci,” 2022.
[8]  M.  Angelica,  D.  Hidayat,  and  A.  R.  Adriyanto, “PENERAPAN
METODE DESIGN THINKING  PADA  PERANCANGAN  UI/UX MOBILE APPS SEBAGAI MEDIA PENDIDIKAN  MORAL  UNTUK  ANAK- ANAK,” 2023.
[9]  A. Firdonsyah, Z. Arwananing Tyas, and L. Ma, “Penerapan  Metode  Design  Thinking  Pada Perancangan UI/UX Sistem Informasi Penelitian Mahasiswa Berbasis Web,” 2023.
[10]  H.  Herfandi,  Y.  Yuliadi,  M.  T.  A.  Zaen,  F. Hamdani, and A. M. Safira, “Penerapan Metode Design  Thinking  Dalam  Pengembangan  UI  dan UX,” Building  of  Informatics,  Technology  and Science  (BITS) ,  vol.  4,  no.  1,  Jun.  2022,  doi: 10.47065/bits.v4i1.1716.
[11]  S.  Ansori,  P.  Hendradi,  and  S.  Nugroho, “Penerapan  Metode  Design  Thinking  dalam Perancangan UI/UX Aplikasi Mobile SIPROPMAWA,” Journal of Information
System Research (JOSH) , vol. 4, no. 4, pp. 1072– 1081, Jul. 2023, doi: 10.47065/josh.v4i4.3648.
[12]  P.  S.  Rosiana,  A.  Voutama,  and  A.  A.  Ridha, “PERANCANGAN UI/UX SISTEM
INFORMASI  PEMBELIAN  HASIL  TANI BERBASIS  MOBILE  DENGAN  METODE DESIGN  THINKING,” Jurnal  Informatika  dan Teknik Elektro Terapan , vol. 11, no. 3, Jul. 2023, doi: 10.23960/jitet.v11i3.3048.