UX Case Study Fitur Cash Flow Krealogi

Ferra Junian Wahidna
7 min readNov 28, 2021

--

Latar Belakang

Preview

Halo, para pembaca. Salam sejahtera bagi kita semua.Kembali lagi bersama saya, Ferra Junian Wahidna, seseorang yang memiliki ketertarikan di bidang UI/UX design.Pada kesempatan kali ini, saya akan menjelaskan tentang UI/UX design process pada fitur cashflow aplikasi Krealogi. Krealogi adalah platform digital oleh Du Anyam terkait supply chain yang bertujuan untuk mempercepat pertumbuhan UMKM. Krealogi merupakan sebuah ekosistem yang didasari oleh pengalaman Du Anyam dalam menjalankan bisnis kriya di Indonesia. Fitur yang akan saya design adalah fitur keuangan (cash flow) pada aplikasi Krealogi.

Fitur cash flow adalah fitur pada aplikasi untuk mengelola keuangan pada sebuah usaha. Pada fitur ini, pelaku usaha dapat melihat riwayat pemasukan dan pengeluaran serta mengunduh laporan keuangan. Dengan begitu, pelaku usaha dapat melihat performa usaha dari segi keuangan.

Objektif

1. Membantu user untuk mengelola pencatatan keuangan transaksi usaha

2. Membantu user untuk melihat laporan keuangan usaha sehingga dapat mengetahui performa usaha

Peran Team

Saat membuat UI/UX design proses fitur cashflow Krealogi, saya berkolaborasi dengan 1 anggota Peran saya adalah sebagai UI dan UX designer. Job Desc saya pada team adalah :

1. Melakukan user research

2. Mendesain user flow

3. Mendesain hal penting dalam UI

4. Melakukan testing

UX Design Process

Design Thinking

Metode yang digunakan dalam membuat UX Desain fitur cashflow Krealogi adalah dengan menggunakan metode Desain Thinking.Pada proess ini dibutuhkan banyak kolaborasi dan iterasi yang cukup sering. Proses ini mempunyai 5 tahap yaitu : Empathize, define, Ideate,dan Test. Alasan saya menggunakan design thinking adalah karena proses design thinking melibatkan pencarian masalah, dan menentukan apa yang sebenarnya dibutuhkan oleh seorang user sehingga design yang dibuat akan sesuai dengan produk yang dibutuhkan dan diinginkan pengguna.

Tahap 1 : Empathize

Tujuan dilakukannya tahap empathize adalah agar designer dapat memahami masalah objek dan mencoba menyelesaikannya. Pada tahapan ini, saya menentukan beberapa kriteria user dan mencari tahu kebutuhan pengguna. Berikut adalah target pengguna pada aplikasi Krealogi yang telah saya buat :

1. Umur : 22–30 tahun

2. Lokasi :Jawa Timur

3. Jenis Kelamin : Perempuan

4. Status Pernikahan : Belum

5. Jenis Usaha :Perdagangan (Toko Kelontong)

6. Skala Usaha :Mikro

7. Bahasa : Bahasa Indonesia

8. Dapat menggunakan aplikasi mobile

Tahap 2 : Define

Pada tahapan define, saya membuat daftar pain points atau permasalahan yang dirasakan oleh user saat menggunakan aplikasi krealogi. Pada aplikasi krealogi belum terdapat fitur cashflow sehingga fitur pada krealogi kami nilai belum lengkap.

Daftar Pain Points
Daftar Paint Points

Selanjutnya saya Bersama team melakukan brainstorming untuk membuat daftar “How Might We” yang merupakan solusi abstrak dari pain point yang telah dibuat. Tujuan dibuatnya “How Might We” adalah agar fitur yang dibuat dapat membantu menyelesaikan permasalahan user. Berikut adalah daftar “How Might We” buatan kami :

How might we

Kami membuat daftar solusi yang mungkin diimplementasikan pada aplikasi. Kami melakukan voting untuk memilih how might we yang terbaik. Tujuan dipilih nya tujuan ini berdasarkan voting adalah agar 1 team meiliki pandangan dan visi misi yang sama dalam membuat design fitur cashflow aplikasi Krealogi nantinya.

How might we yang kami sepakati adalah :

1. Membantu user untuk mengelola pencatatan keuangan transaksi usaha

2. Membantu user untuk melihat laporan keuangan usaha sehingga dapat mengetahui performa usaha

Tahap 3 : Ideate

Pada tahapan ini, saya dan team membuat solution idea yang merupakan solusi konkrit dari “How Might We” yang telah disusun sebelumnya. Solusi konkrit ini disebut “Solution Idea” berupa menu menu yang akan diciptakan pada fitur cashflow aplikasi Krealogi.

Solution Idea

Setelah membuat solution idea, maka saya selanjutnya membuat pengelompokan fitur fitur yang digambarkan dalam bentuk Affinity Diagram

Affinity Diagram

Setelah membuat affinity diagram, langkah selanjutnya adalah membuat “Prioritization Idea” dimana saya mengelompokkan fitur fitur yang dibuat berdasarkan urgensi waktu.

Prioritization Matrix

Crazy 8’s

Setelah membuat “Prioritization Idea”, maka selanjutnya adalah membuat Crazy 8's

Crazy 8's

Setelah melakukan tahap crazy 8, maka selanjutnya adalah membuat user flow, wireframe dan UI Style dari aplikasi yang akan dibuat. Disini saya membuat user flow pada fitur cashflow Krealogi.Wireframe adalah sebuah kerangka untuk menata suatu item di laman website atau aplikasi. Pembuatan wireframe biasanya dilakukan sebelum pembuatan produk tersebut dilakukan. Item yang berkaitan seperti teks, gambar, layouting, dan sebagainya.

User Flow

Selanjutnya adalah membuat UI Style Guide atau biasa yang disebut design system yang bertujuan agar lebih konsisten design nya. Pada saat membuat design system menggunakan auto layout dan komponen. Komponen artinya membuat “Parent” agar lebih mudah saat mendesign nanti.

Typography
Color palette
Button
Field
Field
Icon
Molecul
Molecul

Tahap 4 : Prototyping

Pada tahap ini, saya membuatUI design dan prototype design yang telah saya buat di figma. Berikut adalah hasil nya :

Homepage dan jatuh tempo
Fitur jatuh tempo dan pengingat
Unduh Laporan
Transaksi Penjualan
Transaksi Pembelian
Catat Hutang Piutang
Membuat Prototype di figma sesuai flow yang telah dibuat

Tahap 5 : Testing

Pada tahap ini dilakukan usability testing yaitu dengan cara interview dengan responden mengenai desain yang telah saya buat. Metode yang digunakan adalah Single Ease Question (SEQ). Tahapan pada testing adalah :

1. Menyiapkan dokumen stimulus user

2. Memberikan salam saat bertemu dengan responden

3. Memperkenalkan diri

4. Menjelaskan tujuan kegiatan interview dan kegiatan yang akan dilakuakan

5. Memberikan arahan mengenai prosedur kegaitan dari awal hingga akhir

6. Memberikan perintah kepada responden untuk memperkenalkan diri yaitu Nama, Pekerjaan, Usia, dan Domisili

7. Melakukan kegaiatan wawancara berdasarkan daftar pertanyaan yang sudah dibuat

8. Menjelaskan singkat fitur cashflow aplikasi Krealogi

9. Memberikan Link Figma kepada responden dan meminta responden untuk Share Screen

10. Menjelaskan tentang prosedur yang harus dilakukan dan cara mengoperasikan Figma Prototype kepada responden

Proses interview bersama user melalui e-meet

Setelah user selesai menjalankan prototype, maka saya meminta 1 responden untuk memberikan penilaian aplikasi dengan skala 1–7 di setiap task. Metode yang digunakan adalah usability testing dengan menggunakan perhitungan SEQ (Single Ease Question).

Pada metode SEQ terdapat ketentuan penilaian, yaitu :

Nilai SEQ lebih dari 5,5 maka statusnya adalah passed.

Hasil interview saya dengan responden adaQlah memiliki nilai rata rata SEQ sebesar 6, 5 yang artinya adalah “Passed”

Berikut adalah lampiran dokumen stimulus user research dan record excel hasi interview :

Kesimpulan

Berdasarkan UX design process yang telah saya buat bersama team, bahwa sebelum membuat desain sebuah fitur pada aplikasi diperlukan research dan perancangan yang matang.Untuk memastikan design sudah sesuai dengan keinginan pengguna atau belum, maka perlu dilakukan testing dengan target user yang sesuai

membuat desain suatu aplikasi membutuhkan perancangan yang matang dan proses evaluasi langsung dari user aplikasi agar aplikasi yang dibuat nantinya dapat berjalan sesuai kebutuhan. Selain itu, evaluasi juga dibutuhkan untuk memperbaiki design kedepannya agar lebih baik lagi.

--

--

Ferra Junian Wahidna

I am from Information System major interested in UI/UX design, business and product development.