UI/UX Case Study: Aplikasi Krealogi

Latar Belakang

Krealogi merupakan sebuah aplikasi platform digital yang ditujukan untuk para pemilik bisnis UMKM. Latar belakang aplikasi ini dibangun adalah berdasarkan pengalaman tim krealogi sejak 2015, memahami bahwa UMKM Indonesia mengalami banyak kendala dalam manajemen pesanan, produksi, persediaan hingga pengiriman.

Aplikasi ini ditujukan untuk dapat membantu proses usaha UMKM. Seperti pencatatan bahan baku, pencatatan pesanan, perencanaan produksi, hingga laporan usaha.

Sampai saat ini, pengembangan sistem aplikasi Krealogi masih tetap dikembangkan guna meningkatkan pengalaman yang maksimal dalam penggunaan aplikasi.

Disclaimer:
Kami bukan bagian dari pihak Challenge Partner Krealogi dan karya yang kami buat adalah bagian dari program Skilvul Digital Talent Scholarship PROA UI/UX Design

Objektif

Saat ini, pada aplikasi krelogi, belum terdapat fitur CRM dan Cashflow, sehingga objektif dari studi kasus UI/UX design ini adalah:

1. Membuat UI/UX aplikasi dengan fitur simple CRM
2. Membuat UI/UX aplikasi berupa Cashflow penjualan
3. Membuat UI/UX aplikasi yang mudah digunakan

Peran dalam Tim

Sebagai Trainee UI/UX Designer dalam tim yang beranggotakan 4 orang; Muhammad Jehan Mahsan, Rizky Amanah Putra, Febri Saputra, Ardian. Dalam tim ini, tanggung jawab saya adalah

1. Melakukan riset pada aplikasi Krealogi.
2. Ikut serta dalam proses brainstorming design thinking mulai dari Emphatize, Define, Ideate, Prototype, dan Testing.
3. Merancang userflow aplikasi.
4. Merancang wireframe.
5. Membuat Prototype aplikasi.
6. Membuat Stimulus User Research (Research Objective, Respondent Criteria, List of Question, Research Scenario)
7. Meng-interview responden pada sesi In-Depth Interview pada fase User Research.

Design Process

Dalam kasus ini, kami memilih menggunakan Design Thinking sebagai pendekatan design process yang kami lakukan, karena menurut pendapat kami, dengan menggunakan metode Design Thinking kita dapat melakukan iterasi penyelesaian masalah sesuai dengan kebutuhan bisnis. Serta tidak terpaku pada proses berurut yang membuat design process ini menjadi fleksibel.

1 — Empathize

Pada tahap Emphatize, kita melakukan pencarian informasi dari pengalaman penggunaan aplikasi menggunakan secondary research dengan mengambil informasi dari:

• Resume sesi AMA
• Mendalami Produk yang diinginkan Challange Partner
• Feedback User dari App Store/Play Store dari aplikasi serupa
• Data Analitik Pemerintah
• Competitor Analisis

Hasil dari informasi yang kita dapat menjadi acuan untuk dapat melakukan tahap selanjutnya, yaitu Define.

2 — Define

Selama tahap Define kita menganalisis pengamatan untuk menentukan masalah inti yang telah diidentifikasi. Kita harus berusaha mengidentifikasi permasalah yang dihadapi oleh pengguna.

Pain Points

Merupakan kesulitan yang dihadapi oleh pengguna

[Define] Paint Points

How-Might We
Merupakan pengumpulan ide “Bagaimana jika” dari permasalahan pain points yang didapat.

[Define] How Might We

3 — Ideate

Solution Idea

Merupakan solusi ide dari Paint points dan HMW yang didapat pada fase Define

[Ideate] Solution Idea — How Might We

Affinity Diagram :
Kita melakukan pengelompokkan dari solution Idea sehingga didapatkan kelompok

• Help Desk
• Notification
• Transaction
• Typography
• Data Analytics

[Ideate] Solution Idea — Affinity Diagram

Prioritization Idea
Pada fase ini, kita meprioritaskan fungsi yang berkaitan dengan tahap awal CRM dan Casflow dimana berfokus pada pembenahan data konsumen yang lengkap dan informatif, serta cashflow dan data analytic yang didapat dari data yang ada.

[Ideate] Prioritization Idea

4 — Prototyping

User Flow:
User Flow kita bagi menjadi 5 flow

• Fitur save data lengkap pembeli pesanan
• Lihat list, add, edit, atau hapus data lengkap pembeli
• Data analytic grafik penjualan
• Fitur sortir penjualan
• Insight penjualan

[Prototyping] User Flow

Wireframe:
Dari flow yang sudah dibuat, maka didapatkan wireframe seperti berikut

[Wireframe] Dashboard

[Wireframe] Lihat list, add, edit, atau hapus data lengkap pembeli

[Wireframe] Sortir Penjualan

UI Style Guide

Dari Wireframe yang sudah dibuat, selanjutnya kita membuat UI Style Guide untuk membuat Prototype UI Design kedepannya

Warna

[Prototyping] Color Pallete

Text Style

[Prototypinag] Text Style

Button

[Prototypinag] Button

Icon

[Prototypinag] Button

UI Design

Dari UI Style Guide dan Wireframe, maka dapat dibuat UI Design mengikuti UI Style Guide dan Wireframe yang sudah dibuat pada tahap sebelumnya.

Figma Prototyping

Berikut merupakan Prototyping Figma yang dapat ditest oleh user.

5 — Testing

In Depth Interview Question

Task 1

Pada task 1, user melakukan task Pencatatan Pesanan & Pencatatan Pelanggan

Task 2

Pada Task 2, user melakukan task pada Menu Pesanan & Sortir

Task 3

Pada Task 3, user melakukan task Grafik Penjualan dan Sortir

Task 4

Pada Task 4, user melakukan task Insight Penjualan

Kesimpulan

Hasil dari Single East Question yang didapat adalah 6 point dan termasuk dalam kategori passed dengan minimum 5,5.
Secara overall aplikasi dan fitur yang diberikan sudah sesuai dengan kebutuhan user. Hanya saja terdapat catatan untuk improvement selanjutnya

Rekomendasi Selanjutnya

• Harapannya, akan lebih baik jika menggunakan aplikasi ini tidak perlu melakukan proses pencatatan dan perhitungan manual lagi (semua sudah terekap dalam sistem)
• Warna yang tabrakan pada desain UI sebaiknya disesuaikan dengan Color Contrast
• Penambahan keterangan pelanggan baru atau pelanggan lama
• Perlu adanya informasi total seluruh penjualan untuk mengetahui jumlah masing-masing pembelian konsumen
• Perlu adanya total keseluruhan penjualan, rentang data yang ditampilkan (mingguan, bulanan, tahunan)

Penutup

Design Proses yang sudah dilakukan menghasilkan fitur dan tampilan baru untuk menu CRM dan Cashflow untuk aplikasi Krealogi. Serta didapatkan juga rekomendasi dari UX Case Study ini. Kami berharap Design proses yang kami lakukan dapat berguna untuk pengembangan aplikasi krealogi dimasa mendatang