UX Case Study: Fitur Cash Flow dan Live Tracking Aplikasi Krealogi

Yudhafrnando
7 min readNov 29, 2022

--

Sebuah perancangan UI/UX untuk Aplikasi Krealogi

Krealogi oleh Du Anyam

Latar Belakang

Krealogi adalah sebuah aplikasi pembukuan yang diperuntukkan untuk para pelaku UMKM. Aplikasi ini didesain dengan baik, dan family friendly yang diharapkan supaya user bisa lebih nyaman saat proses pencatatan sebuah pesanan.

Krealogi memilki beberapa fitur yang akan membantu user untuk proses pencatatan pesanan hingga laporan keuangan, fitur tersebut adalah Cash Flow.

  • Goals dari studi kasus ini adalah membuat sebuah fitur cash flow yang berfungsi untuk memberikan kemudahan user dalam mendapatkan laporan keuangan.
  • Impact yang coba kami berikan bila desain ini diimplementasikan adalah para pelaku UMKM diharapkan mampu untuk mencatat laporan keuangannya tidak secara manual lagi, dan juga dapat mengikuti zaman.
  • Ide dari studi kasus ini kami dapatkan ketika kami mencari beberapa apps yang berhubungan dengan fitur cash flow, dan live tracking berbasis online. Kami juga mencari beberapa referensi desain di beberapa portofolio online.

Peran Dalam Tim

Saya berperan sebagai UI Design dalam tim yang berjumlahkan empat orang termasuk saya pribadi. Tanggung jawab saya dalam tim ini, yaitu:

  1. Sebagai Ketua Kelompok 81
  2. Membantu Membuat User Persona
  3. Membuat Wireframe, dan UI Design bagian Catat Pesanan, dan Live Tracking
  4. Membuat, dan Membenahi Prototype bagian Catat pesanan, dan Live Tracking

Design Process

Dalam kasus ini kami menggunakan metode Design Thinking sebagai acuan dalam pembuatan UI/UX Design. Dengan menggunakan metode ini kami bisa menemukan permasalahan atau bahkan ide-ide baru, dan unik saat melakukan riset. Selain itu, metode ini juga memudahkan kami untuk mengembangkan sebuah solusi dari beberapa masalah yang kami temukan.

1. Emphatize

Dalam proses ini kami melakukan riset terhadap beberapa Apps yang berhubungan dengan fitur dari aplikasi yang akan kami buat. Selain itu, kami juga meriset beberapa kendala yang disampaikan oleh para pengguna pada aplikasi Krealogi ini. Kami melakukan interview dengan salah satu pelaku UMKM bidang bucket mengenai aplikasi Krealogi ini.

User Persona

2. Define

Setelah melakukan tahapan pertama, kami melanjutkan untuk mencari beberapa poin yang nantinya kami akan melakukan sebuah vote dengan tujuan menemukan poin yang paling penting, dan perlu dieksekusi dengan serius.

Define

Setelah mengumpulkan beberapa poin, kami melanjutkan untuk vote poin tersebut yang nantinya akan kami sortir sesuai dengan yang ditargetkan. Kami menggunakan stempel untuk melakukan vote, alasannya adalah supaya terlihat stempel dari setiap anggota.

3. Ideate

Setelah selesai melakukan voting, kami melanjutkan untuk memikirkan sebuah ide untuk permasalahan yang telah kita dapatkan sebelumnya. Dalam proses ini kami mengeluarkan seluruh ide, dan inspirasi yang terpikirkan, untuk nantinya kami sortir kembali dengan tujuan supaya bisa fokus sesuai dengan bidangnya atau page.

Ideate

Setelah kami menemukan beberapa ide, langkah berikutnya kami melakukan pensortiran ide. Kemudian kami membagi beberapa ide yang telah dituangkan ke Prioritization Idea dengan tujuan untuk timeline dari pengerjaan UI Design.

Prioritization Idea

Setelah melakukan pembagian, kami menemukan tiga ide yang harus atau bisa kami lakukan sekarang, dua ide yang bisa kami lakukan selanjutnya, dan tiga ide yang bisa kami lakukan di nanti.

4. User Flow

Setelah men emukan timeline, kami melanjutkan untuk membuat User Flow. Kami membuat User Flow untuk setiap masing-masing halaman.

Cash Flow, dan Hutang

Berikut adalah User Flow dari fitur Cash Flow yang menyambung dengan fitur Catat Hutang.

Catat Keuangan

Berikut adalah User Flow dari fitur Catat Keuangan yang terintegrasi dengan Laporan Keuangan.

Performa Keuangan

Berikut adalah User Flow dari fitur Performa Keuangan yang akan memberikan informasi perkembangan sebuah usaha.

Catat Pesanan, dan Live Tracking

Berikut adalah User Flow dari fitur Catat Pesanan, dan Live tracking yang diharapkan nantinya akan mempermudah user dalam mengecek resi.

5. Wireframe

Setelah membagi User Flow menjadi beberapa bagian sesuai dengan page, kami melanjutkan untuk membuat wireframe di Figma.

Wireframe

Berikut merupakan contoh wireframe yang kami buat. Kami membuat wireframe dengan User Flow sebagai acuan dalam pembuatannya. Dari wireframe ini memberikan sebuah ide atau inspirasi desain yang cocok untuk Interface aplikasi ini.

6. UI Design

Setelah menyelesaikan Wireframe, kami melanjutkan untuk membuat UI Design. Tetapi sebelum membuat UI Design, kami membuat Design System terlebih dahulu yang bertujuan untuk mempermudah saat proses pengerjaan UI Design.

UI Design

Berikut merupakan contoh bagian UI Design yang telah kami buat. Kami menggunakan warna sesuai dengan palette dari Krealogi supaya tidak menghilangkan branding image dari Krealogi.

Catat Keuangan

Berikut merupakan UI Design dari halaman Catat Keuangan. Desain ini dibuat dengan simple namun tidak melupakan detail dari beberapa form untuk menunjang laporan keuangan.

Catat Hutang

Berikut merupakan UI Design dari halaman Catat Hutang. Desain ini dibuat dengan tujuan untuk membantu user dalam melakukan proses pencatatan sebuah hutang, entah itu hutang dari seseorang ataupun hutang untuk pengembangan usaha.

Catat Pesanan, dan Live Tracking

Berikut merupakan UI Design dari halaman Catat Pesanan, dan Live Tracking. Desain ini dibuat dengan tujuan untuk membantu user dalam melakukan proses pencatatan pesanan secara detail, dan juga pengecekan resi dari paket yang tengah dikirimkan. Live Tracking ini terintegrasi dengan pihak Jasa Pengiriman, dan juga Google Maps.

Performa Keuangan

Berikut merupakan UI Design dari halaman Performa Keuangan. Desain ini dibuat dengan tujuan untuk membantu user dalam mengetahui perkembangan usahanya. Karena dalam halaman ini telah ditambahkan sebuah statistik dalam bentuk grafik.

Laporan Transaksi

Berikut merupakan UI Design dari halaman Laporan Transaksi. Desain ini dibuat dengan tujuan untuk memberikan laporan secara digital kepada user, laporan ini juga nantinya dapat di print-out untuk dijadikan bukti secara fisik.

7. Prototyping

Langkah berikutnya setelah kami menyelesaikan UI Design adalah prototype. Dalam proses ini saya mengerjakan bagian Catat Pesanan, dan Live Tracking, dan juga membantu teman-teman untuk menata beberapa halaman, dan juga Scrolling Page.

Prototype

Dalam proses prototype ini kami terdapat beberapa masalah, yaitu scrolling, button, dan lain-lain.

Ketika semua page telah terhubung satu sama lain, kami mengecek lagi mulai dari awal hingga akhir. Setelah semua sudah tidak ada masalah, kami akan melanjutkan ke langkah berikutnya, yaitu melakukan tes kepada user yang paham tentang UI/UX Design.

8. Testing

Pada hari Minggu, 27 November 2022 kami melaksanakan interview terhadap salah satu User untuk melakukan testing terhadap aplikasi yang telah kami buat.

Dalam tes ini kami mendapatkan feedback yang bisa untuk menjadi bahan evaluasi kami, pada sesi interview ini kami mendapati beberapa keunggulan, dan kekurangan sesuai dari apa yang diutarakan oleh User.

  • Kekurangan dari beberapa fitur yang telah dibuat masih ada beberapa kekurangan yang tidak terlalu menjadi masalah, adapun beberapa kasus pada bagian tertentu terlihat terlalu flat atau tidak ada pembeda dari bagian lain.
  • Keunggulan dari beberapa fitur yang telah dibuat akan menjadi hal yang sangat memudahkan saat membuat laporan usaha, karena dari fitur ini sudah sangat lengkap sekali, jadi user tidak akan bingung ketika akan merevisi catatan pesanannya.

Dalam testing ini kami menggunakan Single Ease Question yang nantinya akan menjadi titik keberhasilan dari aplikasi kami. Dari beberapa pertanyaan yang telah kami kirimkan melalui Google From dengan pemilihan skala 1–7, kami mendapatkan nilai rata-rata 6,2.

Single Ease Question

Dari nilai tersebut dapat dipastikan bahwa aplikasi kami sudah berhasil atau lolos tahap testing.

Kesimpulan

Dalam berkembangnya teknologi industri para pelaku UMKM kini dituntut untuk tidak buta akan teknologi, karena juga masih buta akan teknologi para pelaku UMKM akan kesulitan dalam melakukan promosi hingga pembukuan. Dengan fitur Cash Flow pada aplikasi Krealogi ini diharapkan nantinya bisa membantu para pelaku UMKM dalam mengembangkan usahanya.

Fitur dari aplikasi ini dibuat based on data, yang diharapkan nantinya bisa memnuhi kebutuhan user, dan bisa menjadi sarana utama dalam mengembangkan usaha.

Sekian studi kasus dari saya, semoga bisa menginspirasi orang-orang yang ingin membuat studi kasus, dan juga untuk menambah ilmu serta pengalaman saya dalam membuat studi kasus.

--

--

Yudhafrnando
Yudhafrnando

Written by Yudhafrnando

I am a logo designer with four years of experience. I am a student at State University of Malang majoring in Bachelor of Visual Communication Design.