UI/UX Case Study: Design Untuk Registrasi, Input Stok Barang dan Riwayat Transaksi.

Bored Monkey
6 min readSep 28, 2022

--

Disclaimer: Hasil karya ini merupakan bagian dari program Skilvul DTS PROA UI/UX Design Batch 3–2022

Latar Belakang

Krealogi adalah aplikasi yang hadir dan bertujuan untuk mendukung UMKM (Usaha Mikro Kecil Menengah). Sebagai aplikasi catatan digital yang bisa dipakai segala jenis usaha dari usaha kriya/anyaman, pemilik online shop, pengusaha makanan sampai pengrajin. Krealogi berusaha menerapkan aplikasi yang mudah digunakan semua kalangan.

Objektif

Krealogi berharap bisa menjadi aplikasi pilihan para pengusaha dan pegiat UMKM dalam hal catatan digital sehingga diperlukan aplikasi yang ramah dan mudah digunakan pengguna. Kami disini mencoba menjawab tantangan tersebut dengan:
1. Membuat sistem registrasi dan log in yang mudah untuk pengguna.
2. Membuat sistem untuk menginput barang yang mudah dan berisi informasi yang dibutuhkan pengguna.
3. Membuat sistem riwayat transaksi sehingga pengguna dapat mengetahui performa keuangan dari pengguna.

Peran dalam Tim

Dalam membuat project ini, saya berkolaborasi dengan 3 orang anggota kelompok saya. Ferdynal Lubis, Rafika, dan Arga Hariadji.
1. Saya, Thogu Marwan Hardy Pasaribu, bertanggung jawab dalam tahap untuk mendesain tampilan aplikasi dan user flow.
2. Ferdynal Lubis, mempunyai tanggung jawab hampir yang sama dengan saya, kami sering bertukar pikiran dalam desain dan user flow.
3. Yunfika Rahmi, dalam proyek ini dia berperan besar dalam hal UX Research.
4. Arga Hariadja, dalam proyek ini membantu dalam hal desain terutama dalam pemilihan icon.

Design Proses

Dalam membuat suatu produk dibutuhkan dalam suatu proses kreatif. Kami disini memilih Design Thinking sebagai pendekatan kami dalam mendesain dan membuat produk yang kami inginkan:

Empathize

Pada tahap ini kami melakukan secondary research dengan mengumpulkan data berupa artikel yang berkaitan dengan permasalahan/objektif dari case study ini dan kami juga membandingkan dengan aplikasi serupa yang umumnya digunakan terkait useflow saat login, cara menginput barang, dan fitur melihat performa keuangan.

Define

Setelah melakukan secondary research, kami melakukan brainstorming tentang apa saja hal yang menjadi permasalahan dari user saat menggunakan aplikasi. Setelah mengumpulkan masalah dari user, selanjutnya kami mengelompokkan masalah tersebut pada frame “Pain Points”. Pada tahap, “How- Might We” kami berdiskusi tentang bagaimana kami menyelesaikan masalah dari Pain Points yang sudah kami buat dan tentu saja kami mengelompokkannya.

Ideate

Bedasarkan “How-Might We” dan “Pain Points” kami mencoba mengumpulkan ide dalam “Define Stage”

a. Solution
Dalam hal ini kami berfokus untuk membuat:
1) Sistem login dan registrasi yang mudah untuk user
2) Sistem penginputan barang yang mudah sehingga tidak membingungkan user
3) Melihat catatan dan performa keuangan yang menampilkan informasi yang dibutuhkan user yang berguna dalam kegiatan usahanya.

b. Affinity Diagram
Semua solusi yang kami tuangkan, setelah dipilih yang terbaik dan mungkin untuk dilakukan. Kami kelompokkan lagi dalam beberapa group bedasarkan kategorinya.

c. Prioritization Idea
Proses kreatif dalam membuat aplikasi memerlukan ide yang banyak. Tidak ada ide yang buruk hanya saja ide yang belum terlaksana. Jadi, kami mengelompokkan ide-ide kami bedasarkan tingkat seberapa susah dalam membuatnya dan seberapa penting hal tersebut untuk user.

d. Userflow
Tahap terakhir ideate adalah kami membuat userflow dan menjadi acuan kami nantinya dalam membuat aplikasi dalam perpindahan frame ke frame lainnya.

Prototyping

a. Wireframe
Setelah membuat userflow, kami mencoba membuat wireframe berdasarkan versi kami masing-masing.

Wireframe Untuk Halaman Login
Wireframe Untuk Halaman Stok Barang

b. UI Style Guide
Mendesain aplikasi diperlukan suatu konsistensi terhadap warna, teks, dll. Maka diperlukan UI Style Guide, sehingga mempermudah kami dalam hal desain dan hasilnya tetap konsisten dari setiap frame.

UI Style Guide

c. UI Design
Kami mencoba membuat wireframe bedasarkan UI Style Guide yang telah kami buat. Sehingga dihasilkan UI Design seperti yang kami harapkan.

Home, Login, Register, dan Profile
Produk
Riwayat Transaksi

d. Prototype
Tahap terakhir ini kami menghubungkan setiap frame dan mencobanya. Kami berharap hasil yang kami buat seamless dan sesuai dengan kebutuhan dari user.

Test

Suatu produk yang sukses adalah produk yang disenangi oleh konsumen. Jadi untuk mengetahui hal tersebut kami melakukan “user research”. Metode yang kami gunakan adalah “in-depth interview”. Kami melakukan “usability testing” untuk mengetahui sejauh mana prototype ini berguna untuk user. Disini kami menggunakan SEQ Method untuk mengukur pendapat user tentang penggunaan prototype yang kami buat.

a. Usability Testing
Kami membuat pertanyaan kepada dalam bentuk dokumen yang nantinya menjadi acuan kami dalam melakukan sesi interview. Adapun hal yang kami tanyakan terbagi dalam 3 part yaitu:
1. Task 1- Berkaitan dengan hal pendaftaran dan profil akun.
2. Task 2- Berkaitan dengan menginput barang dan tampilan produk
3. Task 3- Berkaitan dengan riwayat transaksi.

Berikut ada hasil dari setiap task yang kami tanyakan dalam skala 1–7.

Untuk lebih jelasnya, anda dapat mengaksesnya disini.

Kesimpulan

Setelah melakukan usability testing kepada user tentang prototype yang kami buat. Kami mendapatkan kesimpulan:
1. User sudah terbiasa menggunakan aplikasi serupa sehingga prototype yang kami gunakan mudah untuk dimengerti.
2. User sangat menyukai desain dari prototype yang kami buat. Warna yang cerah, tulisan yang jelas, tombol yang besar adalah beberapa hal yang sangat disukai user dari prototype kami.
3. Bagian yang paling disukai user adalah tampilan untuk riwayat transaksi. User merasa tampilan tersebut sangat berbeda dari aplikasi lain dan menampilkan informasi yang dia butuhkan.
4. User memberi beberapa saran terkait fitur prototype yang perlu dipertimbangkan, yaitu: 1) Segera untuk menghadirkan fitur yang bisa terintergrasi langsung dengan marketplace dan e-commerce. 2) Menambahkan fitur dimana ketika pembelian barang berbeda dari biasanya sehingga user bisa menentukan berapa keuntungannya.

Hubungi saya:

Linked In

--

--