BAB IV HASIL DAN PEMBAHASAN
4.7 Design Thinking
4.7.3 Ideate
ditetapkan oleh System Usability Scale (SUS).
Nilai minimum dari System Usability Scale (SUS) adalah 68, yang dikategorikan sebagai tingkat penerimaan yang tinggi, diberi penilaian kata "Baik", dan Grade Scale C.
4.7.3.1 Generative Design
Desain generative adalah proses dalam fase ideation dimana strategi dibuat untuk merancang solusi yang dibuat untuk tumbuh dan berkelanjutan. Ada dua tahap dalam proses desain generatif yaitu brainstorming dan arsitektur generasi pengetahuan.
A. Brainstorming
Langkah awal dalam fase generative design adalah sesi brainstorming, yang bertujuan untuk menghasilkan sebanyak mungkin ide. Brainstorming adalah metode efektif untuk mengembangkan solusi potensial dalam aplikasi yang sedang dirancang, berdasarkan pernyataan yang berasal dari metode How Might We (HMW) yang digunakan dalam tahap define. Ide- ide yang dihasilkan selama brainstorming kemudian dipetakan oleh peneliti sesuai dengan pernyataan HMW yang telah dibuat untuk setiap persona. Selain itu, pengguna juga dilibatkan dalam sesi brainstorming ini untuk memastikan bahwa ide-ide yang dihasilkan sesuai dengan kebutuhan dan harapan mereka. Ide-ide yang muncul selama sesi brainstorming dicatat dalam tabel di bawah ini.
Tabel 4. 15. Hasil Brainstorming Dari HMW Administrator
No Challenge Idea
1. Bagaimana cara memberikan bantuan dan kemudahan kepada administrator dalam
pengelolaan data produk.
- Memberikan from khusus untuk mengelola data produk - Pembagian dari katagori
produk
- Ada notifikasi informasi setiap dalam mencatat data
- Memberikan informasi transaksi penjualan yang dilakukan customer - Pembuatan vocher pada
produk yang sedang promo 2. Bagaimana dapat membantu
administrator dalam mencatat penjualan transaksi menjadi lebih cepat dan mudah
- Detail pemesanan customer.
- Pencarian data transaksi,penjualan.
- Kategori pemesanan - Filter kategori pemesanan
Tabel 4. 16. Hasil Brainstorming Dari HMW Customer
No Challeng Idea
1. Bagaimana cara memberikan dukungan agar pelanggan dapat dengan mudah dan cepat
menemukan produk yang mereka cari.
- Antarmuka/pilihan pencarian dan
penyaringan produk.
- Daftar produk - Informasi produk
yang sedang dalam promosi
- Layanan obrolan
(chat) 2. Bagaimana dapat membantu
customer untuk mengetahui informasi harga produk dan stok produk.
Informasi stok produk yang tersedia
3. Bagaimana dapat membantu customers untuk mengetahui cara penyajian produk kopi di meulawi
Informasi penyajian di dekat produk
4. Bagaimana dapat membantu customer melihat hasil ulasan customer lain
Informasi ulasan produk dari setiap customer.
5. Bagaiman dapat memberi kenyamanan dan kemudahan customer dalam membeli produk
- Cara pembelian yang sederhana
- Opsi pembayaran yang bervariasi (bank/virtual acaunt,COD,
Dana,Ovo,Link) - Kode promo/vocher 6. Bagaimana Membantu customer
mengetahui informasi dari tiap katagori/jenis produk yang dijual.
Katalog dari tiap kategori produk.
B. information Architecture
Setelah selesai dengan sesi brainstorming, langkah berikutnya adalah merancang Information Architecture (IA). Membuat Information Architecture bertujuan untuk membantu pengguna dalam menemukan informasi dan mengeksekusi tugas tertentu dengan lebih mudah. Dalam hal ini, peneliti menggunakan sitemap sebagai wujud dari Information Architecture, yang merupakan diagram hirarki yang mengatur dan menunjukkan struktur informasi dalam desain aplikasi penjualan kopi. Di bawah ini adalah gambaran umum dari Information Architecture untuk kedua aplikasi penjualan kopi, baik dari perspektif administrator maupun pelanggan:
Tabel 4. 17. Information Architecture Administrator
No Page Page Detail
1. Dashboard - Grafik pendapatan - Grafik pengeluaran - Grafik stok produk - Produk yang laku 2. Leaderboard - Grafik pembelian
- Tabel customer 3. Order Tampilan pemesanan produk 4. produk Form menambahkan produk baru 5. mesages Daftar pertanyaan customer
6. Settings Untuk pengaturan sistem penjualan 7. Sign Out Keluar dari menu admin
Tabel 4. 18. Information Architecture Customer
No Page Page Details
1. Home - Tampilan Awal dari website meulawi kopi - Button produk
- Button cart
2 About Us - Informasi tentang meulawi kopi 3 Shop - Jenis- jenis produk
- Harga produk - Katagori produk - Halaman istagram 4 Detail produk - Data detail produk
- Button bayar
- Button tambahkan ke cart Deskripsi produk
5 Cart - Daftar produk yang ditambahkan - Button ubah cart
- Button lanjut belanja - Button proses bayar 6 Checkout - Proses pembelian
- Button bayar
7 Blog - Konten tentang kopi
8 Detail blog - Deskripsi tentang konten kopi
9 Contack - Form pertanyaan untuk UMKM Meulawi Kopi
- Button submit
10 Promo - Kode Promo
4.7.3.2 Conceptual Design
Hasil yang diperoleh dari fase generative design digunakan sebagai dasar untuk melanjutkan ke tahap desain konseptual. Tahap desain konseptual adalah saat peneliti merancang konsep dasar untuk website penjualan kopi. Dalam proses ini, beberapa langkah yang dilakukan meliputi pembuatan wireframe dan user flow.
A. User Flow
User Flow bertujuan untuk menggambarkan bagaimana tugas-tugas interaksi dengan website dilakukan oleh pengguna. Biasanya, User Flow mencakup beberapa skenario pengguna yang menjalankan tugas-tugas pada berbagai fitur website. Peneliti membagi User Flow berdasarkan peran pengguna, yaitu administrator dan pelanggan, dan penjelasan rinci dari pembagian User Flow ini dapat ditemukan di bawah ini
1. User flow admin
Gambar 4. 4. User Flow Admin 2. User Flow Customer
- Login
Gambar 4. 5. User Flow Customer
- Pemesanan produk
Gambar 4. 6. Pemesanan Produk - Cart
Gambar 4. 7. Cart
B. Wireframe
Setelah merancang struktur informasi pada website melalui Information Architecture dalam bentuk User Flow, langkah berikutnya adalah membuat wireframe. Wireframe adalah representasi konsep dasar sebelum memulai desain high-fidelity, yang menggambarkan tata letak atau struktur halaman, hierarki informasi, dan fungsi dari website penjualan kopi. Dalam pembuatan wireframe, peneliti menggunakan alat yang disebut 'framem.
a. Wireframe Administrator 1. Tampilan Login
Gambar 4. 8. Halaman Login
2. Tampilan dashboard
Gambar 4. 9. Halaman Dashboard 3. Tampilan leaderboard
Gambar 4. 10. Halaman Leaderboard
4. Tampilan Order
Gambar 4. 11. Halaman Order 5. Tampilan produk
Gambar 4. 12. Halaman Produk
6. Tampilan Messages
Gambar 4. 13. Halaman Messages
7. Tampilan settings
Gambar 4. 14. Halaman Settings
8. Tampilan Sign Up
Gambar 4. 15. Halaman Sign Up b. Wireframe Customer
1. Tampilan Home
Gambar 4. 16. Halaman Home
2. Tampilan About Us
Gambar 4. 17. Halaman About Us 3. Tampilan Shop
Gambar 4. 18. Halaman Shop
4. Tampilan produk
Gambar 4. 19. Halaman Produk
5. Tampilan Cart
Gambar 4. 20. Halaman Cart
6. Tampilan Checout
Gambar 4. 21. Halaman Checkout
7. Tampilan Blog
Gambar 4. 22. Halaman Blog
8. Tampilan Blog Detail
Gambar 4. 23. Halaman Blog
9. Tampilan Contact
Gambar 4. 24. Halaman Kontak
4.7.3.3 Product Phase
Product phase adalah langkah yang terjadi setelah konsep dasar desain solusi telah dibuat pada tahap desain konseptual. Ini merupakan tahap akhir dalam fase ideate, di mana desain solusi dikembangkan lebih detail dan diberi tampilan yang menarik pada website penjualan kopi Meulawi.
A. UI Style Guide/Visual Design Language
Sebelum melangkah ke pembuatan desain high-fidelity, langkah yang esensial adalah memiliki pedoman desain yang akan membimbing peneliti selama proses perancangan. Ini dapat dicapai melalui penggunaan design system, yang merupakan sekumpulan komponen dengan standar yang jelas. Design system ini terdiri dari dua bagian utama, yaitu panduan gaya antarmuka pengguna (UI style guide) dan perpustakaan pola antarmuka pengguna (UI pattern library), yang berguna untuk mempermudah proses perancangan (Suarez et al., 2017).
UI style guide adalah dokumen panduan desain yang mencakup berbagai aspek seperti warna, tipografi, ikonografi, dan elemen visual lainnya dalam produk desain. Panduan ini bertujuan untuk menjelaskan aturan dan prinsip desain yang akan digunakan. Sebagai bagian dari upaya ini, peneliti telah menyusun UI style guide yang mencakup sejumlah elemen desain.
1. Colors
Pemilihan warna dalam desain website memiliki peran lebih dari sekadar merepresentasikan identitas perusahaan atau merek. Warna juga berfungsi sebagai sarana untuk mengkomunikasikan pesan
kepada pengguna. Dalam kasus website penjualan Meulawi Kopi, penentuan palet warna didasarkan pada hasil dari diskusi dengan pemilik Meulawi Kopi, yang mencari warna-warna yang sesuai dan cocok dengan pesan yang ingin disampaikan.
Tabel 4. 19. Penggunaan Warna di Menu Home No Colors name Hex RBG
1 Mine Shaft #272727 39, 39, 39, 1 2 Mine Shaft #252525 37, 37, 37, 1 3 Mine Shaft #3A3A3A 58, 58, 58, 1 4 Mine Shaft #323232 50, 50, 50, 1 5 Glacier #72AEC8 114, 174, 200, 1 6 Glacier #75A5BF 117, 165, 191, 1 7 Black #000000 0, 0, 0, 1
8 Black #030303 3, 3, 3, 1 9 Black #040404 4,4,4,1
10 Alto #DODODO 208, 208, 208, 1 11 Alto #D9D9D9 217, 217, 217, 1 12 Alto #D3D3D3 211, 211, 211, 1 13 Alabaster #F8F7F7 248, 247, 247, 1 14 Alabaster #FCFCFC 252, 252, 252, 1 15 Silver #CDCDCD 205, 205, 205, 1 16 Silver #CCCCCC 204, 204, 204, 1 17 Tundora #4A4A4A 74, 74, 74, 1
18 Tundora #494949 73, 73, 73, 1 19 Nero #0B0600 11, 6, 0, 1 20 White #FFFFFF 255, 255, 255, 1 21 Santa Fe #BA704F 186, 112, 79, 1 22 Gallery #EEEEEE 238, 238, 238, 1 23 Porcelain #EBEFF1 235, 239, 241, 1 24 Iron #D7DDDF 215, 221, 223, 1 25 Mercury #E1E1E1 225, 225, 225, 1 26 Royal Blue #2F80ED 47, 128, 237, 1 27 Dove Gray #737373 115, 115, 115, 1 28 Gray #848484 132, 132, 132, 1 29 Heavy Metal #1A1C1E 26, 30, 28, 1 30 Scorpion #5B5B5B 91, 91, 91, 1 31 Lunar Green #484A4B 72, 74, 70, 1 32 Wild Sand #F5F5F5 245, 245, 245, 1 33 Nevada #696F79 105, 111, 121, 1 34 Denim #1565D8 21, 101, 216, 1
2. Typography
Typography merupakan sekumpulan dari penyusunan fonts yang digunakan pada website. Font yang digunakan pada aplikasi penjualan Kopi adalah (Lato dan Josh) yang disesuaikan agar terlihat menarik. Penyusunan typography yang dibuat pada website, terbagi
menjadi 3 yaitu body, button, dan caption. Typography yang telah disusun oleh peneliti.
Gambar 4. 25. Font Lato
Gambar 4. 26. Font Jost
3. Spacing and sizing
Penerapan spacing and sizing yang baik sangat penting pada sebuah aplikasi atau website, karena dapat menciptakan keseimbangan dan ritme yang selaras. Spacing and sizing juga bertujuan untuk menciptakan layout pada website agar tetap konsisten sehingga memberikan kenyamanan saat digunakan oleh pengguna. Menurut (Suarez et al., 2017), dalam menerapkan spacing and sizing paling baik adalah menggunakan skala berbasis 4dp (8,16,24,32) pada semua platform sehingga dapat membuat sebuah desain aplikasi yang responsif. Namun, untuk spacing yang bersifat horizontal akan lebih baik menggunakan skala berbasis dp.
4. Iconography
Icons atau Iconography pada sebuah aplikasi/website mempresentasikan fungsi dan makna kepada pengguna. Icons yang digunakan dalam penelitian diambil dari Figma Community.
Gambar 4. 27. Iconography B. UI Pattern Library
UI pattern library adalah bagian-bagian pada user interface atau elemen desain yang digunakan pada produk. UI pattern library terdiri dari buttons, text field, cards, dan komponen lain yang dibutuhkan dalam merancang user interface. UI pattern library yang telah dibuat antara lain sebagai berikut:
1. Buttons
Buttonn adalah elemen serta penting pada User Interface (UI) dan User Experience (UX) yang bertujuan untuk menarik pengguna dan sebagai sarana interaksi dalam mencapai tujuan tertentu. Terdapat dua jenis buttons yang dibuat peneliti yaitu filled button, dan disable buttons. Di bawah ini merupakan gambar komponen buttons yang telah dibuat oleh peneliti.
Gambar 4. 28. Buttons 2. App Bar
App Bar adalah elemen yang digunakan sebagai interaksi bagi pengguna atau sebagai navigasi untuk suatu perintah. Terdapat 2 jenis app bar yang dibuat dengan menyesuaikan pada model aplikasi yang dirancang yaitu dalam tampilan desktop bagi administrator dan customer yang terdapat pada gambar dibawah ini.
Gambar 4. 29. App Bar Administrator
Gambar 4. 30. App Bar Customer 3. Text Fields
Text Fields merupakan elemen area yang dapat digunakan oleh pengguna untuk memasukkan atau mengubah teks yang ada didalamnya. Terdapat beberapa pembagian text fields yang digunakan pada website penjualan Meulawi Kopi yaitu dari type, style, dan status. Pada type text fields mempunyai 3 variasi yaitu empty, filled, dan disable. Pada style text fields mempunyai 3 variasi yaitu dengan icon, label, dan helper text. Pada status text fields terdapat 2 jenis varias yaitu status activated serta deactivated.
Dengan pembagian tersebut dapat memudahkan peneliti dalam membuat sebuat input form dengan menyesuaikan kebutuhan dari jenis text fields pada setiap pengguna aplikasi.
Gambar 4. 31. Text Fields 4. Menus
Menus merupakan elemen yang menampilkan sebuah daftar elemen pilihan yang bersifat sementara pada aplikasi. Dalam website penjualan Meulawi Kopi yang dirancang menerapkan exposed dropdown menus.
Exposed dropdown menus memberikan interaksi kepada pengguna dengan menampilkan item riwayat pemesanan. Menu yang dibuat oleh peneliti mempunyai 2 jenis dari type dan status. Pada type menu mempunyai 2 variasi yaitu dengan label dan helper text. Pada status menu terdapat 2 jenis varias yaitu status activated serta deactivated.
Gambar 4. 32. Menus
5. Navigation Rail
Navigation Navigation Rail merupakan elemen yang berfungsi sebagai navigasi untuk dapat mengakses tujuan atau konten dalam website atau aplikasi. Bottom Navigation adalah elemen yang memberikan interaksi perpindahan antara tujuan utama pada aplikasi. Pada website penjualan Meulawi Kopi, Navigation Rail terdapat pada website pengelolaan administrator, Navigation Rail yang telah dibuat terdapat pada gambar dibawah ini.
Gambar 4. 33. Navigation Rail
6. Cards
Cards adalah elemen yang memiliki informasi atau konten serta representasi dari objek. Informasi yang terdapat dalam elemen cards dapat bervariasi dengan menyesuaikan informasi yang ingin disampaikan kepada pengguna.
Gambar 4. 34. Cards C. High-fidelity Design
a. High-fidelity Design Administrator 1. Halaman login
Sebelum mengakses tampilan admin, diperlukan langkah penting yaitu login ke akun admin.
Gambar 4. 35. Halaman Login 2. Halaman dashboard
Setelah berhasil login, Anda akan diarahkan ke halaman menu dashboard yang merupakan pusat kontrol masuk ke tampilan dashboard admin, Anda akan memiliki akses untuk melihat berbagai informasi penting. Ini mencakup data mengenai target penjualan, tujuan pengeluaran, serta daftar produk yang paling diminati oleh pelanggan. Dengan fitur-fitur ini, Anda dapat dengan mudah memantau kinerja bisnis dan mengambil keputusan yang lebih baik untuk pertumbuhan dan efisiensi.
Gambar 4. 36. Halaman Dashboard 3. Halaman Leaderboard
Kemudian, terdapat opsi untuk mengakses halaman "Leaderboard" di mana Anda dapat menemukan daftar pelanggan yang secara konsisten melakukan pembelian produk. Pelanggan-pelanggan ini akan berkesempatan untuk menerima berbagai jenis reward sebagai penghargaan atas dukungan dan loyalitas mereka.
Gambar 4. 37. Halaman Leaderboard
4. Halaman Order
Selanjutnya, terdapat opsi untuk mengunjungi halaman "Order" di mana admin memiliki kemampuan untuk memeriksa pesanan-pesanan dari pelanggan. Di sini, admin dapat melihat rincian lengkap produk yang dipesan oleh pelanggan, termasuk harga masing-masing barang.
Selain itu, admin juga bisa memeriksa status pembayaran dari pelanggan, dan dapat dengan mudah mengetahui apakah pembayaran telah dilakukan atau belum.
Gambar 4. 38. Halaman Order 5. Halaman Produk
Dalam tampilan produk yang disusun dengan baik, admin dapat dengan mudah melihat semua barang yang ada dalam katalog. Admin memiliki kewenangan untuk menetapkan harga yang sesuai dengan nilai produk, serta menyusun deskripsi yang menarik dan informatif.
Semua ini dilakukan dengan cara yang mengizinkan admin untuk menyesuaikan dan merespons perubahan pasar dengan cepat dan tanpa hambatan.
Gambar 4. 39. Halaman Produk 6. Halaman massage
Dalam tampilan "Messages" yang telah dirancang secara efisien, admin dapat dengan mudah memeriksa dan menanggapi pesan-pesan yang masuk. Kemampuan ini diberikan kepada admin dengan tingkat fleksibilitas tinggi, memungkinkan mereka untuk merespons pertanyaan, memberikan informasi, atau memberikan dukungan sebaik mungkin. Semua ini dapat dilakukan dengan cara yang mengizinkan admin untuk beradaptasi dengan beragam situasi dan kebutuhan yang berbeda-beda.
Gambar 4. 40. Halaman Messages 7. Halaman setting
Dalam tampilan "Settings", di mana admin memiliki akses untuk mengelola berbagai pengaturan termasuk pengiriman, informasi pribadi, dan elemen lainnya. Di dalam area ini, kemampuan admin untuk mengatur segala sesuatu menjadi sangat fleksibel dan mudah diakses.
Gambar 4. 41. Halaman Setting
b. High-fidlity design customers
Untuk memulai akses ke website aplikasi penjualan Meulawi Kopi, langkah awalnya adalah membuka menu browser atau menggunakan mesin pencari Google. Kemudian, ketikkan "Meulawi Kopi" pada kotak pencarian, dan klik salah satu hasil yang muncul untuk menuju ke halaman beranda. Penting untuk dicatat bahwa proses login hanya akan terjadi apabila pelanggan memutuskan untuk melakukan transaksi pembelian produk.
1. Halaman Sign In
Gambar 4. 42. Halaman Sign In
2. Halaman Register
Gambar 4. 43. Halaman Register 3. Halaman Home
Halaman Home adalah halaman pertama yang dilihat oleh pengunjung saat mereka mengakses website atau aplikasi. Halaman ini bertujuan utama untuk memberikan gambaran menyeluruh tentang produk dari meulawi kopi, layanan, atau konten/platform penjualan.
Gambar 4. 44. Halaman Home
4. Halaman shop
Pada halaman shop berisikan tentang produk produk dan harga yang dijual dari UMKM Meulawi.
Gambar 4. 45. Halaman Shop
5. Detail produk
Pada halaman produk berisikan tentang deskripsi lengkap produk yang di pilih.
Gambar 4. 46. Tampilan Detail Produk
6. Halaman checkout
Pada halaman ini berisikan tentang proses pembayaran produk yang akan di beli.
Gambar 4. 47. Halaman Checkout
7. Halaman about
Untuk menampilkan deskripsi lengkap tentang profil UMKM Meulawi Kopi. Menu ini berisikan beberapa konten seperti sejarah berdirinya Meulawi Kopi, profil singkat, dan tempat berdirinya UMKM Meulawi Kopi.
Gambar 4. 48. Halaman About
8. Halaman Blog
Pada halaman blog berisikan konten konten tentang kopi.
Gambar 4. 49. Halaman Blog
9. Halaman Cart
Pada halaman ini berisikan tentang daftar belanja produk yang di pilih atau disimpan.
Gambar 4. 50. Halaman Cart
10. Halaman shoping cart
Pada halaman ini melihat produk yang ada di keranjang dan riwayat pemesanan
Gambar 4. 51. Halaman Shopping Cart
11. Halaman promo
Gambar 4. 52. Halaman Promo