UI/UX Case Study: Penambahan Fitur Pada Aplikasi Krealogi by Du Anyam

Gumelar
18 min readSep 28, 2022

--

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

Pencatatan Transaksi dan Pencatatan Keuangan Merupakan Kunci Perkembangan Usaha.

Krealogi By Du Anyam

DiIndonesia, 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 Harus Dikembangkan. Mengapa?

Diambil dari situs https://krealogi.com/apa-itu-perencanaan-produksi/

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?

Diambil dari situs https://krealogi.com/inilah-8-langkah-memulai-usaha-baru/

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 dan juga penyusunan prototype yang sistematis, teratur, dan terjadi kesalahpahaman saat melakukan user testing.
  • 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 deskripsi penjelasan ringkas untuk masing-masing screen yang telah di desain, dan menggabungkannya ke dalam draft artikel yang sudah disusun sebelumnya.

Pengembangan UI Desain Krealogi by Du Anyam: Satu Aplikasi Memenuhi Semua Kebutuhan Usaha

Di sadur dari Design Thinking, Telaumbanua (2019)

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

Diambil dari situs Interaction Design Foundation

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

Pada tahapan ini, kegiatan yang kami lakukan adalah melakukan Secondary Research dengan rincian sebagai berikut:

Cuplikan layar Tugas 1 — Design Thinking: Empathize — Secondary Research

Untuk menyelesaikan challenge yang diberikan, kegiatan pada tahapan pertama yang dilakukan adalah melakukan Secondary Research dengan rincian sebagai berikut:

  1. Melakukan pendalaman produk dari challenge partner, yaitu dari video sesi AMA dengan Krealogi
  2. Membuat resume dari informasi yang kami dapatkan dari sesi AMA tersebut
  3. Melakukan analisis terhadap aplikasi kompetitor. Aplikasi kompetitor yang kami amati adalah Buku Warung dan Buku Kas
  4. Menganalisis feedback dari pengguna kedua aplikasi kompetitor tersebut
  5. Mencari beberapa informasi terkait aplikasi pencatatan pembukuan yang kami dapatkan dari berbagai website, yaitu Medium, ACM, IEEE
  6. 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:

  1. Gambaran informasi yang jelas seputar aplikasi Krealogi
  2. Pemahaman terkait aplikasi kompetitor beserta user feedback baik itu feedback yang positif maupun yang negatif
  3. Berdasarkan feedback yang kami dapatkan, kami mengolah sebagian besar informasi sebagai dasar pembuatan ide yang dilakukan pada tahapan selanjutnya.
  4. 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.

  1. Gambaran informasi yang jelas seputar aplikasi Krealogi
  2. Pemahaman terkait aplikasi kompetitor beserta user feedback baik itu feedback yang positif maupun yang negatif
  3. Berdasarkan feedback yang kami dapatkan, kami mengolah sebagian besar informasi sebagai dasar pembuatan ide yang dilakukan pada tahapan selanjutnya
  4. Memahami kelebihan dan kekurangan aplikasi kompetitor dan mencari fitur-fitur yang sekiranya dapat kami aplikasikan atau kami masukkan dalam fitur-fitur pengembangan Krealogi
  5. Berdasarkan riset dari beberapa literature, kami mendapatkan gambaran sejauh mana pengembangan yang dapat dilakukan

Tahapan 2 — Define

Gambar diambil dari situs System Concept

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.

Pain Points

Pain Points oleh UIUX A32 — Kelompok 6 di Figma

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

How Might We

How Might We oleh UIUX A32 — Kelompok 6 di Figma

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:

  1. Bagaimana bila kami membantu pengguna Krealogi melakukan tracking pengiriman
  2. Bagaimana bila kami membantu pengguna Krealogi untuk memperoleh catatan performa usaha
  3. Memudahkan pengguna Krealogi untuk memiliki daftar nama dan daftar kontak pelanggan tetap dan memudahkan pencariannya

Tahapan 3 — Ideate

Gambar diambil dari situs beekast

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)

Solution Idea oleh UIUX A32 — Kelompok 6 di Figma

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

Afinity Diagram oleh UIUX A32 — Kelompok 6 di Figma

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:

  1. Inventory
  2. Operation
  3. Distribution

c. Diagram Prioritas

The Impact/Effort Matrix (Kylliäinen, 2018)

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

d. Prioritization Idea

Solution Idea oleh UIUX A32 — Kelompok 6 di Figma

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:

  1. Tracing pengiriman barang
  2. Automate generate biaya pengiriman ke invoice
  3. Fitur cek ongkir
  4. Fitur tagih hutang lewat SMS, WA, dan email
  5. Fitur ingatkan piutang yang terintegrasi dengan Google Calendar
  6. Fitur sorting transaksi berdasarkan waktu order
  7. 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:

  1. Tambahan form “Term & Condition” pada transaksi
  2. 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:

  1. Grafik progress penjualan
  2. Grafik progress pendapatan
  3. 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.

  1. 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 Lacak Pengiriman oleh UIUX A32 — Kelompok 6 di Figma
  • User Flow Fitur Sorting Pesanan

User flow kedua adalah langkah-langkah yang harus dilalui pengguna untuk melakukan sorting pada history pelanggan.

User flow Sorting Pesanan oleh UIUX A32 — Kelompok 6 di Figma
  • User Flow Fitur Ikhtisar Pelanggan

User flow terakhir ini menggambarkan proses-proses yang dilalui pengguna untuk menemukan history pelanggan.

User Flow Ikhtisar Pelanggan oleh UIUX A32 — Kelompok 6 di Figma

2. 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 Lacak Pengiriman oleh UIUX A32 — Kelompok 6 di Figma
  • Wireframe Fitur Sorting Pesanan

Kami membuat tiga wireframe untuk melakukan sorting pesanan sesuai status pemesanan dan tanggal transaksi.

Wireframe Sorting Pesanan oleh UIUX A32 — Kelompok 6 di Figma
  • Wireframe Fitur Ikhtisar Pelanggan

Pada wireframe ikhtisar pelanggan, kami membuat enam (6) wirframe seperti dalam cuplikan gambar di atas.

Wireframe Ikhtisar Pelanggan oleh UIUX A32 — Kelompok 6 di Figma

Tahapan 4 — Prototype

Gambar diambil dari situs Career Foundry

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.

a. Palet warna

Color pallete oleh UIUX A32 — Kelompok 6 di Figma

b. Typography

Typography oleh UIUX A32 — Kelompok 6 di Figma

c. Tombol

Komponen Tombol oleh UIUX A32 — Kelompok 6 di Figma
Komponen Tombol oleh UIUX A32 — Kelompok 6 di Figma

d. Text field

Text Field oleh UIUX A32 — Kelompok 6 di Figma

Selanjutnya, kami membuat molekul, seperti komponen, seperti navigation bar, cards, dan lainnya. Berikut adalah beberapa molekul yang kami buat.

a. Dashboard counting

Pada dashboard counting yang kami masukkan tidak mengalami perubahan.

b. Menu utama

Pada tombol menu utama, kami menambahkan dua menu, yaitu lacak pengiriman dan ikhtisar pelanggan.

c. Dropdown status

Pada dropdown status ini kami membuat empat pilihan filter, yaitu pesanan yang sedang diproses, dikirim, tiba di tujuan, dan dibatalkan.

d. 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.

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.

a. Tampilan Antar Muka Menu Pesanan

Tampilan Antar Muka Menu Pesanan oleh kelompok 6 Kelas A-32

b. Tampilan antar-muka Detail Pesanan

Tampilan antar-muka Detail Pesanan oleh kelompok 6 Kelas A-32

c. Tampilan Antar Muka Detail Pesanan

Tampilan Antar Muka Detail Pesanan oleh kelompok 6 Kelas A-32

d. Tampilan Antar Muka Status Pengiriman

Tampilan Antar Muka Status Pengiriman oleh kelompok 6 Kelas A-32

e. Tampilan Antar-Muka Lacak Pengiriman

Tampilan Antar Muka Lacak Pengiriman oleh kelompok 6 Kelas A-32

UI Design — Fitur Sorting

a. Tampilan Antar-Muka Sorting Berdasarkan Status

Tampilan Antar Muka Sorting Berdasarkan Status oleh kelompok 6 Kelas A-32

b. Tampilan Antar Muka Sorting Berdasarkan Tanggal

Tampilan Antar Muka Sorting Berdasarkan Tanggal oleh kelompok 6 Kelas A-32

UI Design — Fitur Ikhtisar Pelanggan

a. Tampilan Antar Muka Menu Ikhtisar Pelanggan

Tampilan Antar Muka Menu Ikhtisar Pelanggan oleh kelompok 6 Kelas A-32

b. Tampilan Antar Muka Detail Pelanggan

Tampilan Antar Muka Detail Pelanggan oleh kelompok 6 Kelas A-32

c. Tampilan Antar Muka Histori Pelanggan

Tampilan Antar Muka Histori Pelanggan oleh kelompok 6 Kelas A-32

d. Tampilan Antar Muka Input Data Pelanggan

Tampilan Antar Muka Input Data Pelanggan oleh kelompok 6 Kelas A-32

e. Tampilan antar-muka halaman beranda

Tampilan antar-muka halaman beranda oleh kelompok 6 Kelas A-32

Tahapan 5 –Test

Gambar diambil dari situs UX Plannet

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.

Stimulus & Record Data User Research — Kelompok 6 — UIX 32

b. Record Data User Research

Record Data User Research — Kelompok 6 Kelas A32
Record Data User Research — Kelompok 6 Kelas A32

c. Data responden reviewer

Responden yang kami dapatkan adalah sebagai berikut:

Identitas Reviewer — Case Study File Kelompok 6 Kelas A-32

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:

Cuplikan Hasil Record Data User Research — Kelompok 6, Kelas A32

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:

  1. Seluruh task mendapatkan hasil Passed
  2. Nilai yang didapatkan adalah di atas minimum passing grade 5,5
  3. Secara keseluruhan, prototype yang kami buat mudah digunakan. Meskipun demikian, pada task 3, reviewer merasakan kebingungan untuk menyelesaikan task yang diminta.
  4. Terdapat feedback dari responden yang dapat dimanfaatkan untuk melakukan perubahan/revisi.

Iterasi Design : Bentuk Komitmen untuk Membuat Tampilan yang Makin User Friendly

Gambar diambil dari situs https://www.pngdownload.id/png-d6vezx/

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

Iterasi Fitur Menambah Catatan Pesanan oleh Kelompok 6 — Kelas A32

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

--

--