Fitur Lacak Pengiriman, Sorting Transaksi, dan Ikhtisar Pelanggan: Satu Langkah untuk Bekerja Secara Cepat dan Efisien
Disclaimer:
Proyek ini merupakan bagian dari program pelatihan Skilvul Digital Talent Scholarship PROA UI/UX Design. Skilvul bekerja sama dengan Kemeterian Komunikasi dan Informatika (Kominfo) dan berkolaborasi dengan Krealogi by Du Anyam sebagai challenge partner.
Kami berempat adalah peserta dari program pelatihan tersebut untuk mengerjakan proyek pengembangan secara tim. Untuk itu, kami tidak pernah bekerja dan tidak dalam kontrak dengan Skilvul, Kominfo, dan Krealogi by Du Anyam.
Artikel ini dikembangkan berdasarkan draft yang disusun oleh kelompok 6 kelas A32 untuk memenuhi tugas sebagai peserta pelatihan Skilvul Digital Talent Scholarship PROA UI/UX Design dari kelompok 6 Kelas A-32. Pihak yang berhak menyalin dan mempublish artikel ini hanya anggota kelompok 6, Kelas A-32 saja.
Pencatatan Transaksi dan Pencatatan Keuangan Merupakan Kunci Perkembangan Usaha
Di Indonesia, Usaha Mikro, Kecil, dan Menengah (UMKM) merupakan usaha yang memiliki jumlah besar dan tersebar di seluruh Indonesia. Jenisnya pun beragam dari berbagai sektor, seperti pakaian, makanan, kerajinan tangan, dan sebagainya.
Untuk mengembangkan UMKM ini tidak hanya diperlukan kualitas produk atau pelayanan yang baik saja. Akan tetapi, pencatatan seluruh transaksi berperan penting dalam kemajuan UMKM (Jurnal Entrepreneur).
Harapannya, pencatatan pembukuan yang rapi, sistematis, dan teratur dapat memberikan informasi akurat terkait:
- Kondisi keuangan, seperti anggaran produksi dan perputaran modal
- Nilai keuntungan dan kerugian dalam periode tertentu
- Efisiensi usaha
- Jumlah pajak yang wajib dibayarkan
- Penentuan langkah bila terjadi penyimpangan dari rencana yang sudah dibuat
Pencatatan keuangan ini tentunya dapat dilakukan dengan berbagai cara, seperti:
- Pencatatan secara manual menggunakan buku besar
- Pencatatan menggunakan Microsoft Excell
Seiring perkembangan teknologi, kini mencatat keuangan makin terasa mudah. Anda tidak membutuhkan alat khusus. Cukup menggunakan smartphone. Pasalnya, Anda dapat menemukan berbagai macam aplikasi pencatatan keuangan yang dapat diunduh di Play Store atau App Store.
Salah satu aplikasi pencatatan transaksi dan keuangan yang dapat diunduh dari Play Store adalah aplikasi Krealogi by Du Anyam. Krealogi by Du Anyam merupakan salah satu aplikasi yang termasuk dalam bagian revolusi digital.
Salah satu tujuan perkembangan digital ini adalah untuk memajukan kondisi UMKM di Indonesia. Terutama dalam membantu memecahkan masalah pelaku usaha dalam menjalankan usahanya. Terutama untuk mendapatkan pencatatan transaksi dan pencatatan keuangan yang sistematis dengan tepat, cepat, praktis, dan mudah.
Untuk itu, Krealogi by Du Anyam akan selalu mengembangkan fitur-fitur yang disediakan sehingga lebih menjamin kemudahan bagi pelaku usaha. Hingga saat ini, Krealogi by Du Anyam telah menciptakan fitur-fitur yang interaktif dan tepat guna. Di antaranya adalah:
- Pencatatan pesanan
- Pencatatan transaksi hingga pengaturan pengirimannya
- Pencatatan Produk
- Pencatatan rencana produksi
- Pencatatan inventaris gudang
- Pencatatan keuangan yang dapat memperlihatkan keuntungan atau kerugian dalam periode tertentu
Pada dasarnya, seluruh fitur-fitur tersebut terbilang lengkap untuk menunjang pencatatan yang efektif dan efisien. Namun, era digitalisasi menuntut setiap orang dapat bergerak lebih cepat dan lebih efisien. Sebagai contoh dalam berinteraksi dan melakukan task yang diminta oleh customer.
Namun ada beberapa fitur yang kami anggap masih bisa dikembangkan supaya aplikasi Krealogi by Du Anyam dapat menjadi satu-satunya aplikasi yang digunakan pelaku usaha. Dengan demikian, pelaku usaha akan makin efisien dalam mempergunakan waktunya.
Untuk itu, tim kami memiliki beberapa pandangan yang kami anggap dapat berkontribusi dalam pengembangan aplikasi Krealogi by Du Anyam. Harapan kami, pengguna aplikasi Krealogi by Du Anyam dapat melakukan pekerjaannya secara cepat, efektif, efisien, dan praktis. Beberapa pandangan yang ingin kami lakukan, yaitu:
- Bagaimana bila aplikasi Krealogi by Du Anyam dapat membuat pengguna melacak pengiriman barang yang sedang berlangsung?
- Bagaimana bila pengguna aplikasi Krealogi by Du Anyam dapat lebih mudah mencari catatan transaksi pelanggan yang telah dilakukan sebelumnya atau transaksi yang sedang berlangsung dengan lebih cepat?
- Bagaimana bila pengguna aplikasi Krealogi bisa mengakses catatan transaksi yang telah dilakukan seorang pelanggan?
Berdasarkan hasil riset awal ada beberapa pengembangan fitur-fitur yang ingin kami tambahkan, yaitu:
- Fitur yang dapat langsung digunakan untuk melacak pengiriman dan mengetahui perkembangan transaksi
- Fitur yang dapat digunakan untuk menyortir transaksi berdasarkan waktu dan perkembangan transaksi
- Fitur yang dapat digunakan untuk melacak transaksi yang telah dilakukan oleh setiap pelanggan
Aplikasi Krealogi by Du Anyam: Bagian Revolusi Digital yang Mempermudah Pembukuan Usaha
Krealogi merupakan bagian bagian revolusi digital yang mensuport pelaku UMKM untuk mengembangkan usahanya. Dengan tampilan yang diharapkan user friendly, aplikasi ini diharapkan dapat mempermudah proses pencatatan sehingga catatan transaksi dan keuangan dapat dibuat secara rapi, teratur, dan sistematis. Dengan demikian, pelaku usaha dapat mengetahui kondisi usaha dan keuntungan atau kerugiannya.
Problem Steatment
Dari informasi yang kami dapatkan dari Skilvul.com, dan PPT chalange partner, Krealogi selaku chalange partner menginginkan peserta untuk:
- Mengembangkan fitur-fiturnya supaya makin user friendly untuk target pengguna mereka
- Menambahkan fitur-fitur yang mengakomodasi seluruh kebutuhan pengguna
Objektif
Berdasarkan problem steatment tersebut, maka objektif dalam proyek ini adalah:
- Mengembangkan aplikasi dengan tampilan dan fitur yang lebih user friendly
- Menambahkan fitur yang terintegrasi dengan logistik, mempermudah akses data pelanggan dan akses transaksi
Aplikasi Krealogi by Du Anyam Harus Dikembangkan. Mengapa?
Pada dasarnya, aplikasi Krealogi by Du Anyam telah memiliki fitur-fitur yang lengkap. Akan tetapi, ada beberapa tujuan yang ingin kami lakukan dengan pengembangan yang kami ingin lakukan, yaitu:
Pengguna dapat melacak pengiriman barang dan dapat mengirimkan progress tersebut kepada konsumen
- Proses pengecekan perkembangan pengiriman barang dapat diakses lebih mudah
- Pengguna aplikasi Krealogi by Du Anyam dapat lebih cepat dan mudah melacak pengiriman barang
- Pengguna aplikasi Krealogi by Du Anyam dapat lebih mudah dan cepat mencari informasi transaksi sesuai dengan yang dibutuhkan
- Pengguna aplikasi Krealogi by Du Anyam dapat lebih mudah mencari sejarah transaksi salah satu pelanggan
Apa yang Saya Lakukan dalam Proyek ini?
Pada dasarnya, membuat sebuah tampilan antar-muka membutuhkan banyak langkah-langkah yang harus dilakukan. Dimulai dari riset awal hingga usability texting dan UX Research.
Meskipun kami tetap mengerjakan secara berkelompok dan saling mengisi, kelompok kami tetap memiliki beberapa pembagian tugas. Pembagian tugas ini diharapkan dapat membuat pekerjaan yang kami lakukan lebih teratur, sistematis, dan lebih mudah dipahami.
Kami akan membuat rincian pekerjaan sesuai urutan tugas dari minggu pertama. Berikut adalah rinciannya.
- Empathize (Secondary Research). Tugas pertama ini kami kerjakan secara bersama.
- Practice Define & Ideate menggunakan aplikasi FigJam. Tugas ini kami kerjakan secara bersama.
- User Flow & Wireframe menggunakan aplikasi FigJam & Figma Design. Tugas ketiga ini kami kerjakan secara bersama menggunakan fitur Audio untuk berinteraksi secara real time.
- UI Styleguide — Atom dan UI Design menggunakan Figma Design File. Pada tugas kali ini, kami mengerjakan secara berkelompok, tetapi dengan beberapa tanggung jawab yang berbeda. Saya, bertugas menemukan icon-icon yang kemudian dijadikan sebuah komponen. Membuat sistem untuk font style, membantu membuat sistem palet warna, membantu membuat beberapa komponen dasar dan menyusun UI Design.
- Menyelesaikan UI Design yang masih menggunakan file sebelumnya. Pada tugas kali ini saya berperan menyusun tampilan antar-muka sesuai user flow yang telah kami buat sebelumnya.
- Menyelesaikan UI Design dan membuat Prototype. Pada proses ini, saya membantu melengkapi UI Design. Untuk proses penyusunan prototype yang sistematis, teratur, dan terjadi kesalahpahaman, maka penyusunan prototype dilakukan oleh Gumelar.
- Stimulus User Research & Record Data. Pada tugas kali ini, kami menyusunnya secara bersama. Kemudian, proses wawancara dilakukan oleh I Gusti Ngurah Ari
- UX Case Study, membuat artikel yang dapat dipublish di laman Medium. Kali ini, kami juga masih mengerjakan secara bersamaan. Peran saya adalah membuat draft artikel yang sesuai kegiatan kami menyelesaikan projek hingga tahapan testing.
Pengembangan UI Desain Krealogi by Du Anyam: Satu Aplikasi Memenuhi Semua Kebutuhan Usaha
Sesuai pelatihan yang kami terima, pada tugas kali ini kami menggunakan pendekatan design thinking untuk melakukan redesign.
Menurut Telaumbanua (2019), design thinking adalah sebuah pendekatan atau metode desain yang memiliki basis untuk membuat solusi dalam pemecahan masalah. Tujuan akhir dari metode ini adalah memecahkan masalah-masalah yang kompleks dengan cara yang berpusat pada manusia. Oleh sebab itu, pada proses ini akan dilakukan dengan cara:
- Memahami kebutuhan manusia yang terlibat
- Membingkai ulang masalah yang muncul
- Berpusat pada manusia
- Menciptakan banyak ide dalam sesi brainstorming
- Mengadopsi pendekatan langsung dalam pembuatan ide prototipe dan usability testing
Berdasarkan informasi dari Institut Desain Hasso-Plattner di Stanford dalam Telaumbanua, 2019), terdapat lima tahap Design Thinking, yaitu Empathize, Define, Ideate, Prototype, dan Test.
Tahapan 1 — Empathize
Tahapan pertama yang harus kami lakukan adalah empathize. Dalam tahapan ini, kami diharapkan dapat mendapatkan pemahaman empatik dari permasalahan yang diberikan oleh Skilvul dan Krealogi. Berikut adalah challenge yang diberikan kepada kami.
“Buatlah tampilan aplikasi Krealogi yang user-friendly untuk target pengguna mereka saat ini. Selain itu, buatlah solusi berupa desain untuk fitur mereka yang belum tersedia (Simple CRM, Cash Flow Feature dan Integration with Logistic and Marketplace) menggunakan tools rekomendasi kami yakni Figma, sesuai dengan arahan proyek di atas. Akan lebih baik jika kamu dapat menggambarkan proses desain menggunakan metode yang ada atau kamu sendiri. Kemudian, submit link project Figma melalui di form di bawah ini!”– Krealogi: UI/UX Challenge
Untuk menyelesaikan challenge yang diberikan, kegiatan pada tahapan pertama yang dilakukan adalah melakukan Secondary Research dengan rincian sebagai berikut:
Uraian
- Melakukan pendalaman produk dari challenge partner, yaitu dari video sesi AMA dengan Krealogi
- Membuat resume dari informasi yang kami dapatkan dari sesi AMA tersebut
- Melakukan analisis terhadap aplikasi kompetitor. Aplikasi kompetitor yang kami amati adalah Buku Warung dan Buku Kas
- Menganalisis feedback dari pengguna kedua aplikasi kompetitor tersebut
- Mencari beberapa informasi terkait aplikasi pencatatan pembukuan yang kami dapatkan dari berbagai website, yaitu Medium, ACM, IEEE
- Mencari data-data terkait UMKM dan aplikasi pencatatan dalam situs pemerintahan, seperti BPS.
Berdasarkan sumber-sumber yang kami amati di atas, beberapa informasi yang kami dapatkan, antara lain:
- Gambaran informasi yang jelas seputar aplikasi Krealogi
- Pemahaman terkait aplikasi kompetitor beserta user feedback baik itu feedback yang positif maupun yang negatif
- Berdasarkan feedback yang kami dapatkan, kami mengolah sebagian besar informasi sebagai dasar pembuatan ide yang dilakukan pada tahapan selanjutnya.
- Memahami kelebihan dan kekurangan aplikasi kompetitor dan mencari fitur-fitur yang sekiranya dapat kami aplikasikan atau kami masukkan dalam fitur-fitur pengembangan Krealogi
Berdasarkan riset dari beberapa literature, kami mendapatkan gambaran sejauh mana pengembangan yang dapat dilakukan.
- Gambaran informasi yang jelas seputar aplikasi Krealogi
- Pemahaman terkait aplikasi kompetitor beserta user feedback baik itu feedback yang positif maupun yang negatif
- Berdasarkan feedback yang kami dapatkan, kami mengolah sebagian besar informasi sebagai dasar pembuatan ide yang dilakukan pada tahapan selanjutnya
- Memahami kelebihan dan kekurangan aplikasi kompetitor dan mencari fitur-fitur yang sekiranya dapat kami aplikasikan atau kami masukkan dalam fitur-fitur pengembangan Krealogi
- Berdasarkan riset dari beberapa literature, kami mendapatkan gambaran sejauh mana pengembangan yang dapat dilakukan
Tahapan 2 — Define
Tahapan kedua yang kami lakukan adalah define. Pada tahapan ini, kami melakukan analisis dan sintesis informasi yang kami dapatkan dalam Secondary Research. Tujuan akhir dari tahapan kedua ini adalah dapat memecahkan dan mengidentifikasi masalah dengan lebih akurat.
Pada tahapan ini, terdapat tiga kategori, yaitu Pain Points, How Might We, dan Afinity Diagram. Penjelasan lebih lengkap, simak ulasan kami berikut ini.
a. Pain Points
Untuk membantu kami dalam menemukan masalah yang akurat, kami membuat beberapa point dengan bantuan sticky notes pada aplikasi Figjam. Pada tahapan ini, kami membuat Pain Points, yaitu masalah yang dihadapi oleh Krealogi menurut pendapat user yang telah menggunakannya.
Umpan balik yang kami dapatkan berasal dari review pada Google Play Store. Hasilnya, kami mendapatkan 12 jenis masalah yang perlu untuk ditangani. Beberapa di antaranya, seperti:
- Pengguna aplikasi Krealogi membutuhkan banyak waktu untuk melakukan satu (1) task, yaitu mencatat transaksi dan menghubungi konsumen
- Adanya kesulitan untuk melacak pengiriman yang sedang berlangsung
- Adanya kesulitan bila terjadi peristiwa piutang
- Adanya kesulitan untuk mencari data pelanggan sehingga dapat memberikan treatment khusus sebagai pelayanan untuk pelanggan tetap
b. How Might We
Masih menggunakan aplikasi FigJam, kami mencari solusi atas masalah yang telah kami temukan dalam Pain Points sebelumnya. Dalam proses ini, kami melakukan pemilihan tiga solusi yang sekiranya dapat kami lakukan dan sesuai dengan challenge yang diberikan.
Pada tahapan ini, kami memilih tiga masalah yang akan kami kembangkan, yaitu:
- Bagaimana bila kami membantu pengguna Krealogi melakukan tracking pengiriman
- Bagaimana bila kami membantu pengguna Krealogi untuk memperoleh catatan performa usaha
- Memudahkan pengguna Krealogi untuk memiliki daftar nama dan daftar kontak pelanggan tetap dan memudahkan pencariannya
Tahapan 3 — Ideate
Pada dasarnya, tahapan ideate yaitu tahapan untuk mencari ide solusi yang dapat memecahkan masalah. Inti dari tahapan ini adalah menemukan ide sebanyak-banyaknya sehingga kami dapat menemukan cara terbaik dalam melakukan penyelesaian masalah.
Terutama dengan prinsip “menyelesaikan masalah tanpa menimbulkan masalah lain”. Untuk itu, ada tiga proses dalam tahapan ini, yaitu:
- Mengembangkan ide-ide berdasarkan tiga pokok pemecahan masalah yang terpilih dalam HMW dalam Solution Idea
- Mengelompokkan ide-ide dalam kategori yang tepat pada Affinity Diagram
- Membuat prioritas pekerjaan yang akan kami lakukan berdasarkan prinsip The Impact/Effort Matrix
Berikut ini adalah ulasan selengkapnya.
a. Ide Solusi (Solution Idea)
Pada tahap ini, kami mengumpulkan ide solusi terkait fitur yang dapat menyelesaikan target tujuan menggunakan sticky notes. Setelah itu, kami kumpulkan berdasarkan jenisnya.
b. Afinity Diagram
Setelah pain points kami himpun, kami mencari beberapa ide yang dapat menjadi solusi terbaik. Setelah itu, kami mengelompokkan ide solusi dalam tiga kategori pada afinity diagram. Terdapat tiga (3) topik utama yang kami temukan, yaitu:
- Inventory
- Operation
- Distribution
c. Diagram Prioritas
Dalam tahapan ini, kami melakukan pengelompokkan berdasarkan prioritas pengerjaan. Kami menggunakan The Impact/Effort Matrix untuk mengidentifikasi ide-ide yang membutuhkan sedikit usaha dan memiliki dampak paling menguntungkan. Diagram prioritas ini berfungsi untuk:
- Meningkatkan produktivitas kelompok untuk mengembangkan aplikasi Krealogi
- Membuat keputusan yang lebih dibutuhkan untuk masa kini dan jangka panjang
Prioritization Idea
Adapun rinciannya, adalah sebagai berikut:
Dampak tinggi, upaya rendah. Ide yang memiliki nilai ini merupakan ide yang dapat dieksekusi secara langsung. Anda tidak memerlukan waktu yang panjang untuk menghasilkan desain yang dapat berdampak positif. Dalam klasifikasi ini, kami menemukan 6 ide, yaitu:
- Tracing pengiriman barang
- Automate generate biaya pengiriman ke invoice
- Fitur cek ongkir
- Fitur tagih hutang lewat SMS, WA, dan email
- Fitur ingatkan piutang yang terintegrasi dengan Google Calendar
- Fitur sorting transaksi berdasarkan waktu order
- Invoice otomatis
Dampak tinggi, upaya tinggi. Kelompok ini merupakan pengembangan yang berskala besar sehingga dinilai membutuhkan lebih banyak perencanaan sekaligus sumber daya. Kami menemukan dua ide yang dapat dilakukan dalam pengembangan selanjutnya, yaitu:
- Tambahan form “Term & Condition” pada transaksi
- Auto calculate PPN berdasarkan kategori pajaknya
Dampak rendah, upaya tinggi. Kelompok ini merupakan pengembangan fitur yang memberikan hasil minimal tetapi membutuhkan biaya dan waktu yang besar untuk pengembangannya. Ada tiga ide yang kami nilai masuk dalam kelompok ini, yaitu:
- Grafik progress penjualan
- Grafik progress pendapatan
- Fitur costumer service monitoring
Dampak rendah, upaya rendah. Ide dalam kelompok ini merupakan ide yang belum tentu penting, tetapi juga tidak memerlukan waktu lama untuk mengerjakannya. Terdapat satu ide yang kami masukkan dalam kelompok ini, yaitu fitur cash flow
e. User Flow: Rincian perjalanan untuk menyelesaikan sebuah task
Sebelum memasuki tahapan prototype, kami membuat sebuah user flow. User flow adalah langkah-langkah yang harus dilalui pengguna untuk menyelesaikan sebuah task (Auliyaa: 2020). Sesuai ide yang kami temukan, ada tiga user flow yang kami buat.
- User Flow Fitur Lacak Pengiriman
User flow berikut merupakan perjalanan yang harus dilalui pengguna aplikasi Krealogi rancangan kami untuk melakukan pelacakan pengiriman.
- User Flow Fitur Sorting Pesanan
User flow kedua adalah langkah-langkah yang harus dilalui pengguna untuk melakukan sorting pada history pelanggan.
- User Flow Fitur Ikhtisar Pelanggan
User flow terakhir ini menggambarkan proses-proses yang dilalui pengguna untuk menemukan history pelanggan.
f. Wireframe : Rancangan tampilan antar-muka untuk dapat membuat UI yang sempurna
Selanjutnya, kami membuat sebuah wireframe. Wireframe juga dapat disebut sebagai blueprint suatu produk desain (Dicoding, 2021). Ada beberapa cara untuk membuat sebuah wireframe. Akan tetapi, kelompok kami memilih membuat wireframe menggunakan aplikasi Figma, sesuai instruksi dari Skilvul.
- Wireframe Fitur Lacak Pengiriman
Pada fitur lacak pengiriman, kami membuat empat (4) wireframe yang selanjutnya tetap kami kembangkan dalam proses prototyping.
- Wireframe Fitur Sorting Pesanan
Kami membuat tiga wireframe untuk melakukan sorting pesanan sesuai status pemesanan dan tanggal transaksi.
- Wireframe Fitur Ikhtisar Pelanggan
Pada wireframe ikhtisar pelanggan, kami membuat enam (6) wirframe seperti dalam cuplikan gambar di atas.
Tahapan 4 — Prototype
Prototipe merupakan sebuah metode yang digunakan untuk mengembangkan produk dengan membuat sebuah rancangan, sampel, atau model. Tujuan dari tahapan prototipe ini adalah menguji fitur dan fungsi produk dapat berjalan sesuai kebutuhan.
Hasilnya, designer akan mendapatkan informasi terkait kekurangan dan kesalahan dari produk buatannya. Lalu, apa yang kami lakukan sebelum memasuki tahapan prototype? Yuk simak perjalanan kami selengkapnya berikut ini.
a. Design system
Setelah membuat wireframe, kami dapat mengidentifikasikan komponen yang perlu digunakan secara berulang. Untuk mempermudah revisi dan pengembangan selanjutnya, maka sebelum membuat tampilan antar-muka yang lebih terlihat nyata, kami membuat design system.
Terdapat dua jenis design system, yaitu atom dan molekul. Dalam membuat atom, kami membuat list warna, typography, iconography, tombol, dan text field. Selanjutnya kami membuat varian dari masing-masing atom tersebut. Berikut adalah hasil kerja kami. Simak sampai akhir!
Atom
Adapun atom yang kami buat, antara lain palet warna, tipografi, tombol, text file. Berikut adalah rinciannya.
- Palet warna
- Typography
- Tombol
- Text field
Molekul
Selanjutnya, kami membuat molekul, seperti komponen, seperti navigation bar, cards, dan lainnya. Berikut adalah beberapa molekul yang kami buat.
- Dashboard counting
Pada dashboard counting yang kami masukkan tidak mengalami perubahan.
- Menu utama
Pada tombol menu utama, kami menambahkan dua menu, yaitu lacak pengiriman dan ikhtisar pelanggan.
- Dropdown status
Pada dropdown status ini kami membuat empat pilihan filter, yaitu pesanan yang sedang diproses, dikirim, tiba di tujuan, dan dibatalkan.
- Status Pesanan
Molekul selanjutnya adalah tampilan yang mendukung fitur baru, yaitu tracking pengiriman. Dalam status pesanan ini, pengguna aplikasi Krealogi dapat mengetahui keberadaan paket yang sedang dikirim.
e. Bottom Navigation Bar
Pada dasarnya, bottom navigation bar tidak mengalami perubahan. Kami hanya mengubah visualisasi warna saja.
b. Tampilan Antar-Muka Pengguna
Kelompok kami membuat tampilan antar-muka pengguna ini berdasarkan user flow yang telah dibuat. Hal penting yang kami pertahankan dan jaga dalam proses ini adalah konsistensi desain.
Oleh sebab itu, kami secara rutin melakukan kerja kelompok secara daring dengan memanfaatkan fitur konferensi pada laman Figma. Dalam proses ini, kami membuat beberapa perubahan pada atom atau pun molekul dari antar-muka sebelumnya.
- UI Design — Fitur Lacak Pengiriman
UI Design pertama adalah Fitur lacak pengiriman. Pada dasarnya, ada banyak tampilan antar muka yang kami buat dalam fitur baru ini. Akan tetapi, untuk membuat artikel ini lebih singkat, kami hanya akan menampilkan beberapa tampilan antar-muka saja.
Tampilan Antar Muka Menu Pesanan
Tampilan antar-muka Detail Pesanan
Tampilan Antar Muka Detail Pesanan
Tampilan Antar Muka Status Pengiriman
Tampilan Antar-Muka Lacak Pengiriman
- UI Design — Fitur Sorting
Tampilan Antar-Muka Sorting Berdasarkan Status
Tampilan Antar Muka Sorting Berdasarkan Tanggal
- UI Design — Fitur Ikhtisar Pelanggan
Tampilan Antar Muka Menu Ikhtisar Pelanggan
Tampilan Antar Muka Detail Pelanggan
Tampilan Antar Muka Histori Pelanggan
Tampilan Antar Muka Input Data Pelanggan
Tampilan antar-muka halaman beranda
c. Prototipe
Pada tahapan ini, kami telah membuat empat (4) buah prototipe yang siap diujikan. Satu prototipe merupakan penunjang, yaitu Login screen. Prototipe ini kami buat berdasarkan wireframe yang telah kami buat. Untuk mendapatkan pengalaman mencoba prototipe yang kami buat, silakan klik tautan berikut ini.
- Login screen
- Fitur Sorting Transaksi
- Fitur Lacak Pengiriman
- Fitur Ikhtisar Pelanggan
Tahapan 5 –Test
Setelah kami membuat tampilan secara menyeluruh dan dilanjutkan merancang prototype, kami harus melakukan tahapan yang disebut User Research. User Research yang kami lakukan bertujuan untuk melakukan pengujian terhadap tampilan yang telah kami buat.
Tak hanya itu, dari hasil User Research ini, kami akan mendapatkan feedback sebagai bahan evaluasi. Dengan begitu, tampilan UI yang kami rancang akan makin sempurna. Kali ini, kami akan menggunakan metode In-depth Interview dan Usability Testing pada prototype.
a. Stimulus User Research
Untuk membantu kami dalam menemukan data yang akurat, kami telah membuat sebuah stimulus user research dengan rincian sebagai berikut.
b. Record Data User Research
c. Data responden reviewer
Responden yang kami dapatkan adalah sebagai berikut:
Hasil usability testing yang kami lakukan menghasilkan informasi untuk setiap task yang diberikan, sebagai berikut:
d. Hasil Usability Testing
Berikut adalah rekaman usability testing yang telah kami lakukan:
Hasil usability testing yang kami lakukan menghasilkan informasi untuk setiap task yang diberikan, sebagai berikut:
[TASK 1] Pendaftaran & Login
[TASK 2] Explore Menu dan Card
[TASK 3] Menambah Catatan Pesanan
[TASK 4] Melacak Pengiriman
[TASK 5] Melakukan Pengiriman Pesanan
[TASK 6] Menyortir Pesanan
[TASK 7] Menggunakan Menu Ikhtisar Pelanggan
Kesimpulan yang kami dapatkan berdasarkan usability testing tersebut antara lain:
- Seluruh task mendapatkan hasil Passed
- Nilai yang didapatkan adalah di atas minimum passing grade 5,5
- Secara keseluruhan, prototype yang kami buat mudah digunakan. Meskipun demikian, pada task 3, reviewer merasakan kebingungan untuk menyelesaikan task yang diminta.
- Berdasarkan feedback dari reviewer tersebut, maka kami akan membuat sebuah iterasi design pada task 3.
Iterasi Design : Bentuk Komitmen untuk Membuat Tampilan yang Makin User Friendly
Seperti dalam gambar ilustrasi di atas, iterasi desain merupakan proses yang dilakukan setelah designer memiliki “pemahaman” terhadap sebuah masalah yang ada dan tujuan akhir penciptaan sebuah produk.
Bila secondary research merupakan sebuah tahapan awal ketika designer akan memulai membuat tampilan antar-muka, usability testing menjadi langkah awal adanya iterasi desain.
Pasalnya, dari proses usability testing, kami akan mendapatkan masukan dari reviewer atas prototipe yang telah dibuat. Dengan begitu, masukan dari reviewer ini akan menuntun kami dalam membuat prototipe yang tepat guna, mudah dijalankan, dan sesuai kebutuhan.
Berdasarkan usability testing yang telah dilakukan pada tanggal 23 September 2022 menggunakan aplikasi Zoom, terdapat revisi yang harus kami lakukan pada task 3.
Perubahan kami lakukan berdasarkan pain points yang diungkapkan oleh reviewer.
Iterasi pada Fitur Menambah Catatan Pesanan
Kesimpulan
Proses pencatatan keuangan merupakan hal yang sangat penting untuk kemajuan usaha. Oleh sebab itu, di era digitalization ini, aplikasi pencatatan yang dapat terintegrasi dengan berbagai platform adalah hal yang paling dibutuhkan.
Saat merancang pengembangan aplikasi Krealogi dalam challenge ini, tentu kami menemukan banyak hal menantang. Pasalnya, dalam membuat sebuah desain pengembangan produk, banyak hal yang perlu kami perhatikan. Beberapa di antaranya adalah:
- Keinginan pemberi challenge
- Mengenali kompetitor dan mengenali produk sendiri
- Memahami kebutuhan pengguna (target market)
- Memahami kerja tim yang tentu melewati berbagai perdebatan dan kesepakatan
Meski waktu kami terbatas, kami berharap apa yang kami kerjakan dapat bermanfaat pada pengembangan aplikasi Krealogi ke depannya.
Daftar Pustaka
_____________. (n/a). “Sadari Pentingnya Pencatatan Keuangan Agar Usaha Berkembang”, diakses dari situs https://www.jurnal.id/id/blog/ingin-usaha-berkembang-sadari-pentingnya-mencatat-keuangan-bisnis/, pada tanggal 27 September 2022 pukul 17.23 WIB
Krealogi. (n/a). “Tentang Krealogi”, diakses dari situs https://krealogi.com/tentang-krealogi/#:~:text=Krealogi%20merupakan%20sebuah%20bagaian%20dari,permasalahan%20yang%20dihadapi%20pelaku%20usaha., pada tanggal 24 September 2022 pukul 20.28 WIB
_____________.(n/a). “Pengertian, Jenis dan Perkembangan UMKM di Indonesia”, diakses dari situs https://www.jurnal.id/id/blog/apa-itu-arti-yang-dimaksud-pengertian-umkm-artinya-adalah/, pada tanggal 24 September 2022 pukul 22.24 WIB
Kylliäinen, Julia. (2018). “Idea Prioritization — How to Succeed?”, diakses dari situs https://www.viima.com/blog/idea-prioritization, pada 24 September 2022 pukul 23.35,
Rosyian, Andika. (2021). “Iterasi pada proses desain”, diakses dari situs https://medium.com/mtarget-design/iterasi-pada-proses-desain-9683bad250a1, pada tanggal 26 September 2022 pukul 21.59
Paskalina, Cindy. (2021). “Mengenal Design Thinking”, diakses dari situs https://skilvul.com/blogs/mengenal-design-thinking, pada tanggal 26 September 2022, pukul 09.40 WIB
Setiawan, Rony. (2021). “Apa Itu Prototype? Kenapa Itu Penting?” diakses dari situs https://www.dicoding.com/blog/apa-itu-prototype-kenapa-itu-penting/, pada tanggal 27 September 2022, pukul 20.42 WIB
Auliyaa, Tri Nur. (2020). “Memahami User Flow pada UX Design”, diakses dari situs https://sis.binus.ac.id/2020/04/14/memahami-user-flow-pada-ux-design/#:~:text=User%20flow%20adalah%20langkah%20langkah,Membuat%20user%20interface%20yang%20intuitif, pada tanggal 27 September 2022, pukul 20.47 WIB.
Dicoding Intern. (2021). “Apa itu Wireframe? Perbedaan Wireframe, Mockup, dan Prototype”, diakses dari situs https://www.dicoding.com/blog/wireframe-adalah/, pada tanggal 27 September 2022, pukul 21.12 WIB
Stevens, Emily. (2021). “A Complete Introduction to Prototyping (2022 Guide)”, diakses dari situs https://careerfoundry.com/en/blog/ux-design/design-thinking-stage-four-prototyping/, pada tanggal 28 September 2022, pukul 09.38 WIB
