UI/UX Case Study — Simplisitas UI/UX Pencatatan Transaksi dan Laporan Keuangan pada Aplikasi Krealogi

Halo semuanya! Kali ini saya akan menceritakan design yang telah saya buat untuk UI/UX Pencatatan Transaksi dan Laporan Keuangan pada Aplikasi Kreologi. Pembuatan design dilaksanakan secara berkelompok yang merupakan bagian dari pelatihan Digitalent Scholarship Kominfo melalui Skilvul sebagai mitra penyelenggara pelatihan. Pembuatan design didasarkan pada beberapa masalah/kelemahan yang dialami oleh Krealogi dalam tampilan pada aplikasi existing, tim memilih satu permasalah untuk menghasilkan pilihan design yang diharapkan dapat membantu memecahkan masalah yang terjadi. Pemecahan masalah dalam pembuatan design tidak terlepas dari pengarahan mentor melalui live mentoring yang telah dijadwalkan.

Berikut detail dari case study yang saya kerjakan :

Product Vision : Menyediakan Pencatatan Transaksi dan Laporan Keuangan yang mudah bagi pengguna untuk melihat cash flow transaksi yang telah dilakukan.

Timeline : 8 minggu

Tools : Figma

OVERVIEW

Ide dari penambahan pencatatan transaksi dan ringkasan laporan keuangan didasarkan dari observasi tim pada aplikasi krealogi existing.

Dalam merancang sebuah penambahan fitur yang sesuai dengan kebutuhan pengguna, ada beberapa tahapan yang perlu dilakukan. Dalam case study ini, pemecahan masalah mengikuti tahapan dasar dalam Design Thinking Process.

A. EMPATHIZE

Pada tahap awal, mentor memberikan instruksi untuk mengidentifikasi bisnis proses dari aplikasi krealogi. Saya menempatkan diri sebagai pengguna aplikasi sehingga dapat mengambil sudut pandang dari sisi fitur yang yang disediakan dan yang perlu diperbaiki/ditambahkan untuk memudahkan saya dalam melakukan pencatatan keuangan dan melihat ringkasan laporan keuangan.

Pada proses penggalian permasalahan (what?) ini setiap dibantu dengan root cause analysis untuk mendapatkan permasalahan sedetail mungkin.

Dalam proses identifikasi tersebut saya menggunakan Paint Point sebagai alat bantu untuk mengidentifikasi permasalahan. Setiap ide anggota tim diwakili oleh warna yang berbeda.

B. DEFINE

Setelah ide permasalahan yang diperoleh dari tahap empathize, langkah selanjutnya tim mengelompokkan permasalah yang mirip kedalam kelompok permasalah yang sama. Hal tersebut digunakan untuk mengeliminasi permasalahan yang kira-kira sama sehingga fokus solusi dari permasalahan dapat diperoleh.

C. IDEATE

Setelah analisa permasalahan dilakukan, tahapan selanjutnya adalah menganalisa kemungkinan solusi terbaik.

! Solution

Pada tahapan ini saya menggunakan How Might We untuk membantu mencari solusi permasalahan. Solusi dari permasalah digali dengan menjawab pertanyaan berikut?

“How might we create a simple and powerfull cashflow?”

Terdapat beberapa poin untuk menjawab pertanyaan diatas. Beberapa solusi permasalahan mengikuti pengelompokan masalah pada tahap DEFINE.

1. Help & Support

Fasilitas Help & Support dapat membantu pengguna menyelesaikan masalah yang dihadapi pada saat menggunakan aplikasi. Selain dapat membantu pengguna, adanya Help dan Support ini juga sekaligus dapat membantu dalam pengembagan aplikasi krealogi untuk mengisi celah yang masih kurang atas banyaknya pertanyaan yang disampaikan pengguna. Semakin sedikit pertanyaan yang disampaikan dapat menjadi salah satu tolok ukur bahwa aplikasi krealogi bahwa dapat digunakan dengan mudah

2. Design

Berdasarkan permasalahan yang disampaikan mitra, terdapat permasalahan design cashflow . Tim berusaha untuk memberikan insight untuk memberikan design Pencatatan Transaksi dan Laporan Keuangan agar lebih mudah digunakan oleh pengguna.

3. Unfamiliarity

Tampilan yang kurang familiar dapat mengganggu pengguna dan informasi yang disajikan tidak tersampaikan dengan sempurna.

Terindentifikasi beberapa poin yang sebagaimana berikut:

Prioritas Solusi

Setelah solusi diperoleh, langkah selanjutkan adalah memetakan solusi sesuai dengan prioritas solusi yang akan dilakukan. Hal ini dapat membantu UI/UX Designer mengambil keputusan solusi mana yang akan dieksekusi terlebih dahulu.

Design Tampilan UI

Setelah prioritas dipetakan, kemudian dibuat sketsa Design yang akan dibuat. Crazy’8 membantu saya dalam pembuatan design, hanya terdapat 8 design yang dibuat menggunakan metode ini.

Wireframe

Setelah dibuat sketsa Design, dilanjutkan dengan pembuatan Wireframe. Saya membuat beberapa penyesuaian sebagai pengembangan dari ide sebelumnya.

D. PROTOTYPE

Setelah wireframe dibuat dan sudah dipetakan alur dari design yang akan dibuat, langkah selanjutnya adalah membuat prototype.

• Interface Design

Setelah wireframe dibuat dan sudah dipetakan alur dari design yang akan dibuat, langkah selanjutnya adalah membuat prototype.

saya menggunakan warna dominan maroon untuk tampilannya, warna ini masih mengusung warna asli dr aplikasi krealogi yag sebelumnya.

• UI Style Guide

BerikutUI Style Guide yang saya gunakan

Kesimpulan

Aplikasi Krealogi adalah aplikasi yang manfaatnya dapat berdampak besar bagi masyarakat dan secara tidak langsung bagi perekonomian. Saya yakin jika aplikasi ini serius melakukan perbaikan diantaranya dengan mempermudah pencatatan laporan keuangan, bukan hal yang tidak mungkin akan digunakan seperti e-commerce besar yang sudah ada.