{"id":3690,"date":"2023-05-12T03:38:23","date_gmt":"2023-05-12T03:38:23","guid":{"rendered":"https:\/\/sunaonako.my.id\/?p=3690"},"modified":"2023-05-24T10:09:21","modified_gmt":"2023-05-24T10:09:21","slug":"simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux","status":"publish","type":"post","link":"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/","title":{"rendered":"Simulasi Perancangan UX dan UI aplikasi UMKM. Mari belajar dari kesalahan  dan tips melakukan study ux"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Wahalo. Mau sharing guys. Dulu saat pandemi, saya melakukan penelitian untuk merancang sebuah aplikasi toko digital yang membantu menyelesaikan permasalahan penjual. Di sini melibatkan study UX yang dijalankan bertahap, dimana setiap tahap punya fokus bidangnya sendiri. Semoga bisa jadi pembelajaran bagi kalian nakoding yang mau belajar UX.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Penelitian saya didasarkan pertimbangan survey. Saat itu, menurut data dari lembaga survei, kemampuan digitalisasi UMKM masih rendah, serta UMKM adalah salah satu sektor yang paling berdampak negatif dengan Pandemi (narasi.tv &amp; Katadata Center). Belum beradaptasinya UMKM terhadap penggunaan aplikasi digital menjadikan penelitian ini untuk merancang aplikasi dengan <em>user experience in mind<\/em>. Di artikel ini, akan membahas apa yang salah dan apa yang bisa diperbaiki dalam proses dan tahapan pengembangan UX aplikasi hingga menjadi aplikasi jadi.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Intro, kapan user experience perlu?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Dalam membangun aplikasi atau menambah fitur, sebelum ngoding, ada tahapan merancang prototipe. <em>Nah, <\/em>di dalam tahapan perancangan prototipe ini tidak hanya sekedar buat template UI saja, namun masih ada proses dan strateginya sendiri. Note, ini merupakan studi real caseUX mendalam dari five planes yang saya tulis <a href=\"https:\/\/sunaonako.my.id\/blog\/membedah-lima-tahap-ux-five-planes-element\/\" target=\"_blank\" rel=\"noreferrer noopener\">disini<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-strategy-plane-belajar-ux-melakukan-research-dan-menganalisa-pasar\">Strategy Plane, belajar ux melakukan research dan menganalisa pasar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Di strategi ini, saya menentukan terlebih dahulu tujuan dari aplikasi. Sudah jelas, sebelum memulai, saya sudah menentukan topiknya seputar solusi UMKM. Setelah itu, saya menentukan UMKM yang seperti apa dulu. Karena semakin broad range target pengguna, sangat memakan waktu untuk pengembangan aplikasinya.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bidang UMKM itu sangatlah beragam, <em>hint <\/em>disini, kita selesaikan masalah yang terdekat dengan kita. Karena sangat sulit mebuat aplikasi yang diharapkan kalau kita tidak bisa berinteraksi dengan target user kita. Saya memilih untuk UMKM oleh-oleh dan kuliner, karena paling mudah dijangkau dan merupakan yang paling besar persentasenya, sekitar 60 persen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">User Research: Mulai melakukan Survei dilapangan<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Saya melakukan survei langsung dengan teknik wawancara semi structured interview. Pokok pertanyaannya adalah dampak pandemi terhadap UMKM. Saya berharap mengekstraks permasalahan yang users alami untuk menentukan aplikasi seperti apa yang akan dibuat. Berbekal berbagai survei apa saja yang dialami UMKM sebagai point pertanyaan.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Tips: Kita perlu paham kalau aplikasi yang baik adalah aplikasi yang tetap bisa digunakan dan mengikuti zaman. Saya berharap aplikasi dapat berguna bahkan setelah tidak ada covid. Jadi saya juga bertanya tentang problem apa yang users alami sebelum pandemi. Jaga-jaga jika kondisi ekonomi mulai normal kembali.<\/p>\n<\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Tips dalam melakukan survei, kamu tidak boleh berpaku pada lisan narasumber saja. Tapi perhatikan pula aktivitas narasumber ketika melakukan sesuatu. Catat detail sekecil apapun. Contoh, pemilik toko diwaktu tidak ada pembeli menonton tv, bermain tiktok, dll. Sama jangan lupa, jika kalian berencana melakukan survei lanjutan, tanyakan ke narsum.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">Kalau kamu membuat interview terstruktur, siapkan mindmap pertanyaan. Jadi jika narasumber menjawab B maka response pertanyaannya selanjutnya apa. Kita perlu insight sebaik mungkin. Misal:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dampak pandemi pada Usaha apakah positif atau negatif? \n<ul class=\"wp-block-list\">\n<li>Jika negatif kamu bisa lanjutkan ke \u2192 Dampak negatif pandemi apa saja? -&gt; Apa yang bisa menjadi pelajaran <\/li>\n\n\n\n<li>Jika positif -&gt; Dampak positif apa? Bagaimana bisa toko ini justru berkembang di saat pandemi<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Bagaimana memilih pertanyaan untuk wawancara?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Kamu bisa diskusi dengan stakeholder untuk membantu menyusun pertanyaan, untuk startup besar, terkadang diskusi diwakilkan product owner yang sebelumnya sudah diberi arahan oleh stakeholder. Karena saya tidak memiliki <em>stakeholder<\/em>, saya mencoba mencari data terlebih dahulu melalui survei yang tersedia.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Menurut data absorbsi digital UMKM masih rendah (2020), sekitar 13 persen<\/li>\n\n\n\n<li>Minimnya pemanfaatan teknologi digital menandakan pelaku UMKM belum terbiasa untuk menggunakan aplikasi<\/li>\n\n\n\n<li>Berdasarkan bedah data survei yang dilakukan oleh UNDP dan LPEM UI, ada 6 aspek yang menjadi problematika UMKM saat new normal<\/li>\n\n\n\n<li>Menurut bank indonesia, ada tujuh sektor umkm (ini adalah salah satu cara untuk analisis target user)<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Membedah Hasil Survei<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Hasil Survei UX Interview saya simpan di website pribadi.<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img decoding=\"async\" width=\"361\" height=\"232\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/web-survey-1.png\" alt=\"\" class=\"wp-image-3720\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/web-survey-1.png 361w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/web-survey-1-300x193.png 300w\" sizes=\"(max-width: 361px) 100vw, 361px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Kesalahan saya adalah kurangnya saya mendalami peran sebagai &#8220;wartawan&#8221;. Jadi hasil data dari wawancara tidak terlalu bagus. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tips buat kalian, pastikan waktu untuk interview atau apapun yang harus bertatap muka dengan user, tidak mengganggu kesibukan yang bersangkutan. Saya pernah melakukan wawancara di waktu saat toko masih melayani pelanggan.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Untuk dicatat, data survei akhir dilakukan berjumlah 16 orang, beberapa di sentra wisata dan diluar sentra wisata. Berdasarkan survei, diputuskan development berfokus pada aplikasi perangkat bergerak\/mobile.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">berikut ini adalah tampilan infographic data, sebelum saya kelola :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"763\" height=\"450\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/6.-Perangkat-lebih-prefer.png\" alt=\"\" class=\"wp-image-3721\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/6.-Perangkat-lebih-prefer.png 763w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/6.-Perangkat-lebih-prefer-300x177.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/6.-Perangkat-lebih-prefer-360x212.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/6.-Perangkat-lebih-prefer-545x321.png 545w\" sizes=\"(max-width: 763px) 100vw, 763px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Di sini terdapat 10 persen yang beranggapan usaha mereka tidak terdampak apa-apa. Sebenarnya penulis tidak dapat membedakan apakah stagnan atau perkembangan yang lebih lambat daripada sebelum pandemi termasuk negatif. Sehingga untuk bagian yang ini saya lebih bertanya ke narasumber.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"763\" height=\"450\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/11.-Perangkat-lebih-prefer.png\" alt=\"\" class=\"wp-image-3722\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/11.-Perangkat-lebih-prefer.png 763w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/11.-Perangkat-lebih-prefer-300x177.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/11.-Perangkat-lebih-prefer-360x212.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/11.-Perangkat-lebih-prefer-545x321.png 545w\" sizes=\"(max-width: 763px) 100vw, 763px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Analisa sementara dari survei<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Survei berfokus pada kuliner dan oleh-oleh, karena merupakan kategori UMKM yang paling dominan (36% 2020) dan mudah ditemui oleh penulis karena dekat dengan daerah pasar, tempat wisata, dan tempat strategis.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Untuk pengelompokan wawancara, saya mencoba memisahkan berdasarkan generasi XYZ. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Narasumber UMKM terbagi menjadi tiga kelompok, yaitu usaha kuliner cepat saji, oleh-oleh jajanan, dan kerajinan tangan. Sebagian besar narasumber tidak menggunakan teknologi untuk kegiatan toko. Namun masih menggunakan teknologi untuk kegiatan individu seperti pesan menggunakan whatsapp. Hanya dua narasumber yang aktif memanfaatkan teknologi digital untuk keperluan toko.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Walaupun sebagian besar narasumber tidak menggunakan teknologi untuk kegiatan toko, semua narasumber setuju jika ada aplikasi yang membantu usaha maka aplikasi tersebut lebih diutamakan mobile.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Beberapa permasalahan yang paling sering muncul seperti berkurangnya jumlah pengunjung sehingga mengurangi jumlah pembelian. Hal ini diakali dengan mengurangi stok produk yang lebih cepat kadaluarsa. Tetapi penulis juga menemukan beberapa penjual yang cenderung pasrah atau bingung dengan keadaan.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Catatan yang miss<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Di sini, saya tidak berencana melihat aplikasi dari aspek bisnis, sehingga saya tidak memperhatikan produk serupa. Inilah kesalahan lain di saya, tidak menyelidiki produk kompetitor. Hal ini membuat saya kesulitan untuk mendesain prototipe aplikasi. Menyelidiki produk kompetitor itu penting, karena kita perlu referensi setidaknya desain aplikasi seperti apa yang sudah teruji atau di aspek mana yang perlu disempurnakan lagi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Research mendalam di produk kompetitor bahkan berpengaruh di iterasi ke tiga, <em>structure plane<\/em>, kita bisa lebih dapat ide dalam membuat user flow untuk aplikasi; Cukup dengan uji coba aplikasi pesaing. Menurutku, UX Designer semakin banyak mencoba-coba aplikasi yang memang UI\/UXnya bagus. Secara tidak langsung bisa jadi ilmu buat UX Designer dalam merancang desain sistem.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Namun, saya cukup beruntung, berbekal referensi dari aplikasi gojek dan tokopedia, cukup membantu dalam menyelesaikan UI\/UX aplikasi. Mungkin identifikasi aplikasi yang mepet-mepet dengan topik bisa membantu. Contoh, aplikasi manajemen toko dengan olshop, dua aplikasi ini nyerempet di kelola produk.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Di manakah business objective dilakukan? Di strategy plane, umumnya dimulai dengan membahas bersama dengan stakeholder dan PO tentang segi bisnis (business objective) sebelum kemudian lanjut ke validasi ide bisnis pada tahap User Research.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"856\" height=\"546\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Untitled.png\" alt=\"\" class=\"wp-image-3723\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Untitled.png 856w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Untitled-300x191.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Untitled-768x490.png 768w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Untitled-360x230.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Untitled-545x348.png 545w\" sizes=\"(max-width: 856px) 100vw, 856px\" \/><figcaption class=\"wp-element-caption\">Salah satu metode yang terkenal untuk mengetahui aspek produk adalah dengan menggunakan lean canvas.<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Di strategy plane ini saya mengabaikan tahap business objective karena beberapa pertimbangan:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Tidak ada stakeholder<\/li>\n\n\n\n<li>Tidak memperhatikan segi profit dan sustainibility dalam membuat aplikasi<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Tetapi jika harus diulang, saya akan mengimplementasi tahap ini dengan memodifikasi beberapa aspek, seperti mengansumsi hasil survei sebagai stakeholder, atau bertanya ke ahli.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Survey to Ideation<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Bagaimana cara kita mengolah hasil survei menjadi lebih reusable dan terstruktur? Inilah saatnya kita mengolah data menjadi persona.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kalau saya, karena jumlah interview cukup banyak dan beragam dibandingkan newbie UX reviewer pada umumnya (biasanya untuk sekedar latihan, paling banyak 4-5 interview sudah cukup). Seperti ini cara saya mengelola hasil survei (nomor dua membuat kalian tercengang).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"935\" height=\"815\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Picture1.png\" alt=\"\" class=\"wp-image-3724\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Picture1.png 935w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Picture1-300x261.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Picture1-768x669.png 768w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Picture1-360x314.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Picture1-545x475.png 545w\" sizes=\"(max-width: 935px) 100vw, 935px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ada dalam proses survey to ideation yang membantu ketika nanti prototipe dirancang, kamu bisa tentukan isi konten bakal memberi emosi seperti apa. Yang terkenal adalah user journey map. Seperti ketika proses mengerjakan proses checkout yang kompleks, normalnya diakhir ada semacam konten &#8220;selamat, checkout telah berhasil&#8221;, memberikan emosi yang tepat dapat meningkatkan <em>user experience<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dari keenambelas peta empati tersebut, saya dapat melihat ada kesamaan pattern pada masing-masing user. Untuk mengenali seperti apa user yang akan memakai aplikasi, dibuatlah empat user persona. Yang dibawah ini adalah salah satu user persona.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/1-1024x576.png\" alt=\"User Persona example five planes belajar ux\" class=\"wp-image-3726\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/1-1024x576.png 1024w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/1-300x169.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/1-768x432.png 768w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/1-1536x864.png 1536w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/1-360x203.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/1-545x307.png 545w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/1-1600x900.png 1600w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/1.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Scope Plane dalam User Experience<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kita berada di scope plane, five plane untuk menentukan fitur apa yang ingin kita sediakan. Kita membaca hasil research sebelumnya untuk menentukan ide untuk fitur aplikasi. Tahapan ini akan menentukan Fitur yang direpresentasikan akan mengakomodasi kebutuhan dan keperluan pengguna. Representasi dari <em>scope plane <\/em>ini akan menghasilkan deskripsi fitur yang akan dimasukkan dalam aplikasi.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Menyusun Ide Aplikasi<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Melalui user persona tersebut, saya melakukan brainstorming fitur. Brainstorming boleh mencatat banyak ide gila yang kamu pikirkan, namun setelah itu lakukan diskusi dengan developer, apakah fitur tersebut bisa diimplementasikan. Karena project ini dikerjakan sendiri, jadi saya sendiri yang memutuskan fitur mana yang perlu diterapkan. Penentuan fitur yang akan kamu kerjakan bisa dilakukan dengan berbagai pertimbangan. Seperti korelasi fitur dalam mewujudkan purpose dari aplikasi. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pada tahap ini entah kenapa saya memilih menentukan brand color dan ide logo. Pemilihan warna brand berwarna teal dan hitam karena saya merasa memiliki psikologi nyaman dan tenang di mata karena target user lebih dominan orang tua.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Brand color ini menjadi panduan untuk membuat design color. Mengapa saya lakukan desain brand di scope plane? Karena saya merasa logo sebagai referensi visual dari tujuan produk. Sehingga saya berharap masih tetap ingat pada jati diri aplikasi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Nah<\/em>, fitur yang ada kesamaaan akan dikelompokkan menjadi satu. Saya biasanya menggunakan <a href=\"https:\/\/asq.org\/quality-resources\/affinity\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">affinity diagram<\/a>. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Prioritas fitur<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Setelah itu, kamu bisa <em>filter<\/em> fitur mana yang akan kamu prioritaskan dan abaikan. Maksud diabaikan ini adalah kamu bisa implementasi fitur ini di iterasi ux yang baru. Entah karena developer belum sanggup, atau perlu research yang mendalam. Beberapa cara untuk menentukan prioritasi fitur yaitu Priorization Matrix dan Moscow board. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Haruskah saya memasukkan fitur mustahil seperti integrasi dengan gojek? Saya kepikiran juga aplikasi saya akan membuat dokumen validasi pendaftaran ke marketplace sehingga toko bisa lebih cepat terdaftar menjadi mitra di ecommerce besar, seperti goto atau shopee.. tetapi untuk mewujudkannya terlalu sulit (waktu dan biaya yang mahal). Sehingga alih-alih saya taruh di prioritas rendah, mungkin saya research mendalam lagi di iterasi ux baru setelah fitur di prioritas rendah di <em>research <\/em>ulang.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">UX memang lebih banyak main dokumentasi, bahkan setelah menentukan fitur, kamu perlu buat penjelasan tentang fitur tersebut.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><thead><tr><th>Fitur<\/th><th>Spesifikasi<\/th><\/tr><\/thead><tbody><tr><td>Auth<\/td><td>Mencakup register dan login dimana untuk user baru mendaftar perlu memasukkan data toko yang disediakan dalam format form<\/td><\/tr><tr><td>Dashboard Laporan<\/td><td>Aplikasi menampilkan grafik dan informasi pendapatan toko didapat melalui hasil transaksi pendapatan dan pengeluaran<\/td><\/tr><tr><td>Transaksi<\/td><td>Sistem menampilkan riwayat transaksi terbagi dalam beberapa grup berdasarkan tipe transaksi<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Structure Plane<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Di sini penyusunan alur aplikasi dimulai, pertama saya buat flow logis antar fitur. Dengan membaca fitur di scope plane, saya mengetahui bahwa ada dua alur aktivitas. Managemen Toko, dan transaksi toko. Menghubungkan setiap alur fitur secara <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tiap fitur terdiri dari subfitur atau task, misalnya kelola produk, mempunyai task buat, update, hapus produk. Kita buat setiap kemungkinan task dengan menggunakan HTA <em>Hierarchical Task<\/em> <em>Analysis<\/em>, kamu juga bisa memakai metode flow lain seperti swimlane, saya memilih HTA karena proses pembuatan flow lebih cepat dan saya punya aplikasi untuk membuat HTA.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"389\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/2023-05-12_030634-1024x389.png\" alt=\"HTA Flow Example of Auth Process. Contoh HTA Hierarchical task analysis\" class=\"wp-image-3730\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/2023-05-12_030634-1024x389.png 1024w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/2023-05-12_030634-300x114.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/2023-05-12_030634-768x292.png 768w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/2023-05-12_030634-1536x583.png 1536w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/2023-05-12_030634-360x137.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/2023-05-12_030634-545x207.png 545w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/2023-05-12_030634.png 1546w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Cara membuat HTA persis seperti sitemap, dengan satu kepala sebagai &#8220;start&#8221;. Dan untuk membaca HTA sama seperti membaca pre order traversal :?.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kalau dari gambar, cara bacanya dimulai dari 0, 1, 1.1, 1,2, 2, 2.1, 2.1.1,  2.2<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Skeleton Plane <\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sekarang, kita belajar ux membuat wireframe atau low fidelity prototype. Semacam prototipe yang masih dalam kerangka, tidak ada warna, hanya berupa sketsa atau paling umum adalah kotak-kotak komponen. Dalam merancang kerangka, ada beberapa law yang harus diperhatikan.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fitts law<\/li>\n\n\n\n<li>Hicks law<\/li>\n\n\n\n<li>Law of Common Region<\/li>\n\n\n\n<li>Law of Similarity<\/li>\n\n\n\n<li>Miller\u2019s Law<\/li>\n\n\n\n<li>Peak-End Rule\n<ul class=\"wp-block-list\">\n<li><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Kesalahan saya pada skeleton plane adalah saya berasumsi pada tahap ini saya sekedar tempel komponen apa saja di dalam screen, jadi spacing antar elemen saya kira-kira. Dan isi konten kurang dalam bahkan beberapa long text saya ganti pakai scratch element.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"776\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Copy-of-User-Persona-1024x776.png\" alt=\"Belajar UX membuat wireframe low fidelity prototype\" class=\"wp-image-3731\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Copy-of-User-Persona-1024x776.png 1024w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Copy-of-User-Persona-300x227.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Copy-of-User-Persona-768x582.png 768w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Copy-of-User-Persona-360x273.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Copy-of-User-Persona-545x413.png 545w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Copy-of-User-Persona.png 1390w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Beberapa sumber menyarankan, setelah selesai skeleton plane, dan sebelum lanjut ke structure plane, lakukan validasi ke users, bahkan di tahap plane ke tiga pun bisa langsung melakukan validasi ke users. Ini tergantung kalian sebagai UX engineer perlu melakukan tes penilaian di plane mana saja. Karena saya khawatir mengganggu users, validasi saya lakukan setelah users. Btw, ada validasi untuk mengukur pengalaman pengguna ketika mencoba aplikasi, ini biasa disebut uji usability.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Structure Plane<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Waktunya membuat design system! Semua aspek estetik diperhatikan disini, tentu saja hasil akhir dari plane ini adalah membuat prototipe yang benar-benar terlihat mirip dengan aplikasi. Prototipe seolah bisa berfungsi, seperti navigasi, komponen dapat berinteraksi melalui sentuhan. Ada banyak aplikasi untuk membuat prototipe seperti itu, seperti figma dan adobe xd.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bagaimana dengan design system?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Dari semua <em>documenting<\/em> yang sebelumnya saya <em>spill<\/em> di atas, pernahkah kalian terfikir untuk mendokumentasikan desain? Inilah bagian proses yang challenging, para UX engineer menyebutnya design system. Perancangan design system sejatinya dilakukan sebelum eksekusi perancangan high fidelity prototype. Tujuan design system adalah memberikan konsistensi, kemudahan, mengurangi pengambilan keputusan ketika mendesain produk. Selain itu, design system memberikan <em>developer experience <\/em>yang lebih baik.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Beberapa sistem yang dibuat oleh UX adalah:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Typography<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"654\" height=\"579\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/image-3.png\" alt=\"Typhography design system, belajar ux fonts design\" class=\"wp-image-3736\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/image-3.png 654w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/image-3-300x266.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/image-3-360x319.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/image-3-545x483.png 545w\" sizes=\"(max-width: 654px) 100vw, 654px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Jangan meremehkan perancangan fonts, dalam UI\/UX bahkan ada ilmu tersendiri dalam menentukan model fonts seperti apa yang akan aplikasi gunakan. <em>It&#8217;s so extensive that there is a book that purposely explains only about typography in UX<\/em>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Color System<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Kemudian, menentukan color palette. Singkatnya,  selain warna brand, kamu perlu memilih kombinasi warna untuk aplikasimu. Ada menentukan warna primer, warna secondary, aksen, dll. Kemudian untuk setiap kombinasi warna, generate <a href=\"https:\/\/sunaonako.my.id\/blog\/ui-tips-accessible-color-palette-membuat-kombinasi-warna-dengan-figma\/\" target=\"_blank\" rel=\"noreferrer noopener\">variasi turunan dari warna<\/a> atau beberapa menyebutnya sebagai Accessibility color atau warna adaptive. Yaitu alternatif kontras dari individu warna yang kamu pilih.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"404\" height=\"856\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Teals-Accessibilty-Color.png\" alt=\"Accessibility Color, create color variants and combination. UI\/UX\" class=\"wp-image-3737\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Teals-Accessibilty-Color.png 404w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Teals-Accessibilty-Color-142x300.png 142w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Teals-Accessibilty-Color-360x763.png 360w\" sizes=\"(max-width: 404px) 100vw, 404px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Beberapa yang menjadi pertimbangan dalam memilih color palette adalah:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Psikologi dari warna, tujuannya untuk membawa pesan tertentu dan mempertegas branding<\/li>\n\n\n\n<li>Sangat direkomendasikan mengikuti WCAG guideline minimal AA<\/li>\n\n\n\n<li>Memperhatikan semua possibility misal pada background yang lebih gelap apakah palet bisa terbaca, apaka palet cukup nyaman untuk color blindness?<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Untuk lebih lengkapnya kamu bisa baca di <a href=\"https:\/\/www.mockplus.com\/blog\/post\/ui-color-schemes\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">sini<\/a>. <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Color system menjadi dilema, karena pada screen etalase toko, dimana ada fitur dimana saya ingin user mempunyai keleluasaan memilih warna tema, jadi di interface etalase, warna primer bisa berubah sewaktu-waktu tergantung user ingin memilih tema yang seperti apa. Dan saya menggunakan warna brand dari aplikasi terkenal.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">Kemudian ada lagi yang kamu perlu rancang, seperti model grid (jarak antar komponen atau margin komponen dengan tepi device), shadow, komponen yang bisa dipakai ulang yang mana saja.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"927\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Group-19481-1024x927.png\" alt=\"Kelolaku\" class=\"wp-image-3738\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Group-19481-1024x927.png 1024w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Group-19481-300x272.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Group-19481-768x695.png 768w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Group-19481-1536x1391.png 1536w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Group-19481-360x326.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Group-19481-545x494.png 545w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/Group-19481.png 1546w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Berilah penamaan setiap design system dengan jelas dan <em>stick <\/em>dengan desain system yang sudah dirancang. Penamaan yang jelas juga mempermudah developer untuk memahami kapan desain system digunakan.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-usabillity-testing\">Usabillity Testing<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sebuah studi untuk mendapatkan pengetahuan yang tepat tentang pemahaman pengguna<br>terhadap apa yang ditawarkan aplikasi. Penjelasan mengenai usability testing akan saya jelaskan di artikel berikutnya, karena saya yakin kepala kalian sudah mulai panas karena kebanjiran dengan fakta mencengangkan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Melakukan Pengembangan aplikasi,<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class UiSpacer {\n  \/\/space between widgets vertically\n  static Widget verticalSpace({double space = 20}) => SizedBox(height: space);\n\n  \/\/space between widgets horizontally\n  static Widget horizontalSpace({double space = 20}) => SizedBox(width: space);\n\n  static Widget empty() => const SizedBox(width: 0);\n  static Widget px1({double space = 2}) => SizedBox(width: space);\n  static Widget px2({double space = 4}) => SizedBox(width: space);\n  static Widget px3({double space = 8}) => SizedBox(width: space);\n  static Widget px4({double space = 16}) => SizedBox(width: space);\n  static Widget px5({double space = 24}) => SizedBox(width: space);\n\n  \/\/dividers\n  static Widget divider({double thickness = 2}) =>\n      Divider(thickness: thickness);\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">TextStyle ff = TextStyle(\n    fontSize: 16,\n    fontFamily: 'Bariol',\n    fontWeight: FontWeight.w100,\n    fontStyle: FontStyle.italic);\n\nTextStyle large48 = kprimaryTextStyle(\n  size: 48,\n  fontFamily: 'Inter',\n  weight: FontWeight.w700,\n);\n\nTextStyle large36 = kprimaryTextStyle(\n  size: 36,\n  fontFamily: 'Inter',\n  weight: FontWeight.w700,\n);\n\nTextStyle large28 = TextStyle(\n  fontSize: 28,\n  fontFamily: 'Inter',\n  fontWeight: FontWeight.w700,\n);\n\nTextStyle heading1 = kprimaryTextStyle(\n  size: 24,\n  fontFamily: 'Inter',\n  weight: FontWeight.w700,\n);\n\nTextStyle heading2 = kprimaryTextStyle(\n  size: 20,\n  fontFamily: 'Inter',\n  weight: FontWeight.w700,\n);\n\nTextStyle heading3 = kprimaryTextStyle(\n  size: 16,\n  fontFamily: 'Inter',\n  weight: FontWeight.w700,\n);\n\nTextStyle heading4 = TextStyle(\n  fontSize: 14,\n  fontFamily: 'Inter',\n  fontWeight: FontWeight.w700,\n);\n\nTextStyle heading5 = TextStyle(\n  fontSize: 12,\n  fontFamily: 'Inter',\n  fontWeight: FontWeight.w700,\n);\n\n\nTextStyle title20 = kprimaryTextStyle(\n  size: 20,\n  fontFamily: 'Inter',\n  weight: FontWeight.w600,\n);\n\nTextStyle title16 = kprimaryTextStyle(\n  size: 16,\n  fontFamily: 'Inter',\n  weight: FontWeight.w600,\n);\n\nTextStyle title14 = kprimaryTextStyle(\n  size: 14,\n  fontFamily: 'Inter',\n  weight: FontWeight.w600,\n);\n\nTextStyle title12 = kprimaryTextStyle(\n  size: 12,\n  fontFamily: 'Inter',\n  weight: FontWeight.w600,\n);\n\nTextStyle title10 = TextStyle(\n  fontSize: 10,\n  fontFamily: 'Inter',\n  fontWeight: FontWeight.w600,\n);\n\nTextStyle title9 = TextStyle(\n  fontSize: 9,\n  fontFamily: 'Inter',\n  fontWeight: FontWeight.w600,\n);\n\n\/\/ Long Description Text\nTextStyle textRegular48 = TextStyle(\n  fontSize: 48,\n  fontFamily: 'Manrope',\n  fontWeight: FontWeight.w400,\n);\n\nTextStyle textRegular36 = TextStyle(\n  fontSize: 36,\n  fontFamily: 'Manrope',\n);\n\nTextStyle textRegular28 = TextStyle(\n  fontSize: 28,\n  fontFamily: 'Manrope',\n);\n\nTextStyle textRegular24 = TextStyle(\n  fontSize: 24,\n  fontFamily: 'Manrope',\n);\n\nTextStyle textRegular20 = TextStyle(\n  fontSize: 20,\n  fontFamily: 'Manrope',\n);\n\nTextStyle textRegular16 = TextStyle(\n  fontSize: 16,\n  fontFamily: 'Manrope',\n);\n\nTextStyle textRegular14 = TextStyle(\n  fontSize: 14,\n  fontFamily: 'Manrope',\n);\n\nTextStyle textRegular12 = TextStyle(\n  fontSize: 12,\n  fontFamily: 'Manrope',\n);\n\nTextStyle textRegular10 = TextStyle(\n  fontSize: 10,\n  fontFamily: 'Manrope',\n);\n\nTextStyle textRegular9 = TextStyle(\n  fontSize: 9,\n  fontFamily: 'Manrope',\n);\n\n\/\/ Long Text with more bold\nTextStyle textSemibold20 = TextStyle(\n  fontSize: 20,\n  fontFamily: 'Manrope',\n  fontWeight: FontWeight.w600,\n);\n\nTextStyle textSemibold16 = ksecondaryTextStyle(\n  size: 16,\n  fontFamily: 'Manrope',\n  weight: FontWeight.w600,\n);\n\nTextStyle textSemibold14 = TextStyle(\n  fontSize: 14,\n  fontFamily: 'Manrope',\n  fontWeight: FontWeight.w600,\n);\n\nTextStyle textSemibold12 = TextStyle(\n  fontSize: 12,\n  fontFamily: 'Manrope',\n  fontWeight: FontWeight.w600,\n);\n\nTextStyle textSemibold10 = TextStyle(\n  fontSize: 10,\n  fontFamily: 'Manrope',\n  fontWeight: FontWeight.w600,\n);\n\nTextStyle textSemibold9 = TextStyle(\n  fontSize: 9,\n  fontFamily: 'Manrope',\n  fontWeight: FontWeight.w600,\n);<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">lass KelolakuGlobalColor {\n  static const colorPrimaryLogo = Color(0xFF03989E);\n  static const colorPrimaryExtra = Color(0xFF17A0B0);\n\n\/\/ Gray\n  static const grayFed = Color(0xFF7A848C);\n  static const grayText = Color(0xFF7D7B7B);\n\n\/\/ Basic Background\n  static const bgFeedAlt = Color(0xFFF3F6F9);\n\n\/\/other colors\n  static const purpleBlack = Color(0xFF1E3354);\n  static const orangeFeed = Color(0xFFF26333);\n\n\/\/ Adaptive Colors\n\/\/ 01 Ocean\n  static const ocean10 = Color(0xFFF2FDFB);\n  static const ocean20 = Color(0xFFBFDEF0);\n  static const ocean30 = Color(0xFF80DAC4);\n  static const ocean40 = Color(0xFF40C7A7);\n  static const ocean = Color(0xFF00B589);\n  static const ocean60 = Color(0xFF008867);\n  static const ocean70 = Color(0xFF005B45);\n\n\/\/ 02 Dark\n  static const dark10 = Color(0xFFF2F4F5);\n  static const dark20 = Color(0xFFCACDCF);\n  static const dark30 = Color(0xFF949A9F);\n  static const dark40 = Color(0xFF5F686F);\n  static const dark = Color(0xFF2A353F);\n  static const dark60 = Color(0xFF1E282E);\n  static const dark70 = Color(0xFF000000);\n\n\/\/ 03 Light\n  static const light = Color(0xFF6D95BD);\n  static const light60 = Color(0xFFF3F6F9);\n  static const light70 = Color(0xFFFFFFFF);\n  static const lightSmoke = Color(0xFFFFFDFD);\n  static const lightBorderInput = Color(0xFFD8E0F0);\n\n\/\/ 04 Red\n  static const red10 = Color(0xFFFFF4F5);\n  static const red20 = Color(0xFFF6C9CC);\n  static const red30 = Color(0xFFEE9499);\n  static const red40 = Color(0xFFE55E67);\n  static const red = Color(0xFFDC2934);\n  static const red60 = Color(0xFFA51F27);\n  static const red70 = Color(0xFF6E141A);\n\n\/\/ 05 Green\n  static const green10 = Color(0xFFF3FFF7);\n  static const green20 = Color(0xFFC0EACF);\n  static const green30 = Color(0xFF81D69E);\n  static const green40 = Color(0xFF43C16E);\n  static const green = Color(0xFF04AC3D);\n  static const green60 = Color(0xFF03812E);\n  static const green70 = Color(0xFF02561E);\n\n  static const yellow10 = Color(0xFFFFFCF1);\n  static const yellow20 = Color(0xFFFAEEC5);\n  static const yellow30 = Color(0xFFF6DD8B);\n  static const yellow40 = Color(0xFFF1CC52);\n  static const yellow = Color(0xFFECBB18);\n  static const yellow60 = Color(0xFFB18C12);\n  static const yellow70 = Color(0xFF765D0C);\n\n  static const purple10 = Color(0xFFF6F5FF);\n  static const purple20 = Color(0xFFD4D2F8);\n  static const purple30 = Color(0xFFA9A4F1);\n  static const purple40 = Color(0xFF7E77EA);\n  static const purple = Color(0xFF534AE3);\n  static const purple60 = Color(0xFF3E37AA);\n  static const purple70 = Color(0xFF292572);\n\n  static const orange10 = Color(0xFFFFF4F0);\n  static const orange20 = Color(0xFFFAD9CF);\n  static const orange30 = Color(0xFFF5B3A0);\n  static const orange40 = Color(0xFFF08E71);\n  static const orange = Color(0xFFEB6841);\n  static const orange60 = Color(0xFFB04E31);\n  static const orange70 = Color(0xFF763420);\n\n  static const deepBlue10 = Color(0xFFF3F8FF);\n  static const deepBlue20 = Color(0xFFC7DCFB);\n  static const deepBlue30 = Color(0xFF90BAF7);\n  static const deepBlue40 = Color(0xFF5897F2);\n  static const deepBlue = Color(0xFF2174EE);\n  static const deepBlue60 = Color(0xFF1957B3);\n  static const deepBlue70 = Color(0xFF103A77);\n\n  static const skyBlue10 = Color(0xFFF1FAFF);\n  static const skyBlue20 = Color(0xFFCBEBFE);\n  static const skyBlue30 = Color(0xFF98D8FC);\n  static const skyBlue40 = Color(0xFF65C5FB);\n  static const skyBlue = Color(0xFF31B1F9);\n  static const skyBlue60 = Color(0xFF2585BB);\n  static const skyBlue70 = Color(0xFF18597D);\n\n  static const t3_shadow = Color(0x70E2E2E5);\n  var t3White = materialColor(0xFFFFFFFF);\n  static const shadow_color = Color(0x95E9EBF0);\n}\n\nMap&lt;int, Color> color = {\n  50: Color.fromRGBO(136, 14, 79, .1),\n  100: Color.fromRGBO(136, 14, 79, .2),\n  200: Color.fromRGBO(136, 14, 79, .3),\n  300: Color.fromRGBO(136, 14, 79, .4),\n  400: Color.fromRGBO(136, 14, 79, .5),\n  500: Color.fromRGBO(136, 14, 79, .6),\n  600: Color.fromRGBO(136, 14, 79, .7),\n  700: Color.fromRGBO(136, 14, 79, .8),\n  800: Color.fromRGBO(136, 14, 79, .9),\n  900: Color.fromRGBO(136, 14, 79, 1),\n};\n\nMaterialColor materialColor(colorHax) {\n  return MaterialColor(colorHax, color);\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ux-five-plane-infographics\">UX Five Plane Infographics<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">All in all, saya sudah membuat infographic pengembangan ux, kamu bisa lihat dibawah ini:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large essb-block-image\" data-essb-pin-nopin=\"true\"><img decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/five-planes-flow-1024x604.png\" alt=\"UX Five planes deep dive, infographic of user experience development.\nBelajar UX\" class=\"wp-image-3719\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/five-planes-flow-1024x604.png 1024w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/five-planes-flow-300x177.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/five-planes-flow-768x453.png 768w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/five-planes-flow-1536x905.png 1536w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/five-planes-flow-2048x1207.png 2048w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/five-planes-flow-360x212.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/five-planes-flow-545x321.png 545w, https:\/\/sunaonako.my.id\/aruuploads\/2023\/05\/five-planes-flow-1600x943.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Sekompleks itu untuk belajar ux, jadi jangan pernah meremehkan UX Engineer sampai menganggap kalau kata UX itu sekedar branding pekerjaan yang dilebih-lebihkan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Short explanation of User Experience<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kesimpulannya, mengapa UX perlu:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>UX dan UI itu ibarat dua lingkaran yang saling beririsan, tidak semua desain yang estetik itu bagus  dari segi UX, tetapi UX yang baik itu perlu desain yang baik.<\/li>\n\n\n\n<li>UX juga memperhatikan penempatan informasi, alur interaksi, dan dokumentasi termasuk desain sistem.<\/li>\n\n\n\n<li>Ada proses untuk melakukan research dan validasi yang bertujuan untuk meningkatkan kualitas produk.<\/li>\n\n\n\n<li>Menghubungkan segi bisnis maupun kepuasan pengguna<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Manfaat apa yang didapat dari merancang aplikasi dengan mendahulukan pengembangan UX:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Lebih mengenal user, pasar, dan produk<\/li>\n\n\n\n<li>Membuat konsistensi pada produk<\/li>\n\n\n\n<li>Meningkatkan loyalitas dan kepuasan <em>user<\/em><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Wahalo. Mau sharing guys. Dulu saat pandemi, saya melakukan penelitian untuk merancang sebuah aplikasi toko digital yang membantu menyelesaikan permasalahan penjual. Di sini melibatkan study UX yang dijalankan bertahap, dimana setiap tahap punya fokus bidangnya sendiri. Semoga bisa jadi pembelajaran bagi kalian nakoding yang mau belajar UX. Penelitian saya didasarkan pertimbangan survey. Saat itu, menurut&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3693,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[459,249],"tags":[4466,255],"class_list":["post-3690","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui","category-ux","tag-belajar-ux","tag-flutter"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.8 (Yoast SEO v23.8) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Belajar UX, simulasi dan case study UX dengan metode five plane<\/title>\n<meta name=\"description\" content=\"belajar ux dengan mengambil case study UMKM dengan menggunakan metodologi five planes dan peranannya dalam user experience dan design system\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simulasi Perancangan UX dan UI aplikasi UMKM. Mari belajar dari kesalahan dan tips melakukan study ux\" \/>\n<meta property=\"og:description\" content=\"belajar ux dengan mengambil case study UMKM dengan menggunakan metodologi five planes dan peranannya dalam user experience dan design system\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/\" \/>\n<meta property=\"og:site_name\" content=\"Hilarious Developer School\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-12T03:38:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-24T10:09:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/04\/white-purple-minimalist-social-media-marketing-blog-banner.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"nakomin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"nakomin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/\"},\"author\":{\"name\":\"nakomin\",\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\"},\"headline\":\"Simulasi Perancangan UX dan UI aplikasi UMKM. Mari belajar dari kesalahan dan tips melakukan study ux\",\"datePublished\":\"2023-05-12T03:38:23+00:00\",\"dateModified\":\"2023-05-24T10:09:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/\"},\"wordCount\":2510,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\"},\"image\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/04\/white-purple-minimalist-social-media-marketing-blog-banner.png\",\"keywords\":[\"belajar ux\",\"flutter\"],\"articleSection\":[\"UI\",\"UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/\",\"url\":\"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/\",\"name\":\"Belajar UX, simulasi dan case study UX dengan metode five plane\",\"isPartOf\":{\"@id\":\"https:\/\/sunaonako.my.id\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/04\/white-purple-minimalist-social-media-marketing-blog-banner.png\",\"datePublished\":\"2023-05-12T03:38:23+00:00\",\"dateModified\":\"2023-05-24T10:09:21+00:00\",\"description\":\"belajar ux dengan mengambil case study UMKM dengan menggunakan metodologi five planes dan peranannya dalam user experience dan design system\",\"breadcrumb\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/#primaryimage\",\"url\":\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/04\/white-purple-minimalist-social-media-marketing-blog-banner.png\",\"contentUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2023\/04\/white-purple-minimalist-social-media-marketing-blog-banner.png\",\"width\":2240,\"height\":1260,\"caption\":\"ux case study, how to implement ux methodology in ux phase in software development lifecycle\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sunaonako.my.id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Simulasi Perancangan UX dan UI aplikasi UMKM. Mari belajar dari kesalahan dan tips melakukan study ux\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sunaonako.my.id\/#website\",\"url\":\"https:\/\/sunaonako.my.id\/\",\"name\":\"Hilarious Developer School\",\"description\":\"Catatan Developer tentang Kurikulum Dunia Modern\",\"publisher\":{\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sunaonako.my.id\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\",\"name\":\"nakomin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png\",\"contentUrl\":\"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png\",\"width\":\"250\",\"height\":\"250\",\"caption\":\"nakomin\"},\"logo\":{\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/\"},\"description\":\"Believe at the heart of BNRS Here you will find content about developers needs whether it\u2019s coding tutorials or the lifestyle of employee in the IT circle, understanding of the realm of ui\/ux and futuristic tech for free in one place. Don\u2019t forget to follow the nakotek socials to give the author enthusiasm in pioneering this website. #wahahaforever\",\"sameAs\":[\"https:\/\/sunaonako.my.id\"],\"url\":\"https:\/\/sunaonako.my.id\/tomodachi\/nakomin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Belajar UX, simulasi dan case study UX dengan metode five plane","description":"belajar ux dengan mengambil case study UMKM dengan menggunakan metodologi five planes dan peranannya dalam user experience dan design system","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/","og_locale":"en_US","og_type":"article","og_title":"Simulasi Perancangan UX dan UI aplikasi UMKM. Mari belajar dari kesalahan dan tips melakukan study ux","og_description":"belajar ux dengan mengambil case study UMKM dengan menggunakan metodologi five planes dan peranannya dalam user experience dan design system","og_url":"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/","og_site_name":"Hilarious Developer School","article_published_time":"2023-05-12T03:38:23+00:00","article_modified_time":"2023-05-24T10:09:21+00:00","og_image":[{"width":2240,"height":1260,"url":"https:\/\/sunaonako.my.id\/aruuploads\/2023\/04\/white-purple-minimalist-social-media-marketing-blog-banner.png","type":"image\/png"}],"author":"nakomin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"nakomin","Est. reading time":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/#article","isPartOf":{"@id":"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/"},"author":{"name":"nakomin","@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a"},"headline":"Simulasi Perancangan UX dan UI aplikasi UMKM. Mari belajar dari kesalahan dan tips melakukan study ux","datePublished":"2023-05-12T03:38:23+00:00","dateModified":"2023-05-24T10:09:21+00:00","mainEntityOfPage":{"@id":"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/"},"wordCount":2510,"commentCount":0,"publisher":{"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a"},"image":{"@id":"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/#primaryimage"},"thumbnailUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2023\/04\/white-purple-minimalist-social-media-marketing-blog-banner.png","keywords":["belajar ux","flutter"],"articleSection":["UI","UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/","url":"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/","name":"Belajar UX, simulasi dan case study UX dengan metode five plane","isPartOf":{"@id":"https:\/\/sunaonako.my.id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/#primaryimage"},"image":{"@id":"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/#primaryimage"},"thumbnailUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2023\/04\/white-purple-minimalist-social-media-marketing-blog-banner.png","datePublished":"2023-05-12T03:38:23+00:00","dateModified":"2023-05-24T10:09:21+00:00","description":"belajar ux dengan mengambil case study UMKM dengan menggunakan metodologi five planes dan peranannya dalam user experience dan design system","breadcrumb":{"@id":"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/#primaryimage","url":"https:\/\/sunaonako.my.id\/aruuploads\/2023\/04\/white-purple-minimalist-social-media-marketing-blog-banner.png","contentUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2023\/04\/white-purple-minimalist-social-media-marketing-blog-banner.png","width":2240,"height":1260,"caption":"ux case study, how to implement ux methodology in ux phase in software development lifecycle"},{"@type":"BreadcrumbList","@id":"https:\/\/sunaonako.my.id\/blog\/simulasi-perancangan-ux-dan-ui-aplikasi-umkm-mari-belajar-dari-kesalahan-dan-tips-melakukan-study-ux\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sunaonako.my.id\/"},{"@type":"ListItem","position":2,"name":"Simulasi Perancangan UX dan UI aplikasi UMKM. Mari belajar dari kesalahan dan tips melakukan study ux"}]},{"@type":"WebSite","@id":"https:\/\/sunaonako.my.id\/#website","url":"https:\/\/sunaonako.my.id\/","name":"Hilarious Developer School","description":"Catatan Developer tentang Kurikulum Dunia Modern","publisher":{"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sunaonako.my.id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a","name":"nakomin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/","url":"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png","contentUrl":"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png","width":"250","height":"250","caption":"nakomin"},"logo":{"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/"},"description":"Believe at the heart of BNRS Here you will find content about developers needs whether it\u2019s coding tutorials or the lifestyle of employee in the IT circle, understanding of the realm of ui\/ux and futuristic tech for free in one place. Don\u2019t forget to follow the nakotek socials to give the author enthusiasm in pioneering this website. #wahahaforever","sameAs":["https:\/\/sunaonako.my.id"],"url":"https:\/\/sunaonako.my.id\/tomodachi\/nakomin\/"}]}},"_links":{"self":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts\/3690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/comments?post=3690"}],"version-history":[{"count":18,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts\/3690\/revisions"}],"predecessor-version":[{"id":3756,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts\/3690\/revisions\/3756"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/media\/3693"}],"wp:attachment":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/media?parent=3690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/categories?post=3690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/tags?post=3690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}