Simulasi Perancangan UX dan UI aplikasi UMKM. Mari belajar dari kesalahan dan tips melakukan study ux

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 data dari lembaga survei, kemampuan digitalisasi UMKM masih rendah, serta UMKM adalah salah satu sektor yang paling berdampak negatif dengan Pandemi (narasi.tv & Katadata Center). Belum beradaptasinya UMKM terhadap penggunaan aplikasi digital menjadikan penelitian ini untuk merancang aplikasi dengan user experience in mind. Di artikel ini, akan membahas apa yang salah dan apa yang bisa diperbaiki dalam proses dan tahapan pengembangan UX aplikasi hingga menjadi aplikasi jadi.

Intro, kapan user experience perlu?

Dalam membangun aplikasi atau menambah fitur, sebelum ngoding, ada tahapan merancang prototipe. Nah, 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 disini.

Strategy Plane, belajar ux melakukan research dan menganalisa pasar

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.

Bidang UMKM itu sangatlah beragam, hint 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.

User Research: Mulai melakukan Survei dilapangan

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.

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.

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.

Kalau kamu membuat interview terstruktur, siapkan mindmap pertanyaan. Jadi jika narasumber menjawab B maka response pertanyaannya selanjutnya apa. Kita perlu insight sebaik mungkin. Misal:

• Dampak pandemi pada Usaha apakah positif atau negatif?
  • Jika negatif kamu bisa lanjutkan ke → Dampak negatif pandemi apa saja? -> Apa yang bisa menjadi pelajaran
  • Jika positif -> Dampak positif apa? Bagaimana bisa toko ini justru berkembang di saat pandemi

Bagaimana memilih pertanyaan untuk wawancara?

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 stakeholder, saya mencoba mencari data terlebih dahulu melalui survei yang tersedia.

1. Menurut data absorbsi digital UMKM masih rendah (2020), sekitar 13 persen
2. Minimnya pemanfaatan teknologi digital menandakan pelaku UMKM belum terbiasa untuk menggunakan aplikasi
3. Berdasarkan bedah data survei yang dilakukan oleh UNDP dan LPEM UI, ada 6 aspek yang menjadi problematika UMKM saat new normal
4. Menurut bank indonesia, ada tujuh sektor umkm (ini adalah salah satu cara untuk analisis target user)

Membedah Hasil Survei

Hasil Survei UX Interview saya simpan di website pribadi.

Kesalahan saya adalah kurangnya saya mendalami peran sebagai “wartawan”. Jadi hasil data dari wawancara tidak terlalu bagus.

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.

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.

berikut ini adalah tampilan infographic data, sebelum saya kelola :

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.

Analisa sementara dari survei

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.

Untuk pengelompokan wawancara, saya mencoba memisahkan berdasarkan generasi XYZ.

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.

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.

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.

Catatan yang miss

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.

Research mendalam di produk kompetitor bahkan berpengaruh di iterasi ke tiga, structure plane, 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.

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.

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.

Di strategy plane ini saya mengabaikan tahap business objective karena beberapa pertimbangan:

1. Tidak ada stakeholder
2. Tidak memperhatikan segi profit dan sustainibility dalam membuat aplikasi

Tetapi jika harus diulang, saya akan mengimplementasi tahap ini dengan memodifikasi beberapa aspek, seperti mengansumsi hasil survei sebagai stakeholder, atau bertanya ke ahli.

Survey to Ideation

Bagaimana cara kita mengolah hasil survei menjadi lebih reusable dan terstruktur? Inilah saatnya kita mengolah data menjadi persona.

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

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 “selamat, checkout telah berhasil”, memberikan emosi yang tepat dapat meningkatkan user experience.

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.

Scope Plane dalam User Experience

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 scope plane ini akan menghasilkan deskripsi fitur yang akan dimasukkan dalam aplikasi.

Menyusun Ide Aplikasi

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.

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.

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.

Nah, fitur yang ada kesamaaan akan dikelompokkan menjadi satu. Saya biasanya menggunakan affinity diagram.

Prioritas fitur

Setelah itu, kamu bisa filter 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.

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 research ulang.

UX memang lebih banyak main dokumentasi, bahkan setelah menentukan fitur, kamu perlu buat penjelasan tentang fitur tersebut.

Structure Plane

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

Tiap fitur terdiri dari subfitur atau task, misalnya kelola produk, mempunyai task buat, update, hapus produk. Kita buat setiap kemungkinan task dengan menggunakan HTA Hierarchical Task Analysis, 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.

Cara membuat HTA persis seperti sitemap, dengan satu kepala sebagai “start”. Dan untuk membaca HTA sama seperti membaca pre order traversal :?.

Kalau dari gambar, cara bacanya dimulai dari 0, 1, 1.1, 1,2, 2, 2.1, 2.1.1, 2.2

Skeleton Plane

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.

• Fitts law
• Hicks law
• Law of Common Region
• Law of Similarity
• Miller’s Law
• Peak-End Rule

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.

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.

Structure Plane

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.

Bagaimana dengan design system?

Dari semua documenting yang sebelumnya saya spill 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 developer experience yang lebih baik.

Beberapa sistem yang dibuat oleh UX adalah:

• Typography

Jangan meremehkan perancangan fonts, dalam UI/UX bahkan ada ilmu tersendiri dalam menentukan model fonts seperti apa yang akan aplikasi gunakan. It’s so extensive that there is a book that purposely explains only about typography in UX.

• Color System

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 variasi turunan dari warna atau beberapa menyebutnya sebagai Accessibility color atau warna adaptive. Yaitu alternatif kontras dari individu warna yang kamu pilih.

Beberapa yang menjadi pertimbangan dalam memilih color palette adalah:

1. Psikologi dari warna, tujuannya untuk membawa pesan tertentu dan mempertegas branding
2. Sangat direkomendasikan mengikuti WCAG guideline minimal AA
3. Memperhatikan semua possibility misal pada background yang lebih gelap apakah palet bisa terbaca, apaka palet cukup nyaman untuk color blindness?

Untuk lebih lengkapnya kamu bisa baca di sini.

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.

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.

Berilah penamaan setiap design system dengan jelas dan stick dengan desain system yang sudah dirancang. Penamaan yang jelas juga mempermudah developer untuk memahami kapan desain system digunakan.

Usabillity Testing

Sebuah studi untuk mendapatkan pengetahuan yang tepat tentang pemahaman pengguna
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.

Melakukan Pengembangan aplikasi,

class UiSpacer {
  //space between widgets vertically
  static Widget verticalSpace({double space = 20}) => SizedBox(height: space);

  //space between widgets horizontally
  static Widget horizontalSpace({double space = 20}) => SizedBox(width: space);

  static Widget empty() => const SizedBox(width: 0);
  static Widget px1({double space = 2}) => SizedBox(width: space);
  static Widget px2({double space = 4}) => SizedBox(width: space);
  static Widget px3({double space = 8}) => SizedBox(width: space);
  static Widget px4({double space = 16}) => SizedBox(width: space);
  static Widget px5({double space = 24}) => SizedBox(width: space);

  //dividers
  static Widget divider({double thickness = 2}) =>
      Divider(thickness: thickness);
}

TextStyle ff = TextStyle(
    fontSize: 16,
    fontFamily: 'Bariol',
    fontWeight: FontWeight.w100,
    fontStyle: FontStyle.italic);

TextStyle large48 = kprimaryTextStyle(
  size: 48,
  fontFamily: 'Inter',
  weight: FontWeight.w700,
);

TextStyle large36 = kprimaryTextStyle(
  size: 36,
  fontFamily: 'Inter',
  weight: FontWeight.w700,
);

TextStyle large28 = TextStyle(
  fontSize: 28,
  fontFamily: 'Inter',
  fontWeight: FontWeight.w700,
);

TextStyle heading1 = kprimaryTextStyle(
  size: 24,
  fontFamily: 'Inter',
  weight: FontWeight.w700,
);

TextStyle heading2 = kprimaryTextStyle(
  size: 20,
  fontFamily: 'Inter',
  weight: FontWeight.w700,
);

TextStyle heading3 = kprimaryTextStyle(
  size: 16,
  fontFamily: 'Inter',
  weight: FontWeight.w700,
);

TextStyle heading4 = TextStyle(
  fontSize: 14,
  fontFamily: 'Inter',
  fontWeight: FontWeight.w700,
);

TextStyle heading5 = TextStyle(
  fontSize: 12,
  fontFamily: 'Inter',
  fontWeight: FontWeight.w700,
);


TextStyle title20 = kprimaryTextStyle(
  size: 20,
  fontFamily: 'Inter',
  weight: FontWeight.w600,
);

TextStyle title16 = kprimaryTextStyle(
  size: 16,
  fontFamily: 'Inter',
  weight: FontWeight.w600,
);

TextStyle title14 = kprimaryTextStyle(
  size: 14,
  fontFamily: 'Inter',
  weight: FontWeight.w600,
);

TextStyle title12 = kprimaryTextStyle(
  size: 12,
  fontFamily: 'Inter',
  weight: FontWeight.w600,
);

TextStyle title10 = TextStyle(
  fontSize: 10,
  fontFamily: 'Inter',
  fontWeight: FontWeight.w600,
);

TextStyle title9 = TextStyle(
  fontSize: 9,
  fontFamily: 'Inter',
  fontWeight: FontWeight.w600,
);

// Long Description Text
TextStyle textRegular48 = TextStyle(
  fontSize: 48,
  fontFamily: 'Manrope',
  fontWeight: FontWeight.w400,
);

TextStyle textRegular36 = TextStyle(
  fontSize: 36,
  fontFamily: 'Manrope',
);

TextStyle textRegular28 = TextStyle(
  fontSize: 28,
  fontFamily: 'Manrope',
);

TextStyle textRegular24 = TextStyle(
  fontSize: 24,
  fontFamily: 'Manrope',
);

TextStyle textRegular20 = TextStyle(
  fontSize: 20,
  fontFamily: 'Manrope',
);

TextStyle textRegular16 = TextStyle(
  fontSize: 16,
  fontFamily: 'Manrope',
);

TextStyle textRegular14 = TextStyle(
  fontSize: 14,
  fontFamily: 'Manrope',
);

TextStyle textRegular12 = TextStyle(
  fontSize: 12,
  fontFamily: 'Manrope',
);

TextStyle textRegular10 = TextStyle(
  fontSize: 10,
  fontFamily: 'Manrope',
);

TextStyle textRegular9 = TextStyle(
  fontSize: 9,
  fontFamily: 'Manrope',
);

// Long Text with more bold
TextStyle textSemibold20 = TextStyle(
  fontSize: 20,
  fontFamily: 'Manrope',
  fontWeight: FontWeight.w600,
);

TextStyle textSemibold16 = ksecondaryTextStyle(
  size: 16,
  fontFamily: 'Manrope',
  weight: FontWeight.w600,
);

TextStyle textSemibold14 = TextStyle(
  fontSize: 14,
  fontFamily: 'Manrope',
  fontWeight: FontWeight.w600,
);

TextStyle textSemibold12 = TextStyle(
  fontSize: 12,
  fontFamily: 'Manrope',
  fontWeight: FontWeight.w600,
);

TextStyle textSemibold10 = TextStyle(
  fontSize: 10,
  fontFamily: 'Manrope',
  fontWeight: FontWeight.w600,
);

TextStyle textSemibold9 = TextStyle(
  fontSize: 9,
  fontFamily: 'Manrope',
  fontWeight: FontWeight.w600,
);

lass KelolakuGlobalColor {
  static const colorPrimaryLogo = Color(0xFF03989E);
  static const colorPrimaryExtra = Color(0xFF17A0B0);

// Gray
  static const grayFed = Color(0xFF7A848C);
  static const grayText = Color(0xFF7D7B7B);

// Basic Background
  static const bgFeedAlt = Color(0xFFF3F6F9);

//other colors
  static const purpleBlack = Color(0xFF1E3354);
  static const orangeFeed = Color(0xFFF26333);

// Adaptive Colors
// 01 Ocean
  static const ocean10 = Color(0xFFF2FDFB);
  static const ocean20 = Color(0xFFBFDEF0);
  static const ocean30 = Color(0xFF80DAC4);
  static const ocean40 = Color(0xFF40C7A7);
  static const ocean = Color(0xFF00B589);
  static const ocean60 = Color(0xFF008867);
  static const ocean70 = Color(0xFF005B45);

// 02 Dark
  static const dark10 = Color(0xFFF2F4F5);
  static const dark20 = Color(0xFFCACDCF);
  static const dark30 = Color(0xFF949A9F);
  static const dark40 = Color(0xFF5F686F);
  static const dark = Color(0xFF2A353F);
  static const dark60 = Color(0xFF1E282E);
  static const dark70 = Color(0xFF000000);

// 03 Light
  static const light = Color(0xFF6D95BD);
  static const light60 = Color(0xFFF3F6F9);
  static const light70 = Color(0xFFFFFFFF);
  static const lightSmoke = Color(0xFFFFFDFD);
  static const lightBorderInput = Color(0xFFD8E0F0);

// 04 Red
  static const red10 = Color(0xFFFFF4F5);
  static const red20 = Color(0xFFF6C9CC);
  static const red30 = Color(0xFFEE9499);
  static const red40 = Color(0xFFE55E67);
  static const red = Color(0xFFDC2934);
  static const red60 = Color(0xFFA51F27);
  static const red70 = Color(0xFF6E141A);

// 05 Green
  static const green10 = Color(0xFFF3FFF7);
  static const green20 = Color(0xFFC0EACF);
  static const green30 = Color(0xFF81D69E);
  static const green40 = Color(0xFF43C16E);
  static const green = Color(0xFF04AC3D);
  static const green60 = Color(0xFF03812E);
  static const green70 = Color(0xFF02561E);

  static const yellow10 = Color(0xFFFFFCF1);
  static const yellow20 = Color(0xFFFAEEC5);
  static const yellow30 = Color(0xFFF6DD8B);
  static const yellow40 = Color(0xFFF1CC52);
  static const yellow = Color(0xFFECBB18);
  static const yellow60 = Color(0xFFB18C12);
  static const yellow70 = Color(0xFF765D0C);

  static const purple10 = Color(0xFFF6F5FF);
  static const purple20 = Color(0xFFD4D2F8);
  static const purple30 = Color(0xFFA9A4F1);
  static const purple40 = Color(0xFF7E77EA);
  static const purple = Color(0xFF534AE3);
  static const purple60 = Color(0xFF3E37AA);
  static const purple70 = Color(0xFF292572);

  static const orange10 = Color(0xFFFFF4F0);
  static const orange20 = Color(0xFFFAD9CF);
  static const orange30 = Color(0xFFF5B3A0);
  static const orange40 = Color(0xFFF08E71);
  static const orange = Color(0xFFEB6841);
  static const orange60 = Color(0xFFB04E31);
  static const orange70 = Color(0xFF763420);

  static const deepBlue10 = Color(0xFFF3F8FF);
  static const deepBlue20 = Color(0xFFC7DCFB);
  static const deepBlue30 = Color(0xFF90BAF7);
  static const deepBlue40 = Color(0xFF5897F2);
  static const deepBlue = Color(0xFF2174EE);
  static const deepBlue60 = Color(0xFF1957B3);
  static const deepBlue70 = Color(0xFF103A77);

  static const skyBlue10 = Color(0xFFF1FAFF);
  static const skyBlue20 = Color(0xFFCBEBFE);
  static const skyBlue30 = Color(0xFF98D8FC);
  static const skyBlue40 = Color(0xFF65C5FB);
  static const skyBlue = Color(0xFF31B1F9);
  static const skyBlue60 = Color(0xFF2585BB);
  static const skyBlue70 = Color(0xFF18597D);

  static const t3_shadow = Color(0x70E2E2E5);
  var t3White = materialColor(0xFFFFFFFF);
  static const shadow_color = Color(0x95E9EBF0);
}

Map<int, Color> color = {
  50: Color.fromRGBO(136, 14, 79, .1),
  100: Color.fromRGBO(136, 14, 79, .2),
  200: Color.fromRGBO(136, 14, 79, .3),
  300: Color.fromRGBO(136, 14, 79, .4),
  400: Color.fromRGBO(136, 14, 79, .5),
  500: Color.fromRGBO(136, 14, 79, .6),
  600: Color.fromRGBO(136, 14, 79, .7),
  700: Color.fromRGBO(136, 14, 79, .8),
  800: Color.fromRGBO(136, 14, 79, .9),
  900: Color.fromRGBO(136, 14, 79, 1),
};

MaterialColor materialColor(colorHax) {
  return MaterialColor(colorHax, color);
}

UX Five Plane Infographics

All in all, saya sudah membuat infographic pengembangan ux, kamu bisa lihat dibawah ini:

Sekompleks itu untuk belajar ux, jadi jangan pernah meremehkan UX Engineer sampai menganggap kalau kata UX itu sekedar branding pekerjaan yang dilebih-lebihkan.

Short explanation of User Experience

Kesimpulannya, mengapa UX perlu:

1. 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.
2. UX juga memperhatikan penempatan informasi, alur interaksi, dan dokumentasi termasuk desain sistem.
3. Ada proses untuk melakukan research dan validasi yang bertujuan untuk meningkatkan kualitas produk.
4. Menghubungkan segi bisnis maupun kepuasan pengguna

Manfaat apa yang didapat dari merancang aplikasi dengan mendahulukan pengembangan UX:

1. Lebih mengenal user, pasar, dan produk
2. Membuat konsistensi pada produk
3. Meningkatkan loyalitas dan kepuasan user