Pengembangan Desain UI/UX Fitur Integration with Logistic pada aplikasi Krealogi
“Pekerjaan ini merupakan hasil proyek akhir pelatihan UI/UX pada program Professional Academy — Digital Talent Scholarship yang diselenggarakan oleh Kementerian Komunikasi dan Informatika bekerja sama dengan Skilvul serta Krealogi sebagai challenge partner”
Pendahuluan
Krealogi adalah sebuah aplikasi berbasis mobile yang dikembangkan oleh Du Anyam untuk membantu para pelaku Usaha Mikro, Kecil, dan Menengah (UMKM) dalam melakukan digitalisasi pencatatan, perencanaan, pengembangan usaha kreatif dengan praktis dan akurat.
Pada sistem operasi Android, aplikasi Krealogi dapat diunduh secara bebas melalui platform PlayStore. Target pengguna aplikasi tersebut adalah para pelaku UMKM pada segala usia, segala gender, dan juga tidak menspesifikkan rentang geografis tertentu. Krealogi memiliki beberapa tipe pengguna, yaitu: Vendor, Producer, dan Seller.
Saat ini, aplikasi Krealogi sudah memiliki fitur-fitur seperti perencanaan produksi, pencatatan penjualan, pengelolaan inventaris, hingga laporan. Namun, masih ada beberapa kebutuhan pengguna yang belum terfasilitasi. Menurut pihak Krealogi, beberapa fitur yang menjadi kebutuhan pengguna yang belum tersedia adalah:
- Simple Customer Relationship Management (CRM)
- Cash Flow Feature
- Integration with Logistic and Marketplace
Objektif
Berdasarkan dari pendahuluan di atas, maka tujuan utama dari proyek ini adalah
- Mengembangkan fitur-fitur mengenai Integrasi dengan logistik yang belum tersedia pada aplikasi Krealogi.
- Mengembangkan tampilan antar muka pengguna yang user friendly dan juga mampu menjawab kebutuhan dari pengguna.
Tools yang digunakan
Kami menggunakan sejumlah tools pendukung untuk mengerjakan proyek akhir ini:
- Figma
Merupakan main tool yang kami gunakan mulai dari proses brainstorming hingga proses pembuatan desain dan prototype, dan juga pembuatan slide deck untuk mempresentasikan keseluruhan hasil proyek akhir. - Google Docs
Digunakan untuk menyusun Stimulus User Research untuk merencanakan skenario uji coba (user testing). - Google Sheets
Digunakan untuk melakukan pencatatan hasil secondary research dan hasil penilaian responden saat user testing. - Zoom
Tool ini bermanfaat bagi kami sebagai media conference untuk diskusi dengan mentor dan sesama anggota kelompok, proses interview dengan responden saat pada tahapan user testing, hingga sebagai media untuk presentasi keseluruhan hasil proyek ini.
Peran dalam Tim
Pada awal pelatihan, peserta dibagi menjadi beberapa kelompok. Rata-rata setiap kelompok terdiri dari sekitar 5 orang. Hingga akhir pengerjaan proyek, jumlah personel kami menjadi 2 orang yang terdiri dari saya sendiri dan Dian Muhammad Gufron. Dalam mengerjakan proyek ini, kami bersama-sama memiliki peran:
- Menyusun UX Design Thinking
- Membuat visualisasi Crazy 8's
- Merancang User Flow
- Mendesain Wireframe
- Membuat UI Style Guide
- Membuat Mockup UI Design
- Membuat Prototype
- Melakukan Usability Testing
- Membuat slide deck presentation
- Membuat video presentasi hasil proyek akhir
Design Process
Kami menggunakan Design Thinking sebagai proses UX Design dalam mengerjakan proyek ini. Metode ini mempunyai kelebihan pada fleksibilitas, di mana setiap tahapan-tahapannya tidak perlu dilakukan secara berurutan. Metode ini berfokus pada pengguna dengan menggali apa saja kebutuhan dari pengguna terkait proses bisnisnya.
Tahap 1: Empathize
Empathize merupakan tahap pertama yang kami lakukan dalam proses Design Thinking. Pada tahap ini dilakukan pengumpulan informasi dan pengalaman pengguna terhadap kondisi aplikasi saat ini.
Sebelumnya, pihak Krealogi telah menjelaskan beberapa fitur yang belum ada pada aplikasinya, yaitu: Simple Customer Relationship Management (CRM), Cash Flow Feature, dan Integration with Logistic and Marketplace. Selain itu, saat ini pihak Krealogi juga terus membutuhkan agar aplikasinya lebih user friendly dan dapat memenuhi kebutuhan dari pengguna dalam melakukan operasional bisnisnya.
Pada tahap ini, kami juga melakukan Secondary Research dengan cara observasi pada aplikasi Krealogi saat ini. Selain itu, kami juga meninjau aplikasi lainnya yang sejenis.
Dari hasil diskusi pada proses ini, kami memilih untuk mengembangkan solusi desain pada fitur Integration with Logistic.
Tahap 2: Define
Pada tahap ini, kami mendefinisikan permasalahan-permasalahan dari tahapan sebelumnya. Tujuan dari tahap define adalah untuk menemukan solusi-solusi apa saja yang menjadi kebutuhan pengguna pada tahap Empathize.
Langkah pertama pada tahap define yang kami lakukan adalah merumuskan Pain Points. Pain points ini adalah poin-poin rumusan permasalahan apa saja yang saat ini ada pada aplikasi Krealogi.
Define: Pain Points
Kami menggunakan fitur FigmaJam yang disediakan oleh Figma untuk melakukan brainstorming dan merumuskan permasalahannya. Setiap personel di kelompok kami mendefinisikan poin-poin permasalahannya dengan menempelkan sticky notes pada FigmaJam.
Define: How-Might We
Pada How-Might We, kami menguraikan kemungkinan solusi-solusi yang merupakan penyelesaian permasalahan yang telah didefinisikan pada Pain Points. Selain mendefinisikan poin-poin kemungkinannya, kami juga melakukan klasterisasi solusi-solusi tersebut menjadi beberapa klaster, yaitu: Perhitungan Logistik, Estimasi Biaya, Informasi Logistik dan biaya.
Pada hasil How-Might We yang telah terklaster, setiap personel di kelompok kami melakukan voting untuk memilih ide solusi yang akan digunakan untuk tahapan selanjutnya. Kami memilih Estimasi Biaya sebagai klaster solusi.
Adapun poin-poin dari How-Might We terpilih adalah:
- Memudahkan pengguna untuk dapat mengetahui harga pengiriman barang berdasarkan berat, jenis barang, dan sebagainya.
- Memberikan opsi jasa pengiriman dengan masing-masing layanannya untuk dapat mengetahui standar harga pengiriman barang ke lokasi yang dituju.
- Menambahkan kumpulan alamat customer untuk memudahkan pengiriman tanpa perlu harus menuliskan ulang alamat.
Tahap 3: Ideate
Ideate: Solution Idea
Pada tahap ini, setiap personel menguraikan solution idea dari klaster How-Might We yang terpilih. Di sini kami mendefinisikan fitur apa saja yang akan ditawarkan.
Ideate: Affinity Diagram
Dari hasil Solution Idea yang telah didefinisikan, selanjutnya kami melakukan klasterisasi ke dalam Affinity Diagram. Poin-poin yang memiliki kesamaan tujuan, dimasukkan ke dalam klaster yang sama. Adapun klaster yang terbentuk adalah Informasi Pembiayaan, Fitur Jasa Service Logistic, Label Pengiriman, dan List alamat Customer.
Ideate: Prioritazion Idea
Dari hasil affinity diagram yang telah terbentuk, selanjutnya kami memasukkan setiap poin-poinnya ke dalam 4 skala prioritas. Adapun skala prioritas tersebut adalah
- Yes, Do it Now
Fitur yang kami masukkan ke dalam skala prioritas tertinggi ini adalah (a) Fitur untuk menghitung estimasi biaya pengiriman berdasarkan berat, jenis, prioritas pengiriman, (b) Fitur untuk mengetahui promo diskon logistik tertentu, ( c ) Fitur untuk memilih ekspedisi layanan jasa pengiriman, (d) Fitur untuk memilih jasa layanan yang disediakan oleh pihak ekspedisi, (e) Fitur untuk mencetak invoice dari hasil perhitungan harga barang, biaya pengiriman dan penerapan diskon. - Do Next
Sedangkan untuk skala prioritas lakukan setelahnya adalah fitur cetak label fragile, jangan ditumpuk, jangan dilempar, sebagai simbol pengiriman barang. Dan juga fitur untuk cetak label alamat pengiriman barang. - Later
Untuk skala prioritas ini adalah fitur untuk menyimpan daftar alamat customer. - Do Last
Kami tidak memasukkan fitur apapun ke dalam skala prioritas ini.
Crazy 8's
Pada tahap Crazy 8’s, setiap personel membuat kreasi desain kasar tampilan dari fitur yang terpilih. Crazy 8’s ini digambar di atas kertas yang dilipat menjadi 8 bagian. Hasil dari gambar tersebut kemudian masing-masing personel meletakkan pada file project yang ada di Figma.
Selanjutnya, dari hasil masing-masing gambar, kami melakukan vote untuk memilih gambar mana yang paling pas yang akan kami jadikan untuk acuan ke tahapan selanjutnya.
Tahap 4: Prototype
Pada tahapan ini terdapat beberapa proses yang kami kerjakan yaitu: pembuatan User Flow, mendesain Wireframe, membuat Design System, dan membuat UI Design berdasarkan Wireframe yang sebelumnya dibuat, dan juga membuat prototype. Kami menyelesaikan semua proses pada tahapan Prototype menggunakan tool Figma.
User Flow
Pada proses pembuatan User Flow, kami menggambarkan aliran proses dari fitur-fitur terpilih menggunakan notasi flowchart. Aliran proses ini nantinya akan kami jadikan acuan untuk urutan proses apa saja yang harus dilakukan oleh pengguna untuk mencapai suatu tujuan dari sebuah fitur.
Wireframe
Proses selanjutnya adalah pembuatan Wireframe. Kami menggunakan tool Figma untuk melakukan proses ini. Wireframe in dibuat berdasarkan User Flow yang telah digambar sebelumnya.
Design System
Pada proses ini, kami membuat Design System sebagai acuan aturan desain. Tujuannya agar desain setiap komponen text style, button, text field, header, navigation bar, dan lain sebagainya akan menjadi konsisten dan dapat digunakan kembali untuk keperluan proses selanjutnya yaitu perancangan UI Design.
UI Design
Untuk membuat agar tampilan dapat lebih nyata, kami membuat UI Design sesuai dengan User Flow, Wireframe, dan Design System yang telah kami buat sebelumnya.
Tampilan UI Design ini kami buat dengan nuansa warna yang sesuai dengan tampilan aplikasi Krealogi saat ini.
UI Design yang kami kerjakan untuk dua fitur utama, yaitu Estimasi Biaya Kirim dan Biaya Asuransi, serta Bagikan, Cetak, dan Download Invoice dapat dilihat pada gambar berikut.
Prototype
Prototype digunakan sebagai fasilitas untuk mencoba dan mensimulasikan solusi desain yang telah dirancang pada proses-proses sebelumnya. Prototype dibuat dengan menghubungkan antar komponen sehingga dapat terlihat interaktif. Manfaatnya agar pengguna dapat merasakan pengalaman, mempelajari, dan mengevalusi hasil dari perancangan solusi desain.
Hasil prototype kelompok kami adalah sebagai berikut:
Tahap 5: Testing
Pada tahapan ini, pengujian prototype dikerjakan dengan cara melakukan usability testing kepada responden untuk mengukur tingkat kegunaan, kemudahan, kepuasan yang dapat menggambarkan tingkat keberhasilan dari solusi desain yang kami tawarkan.
Pada saat melakukan usability testing, kami mempersiapkan beberapa poin berikut:
- Menentukan objektif dan target pengguna
- Membuat daftar pertanyaan dan skenario testing
- Menentukan UX Metric yang digunakan
- Menyiapkan tools yang digunakan untuk testing
- Menggunakan media Zoom untuk melakukan interview dengan responden
Research Objective
Kami menentukan research objective sebagai berikut:
- Mengetahui tanggapan pengguna terhadap flow dan desain integrasi logistik yang telah dibuat.
- Mencari tahu kebutuhan pengguna terhadap integrasi jasa servis logistik pada usahanya.
- Mencari tahu tingkat kepuasan pengguna terhadap desain integrasi logistik yang telah dibuat.
Respondent Criteria
Kami menguraikan kriteria responden sebagai berikut:
- Berusia 20–40 tahun
- Laki-laki / Perempuan
- Berdomisili di seluruh wilayah Indonesia
- Memiliki kemampuan Bahasa Indonesia sebagai native language
- Menguasai penggunaan smartphone Android
- Mempunyai usaha jenis mikro (minimal usaha berjalan 6 bulan)
- Melakukan proses pengiriman penjualan menggunakan jasa service ekspedisi
Research Scenario
Dalam skenario pengujian ini kami membuat sejumlah task yang harus dikerjakan oleh responden untuk mengukur usability testing. Poin-poin dari task tersebut adalah
- [Task 1] Meminta pengguna untuk melakukan catat pesanan dengan mengisi form detail pesanan dan observasi apa yang dilakukan oleh responden
- [Task 2] Meminta pengguna untuk memilih jenis layanan servis logistik (Ekspress, Same Day, Reguler, dsb)
- [Task 3] Meminta pengguna untuk memilih jasa layanan servis logistik (JNE, JNT, dsb)
- [Task 4] Meminta pengguna untuk memilih apakah membutuhkan layanan asuransi atau tidak? Jika iya, bisa melakukan pemilihan jenis asuransi sesuai dengan kebutuhan.
- [Task 5] Meminta pengguna untuk melanjutkan proses ke fitur kalkulasi biaya pengiriman dan biaya asuransi
- [Task 6] Meminta pengguna untuk melanjutkan ke proses pemilihan metode pembayaran
- [Task 7] Meminta pengguna untuk melanjutkan ke proses cetak invoice
- [Task 8] Meminta pengguna untuk melihat daftar riwayat transaksi (sudah dilakukan pembayaran dan belum)
Respondent
Kami melakukan uji coba dengan cara In-Depth Interview kepada responden kami yang berprofesi sebagai wiraswasta di bidang kuliner. Responden ini merupakan wanita yang berusia 26 tahun yang berdomisili di Depok, Jawa Barat dan pada proses bisnisnya sehari-harinya menggunakan jasa layanan logistik untuk pengiriman produk penjualan kepada para pelanggannya.
Hasil Pengujian
Di awal wawancara, kami melakukan interview dengan menanyakan latar belakang responden dengan detail pertanyaan sebagai berikut.
Selanjutnya, kami meminta responden untuk melakukan skenario uji coba yang sudah dirancang sebelumnya. Kami menggunakan Single Ease Question (SEQ) sebagai metrik penilaian usability dengan skala 1–7. Penilaian langsung dilakukan oleh responden kami saat mencoba prototype yang telah dibuat.
Hasil dari uji coba prototype dari desain kami mendapatkan nilai rata-rata sebesar 6,5 dan dengan pendapat dari responden sebagai berikut:
- Secara keseluruhan, desain sudah jelas dan terstruktur
- Fitur-fitur yang ditawarkan akan memudahkan penjual untuk menyimpan data pesanan, invoice secara rapi.
- Responden juga tertarik dengan desain ini karena terdapat fitur untuk informasi promo/diskon pelayanan ekspedisi di mana fitur tersebut sangat bermanfaat terutama bagi pengguna yang baru merintis usaha.
Adapun saran dari responden untuk perbaikan ke depannya adalah sebaiknya invoice ditambahkan watermark “LUNAS” sebagai penanda pembayaran sudah diselesaikan.
Outro
Kesimpulan
Berdasarkan hasil user research, solusi desain yang dibuat cukup membantu penggua dan mudah digunakan dalam mengestimasikan biaya kirim dan biaya asuransi serta untuk membagikan invoice, mengunduh dan mencetak invoice. Hal ini dibuktikan dengan SEQ yang diperoleh dengan score 6,5.
Namun demikian, user memberi masukan di antaranya adalah untuk menambahkan watermak “Lunas” pada invoice.
Reflection
Program pelatihan Digital Talent Scholarship-Professional Academy (PROA) dengan tema Desain UI/UX ini sangat bermanfaat bagi kami untuk menambah kemampuan di bidang desain UI/UX. Kurikulum dan materi pada pelatihan ini disesuaikan dengan kebutuhan industri Teknologi Informasi. Bentuk pelatihan ini tidak hanya berupa teori, namun juga langsung praktik ke challange partner dengan studi kasus yang nyata.
Dalam proses pengerjaan proyek ini, selain menambah kemampuan berupa hard skill, kami juga mengasah kemampuan soft skill dalam melakukan kerja sama dan juga komunikasi dalam tim.
Next Step
Dari hasil pekerjaan yang telah kami kerjakan, kami menyampaikan beberapa poin yang dapat menjadi langkah selanjutnya setelah ini, antara lain adalah:
- Mempertimbangkan feedback dan kebutuhan pengguna
- Iterasi desain selanjutnya
- Aplikasi Krealogi semoga akan menjadi semakin baik
- Dan semakin banyak UMKM Indonesia terbantu dengan adanya aplikasi Krealogi
Terima kasih kepada Kominfo atas diselenggarakannya Professional Academy (PROA)-Digitalent Scholarship, dan juga Skilvul yang telah memberikan kesempatan bagi saya untuk mendapatkan keahlian dan pengalaman baru.
Terima kasih juga kepada mentor kelas A UI/UX tim 21 atas semua ilmu yang telah diberikan, dan juga teman-teman khususnya kelompok 1 yang sudah saling membantu dan bekerja sama dengan baik untuk menyelesaikan proyek akhir ini.