## Journal of Information System Research (JOSH)
Volume 5, No. 4, Juli 2024, pp 1196−1206 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i4.5680

## Perancangan Desain UI/UX Aplikasi Manajemen Keuangan Menggunakan Metode Design Thinking
George William Morris Tangka 1,* , Erienika Meiling Lompoliu 2
1 Fakultas Ilmu Komputer, Program Studi Sistem Informasi, Universitas Klabat, Airmadidi Jl. Arnold Mononutu, Airmadidi Bawah, Kec. Airmadidi, Kabupaten Minahasa Utara, Sulawesi Utara, Indonesia
2 Fakultas Eknomi dan Bisnis, Program Studi Manajemen, Universitas Klabat, Airmadidi Jl. Arnold Mononutu, Airmadidi Bawah, Kec. Airmadidi, Kabupaten Minahasa Utara, Sulawesi Utara, Indonesia Email: 1,* gtangka@unklab.ac.id, 2 erienika.lompoliu@unklab.ac.id Email Penulis Korespondensi: gtangka@unklab.ac.id Submitted: 24/07/2024; Accepted: 29/07/2024; Published: 30/07/2024
Abstrak −Uang diterima dan dipercaya oleh masyarakat sebagai alat pembayaran atau transaksi, yang memfasilitasi pertukaran barang  dan  jasa.  Dalam  kehidupan  sehari-hari,  individu  menghadapi  pengeluaran  harian  yang  perlu  dikelola  secara  efektif. Kurangnya kesadaran dan pengetahuan tentang pentingnya perencanaan dan pengelolaan keuangan di kalangan mahasiswa dan generasi muda menyebabkan masalah keuangan yang signifikan. Penelitian ini bertujuan untuk merancang aplikasi manajemen keuangan dengan fokus pada desain UI/UX yang ramah pengguna dan menyenangkan. Aplikasi ini akan membantu pengguna mengelola  pendapatan,  pengeluaran,  dan  tabungan  mereka  dengan  efisien.  Fitur  utama  yang  disertakan  meliputi  catatan transaksi  harian,  pengingat  pembayaran  tagihan,  analisis  pengeluaran,  dan  tips  keuangan  untuk  mencapai  tujuan  finansial. Tujuannya  adalah  agar  pengguna  dapat  mengelola  keuangan  mereka  dengan  lebih  bijaksana.  Dengan  menerapkan  metode Design Thinking, penelitian ini menangani masalah manajemen keuangan yang kompleks secara inovatif dan komprehensif. Hasil  pengujian  kegunaan  menunjukkan  bahwa  layar  seperti  Select  Category  mencapai  skor  kegunaan  sempurna  100, sementara  layar  lain  seperti  Halaman  Pengeluaran  menunjukkan  masalah  berulang  dengan  tingkat  salah  klik  yang  tinggi, menunjukkan area yang perlu diperbaiki. Secara keseluruhan, skor kegunaan rata-rata adalah 75, menunjukkan bahwa masih ada ruang untuk peningkatan..
Kata Kunci: Design Thinking; Keuangan; UI/UX
Abstract −Money is widely accepted and trusted by society as a medium of payment or transaction, facilitating the exchange of goods and services. In everyday life, individuals face daily expenses that need effective management. The lack of awareness and  knowledge  about  the  importance  of  financial  planning  and  management  among  students  and  young  adults  leads  to significant financial problems. This study aims to design a financial management application with a focus on user-friendly and enjoyable UI/UX design. The application will help users manage their income, expenses, and savings efficiently. Key features include daily transaction records, bill payment reminders, expense analysis, and financial tips to achieve financial goals. The goal is to enable users to handle their finances more wisely. By applying the Design Thinking method, the research addresses complex financial management issues innovatively and comprehensively. Results from usability testing indicate that screens like the Select Category achieved a perfect usability score of 100, while others like the Expense Pages showed recurring issues with high misclick rates, highlighting areas for improvement. Overall, the average usability score was 75, suggesting room for enhancement.
Keywords : Design Thinking; Finance; UI/UX

## 1. PENDAHULUAN
Uang  memainkan  peran  penting  dalam  kehidupan  sehari-hari,  berfungsi  sebagai  alat  utama  untuk  memenuhi kebutuhan  dasar  seperti  makanan,  pakaian,  dan  tempat  tinggal  [1].  Banyak  orang  bekerja  keras  untuk menghasilkan uang guna mencapai tujuan hidup mereka dan meningkatkan kualitas hidup mereka. Oleh karena itu,  manajemen  keuangan  pribadi  menjadi  sangat  penting  untuk  mencapai  berbagai  tujuan  hidup  [2].  Melalui perencanaan  dan  pengelolaan  keuangan  yang  baik,  individu  dapat  menggunakan  sumber  daya  mereka  secara optimal untuk mencapai tujuan pribadi, seperti pendidikan, investasi, dan tabungan masa depan [3]. Namun, di kalangan mahasiswa dan generasi muda, tantangan dalam manajemen keuangan sering kali muncul [4], [5], [6]. Konsumerisme  yang  tinggi  dan  kurangnya  pengetahuan  tentang  manajemen  keuangan  dapat  menyulitkan pengelolaan  keuangan.  Banyak  dari  mereka  tidak  sepenuhnya  memahami  pentingnya  merencanakan  dan mengendalikan  pengeluaran.  Selain  itu,  kebiasaan  mencatat  pengeluaran  secara  manual  dianggap  merepotkan, membuat manajemen keuangan menjadi tidak teratur dan kurang efektif [7], [8].
Kemajuan teknologi informasi menawarkan solusi untuk masalah-masalah ini. Teknologi informasi telah mengalami perkembangan pesat, memungkinkan kita untuk memproses data dan memperoleh informasi dengan lebih efisien [9]. Berbagai aplikasi berbasis web dan mobile kini ada untuk mempercepat pertukaran informasi dan memfasilitasi aktivitas sehari-hari, termasuk manajemen keuangan. Salah satu inovasi utama di bidang ini adalah aplikasi manajemen keuangan online [10], [11]. Banyak dari aplikasi ini, yang sering kali gratis, dirancang untuk memfasilitasi  pencatatan  dan  pengelolaan  keuangan  pribadi.  Dengan  aplikasi-aplikasi  ini,  pengguna  dapat mengelola pengeluaran dan pendapatan mereka dengan lebih mudah dan efisien [12]. Desain antarmuka pengguna (UI/UX) memainkan peran penting dalam pengembangan aplikasi, termasuk aplikasi manajemen keuangan [13], [14].  Desain  yang  baik  memudahkan  pengguna  dalam  menggunakan  aplikasi,  menerima  umpan  balik  dari interaksi,  dan  mencapai  tujuan  mereka  [15].  Keselarasan  antara  desain  aplikasi  dan  kebutuhan  bisnis  sangat

## Journal of Information System Research (JOSH)
Volume 5, No. 4, Juli 2024, pp 1196−1206 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i4.5680
penting untuk memastikan bahwa aplikasi tidak hanya berfungsi dengan baik tetapi juga memberikan pengalaman pengguna yang positif. Hal ini dapat membantu mencapai tujuan bisnis dengan menggunakan strategi teknologi informasi yang efektif dalam desain [16].
Masalah  yang  terjadi  sehingga  perlu  dibuatkan  sebuah  sistem  untuk  manajemen  keuangan  adalah kurangnya  kesadaran  dan  pengetahuan  tentang  pentingnya  perencanaan  dan  pengelolaan  keuangan  di  kalangan mahasiswa dan generasi muda. Banyak dari mereka kesulitan mengendalikan pengeluaran dan tidak memahami bagaimana  mengalokasikan  sumber  daya  secara  optimal  untuk  mencapai  tujuan  keuangan  jangka  panjang. Konsumerisme yang tinggi dan kebiasaan mencatat pengeluaran secara manual membuat manajemen keuangan menjadi tidak teratur dan kurang efektif. Penelitian menunjukkan bahwa kurangnya literasi keuangan di kalangan muda dapat menyebabkan masalah keuangan yang signifikan, seperti utang yang meningkat dan ketidakmampuan untuk membuat keputusan keuangan yang bijak [17-19] Oleh karena itu, diperlukan sistem manajemen keuangan yang dapat membantu mengelola keuangan dengan lebih efisien, memberikan gambaran yang jelas tentang arus kas, dan mendorong perubahan positif dalam perilaku keuangan.
Penelitian  ini  bertujuan  untuk  merancang  aplikasi  manajemen  keuangan  yang  memenuhi  kebutuhan pengguna  dan  tujuan  bisnis.  Dengan  menganalisis  data  dan  fakta  yang  ada,  diharapkan  dapat  diciptakan  solusi yang meningkatkan kesadaran masyarakat tentang manajemen keuangan dan memberikan pengalaman pengguna yang  nyaman  dan  mudah  dipahami  [20].  Dalam  hal  ini,  aplikasi  Speede  dikembangkan  sebagai  solusi  untuk memudahkan  mahasiswa  dan  generasi  muda  dalam  mengelola  keuangan  mereka.  Aplikasi  Speede  dirancang dengan  fitur-fitur  yang  memungkinkan  pengguna  untuk  dengan  mudah  mencatat  pengeluaran  dan  pendapatan menggunakan gadget mereka. Pengguna dapat mengkategorikan transaksi berdasarkan kategori yang relevan dan menambahkan  kategori  baru  sesuai  kebutuhan.  Aplikasi  ini  juga  menyajikan  laporan  keuangan  dalam  bentuk grafik,  memberikan  gambaran  visual  yang  jelas  tentang  arus  kas  dan  memfasilitasi  analisis  keuangan.  Untuk memastikan  bahwa  aplikasi  ini  memenuhi  kebutuhan  pengguna  secara  optimal,  metode  Design  Thinking diterapkan  dalam  pengembangannya  [21].  Metode  Design  Thinking  adalah  pendekatan  yang  berfokus  pada pemecahan masalah kompleks dengan cara yang komprehensif dan inovatif. Pendekatan ini mengikuti lima tahap: empati, definisi, ideasi, pembuatan prototipe, dan pengujian. Selain mempertimbangkan aspek visual dan sensorik, metode ini juga memperhitungkan keseluruhan pengalaman pengguna [22]. Dengan mengintegrasikan teknologi dan  prinsip  desain  yang  kuat,  tujuan  dari  penelitian  ini  adalah  menciptakan  solusi  yang  tidak  hanya  berfungsi dengan baik tetapi juga mendorong perubahan positif dalam perilaku dan manajemen keuangan. Dengan aplikasi Speede, diharapkan generasi muda akan lebih mampu mengelola keuangan mereka dengan lebih efektif dan lebih menyadari pentingnya perencanaan keuangan dalam mencapai tujuan hidup mereka [23-25].
Beberapa penelitian telah dilakukan untuk mengembangkan desain UI/UX aplikasi menggunakan metode Design  Thinking,  dengan  fokus  pada  kebutuhan  dan  pengalaman  pengguna.  Penelitian  pertama  [25]  bertujuan untuk merancang antarmuka pengguna dari prototipe aplikasi counter mobile phone, sebagai langkah awal sebelum pengembangan aplikasi secara menyeluruh. Metode Design Thinking digunakan karena berfokus pada kebutuhan pengguna,  dan  hasilnya  menunjukkan  tingkat  kepuasan  yang  tinggi  dengan  skor  uji  kegunaan  mencapai  89% dalam kegunaan, 86% dalam kemudahan penggunaan, 89% dalam kemudahan belajar, dan 83% dalam kepuasan. Penelitian  kedua  [21]  bertujuan  untuk  merancang  ulang  UI  dan  UX  dari  aplikasi  Sistem  Informasi  Sertifikat Kompetensi  Diploma  (SISFO  SKPI)  UNIMMA  dari  versi  website  ke  versi  aplikasi  berbasis  mobile.  Metode Design Thinking digunakan karena dapat mengeksplorasi berbagai solusi dengan melibatkan pengguna sebagai subjek  utama,  dan  hasil  uji  kegunaan  menunjukkan  peningkatan  yang  signifikan  dalam  kepuasan  pengguna. Penelitian ketiga [26] bertujuan untuk menawarkan solusi baru melalui pengembangan sistem pemasaran produk untuk UKM menggunakan konsep UI/UX dan Metode Design Thinking. Hasilnya menunjukkan bahwa pengujian menggunakan  metode System Usability Scale (SUS)  mencapai skor 87,  yang  dianggap  sebagai peringkat  yang dapat diterima, sehingga diharapkan pelanggan akan lebih mudah menemukan suvenir dengan desain sistem ini.

## 2. METODOLOGI PENELITIAN
Design Thinking adalah proses iteratif dan non-linear yang digunakan untuk memahami pengguna, mendefinisikan ulang  masalah,  dan  menciptakan  solusi  inovatif.  Proses  ini  terdiri  dari  lima  fase:  Empathize,  Define,  Ideate, Prototype, dan Test. Metode yang berpusat pada manusia ini mendorong pemikiran di luar kebiasaan dan telah diadopsi oleh perusahaan-perusahaan terkemuka seperti Apple dan Google. Menggabungkan pendekatan kreatif dan analitis, Design Thinking bertujuan untuk mengembangkan produk dan layanan yang memenuhi kebutuhan pengguna secara efektif. Metode ini tidak hanya untuk desainer, tetapi juga dapat digunakan oleh siapa saja yang ingin memecahkan masalah kompleks secara inovatif [26, 27].

## Journal of Information System Research (JOSH)
Volume 5, No. 4, Juli 2024, pp 1196−1206 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i4.5680
Tahapan-tahapan utama dalam metode Design Thinking meliputi langkah-langkah untuk memahami dan menyelesaikan masalah pengguna secara kreatif dan inovatif. Metode ini dirancang untuk menciptakan solusi yang tepat guna dan berpusat pada kebutuhan pengguna, dengan pendekatan yang iteratif dan non-linear.ahapan-tahapan utama dalam metode design thinking meliputi:

## 2.1 Empathize
Pada  tahap  pertama  ini  dilakukan  pemahaman  lebih  mendalam  terhadap  pengguna  untuk  memahami  tantangan mereka dan kebutuhan. Tujuan dari tahap ini adalah untuk memahami kebutuhan pengguna, apa yang memotivasi mereka, dan apa yang mereka lakukan setiap hari. Pada tahap ini ilmu psikologi akan sangat bermanfaat, bisa jadi dicapai dengan melibatkan pengguna seperti dengan melakukan wawancara.

## 2.2 Define
Tahapan dalam metode design Thinking ini bertujuan untuk melihat permasalahan nyata yang ingin dipecahkan. Dari  ini  tahap  empati  digunakan  untuk  mengidentifikasi  masalah,  dan  menemukan  potensi  yang  menjadikan masalah  tersebut  pengguna  lebih  baik  dengan  mendefinisikan  masalah  berdasarkan  hasil  riset  pengguna,  tanpa menghilangkan sisi kemanusiaan dari produk tersebut. Idealnya, tahap ini akan menentukan masalah yang nantinya akan terjadi fokus dalam pengembangan prototipe desain UI/UX .

## 2.3 Idiate
Pada  tahap  ini  pencarian  ide  akan  dilakukan  dengan  memperhatikan  asumsi  dan  menciptakan  ide-ide  inovatif. Melalui tahap ini akan dihasilkan daftar ide-ide yang dapat direspon dihasilkan. Ide-ide ini akan menjadi market dengan ketelitian tinggi yang akan berkembang menjadi prototipe.

## 2.4 Prototype
Pada  tahap  ini  akan  dilakukan  realisasi  ide  yang  dipilih.  Dimana  ide  yang  dipilih  akan  dikembangkan  menjadi prototipe.  Setelah  prototype  dibuat  maka  akan  ditambahkan  interaksi  didalamnya  bahwa  suatu  produk  nyata kemudian diproduksi dalam bentuk prototipe.

## 2.5 Test
Prototipe yang telah dibuat pada tahap sebelumnya akan diujicobakan oleh pengguna. Dari pengalaman pengguna dalam  menggunakan  prototype  akan  diperoleh  masukan  untuk  membuat  produk  dan  produk  yang  lebih  baik melakukan penyempurnaan terhadap produk yang sudah ada.

## 3. HASIL DAN PEMBAHASAN

## 3.1 Emphatize
Dalam proses Design Thinking, user persona bisa merupakan representasi fiktif atau nyata dari pengguna akhir yang dihasilkan dari data dan wawasan yang dikumpulkan selama fase penelitian. User persona digunakan untuk memahami  kebutuhan,  tujuan,  perilaku,  dan  tantangan  pengguna  yang  sebenarnya,  sehingga  tim  desain  dapat menciptakan solusi yang lebih efektif dan relevan.

## Journal of Information System Research (JOSH)
Volume 5, No. 4, Juli 2024, pp 1196−1206 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i4.5680
Pada  tahap  awal  ini,  peneliti  memahami  keinginan  Valerie,  seorang  pengguna  nyata,  untuk  mengetahui pengeluaran  sehari-hari.  Penting  untuk  menciptakan  empati  terhadap  kebutuhan  dan  tantangan  yang  dihadapi pengguna. Dari wawancara yang peneliti lakukan, peneliti memahami bahwa Valerie mengalami kesulitan dalam mengelola pengeluaran yang dilakukan setiap hari. Data ini, seperti yang di jelaskan di bagian 2.1 di atas, didapat melalui wawancara. Informasi lengkap bisa dilihat di Gambar 2.
Gambar 3. Empathize Phase : Emphaty Map
Gambar 3 menampilkan peta empati dan peta perjalanan pengguna (User Journey Map) untuk Valerie. Peta empati menunjukkan empat aspek utama: apa yang Valerie katakan (Says), pikirkan (Thinks), lakukan (Does), dan rasakan (Feels). Valerie menyatakan kebutuhan untuk mengelola keuangannya dengan lebih baik dan ingin tahu kemana  uangnya  pergi  setiap  hari.  Dia  berpikir  bahwa  penting  untuk  memiliki  kontrol  yang  lebih  baik  atas keuangan  dan  berharap  aplikasi  yang  digunakan  dapat  membantu.  Valerie  melakukan  pencatatan  setiap pengeluaran dan menggunakan aplikasi untuk memantau pengeluaran. Dia merasa terbebani dan ingin solusi yang lebih sederhana.

## Journal of Information System Research (JOSH)
Volume 5, No. 4, Juli 2024, pp 1196−1206 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i4.5680
Gambar  4  menunjukkan  dua  peta  perjalanan  pengguna  (User  Journey  Map)  dari  aplikasi  manajemen keuangan yang dirancang dengan menggunakan metode Design Thinking. Peta perjalanan pengguna ini terbagi menjadi dua bagian: kondisi saat ini (Current State) dan kondisi masa depan (Future State). Pada kondisi saat ini, Valerie,  pengguna,  mengalami  kesulitan  dalam  memantau  dan  mengelola  keuangan  secara  manual,  yang mengakibatkan  ketidakteraturan  dan  kesulitan  dalam  pengambilan  keputusan  keuangan.  Tahapan  yang  dilalui Valerie  meliputi  kesadaran  akan  kebutuhan  pemantauan  keuangan,  pertimbangan  berbagai  opsi,  pengambilan keputusan,  dan  hasil  akhir  yang  masih  terbatas.  Di  sisi  lain,  kondisi  masa  depan  menunjukkan  peningkatan kesadaran dan penggunaan aplikasi keuangan yang diperoleh melalui rekomendasi teman dan media sosial. Valerie mengevaluasi aplikasi berdasarkan ulasan pengguna, memutuskan untuk menggunakannya, dan akhirnya berhasil memantau  keuangannya  secara  efektif.  Ide-ide  peluang  yang  diidentifikasi  termasuk  peningkatan  kampanye pemasaran,  deskripsi  aplikasi  yang  lebih  rinci,  dan  pengembangan  antarmuka  pengguna  yang  ramah.  Peta perjalanan ini membantu dalam memahami kebutuhan dan masalah pengguna, serta merancang solusi yang tepat untuk meningkatkan pengalaman pengguna aplikasi keuangan.
Informasi  ini  membantu  tim  desain  untuk  mendefinisikan  masalah  utama,  yaitu  kurangnya  solusi  yang efektif  untuk  memantau  dan  mengelola  keuangan  secara  sederhana.  Dengan  demikian,  bagian  Empathize memastikan solusi yang inovatif dan relevan bagi pengguna seperti Valerie.

## 3.2 Define
Gambar 5. Define Phase: Pain Points menjadi Needs and Insight
Berikutnya dari data yang di dapat dari tahap emphatize, peneliti membuat beberapa “pain points” atau titik masalah pengguna. Gambar ini menunjukkan dua kategori utama dari hasil analisis kebutuhan pengguna dalam proses Design Thinking: "Pain Points" dan "Needs and Insight," yang dilakukan dalam fase Define setelah fase Empathize.  Dalam  fase  Define,  tim  desain  mengidentifikasi  masalah  utama  pengguna,  seperti  ketidakpastian mengenai jumlah pengeluaran harian, ketidakmampuan mengelola keuangan, dan kesulitan dalam mengatur serta mengurangi  pengeluaran  yang  tidak  diperlukan.  Dari  sini,  "Pain  Points"  tersebut  diubah  menjadi  "Needs  and Insight" dengan menggali lebih dalam kebutuhan dan keinginan pengguna. Misalnya, ketidakpastian pengeluaran harian  menjadi kebutuhan untuk  mengetahui dengan pasti pengeluaran harian, dan ketidakmampuan  mengelola keuangan  menjadi  kebutuhan  untuk  mengelola  keuangan  dengan  baik.  Proses  ini  menghasilkan  wawasan  yang lebih mendalam dan kebutuhan spesifik yang digunakan sebagai dasar untuk merancang solusi efektif dan relevan dalam tahap Ideate nantinya.

## Journal of Information System Research (JOSH)
Volume 5, No. 4, Juli 2024, pp 1196−1206 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i4.5680
Selanjutnya kebutuhan pengguna (Needs) diubah menjadi pertanyaan "How Might We" (HMW) dalam fase Define dari Design Thinking, seperti yang terlihat di Gambar 6. Kebutuhan untuk mengatur pengeluaran harian diterjemahkan  menjadi,  "Bagaimana  cara  kita  memberikan  apa  yang  pengguna  butuhkan  dalam  pemantau keuangan?" Kebutuhan untuk mengurangi pengeluaran dan meningkatkan tabungan diubah menjadi, "Bagaimana cara  kita  membuat  fitur  wallet  yang  intuitif?"  Kebutuhan  untuk  menggunakan  platform  kapan  saja  dijadikan, "Bagaimana  cara  kita  memungkinkan  pengguna  mencatat  pengeluaran  dengan  cepat  dan  efisien?"  Sementara kebutuhan untuk wawasan mendalam tentang keuangan menjadi, "Bagaimana kita bisa menghadirkan fitur statistik dan laporan yang memberikan wawasan tentang pola pengeluaran pengguna?" Proses ini membantu tim desain berpikir kreatif dan mencari solusi yang relevan dengan kebutuhan pengguna.

## 3.3 Ideate
Pada tahap ini, kita menghasilkan ide-ide untuk memecahkan masalah tersebut. Ide-ide tersebut dapat mencakup pembuatan  aplikasi.  Fitur-fitur  yang  diusulkan  melibatkan  fitur  wallet,  pengeluaran  (expense),  transaksi (transaction), laporan keuangan (records).
Seperti yang ditunjukkan di Gambar 7, bagian kiri gambar menampilkan beberapa kartu dari "How Might We" (HMW) yang mengidentifikasi tiga pertanyaan utama:
1. Bagaimana cara kita memberikan apa yang pengguna butuhkan dalam pemantauan keuangan?
2. Bagaimana cara kita membantu pengguna agar dapat membagikan pengalamannya kepada pengguna lain?
3. Bagaimana cara kita memungkinkan pengguna untuk mencatat pengeluaran mereka dengan cepat dan efisien, tanpa menghabiskan banyak waktu?
Bagian kanan gambar menunjukkan solusi yang diusulkan untuk menjawab pertanyaan-pertanyaan HMW tersebut. Solusi ini termasuk:
1. Menyediakan fitur pengeluaran, transaksi, anggaran, visualisasi, dan laporan keuangan.
2. Fitur untuk menghitung pengeluaran dan anggaran.
3. Fitur untuk memberikan feedback berdasarkan pengalaman setelah menggunakan fitur-fitur lainnya.
4. Fitur pengingat/notifikasi untuk membantu pengguna mencatat pengeluaran secara tepat waktu dan efisien. Proses  ini  menggambarkan  bagaimana  tim  desain  mengidentifikasi  kebutuhan  dan  tantangan  pengguna serta merancang fitur-fitur spesifik yang dapat memenuhi kebutuhan tersebut.
Gambar 7. Dari HMW ke Solution (Fitur)

## 3.4 Prototype
Prototype  ini  dapat  mencakup  tampilan  antarmuka  yang  intuitif,  fitur-fitur  yang  diusulkan,  dan  fungsi-fungsi utama  yang  dapat  membantu  Valerie  dalam  mengatasi  kendala-kendalanya.  Dalam  hal  ini,  prototype  dapat melibatkan  tampilan  halaman  awal  aplikasi,  fitur  wallet,  fitur  pengeluaran  (expense),  dan  fitur  transaksi (transaction), fitur laporan keuangan (records).

## 3.4.1 User Flow
User Flow digunakan sebagai salah satu langkah dalam desain aplikasi dan sebagai struktur informasi yang akan membentuk dasar serta menyederhanakan implementasi desain UI/UX. Berikut beberapa user flow dalam aplikasi ini

## Journal of Information System Research (JOSH)
Volume 5, No. 4, Juli 2024, pp 1196−1206 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i4.5680
Gambar 8. User Flow
Ada empat skenario utama yang di tunjukkan dalam Gambar 8: mengisi ulang di dalam wallet, mencatat pengeluaran, membuka menu statistik, dan melihat kalender aktivitas. Dalam alur mengisi ulang di dalam wallet, pengguna  membuka  aplikasi,  mengisi  nama,  menekan  tombol  next  untuk  masuk,  dan  kemudian  memasuki halaman transaksi. Jika ingin menambahkan entri baru, pengguna dapat kembali ke halaman wallet dan memilih jumlah uang yang ingin dimasukkan. Alur ini membantu memastikan pengguna dapat dengan mudah mengelola transaksi keuangan mereka dalam aplikasi.
Skenario mencatat pengeluaran melibatkan langkah-langkah di mana pengguna membuka aplikasi, mengisi nama,  menekan  tombol  next,  dan  memasuki  menu  pencatatan  pengeluaran.  Pengguna  kemudian  memasukkan tanggal dan waktu pengeluaran, memilih kategori pengeluaran, dan menekan ikon tambah untuk menambahkan entri  baru.  Untuk  melihat  statistik,  pengguna  membuka  aplikasi,  mengisi  nama,  menekan  tombol  next,  dan memasuki  menu  statistik  untuk  melihat  laporan  keuangan.  Dalam  alur  melihat  kalender  aktivitas,  pengguna membuka  aplikasi,  mengisi  nama,  menekan  next,  dan  menggunakan  fitur  kalender  untuk  melihat  pengeluaran, pemasukan, dan total anggaran. Alur-alur ini dirancang untuk memudahkan pengguna dalam mengelola, mencatat, dan menganalisis keuangan mereka melalui aplikasi Spendee.

## 3.4.2 Low-Fidelity Wireframe
Wireframe adalah representasi visual dari suatu sistem aplikasi di mana pada tahap ini, peneliti menggunakan low- fidelity  wireframe  untuk  menggambarkan  aplikasi  yang  akan  dikembangkan  tanpa  menggunakan  gambar  atau warna. Wireframe dapat dibuat setelah proses empaty hingga define. Dari hasil empathy map dan persona penulis menyimpulkan bahwa penggguna yang menggunakan berada pada daerah yang ramai serta, maka rancangan harus dibuat  sederhana  dan  mudah  dari  alur  penggunanya  sehingga  pengguna  nyaman  menggunakan  aplikasinya berdasarkan userflow.

## Journal of Information System Research (JOSH)
Volume 5, No. 4, Juli 2024, pp 1196−1206 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i4.5680
Karena cukup memakan tempat, untuk wireframe ukuran aslinya bisa di akses di: link ini
Gambar 10. Prototype
Prototype  adalah  hasil  akhir  disain  UI  yang  lengkap  setelah  disempurnakan  dari  wireframe.  Untuk Prototype bisa di akses di: link ini . Fitur-fitur utama dari prototipe aplikasi manajemen keuangan ini mencakup login, penambahan pengeluaran, pemasukan, atau transfer  dengan atribut kategori dan jumlah uang. Selain itu, aplikasi ini menyediakan statistik atau ringkasan penggunaan dana, kalender mutasi, dan dompet (wallet) untuk membantu  pengguna  mengelola  keuangan  mereka  dengan  lebih  efisien.  Dengan  fitur-fitur  tersebut,  pengguna dapat  dengan  mudah  mencatat  dan  memantau  transaksi  keuangan  harian  mereka,  serta  mendapatkan  gambaran jelas tentang arus kas dan kondisi keuangan mereka secara keseluruhan.

## 3.5 Tahap Test
Tahap  pengujian  merupakan  langkah  yang  digunakan  untuk  melaksanakan  uji  kelayakan  terhadap  desain antarmuka (UI/UX) suatu aplikasi yang telah dikembangkan. Pada tahap ini, peneliti akan menganalisis data yang diperoleh dari hasil uji skenario yang dilakukan oleh calon pengguna melalui platform situs web MAZE.co .
Tahap uji kegunaan (usability test) dari aplikasi ini melibatkan 12 peserta. Hasil menunjukkan bahwa 100% dari peserta berhasil menyelesaikan tugas langsung tanpa kesalahan, dengan 0% misi yang tidak selesai. Rata-rata waktu  yang dibutuhkan  untuk  menyelesaikan tugas adalah  35,2 detik. Namun, tingkat  kesalahan klik (misclick rate)  cukup  tinggi,  yaitu  45,5%,  yang  menunjukkan  bahwa  hampir  setengah  dari  interaksi  pengguna  dengan antarmuka  mengalami  klik  yang  tidak  diinginkan.  Data  ini  mengindikasikan  bahwa  meskipun  pengguna  dapat menyelesaikan tugas, ada kebutuhan untuk mengurangi tingkat kesalahan klik untuk meningkatkan pengalaman pengguna.
Gambar 11. Usability Result from Maze.co

## 3.5.1 Testing Task Scenario
Tahap  ini  dilakukan  dengan  melakukan  uji  coba  skenario  pada  prototype  desain  aplikasi  behavior  dari  calon pengguna saat menyelesaikan skenario. Ada dua skenario yang dibuat yaitu:
Skenario 1 (Gambar 12): Pengguna memasukkan dana di dalam dompet Pada  skenario  ini  dimulai  dari  Halaman  Login  dan  Konfirmasi  menunjukkan  skor  usability  tinggi  sebesar  86, dengan waktu rata-rata yang relatif rendah di layar dan tingkat salah klik yang moderat, menunjukkan antarmuka yang  efisien  dan  ramah  pengguna.  Sebaliknya,  Halaman  Utama  memiliki  skor  usability  terendah  sebesar  47, ditandai dengan waktu rata-rata yang tinggi di layar dan tingkat salah klik yang tinggi sebesar 50%, menyoroti masalah usability yang signifikan. Halaman Input Nama, meskipun memiliki skor yang cukup baik sebesar 81, menunjukkan waktu rata-rata di layar yang lebih lama yaitu 31 detik, menunjukkan ada ruang untuk perbaikan efisiensi interaksi. Layar Tambah Uang ke Dompet dirancang dengan baik, dengan skor usability sebesar 81, waktu

## Journal of Information System Research (JOSH)
Volume 5, No. 4, Juli 2024, pp 1196−1206 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i4.5680
rata-rata  yang  rendah  di  layar,  dan  tingkat  salah  klik  yang  rendah.  Namun,  layar  Tambah  Uang  Tunai,  yang mencetak skor 78, memiliki tingkat salah klik yang tinggi sebesar 43%, menunjukkan bahwa antarmuka bisa lebih intuitif.
.
Gambar 12. Skenario 1 : Pengguna memasukkan dana di dalam dompet
Skenario 2 (Gambar 13): Pengguna Mengupdate Transaksi Pada skenario ini terungkap beberapa pola dan kesamaan di berbagai layar yang dievaluasi. Skor  usability yang tinggi dan tingkat salah klik yang rendah terlihat pada layar Select Category, yang secara konsisten menunjukkan skor  100  dan  tingkat  salah  klik  yang  sangat  rendah  hingga  nol.  Pola  ini  menunjukkan  bahwa  layar  ini  sangat intuitif, dirancang dengan baik, dan mudah dinavigasi oleh pengguna, dengan waktu rata-rata yang cepat di layar yang  semakin  mengkonfirmasi efisiensinya.  Sebaliknya, Halaman Pengeluaran  menunjukkan  masalah berulang dengan  tingkat  salah  klik  yang  tinggi  (berkisar  antara  17%  hingga  75%)  dan  skor  usability  yang  lebih  rendah, menunjukkan  bahwa  pengguna  kesulitan  dengan  antarmuka  ini  dan  sering  membuat  kesalahan.  Temuan  ini menyoroti perlunya perbaikan desain yang signifikan untuk meningkatkan usability.
Layar seperti Halaman Transfer dan Halaman Transaksi memiliki skor usability sedang (masing-masing 80 dan 72) dengan beberapa tingkat salah klik, menunjukkan bahwa layar ini umumnya berfungsi tetapi masih bisa ditingkatkan untuk meningkatkan kemudahan penggunaan dan mengurangi kesalahan. Layar dengan tingkat salah klik yang tinggi dan waktu yang lama di layar, seperti beberapa tata letak Select Category, menunjukkan bahwa pengguna  menghabiskan  lebih  banyak  waktu  untuk  menavigasi  layar  ini  dan  sering  membuat  kesalahan, menunjukkan bahwa layar ini terlalu kompleks atau tidak cukup intuitif, menyebabkan frustrasi. Layar yang efektif biasanya  memiliki  desain  yang  sederhana,  pelabelan  yang  jelas,  navigasi  yang  mudah,  dan  tata  letak  yang konsisten, sementara layar yang bermasalah seringkali memiliki tata letak yang berantakan, instruksi yang tidak jelas, atau elemen interaktif yang ditempatkan dengan kurang baik.
Gambar 13. Skenario 2 : Pengguna Mengupdate Transaksi
Karena cukup memakan tempat, untuk gambar 9, untuk ukuran aslinya bisa di akses di : link ini

## Journal of Information System Research (JOSH)
Volume 5, No. 4, Juli 2024, pp 1196−1206 ISSN 2686-228X (media online) https://ejurnal.seminar-id.com/index.php/josh/ DOI 10.47065/josh.v5i4.5680
Berdasarkan laporan dari dua skenario pengujian, disarankan untuk melakukan beberapa perbaikan guna meningkatkan pengalaman pengguna. Halaman Input Nama dan Login perlu disederhanakan dengan mengurangi elemen  interaktif  yang  tidak  diperlukan  dan  menambahkan  petunjuk  yang  jelas.  Berbagai  layout  Halaman Pengeluaran menunjukkan masalah berulang dengan tingkat salah klik yang tinggi, sehingga perlu dilakukan uji coba dengan desain yang lebih sederhana dan intuitif. Pada Halaman Selesaikan Transaksi, disarankan menerapkan elemen desain dari layar yang mendapatkan skor sempurna ke semua layout untuk memastikan langkah-langkah akhir  dalam  proses  transaksi  jelas  dan  mudah  diikuti.  Halaman  Tambah  Uang  ke  Dompet  yang  menunjukkan perbedaan signifikan dalam usability juga perlu dioptimalkan dengan menggunakan desain yang lebih baik.
Penting  juga  untuk  memastikan  konsistensi  dalam  penggunaan  warna,  ikon,  dan  tata  letak  di  seluruh aplikasi dengan membuat panduan desain yang jelas. Akhirnya, pengujian usability lebih lanjut dengan sampel pengguna  yang  lebih  besar  dan  umpan  balik  yang  komprehensif  diperlukan  untuk  terus  memperbaiki  dan menyempurnakan antarmuka aplikasi, sehingga aplikasi Spendee dapat memberikan pengalaman pengguna yang lebih baik, mengurangi kesalahan pengguna, dan meningkatkan kepuasan pengguna secara keseluruhan.

## 4. KESIMPULAN
Berdasarkan  hasil  penelitian  ini,  aplikasi  manajemen  keuangan  Spendee  yang  dirancang  menggunakan  metode Design Thinking menunjukkan beberapa keberhasilan dan tantangan dalam antarmuka pengguna (UI/UX). Pada tahap  Emphatize,  peneliti  memahami  kebutuhan  pengguna  melalui  wawancara  dengan  user  persona  bernama Valerie,  yang  kesulitan  dalam  mengelola  pengeluaran  sehari-hari.  Peta  empati  dan  peta  perjalanan  pengguna menunjukkan  bahwa  pengguna  membutuhkan  cara  yang  lebih  sederhana  untuk  memantau  dan  mengelola keuangan mereka. Pada tahap Define, permasalahan utama yang diidentifikasi adalah pengguna tidak tahu pasti ke mana uang dihabiskan setiap hari, tidak mampu mengelola keuangan dengan baik, dan kesulitan mendapatkan informasi  mengenai  pengeluaran  keuangan.  Untuk  itu,  didefinisikan  kebutuhan  untuk  menciptakan  solusi  yang membantu  pengguna  dalam  mengelola  keuangan  dengan  lebih  baik  dan  efektif.  Tahap  Ideate  menghasilkan beberapa ide solusi, termasuk fitur-fitur seperti catatan pengeluaran, transaksi, anggaran, visualisasi, dan laporan keuangan. Solusi yang diusulkan bertujuan untuk memberikan fitur yang intuitif dan mudah digunakan, seperti pengingat pencatatan pengeluaran secara tepat waktu dan fitur feedback berdasarkan pengalaman pengguna. Hasil pengujian  skenario  menunjukkan  bahwa  beberapa  layar  seperti  Halaman  Input  Nama  dan  Login  perlu disederhanakan  dengan  mengurangi  elemen  interaktif  yang  tidak  diperlukan  dan  menambahkan  petunjuk  yang jelas. Berbagai layout seperti Halaman Pengeluaran menunjukkan masalah berulang dengan tingkat salah klik yang tinggi, sehingga perlu dilakukan uji coba dengan desain yang lebih sederhana dan intuitif. Halaman Selesaikan Transaksi menunjukkan variasi skor usability yang signifikan, sehingga perlu menerapkan elemen desain dari layar yang  mendapatkan  skor  sempurna  ke  semua  layout  untuk  memastikan  langkah-langkah  akhir  dalam  proses transaksi jelas dan mudah diikuti. Pengujian lebih lanjut menunjukkan bahwa rata-rata total skor usability adalah 75,  yang  mengindikasikan  bahwa  masih  ada  ruang  untuk  perbaikan.  Pengujian  dengan  sampel  pengguna  yang lebih besar dan umpan balik yang komprehensif sangat diperlukan untuk terus memperbaiki dan menyempurnakan antarmuka  aplikasi.  Dengan  demikian,  aplikasi  Spendee  diharapkan  dapat  memberikan  pengalaman  pengguna yang lebih baik, mengurangi kesalahan, dan meningkatkan kepuasan pengguna secara keseluruhan.

## REFERENCES
[1] N. Nasfi, A. Solikin, S. Irdiana, L. Nugroho, S. Widyastuti, E. Kembauw, J. M. Luhukay, A. Alfiiana, N. N. J. Nuryani, M.  H.  Riyaldi,  dan  S.  D.  Firmialy,  UANG  DAN  PERBANKAN,  edited  by  E.  Damayanti,  Bandung:  Widina  Bhakti Persada, 2022.
[2] S. Thaha, "Pentingnya Financial Literacy dalam Tata Kelola Keuangan Pribadi (Suatu Studi Pustaka),"  Jurnal Edueco, vol. 4, no. 1, pp. 57-73, 2021.
[3] A. M. Saraswati and A. W. Nugroho, “Perencanaan Keuangan dan Pengelolaan Keuangan Generasi Z di Masa Pandemi Covid  19  melalui  Penguatan  Literasi  Keuangan,”  Warta  LPM,  vol.  24,  no.  2,  Art.  no.  2,  Mar.  2021,  doi: 10.23917/warta.v24i2.13481.
[4] R. Hariyani, "Urgensi literasi keuangan terhadap pengelolaan keuangan pribadi mahasiswa di masa pandemi covid-19 di Indonesia," Jurnal Khatulistiwa Informatika, vol. 6, no. 1, pp. 46-54, 2022.
[5] M.  A.  F.  Abdullah  dan  D.  H.  Perkasa,  "Peningkatan  literasi  keuangan  dalam  menciptakan  perilaku  berinvestasi  bagi generasi millennial di Pulau Tidung," Jurnal Umum Pengabdian Masyarakat, vol. 2, no. 3, pp. 1-8, 2023.
[6] D. I. Luhsasi, “Pengelolaan Keuangan : Literasi Keuangan dan Gaya Hidup Mahasiswa,”  Ecodunamika, vol. 4, no. 1, Art. no.
1, Aug. 2021, Accessed: Jul. 23, 2024. [Online]. Available:
https://ejournal.uksw.edu/ecodunamika/article/view/5227
[7] E.  Trivaika  and  M.  A.  Senubekti,  “Perancangan  Aplikasi  Pengelola  Keuangan  Pribadi  Berbasis  Android,”  Nuansa Informatika, vol. 16, no. 1, pp. 33–40, 2022.
[8] S. Rahmadani, "Pengaruh persepsi kemudahan dan persepsi risiko terhadap minat menggunakan e-wallet aplikasi DANA pada generasi milenial di Kecamatan Tanjungpinang Timur," Doctoral dissertation, STIE Pembangunan Tanjungpinang, 2023.

## Journal of Information System Research (JOSH)
[9] D. Balisa, A. Leffia, and Y. Shino, “Memanfaatkan Fungsi Sistem Informasi Manajemen: Prospek dan Tantangan di Dunia  Bisnis,”  Jurnal  MENTARI:  Manajemen,  Pendidikan  dan  Teknologi  Informasi,  vol.  2,  no.  2,  Jan.  2024,  doi: 10.33050/mentari.v2i2.452.
[10]  I.  Widjaja,  "Rancang  Bangun  Aplikasi  Manajemen  Keuangan  RT  (Rukun  Tetangga)  Berbasis  Android,"  Jurnal Instrumentasi dan Teknologi Informasi (JITI), vol. 2, no. 2, pp. 102-109, 2021.
[11]  A. G. Maulidina, A. Valha, dan R. E. Utama, "Evaluasi Pemanfaatan Aplikasi Keuangan Online sebagai Media untuk Mengelola atau Memanajemen Keuangan," Musytari: Neraca Manajemen, Akuntansi, dan Ekonomi, vol. 2, no. 10, pp. 1-10, 2023.
[12]  Y.  Fitriani,  “Analisa  Pemanfaatan  Aplikasi  Keuangan  Online  Sebagai  Media  Untuk  Mengelola  Atau  Memanajemen Keuangan,” JISAMAR (Journal of Information System, Applied, Management, Accounting and Research, vol. 5, no. 2, pp. 454–461, 2021.
[13]  M. E. Purbaya,  A. D.  T. Rizkyanzah, Y. E. S. Saputri, S. Wulandari, dan A. R. Annajdiah, "Desain Aplikasi  'Farmy' Menggunakan Metode Design Thinking untuk Investasi dan Jual Beli Ternak," Journal of Digital Business Innovation, vol. 2, no. 1, 2024.
[14]  Y. A. A. Sukma, L. Agustina, D. Mahmudah, A. B. Setiawan, R. Mustika, A. Dunan, dan A. Ratnawati, "Perkembangan ekonomi digital di Indonesia: Strategi dan sektor potensial," Pusat Penelitian dan Pengembangan Aplikasi Informatika dan  Informasi  dan  Komunikasi  Publik  Badan  Penelitian  dan  Pengembangan  SDM  Kementerian  Komunikasi  dan Informatika, 2019.
[15]  M.  T.  Firmansyah,  R.  Fauzi,  and  S.  F.  S.  Gumilang,  “Perancangan  User  Interface  dan  User  Experience  Mobile Application SIBENGKEL Untuk Memenuhi Kebutuhan Pengguna Dengan Metode User Centered Design (UCD,”  E- Proceeding of Engineering, vol. 7, no. 2, pp. 7574–7580, 2020.
[16]  K. Angelina, E. Sutomo, dan V. Nurcahyawati, "Desain UI UX Aplikasi Penjualan dengan Menyelaraskan Kebutuhan Bisnis menggunakan Pendekatan Design Thinking," TEMATIK, vol. 9, no. 1, pp. 70-78, 2022.
[17]  A.  Lusardi,  "Financial  literacy  and  the  need  for  financial  education:  evidence  and  implications,"  Swiss  Journal  of Economics and Statistics, vol. 155, no. 1, pp. 1-8, 2019.
[18]  E. Samuelsson, H. Levinsson, dan R. Ahlström, "Financial literacy, personal financial situation, and mental health among young adults in Sweden," Journal of Financial Literacy and Wellbeing, vol. 1, no. 3, pp. 541-564, 2023.
[19]  G. Topa, M. Hernández-Solís, dan S. Zappalà, "Financial management behavior among young adults: The role of need for cognitive closure in a three-wave moderated mediation model," Frontiers in Psychology, vol. 9, Art. no. 2419, 2018.
[20]  B.  Suranto,  “Perancangan  UI/UX  Berbasis  Android  untuk  Manajemen  Keuangan  Pribadi  dengan  Metode  Design Thinking,” AUTOMATA, vol. 4, no. 2, 2023.
[21]  A. Candra, P. Sukmasetya, and P. Hendradi, “Perancangan UI/UX aplikasi berbasis mobile Menggunakan Metode Design Thinking  study  khasus  SISFO  SKPI  UNIMMA,”  TeIKa,  vol.  13,  no.  01,  Art.  no.  01,  May  2023,  doi: 10.36342/teika.v13i01.3069.
[22]  A.  W.  M.  Gamas,  A.  S.  Wardani,  and  M.  N.  Muzaki,  “Desain  UI/UX  Aplikasi  Konter  Handphone  Berbasis  Mobile Menggunakan  Design  Thinking,”  Informatik :  Jurnal  Ilmu  Komputer,  vol.  19,  no.  2,  Art.  no.  2,  Sep.  2023,  doi: 10.52958/iftk.v19i2.6297.
[23]  B.  Oktaviani,  R.  M.  Chandra,  M.  Irsyad,  and  P.  Pizaini,  “Desain  Sistem  Pemasaran  Produk  UMKM  dengan  Konsep UI/UX Menggunakan Metode Design Thinking,” 1, vol. 4, no. 3, Art. no. 3, Apr. 2023, doi: 10.47065/josh.v4i3.3387.
[24]  A. Lahiri, K. Cormican, and S. Sampaio, “Design thinking: From products to projects,” Procedia Computer Science, vol. 181, pp. 141–148, Jan. 2021, doi: 10.1016/j.procs.2021.01.114.
[25]  T. N. Vikas, C. T. Vinay, H. A. Hegaddathy, dan R. N. Shaikh, "Design thinking: a review paper," International Journal of Advanced Research in Science, Communication and Technology, pp. 405-412, 2022.
[26]  A. A. Razi, I. R. Mutiaz, dan P. Setiawan, "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, vol. 3, no. 02, pp. 219-237, 2018.
[27]  R.  F.  Dam.  and  Y.  S.  Teo. “What  is  Design  Thinking  and  Why  Is  It  So  Popular?” Interaction  Design  Foundation  - IxDF. https://www.interaction-design.org/literature/article/what-is-design-thinking-and-why-is-it-so-popular (accessed Jul. 27, 2024).