3.2. Metodologi Perancangan
3.2.2. Carrying Out Research
Hasil riset yang telah didapat melalui proses wawancara, FGD, maupun kuesioner dan telah dianalisis lebih lanjut memalui proses brainstorming dikembangkan ke
73 dalam tahapan perancangan persona dan user journey, dengan menjabarkan secara detail, objektif pengguna, tujuan yang ingin dicapai, tantangan yang dihadapi, dan detail informasi lain yang dibutuhkan.
Gambar 3.15. Moodboard
Sebelum merancang persona dan user journey, penulis membuat moodboard yang sesuai dengan konsep perancangan aplikasi. Moodboard ditentukan dari keywords yang telah ditemukan dalam proses sebelumnya yaitu pendampingan, healthy atau sehat, nyaman atau relaxing, serta natural atau alami.
Gambar 3.16. Color Palette
74 Selanjutnya penulis membuat color palette yang berhubungan dengan konsep aplikasi. Berdasarkan teori psikologi warna menurut Kolenda (2016), pemilihan warna hijau untuk mengambarkan gaya hidup yang natural atau alami dan warna biru untuk menggambarkan kesehatan dan reliability, sehingga menunjukkan gambaran gaya hidup ketofastosis yang tidak berbahaya. Sedangkan pemilihan warna jingga yang merupakan komplementer warna dari biru untuk memberikan cautions bagi pengguna yang salah penerapan dalam menjalankankan ketofastosis. Warna abu-abu dan putih sebagai warna netral yang memberi kesan kontras dari elemen-elemen warna yang lain.
Gambar 3.17. Poppins Typeface
Lalu penulis juga menggunakan typeface sans serif Poppins yang memberikan tingkat keterbacaan yang tinggi pada aplikasi dengan desain typeface yang lebih bulat dan tidak kaku sehingga memberi kesan rasa nyaman bagi pengguna aplikasi. Penulis hanya menggunakan satu jenis typeface, agar desain aplikasi bersifat konsisten dan tetap sesuai dengan konsep aplikasi yang dirancang
75 Gambar 3.18. Persona
Berlanjut pada tahap perancangan persona, penulis merancang sebuah persona yang memiliki beberapa karakteristik seperti penderita diabetes tipe 2, dengan kebutuhan untuk melihat perkembangan selama ketofastosis serta memantau jadwal ketofastosis dan menu makanannya. Penulis juga membuat user journey berdasarkan hasil persona tersebut untuk mendapatkan gambaran kesulitan dan cara pengguna mengatasi kesulitannya sebelum menggunakan aplikasi ketofastosis.
76 Gambar 3.19. User Journey
3.2.3. Sketching
Berangkat dari hasil analisis persona dan user journey yang telah ditemukan, maka desainer dapat berlanjut ke tahap membuat sitemap dan wireframe. Pada tahap ini desainer dapat menentukan user flow melalui perancangan sitemap dan wireframing. Perancangan sitemap untuk menentukan fitur-fitur yang ada ditentukan dari hasil analisis data yang telah ditemukan. Pada tahap ini penulis merancang empat fitur utama, yaitu fitur home, dimana pengguna dapat melihat dan memantau lima pilar ketofastosis dengan tepat. Fitur statistika, dimana pengguna dapat memantau perkembangan kesehatannya selama menjalani ketofastosis.
77 Gambar 3.20. Sitemap
Fitur makanan ketofastosis, yang memberikan informasi mengenai makanan yang aman untuk dikonsumsi selama ketofastosis, dan fitur pustaka yang menyediakan informasi seputar ketofastosis dan komunitasnya. Fitur tambahan lainnya, penguna dapat menerima pengingat jadwal ketofastosis berupa notifikasi aplikasi dan fitur pengaturan dan pertanyaan seputar aplikasi dan ketofastosis. Setelah membuat sitemap, penulis merancang user flow aplikasi berdasarkan sitemap dan user journey yan telah dibuat.
Gambar 3.21. User Flow
78 Pada tahap sketching, penulis juga membuat sketsa tampilan awal aplikasi serta icon fitur untuk memberikan gambaran desain sebelum masuk ke tahap digitalisasi. Penulis juga membuat rancangan sketsa logo dan nama yang akan menjadi identitas aplikasi ketofastosis.
Gambar 3.22. Sketsa Logo dan Aplikasi Awal
3.2.4. Design
Setelah melewati tahap pembuatan sitemap dan wireframe, desainer mulai merancang tampilan secara digital dengan detail, biarpun belum memasukkan konten-konten aplikasi secara keseluruhan. Lalu, hasil dari rancangan tersebut dikembangkan menjadi prototype. Sebelum masuk ke tahap low fidelity halaman tampilan, penulis membuat digitalisasi desain logo aplikasi.
1. Logo Design
Pada tahap ini penulis telah menentukan nama yang memberikan identitas yang sesuai dengan konsep aplikasi, yaitu Kenal yang merupakan penggabungan dari kata “Ketofastosis” dan “Jurnal”. Pada prosesnya, logo
79 dirancang menggunakan aturan golden ratio. Tujuannya agar proses pembuatan logo yang dibuat tetap simetris dan proposional.
Gambar 3.23. Refrensi Buah Alpukat (https://unsplash.com/s/photos/avocado, 2021)
Logo Kenal sendiri diambil dari buah Alpukat, yaitu buah yang dapat dikonsumsi dengan bebas pada saat ketofastosis. Buah alpukat sendiri juga menjadi salah satu makanan yang identik dengan ketogenik, karena mengandung lemak sehat yang dibutuhkan pada saat proses ketosis.
Gambar 3.24. Golden Ratio Logo dan Logo Kenal
80 Desain logo menggunakan warna dominan hijau dengan unsur warna biru agar memberikan kesan alami dan melambangkan kesehatan. Logo juga dibuat dengan garis-garis melengkung untuk menggambarkan gaya hidup ketofastosis yang natural dan dinamis.
2. Iconography
Proses pembuatan asset icon juga dirancang berdasarkan grid system dan keyline yang dipublikasikan pada website Google Material Design. Penulis merancang agar icon tetap berada di dalam keyline grid, sehingga icon tetap terlihat proposional dan simetris. Pada asset icon utama, yaitu fitur pada menu bar, penulis menggunakan outline garis untuk menggambarkan garis hidup yang dinamis.
Gambar 3.25. Penerapan Grid System Pada Icon
Penggunaan outline juga mempertimbangkan ukuran icon pada menu bar juga lebih besar daripada asset icon yang lain, sehingga tetap bisa menjadi focal point sekalipun hanya berupa outline. Berikut ini adalah beberapa daftar icons yang menjadi button utama pada tampilan aplikasi:
81 Tabel 3.2. Daftar Icons Utama
Icons Utama Keterangan
Merupakan menu utama dari aplikasi, digambarkan dengan icon seperti lingkaran jam yang selalu berputar dengan checklist di tengah. Menunjukkan bahwa pada halaman ini penguna dapat mengecek agenda atau checklist yang harus selalu dipenuhi setiap harinya.
Merupakan icon menu statistik, digambarkan dengan bar chart untuk menunjukkan bahwa pada halaman ini pengguna dapat mengecek perkembangan kondisinya selama
ketofastosis.
Merupakan icon menu makanan keto, digambarkan dengan icon Alpukat pada logo untuk menunjukkan bahwa pada halaman ini pengguna dapat mengecek makanan yang aman dikonsumsi saat ketofastosis serta menampilkan icon brand Kenal.
Merupakan icon literasi ketofastosis, digambarkan dengan icon buku untuk menunjukkan bahwa pada halaman ini pengguna dapat menemukan literasi seputar ketofastosis melalui kumpulan artikel dan informasi.
Merupakan icon pengaturan aplikasi, pada bagian ini pengguna dapat mengatur tampilan aplikasi.
Merupakan icon notifikasi, pada bagian ini pengguna dapat melihat notifikasi agenda keigiatan atau checklist yang harus dipenuhi setiap harinya.
82 Merupakan icon FAQs, dibuat dengan gambar tanda tanya untuk memberikan gambaran bahwa pengguna dapat menemukan hal-hal yang sering ditanyakan seputar KF dan aplikasi pada bagian tersebut.
Sedangkan untuk icon button sekunder dibuat dengan fill dan outline yang lebih tebal, dirancang mengikuti icon-icon pada umumnya agar dengan mudah dikenali fungsinya oleh pengguna dengan range usia yang lebih luas.
Gambar 3.26. Asset Icon Sekunder
3. Buttons
Pada proses perancangan button, style yang digunakan adalah style button rounded untuk menunjukkan tampilan aplikasi yang lebih bersahabat dan positif (Malewicz & Malewicz, 2020). Ada beberapa kategori button yang digunakan pada tampilan aplikasi Kenal. Tujuannya untuk membedakan fungsi serta memberikan emphasis pada button tertentu. Berikut ini adalah
83 daftar button yang digunakan berdasarkan kategorinya menurut Google Material Design:
Tabel 3.3. Kategori Buttons
Button Kategori dan Keterangan
Contained button, digambarkan dengan style rounded dan fill warna untuk memberikan emphasis pada button yang perlu ditekan oleh pengguna atau menunjukkan button yang sedang aktif.
Outlined button, digambarkan dengan style rounded dan outline untuk menunjukkan pada pengguna bahwa button tersebut merupakan action yang berbeda dari contained button atau menunjukkan button yang belum aktif ditekan.
Text button, ditampilkan dengan text dan atau icon karena button tersebut bersifat low emphasis dibandingkan dengan button lain.
Inactive button, digambarkan dengan style rounded dan fill warna abu-abu untuk menunjukkan button tidak dapat ditekan sebelum
penguna menyelesaikan action pada halaman.
Text Fields, dimana pengguna dapat mengetik text pada tampilan aplikasi. Digambarkan dengan line tipis seperti pada format pengisian formulir.
84 4. Visual Assets
Visual Asset yang digunakan berupa foto-foto gambar yang diambil dari website Unsplash. Penulis tidak mengambil gambar sendiri, karena tampilan foto pada perancangan aplikasi Kenal hanya berupa dummy, yang dapat diubah dan diganti sesuai kebutuhan content dan developer nantinya.
Gambar 3.27. Kompilasi Asset Foto
5. Low Fidelity and High Fidelity Design
Pada proses perancangan tampilan aplikasi, penulis mulai membuat rancangan low fidelity dengan berfokus pada beberapa halaman fitur utama yang dapat memberikan gambaran desain utama dan menjadi standar untuk desain tampilan halaman yang lain. Penulis memanfaatkan white space agar desain tetap minimalis dan tidak terlihat penuh dan membingungkan pengguna sekalipun ada banyak konten yang
85 ditampilkan. Format ukuran yang digunakan menggunakan ukuran layar 375 x 812 px dengan menggunakan grid system; offset 15 px, 6 kolom, dan gutter 9 px. Tujunnya agar layout tampilan setiap halaman tetap konsisten dan proposional. Berlanjut pada tahap desain high fidelity, penulis awalnya berfokus pada beberapa desain tampilan halaman utama yang representatif untuk menjadi gambaran bagi peserta uji coba pada tahap Alpha Test, yaitu desain tampilan menu utama, halaman rekam jejak, menu makanan ketogenik, serta fitur-fitur tambahan lain seperti input gula darah, cek menu makanan, resep, dan statistik perkembangan selama ketofastosis.
Gambar 3.28. Grid, Low Fidelity dan High Fidelity Sign Up
Sebelum masuk ke halaman menu utama, pengguna akan dibawa untuk mengisi data diri dan fase ketofastosis yang sedang dijalankan. Pada
86 tampilan daftar akun, penulis menggunakan warna dominan putih dan biru, serta warna jingga sebagai warna button aktif. Penulis juga menentukan jarak antara Judul, sub judul, konten, dengan button agar proposional dan sistematis jika aplikasi dikembangkan oleh developer.
Pada tampilan ini, penulis menggunakan ukuran 44 pt untuk judul konten, 14 pt untuk ukuran text, dan 48 px untuk ukuran button. Sedangkan untuk jarak antar text dan button, penulis menggunakan space dengan ukuran 32 px untuk memisahkan judul dengan konten, dan 40 px untuk memisahkan konten dengan button.
Gambar 3.29. Sistem Ukuran Jarak dan Typeface
Pada tampilan halaman menu utama, penulis menampilkan beberapa fitur seperti mengatur jadwal puasa dan makan, mengatur jadwal olahraga, overview konsumsi air dan kualitas tidur pada malam hari. Pada tampilan ini, penulis membuat tampilan jadwal puasa menjadi highlight halaman, sehingga terlihat lebih besar dibanding dengan fitur-fitur lainnya.
Tujuannya agar pengguna dapat dengan mudah mengatur jadwal puasa
87 dan fasting pada apikasi ini, yang menjadi salah satu fitur utama pada aplikasi Kenal. Pada tampilan menu utama, pengguna dapat memilih kegiatan atau aktivitas yang ingin dilakukan dan mengatur jadwal aktivitas dan jadwal istirahat.
Gambar 3.30. Perancangan Halaman Menu Utama
Pada tampilan menu utama, penulis menggunakan size 32 pt untuk ukuran judul dan 14 pt untuk ukuran body text dan sub judul, dan 12 pt untuk ukuran text sekunder atau konten di dalam sub judul. Penulis juga menggunakan style Poppins Bold untuk menunjukkan highlight text yang dapat berubah sesuai personalisasi dan karakteristik pengguna. Jarak antar text dan button juga disesuaikan dengan halaman sebelumnya. Saat memisahkan konten yang berbeda, diberikan jarak yang lebih besar yaitu 48 px. Pada halaman menu utama dan halaman lainnya, terdapat navigation bar pada bagian atas dan bawah aplikasi. Navigation bar akan
88 selalu ada pada setiap page dan berupa fixed content, agar pengguna bisa dengan mudah menemukan fitur-fitur utaman dan bantuan pada aplikasi dan mengikuti scrolling tampilan.
Gambar 3.31. Top dan Bottom Navigation Bar
Pada bottom navigation bar, terdapat empat button fitur utama aplikasi. Button pertama adalah button menu utama atau landing page, icon yang dibuat sengaja menunjukkan bahwa menu utama adalah tempat di mana pengguna dapat mengatur dan memastikan bahwa lima pilar telah diselesaikan dengan baik setiap harinya (perlu selalu update secara rutin).
Button kedua adalah fitur statistik, di mana pengguna dapat memantau perkembangan selama ketofastosis, button ketiga adalah halaman yang memuat daftar menu makanan keto beserta resep-resep, serta button keempat berisi tentang artikel dan literasi menganai ketofastosis.
Sedangkan pada top navigation bar, terdapat fitur-fitur support, seperti fitur pengaturan, FAQs, serta notifikasi. FAQs diletakkan pada navigation bar dengan tujuan agar pengguna dapat dengan mudah menemukan
89 jawaban atas pertanyaan yang sering ditanyakan seputar aplikasi dan ketofastosis.
Gambar 3.32. Full Page Menu Utama
90 Pada tampilan halaman statistik, penulis membuat tampilan data dengan desain grid persegi berukuran 168 x 168 px, agar tampilan data terlihat konsisten dan proposional. Pada tampilan ini, penulis juga memilih latar gelap untuk memisahkan background dengan tampilan data. Pada halaman statistik juga terdapat fitur kalender, di mana pengguna dapat melihat kembali histori tampilan data pada tanggal sebelumnya. Pada bagian bawah tampilan data, terdapat statistik perkembangan pengguna yang dapat diatur sesuai waktu perkembangan yang ingin diamati.
Gambar 3.33. Perancangan Halaman Rekam Jejak
91 Pada tampilan statistik, diberikan beberapa warna yang berbeda untuk memberi informasi kondisi kesehatan pengguna. Misalnya warna jingga yang artinya status data pengguna tidak baik tidak sesuai dengan angka normal, warna biru yang menunjukkan bahwa kondisi kesehatan masih pada tahap angka aman, dan warna hijau yang menunjukkan bahwa statistik pengguna sangat bagus dan normal. Highlight button dan support button juga dibedakan melalui warna dan style, button sekunder hanya diberikan outline, dan beberapa support button seperti next and previous tidak diberi rounding box seperti button utama. Sedangkan highlight button diberikan fill warna agar button terlihat lebih bold dan pop up dibanding dengan button lain.
Gambar 3.34. Perancangan Halaman Foodpedia
92 Halaman selanjutnya adalah halaman menu makanan selama ketofastosis. Pada halaman ini, pengguna dapat mengecek resep-resep makanan keto serta makanan yang diperbolehkan selama menjalankan ketofastosis. Tampilan dibuat dengan bentuk grid agar pengguna tidak bingung dan dengan mudah dapat menemukan menu makanan yang dicari.
Gambar 3.35. Tiga Tampilan Halaman Foodpedia
Pada halaman ini juga diberikan fitur pencarian, sehingga memudahkan pengguna untuk mencari dengan detail menu makanan yang diinginkan melalui fitur pencarian. Halaman menu makanan keto terbagi menjadi tiga
93 fitur utama, yaitu resep keto, makanan keto dan non-keto. Masing-masing tampilan dibuat dengan style grid yang berbeda satu sama lain untuk menunjukkan konten yang berbeda pada setiap halaman. Pada tampilan makanan keto, pengguna dapat mengecek makanan yang sesuai dengan fase yang sedang dijalankan. Sedangkan pada halaman non-keto, pengguna dapat mengecek menu makanan yang tidak boleh dikonsumsi selama ketofastosis. Penulis juga menambahkan fitur bookmark, dimana pengguna dapat menyimpan resep makanan favorit miliknya.
Gambar 3.36. Wireframe Seluruh Tampilan
Pada proses desain, penulis hanya berfokus untuk merancang halaman yang terdapat fitur-fitur utama aplikasi. Tujuannya untuk mengetahui terlebih dahulu respon dan feedback dari pengguna saat uji coba aplikasi dan menjadikan hasil feedback tersebut menjadi standar revisi dan perancangan desain halaman lain. Setelah melewati tahap high fidelity desain, penulis melanjutkan ke tahap wireframing dan protoyping.
94 Pada tahap ini penulis berfokus untuk menampilkan fitur-fitur utama pada aplikasi dan flow penggunaan aplikasi. Penulis menggunakan aplikasi Figma untuk merancang desain tampilan dan prototyping.
3.2.5. Implementation
Pada tahap ini, desainer mengimplementasikan rancangan prototype desain yang telah dibuat melalui user test. User test pertama dilakukan pada Prototype Day.
Tujuannya untuk mendapatkan feedback dari pengguna mengenai perancangan UI/UX yang telah dibuat. Flow aplikasi yang ditampilkan pada user test dimulai dari Landing Page, dengan tampilan logo Kenal, lalu masuk ke halaman awal, di mana pengguna perlu memiliki akun untuk dapat masuk ke aplikasi.
Gambar 3.37. Flow Sign Up
Jika pengguna belum memiliki akun, maka pengguna perlu mengisi formulir data dirinya secara lengkap, beserta kondisi kesehatan yang sedang dialami, dan fase ketofastosis saat ini. Setelah selesai mengisi data diri, maka pengguna akan dibawa ke tampilan menu utama aplikasi. Pada tampilan menu utama, pengguna dapat mencoba fitur untuk menambahkan konsumsi air minum harian serta
95 melihat perubahan tampilan apabila jadwal puasa telah berakhir dan berganti menjadi jadwal makan.
Gambar 3.38. Flow Menu Utama, Foodpedia, dan Rekam Jejak
Pada tampilan Rekam Jejak, pengguna dapat mencoba fitur untuk memasukkan data gula darah serta melihat statistik data pada tanggal sebelumnya.
96 Pada tampilan ini pengguna dapat melihat adanya perubahan tampilan data dari waktu sebelumnya dengan waktu saat ini. Pada halaman Foodpedia, pengguna dapat melihat tiga tampilan fitur utama Foodpedia, yaitu resep keto, makanan keto, dan non-keto. Pada tampilan non-keto, pengguna juga dapat melihat detail makanan yang tidak diperbolehkan dikonsumsi sewaktu ketofastosis.
3.2.6. Evaluation
Setelah menerima feedback dari pengguna, desainer dapat kembali menganalisis hasil feedback yang diterima untuk mengembangkan dan menyempurnakan perancangan yang dibuat sebelum kembali diimplementasikan kepada target pengguna.
