UI/UX Case Study “Redesign App Krealogi dengan fitur Cash Flow”

Fahimmal Aisyah
5 min readNov 29, 2022

--

Latar Belakang

Krealogi adalah bagian dari revolusi digital yang membantu usaha kecil Indonesia untuk sukses. Aplikasi Krealogi mudah digunakan, sehingga dapat digunakan oleh siapa saja, termasuk para pelaku bisnis dari segala latar belakang. Fitur aplikasi ini dirancang untuk membantu bisnis memecahkan masalah umum. Krealogi adalah tempat di mana dapat belajar bagaimana menjadi pengusaha yang efektif.

Saya dan tim memilih untuk membuat fitur yang modul arus kas cukup penting dalam proses bisnis, karena dapat membantu UKM melacak pergerakan uang masuk dan keluar dari suatu perusahaan yang disebut “Cash flow”. Krealogi ingin membuat sistem keuangan yang lebih baik untuk bisnis, sehingga melibatkan pengguna dengan wawasan interaktif yang dapat mereka percayai dengan jelas data permukaan untuk membantu menghitung dan membuat perkiraan pembayaran dengan mudah dan menyesuaikan tanggal pembayaran tagihan/faktur yang diharapkan. Memandu mereka mulai dari mendiagnosis masalah arus kas hingga menyusun solusi.

Sasaran

Tujuan dari studi kasus ini adalah Mengembangkan tampilan antar-muka pengguna yang ramah dan mudah untuk digunakan, serta mengembangkan fitur-fitur terkait Cash Flow untuk membantu pelaku usaha menjangkau pelanggan dengan mudah, dan membantu mereka mengelola arus kas mereka.

Peran dalam tim

Seperti yang saya sebutkan sebelumnya, saya mengerjakan studi kasus ini dengan tim yang terdiri dari 5 orang yaitu Fahimmal Aisyah Walid, Akhmad Mubin, Muhammad Ardhissalam, Daffa Btara Alif Putra Yuono, dan Nida Nur Affisah. Dalam membuat solusi desain ini, kami memiliki tanggung jawab yang sama dengan peneliti UX dan desainer UI/UX. Ini berarti kami perlu mempertimbangkan bagaimana desain akan bekerja dan bermanfaat bagi pengguna, seperti :

  • Analisis pesaing
  • Wawasan pelanggan
  • Membuat ide
  • Wireframe dan UI
  • Membangun Prototype

Design Process

Pemikiran desain membantu kami membuat desain yang memenuhi kebutuhan bisnis. Pendekatan ini membantu memikirkan masalah dan solusi dengan cara yang kreatif. Cara berpikir ini membantu kami menciptakan desain yang lebih baik yang memenuhi kebutuhan bisnis.

Tahap 1 — Emphatize

Proses yang dilakukan pada tahap ini adalah meneliti sudut pandang dan mengumpulkan informasi kebutuhan target pengguna sebelum mendefinisikan masalah dan melakukan ideasi.

Setelah membahas beberapa potensi masalah, kami mulai melakukan survei dan mengatur wawancara mendalam dan menemukan beberapa masalah, seperti:

  • Pengguna tidak tahu cara meningkatkan realitas perkiraan, yaitu menambahkan pendapatan.
  • Seorang pengguna harus memasukkan perkiraan secara manual untuk mendapatkan gambaran yang realistis. Membutuhkan data secara otomatis seperti excel/pdf.
  • Agar perkiraan tetap realistis dalam waktu nyata, diperlukan input/pembaruan manual.
  • Sulit untuk menampilkan wawasan arus kas yang penting secara dinamis pada grafik perkiraan.
  • Pengguna kesulitan membedakan jenis transaksi.

Tahap 2 — Define

Setelah memahami apa yang dibutuhkan pengguna, proses dilanjutkan dengan mendefinisikan apa yang dibutuhkan.

Pain Point

Pada tahap ini, kami mengetahui bagian Paint Point, dan memasukkanya ke dalam catatan tempel. Kemudian, kami mencari tahu bagian dari Pain Point, dan memasukkannya ke dalam diagram juga. Kami akan mencoba mencari tahu apa masalah utamanya, dan kemudian menemukan satu tujuan spesifik yang dapat kami kerjakan untuk menyelesaikannya.

How-Might We

Karena semua grup catatan memiliki judul sebagai pokok bahasan utama, kami dapat membuat satu catatan tempel untuk setiap judul grup, yang berisi tips tentang cara mengatasi masalah tersebut. Dan langkah ini melengkapi fase define.

Tahap 3 — Ideate

Kami mulai memikirkan kemungkinan solusi untuk masalah tersebut, dan kami menyusun ide berdasarkan apa yang kami ketahui tentang situasinya dan orang-orang yang akan menggunakannya.

Ide Solusi

Setiap orang di tim mengumpulkan ide tentang fitur atau fungsi yang dapat membantu menyelesaikan tujuan target di catatan tempel. Beberapa ide yang mirip akan dikelompokkan menjadi satu.

Tahap 4 — Prioritization Idea

Setelah semua kemungkinan solusi dimasukkan, kami mulai memilih untuk memutuskan solusi mana yang akan diprioritaskan. Ide untuk solusi disertakan di layar beranda, yang merupakan persyaratan wireframe wajib untuk proyek tersebut. Kami memutuskan bahwa pengambil suara teratas harus menjadi solusi untuk masalah ini. Sekarang kita akan mulai memikirkan produk akhir. Ini adalah langkah pembuatan ide, di mana kami mendapatkan ide untuk proyek tersebut.

Tahap 5 — User Flow

Kami merancang saluran ini untuk membantu orang berkomunikasi satu sama lain dengan lebih mudah, kami memikirkan tentang apa yang diinginkan pengguna dan mencoba memberikan apa yang mereka butuhkan. Jika tidak, aplikasi akan meminta pengguna untuk memvalidasi kebutuhan dan keinginan mereka. Kami merancang sistem yang fleksibel dan dapat digunakan untuk mempelajari hal-hal baru atau memilih apa yang harus dilakukan. Kami ingin memastikan bahwa ketika pengguna mengklik sebuah tautan, tautan tersebut akan membawa mereka ke halaman yang benar.

Tahap 6 — Wireframe

Kami akhirnya pada langkah wireframing. Wireframe dimaksudkan untuk membantu kita membuat Wireframe Low Fidelity dan lebih mudah dan mempersingkat waktu. Berikut adalah contoh Wireframe Low-Fi.

Tahap 7 — Design System

kami membuat komponen komponen yang dibutuhkan seperti font, warna, button, dan icon agar menjaga standar kualitas dan konsistensi dari design. Kami juga dapat langsung mengambil asset dari komponen yang ada dalam design system ini sehingga hasil design menjadi lebih konsisten. Kami dapat langsung mengambil asset yang sudah ada dan tidak perlu membuat berulang-ulang kali.

Tahap 8— UI Design

Setelah tahap wireframe kami membuat UI Design dengan tampilan produk yang ingin kami perlihatkan (yang visible atau bisa dilihat oleh mata). UI Designer lebih fokus pada visualisasi, coloring, dan hal-hal yang berkaitan dengan kreativitas dari interface yang akan digunakan oleh user.

Tahap 9 — Prototype

Tahap ini membutuhkan waktu paling lama untuk diselesaikan. Ada beberapa langkah yang terlibat dalam menyelesaikan fase ini. Mulai dari tahap ini, kami mulai mengembangkan konsep antarmuka aplikasi kami sendiri. Ringkasan ini mencakup semua pekerjaan dalam tahap ini.

Tahap 10 — Testing

Setelah wawancara, kami meminta responden untuk menguji prototipe dan menanyakan beberapa hal. Selama uji kegunaan, responden menyatakan bahwa dia tidak memiliki masalah dalam melaksanakan tugas yang diminta. Ia mengatakan bahwa informasi yang diberikan sudah cukup dan alurnya mudah dipahami.

Secara keseluruhan, responden mengatakan bahwa alur fitur-fiturnya mudah dipahami. Responden menganggap fitur cash flow menjadi poin menarik dan dapat memotivasi membantu bisnis UMKM , dan responden menganggap semua fitur berguna. Rata-rata skor SEQ untuk desain kami 6, yang dapat dikategorikan Baik.

Kesimpulan

Ketika kami merancang aplikasi ini, kami sangat senang melewati banyak tantangan yang berbeda. Kami melihat masalahnya dan membandingkannya dengan aplikasi lain untuk mendapatkan pemahaman yang lebih baik tentang apa yang dibutuhkan pengguna. Saat kami berbicara tentang proyek, kami mulai memahami langkah-langkah yang terlibat dalam mendesainnya. Kami menggunakan sistem yang membuat prosesnya lebih mudah, dan kami dibantu dengan konsep sistem desain. Kami menggunakan umpan balik untuk mencari tahu apa yang perlu diperbaiki selama setiap fase. Kemudian, kami melakukan pengujian untuk memastikan semuanya berjalan sebagaimana mestinya. Kami tahu masih ada beberapa hal yang dapat kami lakukan untuk membuat desain ini menjadi lebih baik di masa mendatang. Kami berharap aplikasi ini dapat menjadi tempat di mana orang dapat belajar dan berbagi hal bersama, dan bersenang-senang melakukannya.

--

--