Symbolix.ai - Designing an Intuitive POS Feature for an ERP Platform

📌 Ringkasan proyek

Saya merancang modul Point-of-Sale untuk platform ERP retail yang sudah memiliki integrasi dengan inventory, accounting, dan loyalty. Fokus utama saya adalah membuat alur transaksi yang cepat untuk kasir, tetap aman untuk proses yang sensitif, dan tetap informatif untuk supervisor serta manajer toko.

Latar Belakang Proyek

Symbolix.ai adalah platform ERP yang digunakan untuk kebutuhan retail seperti supermarket dan sports shop. Dalam proyek ini, perusahaan membutuhkan modul POS baru yang terintegrasi penuh dengan sistem yang sudah ada, sehingga data transaksi tidak berdiri sendiri, tetapi langsung terhubung ke stok, akuntansi, dan loyalty customer.

Saya masuk ke proyek ini untuk menerjemahkan kebutuhan bisnis yang cukup padat menjadi antarmuka yang bisa dipakai dalam ritme kerja kasir yang cepat. Tantangannya bukan sekadar membuat layar transaksi terlihat rapi, tetapi memastikan setiap keputusan di UI benar-benar mendukung pekerjaan pengguna di situasi operasional nyata.

Masalah yang Ingin Diselesaikan

Sistem POS untuk retail harus bekerja di bawah tekanan yang sangat nyata: antrean panjang, kebutuhan transaksi yang cepat, risiko kesalahan input, dan aturan bisnis yang tidak sederhana. Di sisi lain, sistem tetap harus mampu mengakomodasi pembayaran campuran, otorisasi supervisor, refund, mode offline, aturan pajak, dan kebutuhan multi-outlet.

Saya melihat tantangan utamanya ada pada pertanyaan ini: bagaimana membuat antarmuka yang terasa ringan untuk kasir, tetapi tetap cukup kuat untuk menampung kompleksitas bisnis di belakang layar? Dari situlah saya memposisikan desain bukan sebagai lapisan visual, tetapi sebagai alat kerja yang harus efisien, jelas, dan bisa dipercaya.

⚠️ Kompleksitas utama yang harus saya akomodasi

• Pembayaran multi-metode seperti tunai, kartu, QRIS, dan poin loyalty dalam satu transaksi
• Otorisasi supervisor untuk void, refund, dan price override
• Status koneksi online/offline dan kebutuhan sinkronisasi
• Kepatuhan terhadap aturan pajak dan jejak audit
• Multi-outlet dan perbedaan hak akses antar peran pengguna

Tantangan Desain

Bagi saya, tantangan terbesar dalam proyek ini bukan hanya menyusun alur, melainkan memilih prioritas. Saya harus menentukan informasi mana yang harus selalu terlihat, aksi mana yang harus bisa dicapai secepat mungkin, dan kondisi mana yang tidak boleh dibiarkan membingungkan pengguna.

Kasir membutuhkan kecepatan dan fokus. Supervisor membutuhkan kontrol. Manajer membutuhkan ringkasan yang cepat dibaca. Ketiganya berada dalam satu sistem yang sama, tetapi memiliki tujuan yang berbeda. Karena itu, saya tidak bisa menggunakan pendekatan desain yang seragam untuk semua layar. Saya harus membedakan ritme interaksi, kepadatan informasi, dan titik keputusan untuk setiap peran.

Proses yang Saya Lakukan

1. Memahami kebutuhan bisnis secara menyeluruh

Saya memulai dari Business Requirements Document (BRD) bersama tim business analyst. Langkah ini penting karena proyek POS tidak dapat diselesaikan hanya dengan asumsi pengalaman pengguna umum. Saya perlu memahami aturan transaksi, dependensi antarmodul, kebutuhan audit, dan skenario pengecualian yang akan memengaruhi perilaku sistem.

Alih-alih langsung masuk ke visual, saya menggunakan tahap ini untuk memahami logika bisnis di balik setiap aksi. Ini membantu saya membedakan mana alur yang memang rumit karena kebutuhan operasional, dan mana yang sebenarnya bisa disederhanakan lewat desain.

2. Melakukan riset pengguna untuk memvalidasi kebutuhan lapangan

Setelah memahami requirement, saya melakukan wawancara dengan kasir, supervisor, dan manajer toko. Tujuan saya adalah melihat bagaimana pekerjaan berlangsung di lapangan, hambatan apa yang paling sering muncul, dan bagian mana dari alur transaksi yang paling rawan memperlambat kerja atau menimbulkan kesalahan.

Dari sini saya mengidentifikasi dua orientasi kebutuhan yang cukup berbeda. Kasir membutuhkan antarmuka yang cepat dibaca dan minim distraksi, sedangkan manajer lebih membutuhkan visibilitas data dan ringkasan performa yang bisa dipahami tanpa harus menggali terlalu dalam.

3. Menyusun persona dan user flow yang benar-benar operasional

Saya menerjemahkan hasil riset menjadi persona seperti Sari, the Fast Cashier dan Pak Budi, the Analytical Manager. Persona ini tidak saya buat sebagai artefak formal semata, tetapi saya gunakan untuk menguji apakah keputusan desain saya benar-benar relevan terhadap tujuan masing-masing pengguna.

Setelah itu, saya memetakan user flow untuk alur inti seperti scan barang, diskon, multi-tender payment, void, refund, dan Z-Report. Dari pemetaan ini saya bisa melihat bagian mana yang berpotensi menimbulkan beban kognitif berlebih, langkah mana yang bisa dipersingkat, dan titik mana yang membutuhkan konfirmasi tambahan demi keamanan proses.

4. Membuat wireframe untuk menguji struktur dan prioritas

Pada tahap wireframing, saya fokus pada struktur informasi dan urutan aksi. Salah satu keputusan yang saya ambil adalah menambahkan filter kategori dan pencarian prediktif pada pencarian produk. Keputusan ini saya buat karena dalam konteks kasir, ketergantungan penuh pada barcode bisa menjadi hambatan saat produk sulit dipindai atau input harus dilakukan manual.

Wireframe saya gunakan untuk menguji seberapa cepat pengguna bisa memahami layar, menemukan aksi penting, dan menyelesaikan tugas tanpa banyak berpikir ulang. Bagi saya, wireframe yang baik adalah wireframe yang sudah menjawab logika kerja, bukan hanya susunan kotak.

5. Mengembangkan high-fidelity design dan sistem komponen

Setelah alur utama tervalidasi, saya melanjutkan ke high-fidelity design di Figma. Di tahap ini, saya mulai memikirkan desain tidak hanya sebagai layar final, tetapi sebagai sistem. Saya memecah elemen antarmuka menjadi komponen reusable seperti CartTable, ActionPanel, TotalSummary, MemberBadge, QtyEditor, PaymentModal, NumberPad, dan SupervisorAuthModal.

Saya juga mendefinisikan variants dan state menggunakan Figma Variants dan Auto Layout. Termasuk di dalamnya kondisi loading, empty, error, success, dan offline. Saya sengaja memberi perhatian besar pada state karena implementasi paling sering meleset justru pada kondisi transisional, bukan pada tampilan utama yang statis.

6. Menyiapkan hand-off yang jelas untuk development

Untuk mengurangi interpretasi ulang saat development, saya menggunakan Figma Dev Mode dan mendokumentasikan spacing, tipografi, warna, serta perilaku komponen sebagai design token. Implementasi dilakukan dengan React, TypeScript, dan Shadcn UI, dan saya tetap menjaga keterlibatan agar hasil build tetap konsisten dengan keputusan desain yang sudah saya buat.

🧠 Cara saya menerjemahkan riset menjadi solusi desain

Saya tidak berhenti pada temuan seperti “kasir butuh cepat” atau “manajer butuh laporan.” Saya mengubah temuan itu menjadi keputusan yang konkret: shortcut keyboard untuk mengurangi geser fokus, hirarki visual yang menonjolkan aksi utama, indikator koneksi untuk mengurangi ketidakpastian saat offline, serta dashboard yang memadatkan data penting dalam satu layar agar manajer tidak perlu melakukan ekspor manual.

User flow utama, wireframe pencarian produk, atau potongan iterasi desain dari low-fidelity ke high-fidelity.

Solusi Desain yang Saya Kembangkan

Main Transaction Screen

Saya merancang layar transaksi utama dengan layout dua panel. Panel kiri menampilkan item yang dipindai dan ringkasan cart, sementara panel kanan berisi aksi utama dan total pembayaran. Struktur ini saya pilih agar area kerja kasir terbaca cepat dan tidak tercampur dengan fungsi sekunder.

Saya menggunakan pendekatan keyboard-first karena konteks penggunaan menuntut kecepatan. Aksi seperti pencarian produk, refund, diskon, pelanggan, hold, tukar poin, dan pembayaran diposisikan agar mudah diakses dan cepat dijalankan. Saya juga menempatkan tombol Bayar Sekarang sebagai fokus visual utama karena itu adalah titik akhir yang paling penting dalam ritme transaksi.

Informasi member, nomor telepon, dan tier loyalty saya tempatkan di area yang mudah terlihat untuk membantu kasir menangkap peluang penukaran poin atau validasi identitas pelanggan tanpa memecah fokus kerja. Di bagian header, saya menambahkan indikator koneksi online/offline serta informasi sesi seperti nama kasir, jam shift, dan nomor lane untuk mendukung kebutuhan audit dan operasional.

Final UI Main Transaction Screen dengan fokus pada keyboard shortcut, cart, dan payment summary.

Refund Flow

Untuk alur refund, saya menyederhanakan proses tanpa menghilangkan kontrol bisnis. Saya menyusun langkah yang jelas: login supervisor, pencarian transaksi asli, pemilihan item dan alasan refund, metode pengembalian dana, pembaruan stok, lalu pencetakan receipt refund.

Pendekatan ini saya pilih karena refund adalah titik yang sensitif. Pengguna harus tetap merasa prosesnya jelas dan cepat, tetapi sistem juga harus menjaga kontrol dan jejak audit dengan rapi.

Alur refund yang menunjukkan tahapan otorisasi supervisor dan pemilihan reason code.

Manager Report Dashboard

Untuk manajer toko, saya merancang dashboard yang menyajikan DTR, omzet, jumlah transaksi, produk terlaris, dan metode pembayaran dalam satu tampilan yang ringkas. Saya sengaja menahan kepadatan visual agar dashboard mudah dipindai dalam waktu singkat.

Keputusan ini berangkat dari kebutuhan manajer yang tidak selalu ingin berinteraksi lama dengan sistem. Mereka perlu melihat kondisi bisnis dengan cepat, memahami apa yang berubah, lalu mengambil keputusan berikutnya.

Dashboard laporan manajer dengan ringkasan penjualan dan breakdown metode pembayaran.

Dampak dan Nilai yang Saya Bawa

Karena proyek ini masih berada pada tahap development, saya tidak mencantumkan metrik kuantitatif yang belum tersedia. Namun, kontribusi desain yang saya bangun sudah memberi fondasi yang kuat pada beberapa area penting.

Pertama, alur transaksi menjadi lebih efisien karena keputusan desain berfokus pada kecepatan aksi dan keterbacaan informasi. Kedua, proses pencarian produk dibuat lebih tangguh dengan bantuan filter kategori dan pencarian prediktif. Ketiga, alur refund menjadi lebih terstruktur tanpa mengurangi kontrol supervisor. Keempat, proses development menjadi lebih terarah karena komponen, variants, state, dan design token sudah didefinisikan lebih awal.

✅ Dampak yang dapat diamati dari arah desain

• Transaksi dirancang agar lebih cepat dijalankan dalam konteks antrean tinggi
• Pencarian produk tidak hanya bergantung pada barcode
• State penting seperti offline, loading, dan error sudah dipikirkan sejak awal
• Hand-off ke developer lebih jelas karena desain dibangun sebagai sistem, bukan sekadar layar final

Apa yang Saya Pelajari

Proyek ini mengingatkan saya bahwa desain untuk sistem operasional harus berpijak pada realitas kerja, bukan hanya pada preferensi visual. Saya belajar bahwa ketika aturan bisnis cukup rumit, pekerjaan saya bukan membuat semuanya tampak sederhana secara semu, melainkan membantu pengguna memahami prioritas dan menyelesaikan tugas tanpa hambatan yang tidak perlu.

Saya juga semakin yakin bahwa kualitas implementasi sangat dipengaruhi oleh kualitas definisi desain. Ketika komponen, perilaku, dan state sudah dirumuskan dengan jelas, tim development dapat bekerja lebih cepat dan lebih presisi. Bagi saya, ini adalah bagian penting dari peran UI/UX Senior: bukan hanya menghasilkan layar yang baik, tetapi memastikan keputusan desain tetap kuat sampai produk benar-benar dibangun.

Mengapa Studi Kasus Ini Relevan untuk Saya sebagai UI/UX Senior

Proyek ini mewakili cara saya bekerja. Saya nyaman menangani sistem yang kompleks, senang membedah aturan bisnis sampai ke detail operasional, dan terbiasa mengubah kebutuhan yang padat menjadi alur yang lebih masuk akal bagi pengguna. Saya juga tidak berhenti di visual; saya memikirkan implementasi, state, konsistensi komponen, dan kualitas hand-off sebagai bagian dari desain itu sendiri.

Jika saya bergabung dalam tim baru, nilai yang saya bawa bukan hanya kemampuan membuat antarmuka yang rapi, tetapi kemampuan untuk menyusun keputusan desain yang tajam, dapat dipertanggungjawabkan, dan siap dibawa sampai tahap build.