PERANCANGAN APLIKASI PANDUAN UNTUK
ORANGTUA USIA 26 - 35 TAHUN DALAM MENJAGA
NUTRISI ANAK BALITA
Laporan Tugas Akhir
Ditulis sebagai syarat untuk memperoleh gelar Sarjana Desain (S.Ds.)
Nama : Jennifer Nathanael
NIM : 00000016290
Program Studi : Desain Komunikasi Visual
Fakultas : Seni dan Desain
UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
2021
ii
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT
Saya yang bertanda tangan di bawah ini:
Nama : Jennifer Nathanael
NIM : 00000016290
Program Studi : Desain Komunikasi Visual
Fakultas : Seni dan Desain
Universitas Multimedia Nusantara
Judul Tugas Akhir :
PERANCANGAN APLIKASI PANDUAN UNTUK ORANGTUA USIA 26 - 35 TAHUN DALAM MENJAGA NUTRISI ANAK BALITA
dengan ini menyatakan bahwa, laporan dan karya tugas akhir ini adalah asli dan belum pernah diajukan untuk mendapatkan gelar sarjana, baik di Universitas Multimedia Nusantara maupun di perguruan tinggi lainnya.
Karya tulis ini bukan saduran/terjemahan, murni gagasan, rumusan dan pelaksanan penelitian/implementasi saya sendiri, tanpa bantuan pihak lain, kecuali arahan pembimbing akademik dan narasumber.
Demikian surat Pernyataan Originalitas ini saya buat dengan sebenarnya, apabila di kemudian hari terdapat penyimpangan serta ketidakbenaran dalam pernyataan ini, maka saya bersedia menerima sanksi akademik berupa pencabutan gelar (S.Ds.) yang telah diperoleh, serta sanksi lainnya sesuai dengan norma yang berlaku di Universitas Multimedia Nusantara.
Tangerang, 6 Januari 2021
iv
KATA PENGANTAR
Syukur kepada Tuhan yang Maha Esa atas selesainya laporan tugas akhir ini. Dalam tugas akhir ini saya mengangkat topik mengenai nutrisi pada anak balita yang berumur 1 - 5 tahun. Ketertarikan saya terhadap topik tersebut dikarenakan oleh kesenangan dan kepedulian saya terhadap anak kecil. Selain itu juga terdapat situasi pandemi dimana kebanyakan orang lebih banyak berada di dalam rumah dan melakukan aktivitas seperti memasak makanannya sendiri. Akan tetapi, kebanyakan orangtua masih belum memperhatikan nutrisi yang terkandung dalam makanan yang dimasak serta takaran yang pas untuk anaknya. Saya melihat perilaku ini pada orangtua cukup memprihatinkan karena akan berdampak pada tumbuh kembang anaknya sampai mereka dewasa nanti.
Saya harap dengan adanya tugas akhir ini, orangtua semakin sadar akan nutrisi makanan yang diberikan pada anaknya dan juga takarannya. Orangtua pada umumnya sudah memiliki pengetahuan mengenai menjaga anaknya, namun belum mengetahui tepatnya bagaimana.
Saya berterima kasih kepada semua pihak yang telah berpartisipasi dan mendukung saya dalam pembuatan laporan tugas akhir dan juga perancangan aplikasi tumbuh kembang anak balita. Pihak tersebut antara lain:
1. Mohammad Rizaldi, S.T., M.Ds. sebagai ketua program studi Desain Komunikasi Visual.
2. Nina Hansopaheluwakan, S.Ds., M.Des., Ph.D. sebagai pembimbing penulis dalam perancangan.
v
3. Prima Murti Rane Singgih, S.Sn., M.Ds. telah membantu penulis dalam desain tampilan aplikasi.
4. Thomas Simpson, S.Ds. telah membantu penulis dalam UX aplikasi. 5. Jennifer Handali, S.Ds. telah memberikan banyak informasi mengenai
proses perancangan UI/UX aplikasi.
6. Dr. dr. Luciana B. Sutanto, MS, SpGK. yang telah banyak memberikan banyak informasi terkait nutrisi pada anak balita.
7. Semua yang satu bimbingan dengan penulis yang telah memberikan masukan, bantuan dan semangat selama menjalani Tugas Akhir. 8. Keluarga dan pasangan penulis yang telah memberikan penulis banyak
doa, semangat dan dukungan emosional kepada penulis selama pengerjaan Tugas Akhir.
9. Vena, Olan, Nadya, Ivy, Stella, Floren, Ci Neko, Vilten, Sis, Feli, Fen fen, Tami, Lulu, Dhea, Dilla, Alpha, Michael, Gaby dan semua teman di social media yang telah memberikan semangat dan dukungan kepada penulis selama menjalankan Tugas Akhir.
10. Aaron, Mario dan K sebagai teman call yang menemani penulis saat mengerjakan Tugas Akhir.
Tangerang, 8 Januari 2021
vi
ABSTRAKSI
Nutrisi penting dalam kelangsungan hidup seseorang dan banyak orang juga yang setuju dengan pernyataan ini, namun dari kesadaran belum diterapkan pada sikap dan perilakunya karena kurangnya pengetahuan mengenai nutrisi. Nutrisi penting bagi semua orang terutama pada anak, maka pada tugas akhir ini akan membahas nutrisi yang berfokus pada anak balita. Orangtua pada umumnya sudah memiliki kesadaran akan pentingnya nutrisi untuk memantau tumbuh kembang anaknya, namun masih terdapat orangtua yang memiliki kesadaran dalam pengetahuan mengenai nutrisi anak, dan budaya pencatatan nutrisi anak masih kurang. Maka pada tugas akhir ini, penulis akan merancang UI/UX pada aplikasi berbasis Android. Dalam penelitian dan perancangan aplikasi, penulis menggunakan metode wawancara, kuesioner, studi eksisting dan user test. Dalam penelitian ini, akan menjelaskan dengan adanya media aplikasi akan membantu orangtua dalam pemantauan nutrisi untuk tumbuh kembang anak dengan desain UI/UX yang dapat membuat aplikasi menjadi nyaman dan praktis untuk digunakan.
vii
ABSTRACT
Nutrition is important in a person’s life sustainability and many people agreed with the statement, however, from the awareness of still have not been applied onto their attitude and behaviour because of lack in knowledge about nutrition. Nutrition is important to everyone, and especially to kids. Therefore, in this final project will be discuss about nutrition which focuses on toddlers. Parents in general already have awareness of the importance of nutrition to monitor a child’s growth, however, there is still some things that have not yet known or informations that have been obtained are not necessarily according to nutritionist in giving food consumption to their kids, and the culture of taking notes of their child’s nutrition intake in most parents is still lacking. Therefore in this final project, writer will design a UI/UX of an application based on Android. In research and design of an application, the methods which the writer use are qualitative interview, questionnaire, existing study dan user test. In this research, will be explained on how an application would be a help to parents in monitoring their child’s nutrition for their growth development with UI/UX design that would make the application ease to use and practical.
viii
DAFTAR ISI
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT ... II HALAMAN PENGESAHAN TUGAS AKHIR ... III
... III KATA PENGANTAR ... III
ABSTRACT ... VII
DAFTAR ISI ... VIII DAFTAR GAMBAR ... XI
DAFTAR TABEL ... XVIII DAFTAR LAMPIRAN ... XIX
BAB I PENDAHULUAN ... 1
1.1. Latar Belakang ... 1
1.2. Rumusan Masalah ... 3
1.3. Batasan Masalah... 3
1.4. Tujuan Tugas Akhir ... 4
1.5. Manfaat Tugas Akhir ... 4
BAB II TINJAUAN PUSTAKA ... 7
2.1. Mobile Application ... 7
2.1.1. Platform Android ... 8
ix
2.2.1. User Experience Design ... 10
2.2.2. Gamification ... 17
2.3. User Interface... 19
2.3.1. User Interface Design ... 19
2.3.2. Komponen inti UI ... 30 2.4. Elemen desain ... 37 2.4.1. Formal elements ... 37 2.4.2. Semiotika ... 42 2.4.3. Typography ... 43 2.4.4. Layout ... 45
2.5. Nutrisi Anak Balita ... 46
BAB III METODOLOGI ... 49
3.1. Metodologi Pengumpulan Data ... 49
3.1.1. Wawancara ... 49 3.1.2. Kuesioner ... 71 3.1.3. Studi Eksisting ... 78 3.2. Metodologi Perancangan ... 87 3.2.1. Perancangan Ide ... 90 3.2.2. UI/UX ... 95
3.3. Understanding & Discovery ... 118
BAB IV ANALISIS ... 120
x
4.1.1. Analisis Prototype Day ... 120
4.1.2. Evaluasi ... 125
4.2. Analisis Beta ... 126
4.2.1. Analisis Desain ... 127
4.2.2. Analisis Beta Test ... 149
4.2.3. Evaluasi ... 158
BAB V PENUTUP ... 160
5.1. Kesimpulan ... 160
5.2. Saran ... 161 DAFTAR PUSTAKA ... XIV
xi
DAFTAR GAMBAR
Gambar 2.1. Contoh Brand Dengan Logo Wordmakrs ... 9
Gambar 2.2. Personas.(1), User Story (2) ... 11
Gambar 2.3. User Scenario ... 12
Gambar 2.4. User Flow ... 12
Gambar 2.5. Sitemaps ... 13
Gambar 2.6. Proses Wireframe (1), Proses UI Elements (2) ... 15
Gambar 2.7. Proses Mockup... 15
Gambar 2.8. User Research and User Testing ... 16
Gambar 2.9. User Testing ... 17
Gambar 2.10. The Hook Canvas ... 19
Gambar 2.11. High-Level Flow (1), Screen Map (2) ... 23
Gambar 2.12. Navigation ... 24
Gambar 2.13. Contoh Grid-Based Navigation ... 25
Gambar 2.14. Contoh Tabs ... 26
Gambar 2.15. Social Layer (1), Contacts (2) ... 27
Gambar 2.16. Contoh Wireframing ... 28
Gambar 2.17. Contoh The Action Bar ... 31
Gambar 2.18. Contoh Navigational Controls ... 31
Gambar 2.19. Contoh Action Buttons ... 32
Gambar 2.20. Contoh Action Overflow (1), Split Action Bar (2) ... 32
Gambar 2.21. Floating Action Bar ... 33
xii
Gambar 2.23. Contoh Settings ... 34
Gambar 2.24. Contoh Dialogue ... 35
Gambar 2.25. Search ... 36
Gambar 2.26. Shapes by Color ... 39
Gambar 2.27. Basic Shapes and Forms ... 39
Gambar 2.28. Additive Color ... 41
Gambar 2.29. Simbol Peace ... 43
Gambar 2.30. Classification of Type Chart ... 45
Gambar 3.1. Wawancara Dengan Dr. dr. Luciana Budiati Sutanto, Sp.GK. ... 51
Gambar 3.2.Wawancara Dengan Jennifer Handali, S.Ds. ... 54
Gambar 3.3.Wawancara Dengan Indah ... 62
Gambar 3.4.Wawancara Dengan Intan ... 63
Gambar 3.5.Wawancara Dengan Emma ... 64
Gambar 3.6.Wawancara Dengan Julita ... 66
Gambar 3.7. Wawancara Dengan Meri ... 69
Gambar 3.8.Wawancara Dengan Eva ... 71
Gambar 3.9. Rumus Slovin ... 71
Gambar 3.10. Jumlah Sample ... 72
Gambar 3.11. Hasil Kuesioner 1 ... 73
Gambar 3.12. Hasil Kuesioner 2 ... 74
Gambar 3.13. Hasil Kuesioner 3 ... 74
Gambar 3.14. Hasil Kuesioner 4 ... 75
xiii
Gambar 3.16. Hasil Kuesioner 6 ... 76
Gambar 3.17. Hasil Kuesioner 7 ... 77
Gambar 3.18. Hasil Kuesioner 8 ... 77
Gambar 3.19. Hasil Kuesioner 9 ... 78
Gambar 3.20. Logo Golden Start Club ... 80
Gambar 3.21. Logo Clue ... 81
Gambar 3.22. Logo Bebeclub... 81
Gambar 3.23. Alur Aplikasi Pada Pilihan Brain Checklist ... 85
Gambar 3.24. Alur Aplikasi Pada Pilihan Insert Calender ... 86
Gambar 3.25. Alur Aplikasi Pada Pilihan View Rewards ... 87
Gambar 3.26. Mindmapping ... 90
Gambar 3.27. Moodboard Visual... 93
Gambar 3.28. User Persona Aplikasi ... 98
Gambar 3.29. User Cases Aplikasi ... 99
Gambar 3.30. User Story Aplikasi ... 99
Gambar 3.31. User Scenario Aplikasi ... 100
Gambar 3.32. Information Architecture Pertama Aplikasi Golden Age Care .... 102
Gambar 3.33. Information Architecture Kedua Aplikasi Golden Age Care ... 104
Gambar 3.34. Information Architecture Ketiga Aplikasi Golden Age Care ... 105
Gambar 3.35. Flowchart Pertama Aplikasi Golden Age Care ... 107
Gambar 3.36. Flowchart Kedua Aplikasi Golden Age Care ... 107
Gambar 3.37. Flowchart Ketiga Aplikasi Golden Age Care ... 108
xiv
Gambar 3.39. Penerapan Grid Pada Wireframe Aplikasi ... 110
Gambar 3.40.Wireframe Screen Aplikasi ... 110
Gambar 3.41. Warna Analogous Pada Aplikasi... 111
Gambar 3.42. Font Pada Aplikasi Golden Age Care ... 112
Gambar 3.43. Proses Penerapan Grid Pada Icon Logo Aplikasi Golden Age Care ... 112
Gambar 3.44. Proses Pembuatan Logo Aplikasi Golden Age Care ... 113
Gambar 3.45. Referensi Pembuatan Icon System Aplikasi Golden Age Care .... 114
Gambar 3.46. Penerapan Grid Pada Icon System Tabs Bar Aplikasi Golden Age Care ... 114
Gambar 3.47. Penerapan Grid Pada Icon System Tabs Dan Kategori Makanan Aplikasi Golden Age Care ... 115
Gambar 3.48. Icon System Aplikasi Golden Age Care ... 115
Gambar 3.49. Prototype Pertama Aplikasi Golden Age Care ... 116
Gambar 3.50. Prototype Kedua Golden Age Care ... 117
Gambar 3.51. Prototype Finalizing 1 Golden Age Care ... 118
Gambar 4.1. Hasil Alpha Test 1 ... 120
Gambar 4.2. Hasil Alpha Test 2 ... 121
Gambar 4.3. Hasil Alpha Test 3 ... 121
Gambar 4.4. Hasil Alpha Test 4 ... 122
Gambar 4.5. Hasil Alpha Test 5 ... 122
Gambar 4.6. Hasil Alpha Test 6 ... 123
xv
Gambar 4.8. Hasil Alpha Test 8 ... 124
Gambar 4.9. Hasil Alpha Test 9 ... 124
Gambar 4.10. Hasil Alpha Test 10 ... 124
Gambar 4.11. Hasil Alpha Test 11 ... 125
Gambar 4.12. Sketsa Icon Identitas... 128
Gambar 4.13. Proses Perancangan Icon Identitas ... 129
Gambar 4.14. Proses Perancangan Icon Identitas ... 129
Gambar 4.15. Tampilan Home Screen Prototype High-fidelity ... 130
Gambar 4.16. Tampilan Screen Identitas Prototype High-fidelity ... 131
Gambar 4.17. Tampilan Home Page Screen Prototype High-fidelity ... 131
Gambar 4.18. Tampilan Panduan Nutrisi Prototype High-fidelity ... 132
Gambar 4.19. Tampilan Catatan Nutrisi Prototype High-fidelity ... 133
Gambar 4.20. Tampilan Chart Nutrisi Prototype High-fidelity ... 133
Gambar 4.21. Tampilan Keranjang Belanja Prototype High-fidelity ... 134
Gambar 4.22. Tampilan Penukaran Poin Prototype High-fidelity ... 135
Gambar 4.23. Tampilan Pengaturan Prototype High-fidelity ... 135
Gambar 4.24. Pop Up Kembali Home Screen ... 136
Gambar 4.25. Pop Up Icon ... 136
Gambar 4.26. Pop Up Jenis Makanan ... 137
Gambar 4.27. Pop Up Seleksi Tanggal ... 138
Gambar 4.29. Pop Up Penukaran Poin ... 138
Gambar 4.30. Pop Up Seleksi Discount Voucher ... 139
xvi
Gambar 4.32. Animasi Icon ... 140
Gambar 4.33. Mockup Google PlayStore ... 141
Gambar 4.34. Screenshot Google PlayStore ... 141
Gambar 4.35. Mockup Instagram Post ... 142
Gambar 4.36. Instagram Post ... 143
Gambar 4.37. Mockup Youtube Laptop ... 143
Gambar 4.38. Youtube Video Ad ... 144
Gambar 4.39. Youtube Display Ad ... 144
Gambar 4.40. Mockup Billboard ... 145
Gambar 4.41. Billboard... 145
Gambar 4.42. Mockup Digital Banner ... 146
Gambar 4.43. Digital Banner ... 146
Gambar 4.44. Mockup Media Online Banner ... 147
Gambar 4.45. Media Online Banner ... 148
Gambar 4.46. Mockup Pop Up Website Banner ... 148
Gambar 4.47. Pop Up Website Banner ... 149
Gambar 4.48. Hasil Beta Test 1 ... 150
Gambar 4.49. Hasil Beta Test 2 ... 150
Gambar 4.50. Hasil Beta Test 3 ... 151
Gambar 4.51. Hasil Beta Test 4 ... 151
Gambar 4.52. Hasil Beta Test 5 ... 152
Gambar 4.53. Hasil Beta Test 6 ... 152
xvii
Gambar 4.55. Hasil Beta Test 8 ... 153
Gambar 4.56. Hasil Beta Test 9 ... 153
Gambar 4.57. Hasil Beta Test 10 ... 154
Gambar 4.58. Hasil Beta Test 11 ... 154
Gambar 4.59. Hasil Beta Test 12 ... 155
Gambar 4.60. Hasil Beta Test 13 ... 155
Gambar 4.61. Hasil Beta Test 14 ... 156
Gambar 4.62. Hasil Beta Test 15 ... 156
Gambar 4.63. Hasil Beta Test 16 ... 157
Gambar 4.64. Hasil Beta Test 17 ... 157
Gambar 4.65. Hasil Beta Test 18 ... 158
xviii
DAFTAR TABEL
Tabel 2.1. Tabel Kode Versi dan Nama Versi Platform Android ... 9 Tabel 2.2. Angka Kecukupan Energi, Protein, Lemak, Karbohidrat, Serat dan Air
Yang Dianjurkan untuk Per Hari Anak Balita Indonesia ... 48 Tabel 2.3. Angka Kecukupan Vitamin Larut Lemak yang Dianjurkan untuk Per
Hari Anak Balita Indonesia ... 48 Tabel 2.4. Angka Kecukupan Mineral Makro Yang Dianjurkan untuk Per Hari
Anak Balita Indonesia ... 48 Tabel 2.5. Angka Kecukupan Mineral Mikro Yang Dianjurkan untuk Per Hari
Anak Balita Indonesia ... 48 Tabel 3.1. Tabel Perbandingan Kelebihan dan Kekurangan Aplikasi Golden Start
Club, Clue dan Bebeclub ... 82 Tabel 3.2. Analisis Visual Aplikasi Golden Start Club, Clue dan Bebeclub
Perbandingan ... 84 Tabel 3.3. Tabel Komposisi Pangan Indonesia ... 119
xix
DAFTAR LAMPIRAN
LAMPIRAN A: FOTO BIMBINGAN ... xviii
LAMPIRAN B: TRANSKRIP WAWANCARA ORANGTUA 1 ... xx
LAMPIRAN C: TRANSKRIP WAWANCARA ORANGTUA 2 ... xx
LAMPIRAN D: TRANSKRIP WAWANCARA ORANGTUA 3 ... xx
LAMPIRAN E: TRANSKRIP WAWANCARA ORANGTUA 4 ... xx
LAMPIRAN F: TRANSKRIP WAWANCARA ORANGTUA 5 ... xx
LAMPIRAN G: TRANSKRIP WAWANCARA ORANGTUA 6 ... xx
LAMPIRAN H: BUKTI WAWANCARA ORANGTUA ... xx
LAMPIRAN I: TRANSKRIP WAWANCARA AHLI NUTRISI ... xx
LAMPIRAN J: TRANSKRIP WAWANCARA PRAKTISI UI/UX ... xx
LAMPIRAN K: BUKTI WAWANCARA AHLI NUTRISI DAN PRAKTISI UI/UX ... lxiv
