37
BAB III METODOLOGI
3.1. Metodologi Pengumpulan Data
Metode pengumpulan data yang digunakan adalah metode kualitatif dan kuantitatif. Menurut Yusuf (2014), metode kualitatif adalah metode yang dilakukan untuk mencari pemahaman, pengertian, makna tentang salah satu kejadian, fenomena, kehidupan manusia secara langsung atau tidak langsung.
Metode kualitatif dilakukan dengan mewawancarai seorang Dokter Umum. Proses wawancara dilakukan menggunakan chat dari aplikasi Whatsapp. Proses wawancara didokumentasikan menggunakan screenshot pada laptop saat wawancara berlangsung. Wawancara ini bertujuan untuk mendapatkan data insight seputar pengalaman dokter dalam menangani pasien dehidrasi. Studi referensi yang dilakukan menggunakan referensi dari aplikasi kesehatan Alodokter dan studi eksisting pada aplikasi Water Reminder. Kedua aplikasi ini digunakan sebagai referensi dari perancangan aplikasi.
Menurut Yusuf (2014), metode kuantitatif adalah metode penelitian yang dilakukan untuk mendapatkan data berupa yang objektif dan bisa diukur. Metode kuantitatif dilakukan dengan cara menyebarkan kuesioner secara random sampling menggunakan Google Form kepada responden yang berada di daerah Jabodetabek. Rumus Slovin digunakan untuk menghitung jumlah responden yang akan digunakan sebagai data, dengan margin of error sebesar 10% dari jumlah penduduk Jabodetabek. Jumlah penduduk yang diambil adalah warga Jabodetabek
38 yang berumur 20-25 tahun (menggunakan angka dari grafik jumlah total warga Jabodetabek oleh Badan Pusat Statistik). Hasil dari perhitungan rumus tersebut adalah 100 responden.
Tujuan dilakukan kuesioner adalah untuk mendapatkan data secara faktual yang dapat memperkuat data penelitian. Responden yang diutamakan adalah responden yang belum memenuhi kebutuhan cairan tubuh perharinya. Tetapi responden yang sudah memenuhi kebutuhan cairan tubuhnya juga dapat ikut menjawab kuesioner tersebut.
3.1.1. Wawancara
Wawancara dilakukan dengan mewawancarai Dokter Umum, yaitu Dr. Chahyadi.
Proses wawancara dilakukan melalui chat dari aplikasi Whatsapp dan dilaksanakan pada tanggal 2 April 2021. Beliau sudah berprofesi sebagai dokter umum selama 12 tahun dan sudah menangani pasien dehidrasi lebih dari 1000 orang. Menurutnya, dehidrasi tidak hanya disebabkan oleh kurangnya mengonsumsi air tetapi juga disebabkan oleh beberapa gejala seperti demam tinggi, mual muntah, batuk kronis, dan demam yang tidak terkontrol. Dr.
Chahyadi juga mengatakan bahwa dehidrasi ringan mungkin dapat ditangani secara mandiri. Tetapi tergantung umurnya juga karena kalau anak-anak tetap butuh bantuan dari orang tuanya.
Kesadaran diri yang dimiliki oleh pasien dehidrasi akan bahaya dehidrasi ringan-sedang masih sadar akan bahayanya. Sedangkan dehidrasi sedang-berat itu bisa apatis-somnolen (setengah sadar, tidak ada respon). Kemudian peneliti
39 menanyakan bagaimana cara mengetahui konsumsi air minum yang tepat kepada Dr. Chahyadi. Beliau menjawab caranya dengan melihat warna urin dan periksa tugor kulitnya. Yang penting jumlah konsumsi air yang diminumdalam seharinya yaitu 4-8 gelas sehari. Setelah menjelaskan tentang perancangan aplikasi pengingat minum yang interaktif, beliau memberikan saran fitur/hal yang perlu ada dalam aplikasi yaitu berat badan, tinggi badan, aktivitas fisik, pekerjaan, dan riwayat penyakit. Dari saran tersebut, ada beberapa hal yang digunakan sebagai arahan pembuatan aplikasi seperi pengisian berat badan, dan tinggi badan.
3.1.2. Focus Grup Discussion
Focus Grup Discussion dilakukan pada tanggal 18 Februari 2021 kepada narasumber dengan usia 20-25 tahun karena kepadatan jadwal yang dimiliki peneliti dan narasumber. Dengan lokasi tempat tinggal di daerah Jabodetabek.
Metode ini dilakukan untuk mendapatkan data pendukung tentang kesadaran diri terhadap bahaya dehidrasi dari lima calon pengguna dari aplikasi yang akan dirancang. Proses diskusi dilakukan secara online meeting melalui software Discord. Dari hasil diskusi dengan kelima narasumber, mereka mengetahui pengertian dan jenis dehidrasi berdasarkan gejalanya. Namun mereka hanya mengetahui beberapa gejala dari dehidrasi ringan-sedang seperti rasa haus, bibir kering, jarang buang air kecil, dan warna urin menjadi kuning. Sedangkan pada gejala dehidrasi berat, mereka benar-benar tidak mengetahui gejala yang ditimbulkan oleh dehidrasi berat. Kelima narasumber sudah mengetahui jumlah konsumsi air minum yang tepat. Dari lima narasumber, empat diantaranya mengatakan bahwa dehidrasi itu berbahaya mau sekecil apapun penyakitnya. Dan
40 satu narasumber mengatakan kalau dehidrasi ringan ya tidak berbahaya, tapi kalau sudah berat itu menjadi sangat berbahaya.
3.1.3. Kuesioner
Dari data kuesioner yang dilakukan dengan metode random terstruktur, dengan penentuan jumlah sampel menggunakan rumus Slovin. Kuesioner disebar kepada 100 responden dari tanggal 9 Februari 2021 di daerah Jabodetabek. Sebanyak 99% respoden memahami pengertian dari dehidrasi. Menurut responden, sebanyak 38% responden setuju apabila gejala dehidrasi yang timbul perlu ditangani oleh dokter dan 30% sangat setuju, 25% ragu-ragu dan 7% kurang setuju. Dari pertanyaan mengenai pemahaman jumlah air minum dalam sehari, 74% menjawab pilihan yang tepat 26% menjawab pilihan yang kurang tepat.
Terdapat 89 responden menyatakan dehidrasi disebabkan oleh aktivitas yang padat, 70 responden memilih faktor cuaca, 60 responden memilih dengan olahraga di tempat yang panas dan lembap, 43 responden memilih aktivitas diruang ber AC, 29 responden memilih makanan. Dari gejala dehidrasi ringan sedang, sebanyak 96% responden memilih jawaban yang kurag tepat, dan sebanyak 4% responden memilih jawaban yang tepat. Dari gejala dehidrasi berat, sebanyak 99% responden memilih jawaban yang kurang tepat, dan sebanyak 1% responden memilih jawaban yang tepat.
Sebanyak 54% responden sudah mencukupi kebutuhan air minumnya.
Namun, sebanyak 46% responen masih belum mencukupi kebutuhan air minum secara cukup. Hal yang membuat mereka kurang mengonsumsi air minum, sebanyak 67 responden lupa minum, 65 responden sibuk, 45 responden tidak
41 merasa haus, 35 responden sedang bermain game, 14 responden kehabisan air minum, dan 3 responden menjawab lainnya. Dalam mencari informasi kesehatan personal, 76 responden menggunakan aplikasi, 65 responden menggunakan website, 31 responden menggunakan buku/majalah, 17 responden memilih lainnya, 9 responden menggunakan game, dan 4 responden menggunakan boardgame. Hal yang ingin mereka ketahui saat mencari informasi kesehatan, sebanyak 89 responden mencari gejala/dampak, 83 responden mencari cara mencegah, 82 responden mencari penyebabnya, 81 responden mencari jenis atau nama penyakitnya, dan 80 responden mencari cara mengatasinya.
Jadi, dari data tersebut dapat disimpulkan bahwa responden masih kurang sadar akan bahaya yang ditimbulkan dari dehidrasi. Pada pertanyaan gejala dehidrasi ringan sedang, hanya 4% responden menjawab tepat dan pada pertanyaan gejala dehidrasi berat, hanya 1% responden menjawab tepat. Media yang digunakan sebagai sumber informasi dehidrasi adalah aplikasi dengan pilihan dari 76 responden.
3.1.4. Studi Referensi
Studi referensi dalam penelitian ini menggunakan referensi dari tiga aplikasi yaitu aplikasi Alodokter, dan Water Reminder. Peneliti melakukan analisis dari elemen UX dan UI yang ada di dalam kedua aplikasi tersebut.
42
Gambar 3.1. Logo Dari Aplikasi Alodokter Dan Water Reminder 1. Alodokter
Aplikasi Alodokter adalah salah satu aplikasi berbasis kesehatan yang didalamnya terdapat fitur untuk berkomunikasi secara langsung dengan dokter. Fungsi utama dari aplikasi ini sebagai sarana konsultasi antara pengguna dengan dokter terpercaya di Indonesia. Fungsi lainnya yaitu sebagai penyedia sumber informasi seputar kesehatan dari fitur artikelnya. Pada elemen UX aplikasi, target penggunaannya adalah remaja hingga dewasa yang memiliki permasalahan kesehatan personal. Digunakan ketika ingin konsultasi keadaan/kesehatan diri dengan dokter atau digunakan pada saat ingin mencari informasi kesehatan. Fitur konsultasi digunakan dengan cara memilih salah satu dokter yang diinginkan kemudian membuat waktu janjian bersama dokter tersebut.
Pada elemen UI, menggunakan layout berupa single column grid.
Memiliki ikon-ikon sederhana pada bagian menu navigasi bar dibagian bawah layar. Menggunakan warna monochromatic dari turunan warna biru dan warna gradient dari biru tua ke biru muda. Tipografi yang digunakan adalah jenis tipografi sans-serif. Dengan visual menggunakan foto (dokter dan artikel) yang mendominasi tampilan.
43
Gambar 3.2. UI Pada Aplikasi Alodokter
Peneliti juga melakukan analisis berupa SWOT dari aplikasi Alodokter.
Strength dari aplikasi ini adalah dapat berkomunikasi secara langsung dengan dokter-dokter terpercaya, weekness yang dimiliki aplikasi ini adalah kurang memanfaatkan penggunaan elemen desain seperti ikon pada desain UI, opportunity-nya adalah memberikan kesempatan kepada pengguna untuk berkonsultasi dan mengatasi kesehatan pribadi melalui fitur chat dengan dokter,
44 dan threat yang ada dari aplikasi adalah terdapat aplikasi serupa yang memiliki fitur dan kegunaan sama.
3.1.5. Studi Eksisting
Studi eksisting dilakukan dengan mengamati aplikasi yang sudah ada dengan kemiripan topik yang serupa, yaitu menjaga kondisi hidrasi tubuh. Hal ini dilakukan guna menganalisis bagaimana kompetitor membuat aplikasi untuk menghindrasi dehidrasi, dari segi UI/UX aplikasi untuk menjadi panduan dan pembelajaran bagi peneliti dalam merancang media informasi mengenai dehidrasi.
1. Water Reminder
Aplikasi Water Reminder adalah aplikasi yang membantu pengguna sebagai pengingat untuk mengonsumsi air minum. Fungsi utama dari aplikasi ini adalah membuat sebuah rencana untuk mengingatkan pengguna dalam mengonsumsi air minum selama seminggu. Pada elemen UX, target penggunaan dari aplikasi ini adalah remaja hingga dewasa yang sering lupa mengonsumsi air minum.
Digunakan setiap hari setelah dibuatkan planning target minum dalam seminggu.
Pada awal menggunakan aplikasi, pengguna perlu mengisi data diri berupa berat badan dan usia pengguna. Kemudian akan muncul waktu pengingat yang dapat dijadikan sebagai pemberitahu kapan pengguna harus minum.
Pada elemen UI, menggunakan layout berupa single column grid.
Menggunakan warna monochromatic dari turunan warna biru. Menerapkan elemen ikon pada bagian navigasi bar dibagian atas layar dan pada bagian konten target minum pengguna. Menggunakan jenis tipografi sans-serif. Dengan visual
45 yang menampilkan jumlah air yang sudah dikonsumsi pada bagian target minum pengguna, menampilkan gambar grafik dalam sebulan, dan menyediakan gambar berupa ilustrasi pada bagian cara minum dengan benar.
Gambar 3.3. UI Pada Aplikasi Water Reminder
46 Terdapat analisis berupa SWOT pada aplikasi Water Reminder yang dibuat oleh peneliti.
1. Strength dari aplikasi ini adalah menyediakan sususan rencana minum air kepada pengguna dalam seminggu tanpa harus disusun secara manual. Pengguna juga dapat memilih gelas yang digunakan untuk minum sehari-harinya.
2. Weekness dari aplikasi ini adalah terdapat iklan popup yang bisa mengganggu pengguna. Kurangnya interaktivitas dalam aplikasi dan aplikasi hanya sebatas untuk mengingatkan pengguna untuk minum.
3. Opportunity yang dimiliki aplikasi tersebut adalah pengguna jadi bisa mengonsumsi air minum dengan rutin. Dan apabila aplikasi pengingat minum ini ditambahkan interaktivitas dan gamifikasi maka aplikasi tersebut akan menjadi lebih menarik lagi.
4. Threat yang muncul dari aplikasi adalah terdapat aplikasi yang memiliki fitur dan kegunaan yang serupa. Aplikasi yang sebatas mengingatkan minum tanpa sebuah interaktivitas akan lebih mudah membuat pengguna merasa enggan untuk menggunakan aplikasi sesering mungkin. Hingga membuat pengguna tidak lagi memilih untuk menggunakan aplikasi.
3.2. Metode Perancangan
Dalam merancang sebuah aplikasi, metode perancangan yang digunakan adalah metode dari buku yang berjudul Designing Mobile Apps yang dibuat oleh Cuello
47 dan Vittone (2013). Peneliti membatasi perancangan UI/UX hanya sampai tahapan design saja.
Gambar 3.4. Metode Perancangan Mobile Apps Cuello dan Vittone 3.2.1. Conceptualization
Pada tahapan ini, diperlukan pembentukan ide untuk membuat sebuah aplikasi menggunakan pertimbangan dari apa yang dibutuhkan oleh pengguna dan masalahnya. Ide tersebut berasal dari data yang didapat dari riset pendahuluan.
Berikut komponen yang ada dalam tahapan ini:
1. Research
Hasil kuesioner menyatakan user mengetahui kondisi yang cukup untuk memenuhi cairan tubuh yang dibutuhkan yaitu dua liter air minum. User juga mengetahui penyebab seseorang terkena dehidrasi seperti aktivitas padat, melakukan aktivitas di ruang berAC, cuaca, dan makanan. Dari 100 responden, 96% responden belum mengetahui gejala dehidrasi ringan-sedang dengan tepat dan 99% responden belum mengetahui gejala dehidrasi berat. Namun, dalam satu hari, 46% responden masih belum memenuhi kebutuhan tubuhnya. Dari hasil wawancara, Dr. Chahyadi mengatakan bahwa selain disebabkan oleh kurangnya
48 konsumsi air minum, dehidrasi juga disebabkan oleh gejala penyakit seperti demam tinggi, mual muntah, diare kronis, dan demam tidak terkontrol. Kesadaran diri yang dimiliki pasien dehidrasi ringan-sedang terhadap bahaya dehidrasi itu masih sadar. Tetapi kesadaran diri pasien dehidrasi sedang-berat itu sudah apatis- somnolen (setengah sadar, tidak ada respon). Menurut beliau jumlah konsumsi air minum yang tepat adalah minimal 4-8 gelas air minum dalam sehari. Saran fitur/hal yang perlu ditambahkan kedalam aplikasi dari beliau yaitu berat badan, tinggi badan, aktivitas fisik, pekerjaan, dan Riwayat penyakit. Kemudian peneliti menjadikan beberapa saran tersebut sebagai arahan pembuatan aplikasi seperti pengisian berat dan tinggi badan.
2. Formalization
Setelah melakukan riset, peneliti melakukan tahapan formalization dengan membuat mind map, dan big idea. pembuatan mind map dilakukan untuk mendapatkan tiga kata kunci utama dalam pembuatan aplikasi. Ketiga kata kunci yang didapatkan yaitu fit, hydrated, dan routine. Berikut adalah hasil mind map yang didapat.
49 Gambar 3.5. Mindmap
Setelah itu, peneliti membuat big idea dari kata kunci yang didapatkan dari mind map sebelumnya. Ketiga kata kunci dijadikan panduan dalam pembuatan big idea sehingga mendapatkan sebuah ide “set a routine to stay fit and hydrated”.
50 Gambar 3.6. Big Idea
3. Ideation
pada tahapan ideasi, ide yang didapatkan adalah “set a routine to stay fit and hydrated”. Yang berarti menjaga kondisi hidrasi tubuh dalam kehidupan sehari hari dengan sebuah rutinitas sehingga tubuh tetap bugar dan terhidrasi. Konsep yang diangkat yaitu dengan merancang sebuah karya yang memberikan motivasi kepada pengguna untuk mengonsumsi air secara rutin. Motivasi tersebut berupa merawat dan mengoleksi ikan hias dalam bentuk virtual pet yang dapat berinteraksi dan berkomunikasi dengan pengguna melalui smartphone. Jadi dengan mengonsumsi air minum itu sama dengan merawat ikan hias virtual agar tetap hidup dengan sehat. Dan apabila pengguna lupa mengonsumsi air minum
51 maka air dalam akuarium akan berkurang dan dapat membuat ikan-ikan yang dipelihara mati.
3.2.2. Definition
Dalam proses tahapan berikutnya, pengguna akhir ditentukan melalui metodologi perancangan seperti persona, user journey, information architecture dan sitemap.
Hal tersebut yang menjadi fondasi untuk fungsi sebuah aplikasi. Komponen dalam tahapan ini:
1. User Definition
Menentukan calon pengguna yang akan menggunakan aplikasi dalam bentuk persona dan menentukan proses pengalaman pengguna tersebut dalam bentuk user journey. Persona adalah gambaran umum dari tipe-tipe calon pengguna aplikasi yang digunakan oleh peneliti. Dalam tahapan ini, peneliti memilih 3 calon pengguna sebagai persona dari aplikasi.
52 Gambar 3.7. Tiga Persona Calon Pengguna
53 Setelah itu, user journey adalah proses pengalaman pengguna dalam menggapai suatu tujuan. Pada perancangan aplikasi, user journey yang diambil adalah proses ketika pengguna menggunakan aplikasi pengingat untuk minum.
Gambar 3.8. User Journey
Dari gambar tersebut, dapat diketahui bahwa pengguna memiliki pain point pada saat menunggu waktu untuk konsumsi air minum. Dimana tidak ada yang bisa dilakukan dalam aplikasi selain menunggu waktunya. Hal ini membuat pengguna menutup aplikasinya dan melakukan aktivitas lainnya. Terkadang hal inilah yang dapat membuat pengguna lupa untuk menggunakan aplikasi karena terfokus melakukan aktivitas lain.
2. Functional Definition
Membuat sebuah arahan dalam segi fungsional pada perancangan yang akan dibuat. Dalam hal ini, peneliti membuat arahan tersebut dalam bentuk information architecture dan sitemap. Information architecture adalah arahan peneliti dalam menentukan fitur dan konten apa saja yang diperlukan dalam perancangan aplikasi.
54 Gambar 3.9. Information Architecture Perancangan Aplikasi
Kemudian sitemap adalah pemetaan dari halaman satu ke halaman lainnya dalam aplikasi. Kedua hal ini dibuat untuk mempermudah peneliti dalam merancang aplikasi.
Gambar 3.10. Sitemap
55 3.2.3. Design
Pada tahapan desain, proses yang dilakukan sebagai prototype pertama adalah membuat visual design, low dan high fidelity, wireframe sebagai user test pertama kali. Berikut adalah komponen pada tahapan ini:
3.2.3.1. Visual Design
Visual design adalah desain beberapa aspek visual pada tampilan aplikasi yang meliputi warna, tipografi, ikon, illustrasi, dan aset visual lainnya.
1. Moodboard
Gambar 3.11. Moodboard
(Sumber: Google.com)
Pembuatan moodboard menggunakan tiga kata kunci yang didapatkan dari mindmap. Hal tersebut menggambarkan kondisi tubuh yang terhidrasi, bugar, serta dalam rutinitas. Di dalam moodboard terdapat gambar referensi
56 ikan dalam akuarium sebagai referensi aset visual dari virtual pet dalam aplikasi.
2. Warna
Gambar 3.12. Warna Pada Aplikasi
Warna-warna yang digunakan adalah dua warna yang didapatkan dari moodboard. Menurut Tigercolor.com (2015), warna tersebut termasuk kedalam teori warna complementary. Menurut Malewicz (2020), warna biru melambangkan ketenangan dan kepercayaan, warna oranye digunakan untuk warna button pada aplikasi, warna putih dan abu-abu digunakan sebagai tint dan tone dari warna dasar.
3. Tipografi
Gambar 3.13. Tipografi Pada Aplikasi
Tipografi yang digunakan adalah tipografi sans-serif dengan typeface Montserrat Bold yang digunakan sebagai heading dan subheading, sedangkan typeface Quattrocento Sans yang digunakan sebagai bodytext.
57 Kedua typeface ini dipilih karena melambangkan ketiga kata kunci (hydrated, fit, dan routine) dengan bentuk font yang rapih dan teratur.
4. Ikon
Tabel 3.1. Ikon-Ikon Pada Aplikasi
Nama Ikon
Gambar Ikon
Gambar Referensi
Keterangan
Informasi
Menandakan halaman informasi pada
aplikasi. Menggunakan referensi dari bentuk ikon i atau informasi secara umum.
Menu Janjian
Menandakan halaman menu janjian pada aplikasi. Menggunakan referensi dari bentuk ikon tangan yang menekan tombol.
Pengingat
Menandakan halaman pengingat pada
aplikasi. Menggunakan referensi dari bentuk ikon gelas.
58 Misi
Menandakan halaman misi pada aplikasi.
Menggunakan referensi dari bentuk ikon kertas dengan daftar aktivitas.
Profil
Menandakan halaman profil pada aplikasi.
Menggunakan referensi dari bentuk ikon tubuh manusia.
Foto
Menandakan proses mengambil gambar pada aplikasi.
Menggunakan referensi dari bentuk ikon kamera.
Lampu (pengertian
dehidrasi)
Menandakan halaman pengertian/pengetahua n dehidrasi pada aplikasi. Menggunakan referensi dari bentuk ikon lampu yang
59 menyala.
Tanda Bahaya (penyebab
dehidrasi)
Menandakan halaman penyebab dehidrasi pada aplikasi.
Menggunakan referensi dari bentuk rambu bahaya.
Kaca Pembesar
(gejala dehidrasi)
Menandakan halaman gejala dehidrasi pada aplikasi. Menggunakan referensi dari bentuk ikon kaca pembesar dengan bentuk tubuh manusia.
Stetoskop (dampak dehidrasi)
Menandakan halaman dampak dehidrasi pada aplikasi. Menggunakan referensi dari bentuk ikon stetoskop.
Sebelum
Menandakan tombol untuk ke halaman sebelumnya.
Menggunakan
60 referensi dari bentuk ikon panah ke kiri.
Berikut
Menandakan tombol untuk ke halaman berikutnya.
Menggunakan referensi dari bentuk ikon panah ke kanan.
Kembali
Menandakan tombol untuk membatalkan suatu aksi.
Menggunakan referensi dari bentuk ikon silang.
Komunikasi
Menandakan tombol komunikasi dengan peliharaan pada
aplikasi. Menggunakan referensi dari bentuk ikon bubble text.
Interaksi
Menandakan tombol interaksi dengan peliharaan pada
61 aplikasi. Menggunakan referensi dari bentuk ikon tangan manusia.
Toko
Menandakan tombol toko pada aplikasi.
Menggunakan referensi dari bentuk ikon tas belanja.
Hadiah
Menandakan halaman untuk mendapatkan kupon belanja pada aplikasi. Menggunakan referensi dari bentuk ikon kado hadiah.
Keluar
Menandakan tombol untuk keluar dari aplikasi. Menggunakan referensi dari bentuk ikon pintu keluar dengan bentuk panah ke kanan.
62 Akuarium
Menandakan ikon untuk halaman akuarium.
Menggunakan referensi dari bentuk ikon akuarium.
Ikon-ikon tersebut menggunakan bentuk yang rounded dan didesain menggunakan arahan dari icon grid system menurut material.io. Masing- masing ikon terbentuk menggunakan referensi dari objek asli pada umumnya seperti yang tertera dalam tabel di atas.
Gambar 3.14. Icon Grid System Dari Material.io
63 5. Button
Gambar 3.15. Beberapa Button Pada Aplikasi
Setiap halaman pada aplikasi memiliki button dengan fungsinya masing- masing. Untuk button yang menandakan sebuah aksi atau interaksi, menggunakan warna oranye sebagai kontras dari warna aplikasi. Untuk button pada halaman informasi, menggunakan warna dasar aplikasi yaitu biru dengan warna putih sebagai kontras warnanya. Untuk text field, menggunakan warna putih dengan warna biru sebagai kontras warna typefacenya. Keseluruhan button menggunakan bentuk yang rounded dengan efek drop shadow.
64 6. Ilustrasi
Pertama, ilustrasi yang diperlukan adalah ilustrasi yang dapat menggambarkan kondisi dehidrasi pada tubuh manusia. Peneliti mengambil referensi dari ilustrasi yang menggambarkan kondisi kekurangan cairan tubuh.
Gambar 3.16. Referensi Ilustrasi Pertama
(Sumber: https://bit.ly/3sAKXOL)
Dari referensi tersebut, ilustrasi yang dibuat adalah bentuk tubuh manusia yang dipenuhi dengan air (warna biru). Di dalamnya juga terdapat gambar butiran air untuk menandakan air yang menghilang dari tubuh.
Gambar 3.17. Ilustrasi Untuk Halaman Pengertian Dehidrasi
Ilustrasi kedua, mengambil referensi dari ilustrasi urutan warna urine. Urutan tersebut mengindikasikan warna urine yang tidak memiliki gejala dehidrasi hingga warna urine dengan gejala dehidrasi berat.
65 Gambar 3.18. Referensi Ilustrasi Kedua
(Sumber: https://bit.ly/3anF299)
Hasil yang didapat adalah ilustrasi yang mirip dari referensi, dengan menggunakan warna datar sebagai urutan warna urine. Peneliti juga menambahan detail keterangan seperti dehidrasi ringan, ringan-sedang, sedang berat, dan berat.
Gambar 3.19. Ilustrasi Untuk Halaman Gejala Dehidrasi
Ilustrasi ketiga, mengambil referensi ilustrasi vektor keadaan di bawah laut yang akan digunakan untuk membuat ilustrasi akuarium virtual pet. Referensi ini digunakan sebagai arahan dalam pembuatan tampilan visual dari akuarium.
66 Gambar 3.20. Referensi Ilustrasi Bawah Laut
(Sumber: https://bit.ly/3b9PZvy)
Hasil yang didapat yaitu tampilan ilustrasi vektor dalam laut dengan beberapa tanaman dalam laut dan batu laut. Tampilan ini adalah tampilan pertama dari akuarium virtual pet saat pertama kali menggunakan aplikasi.
Gambar 3.21. Ilustrasi Akuarium Virtual Pet
Berikutnya membuat ilustrasi dari virtual pet menggunakan referensi dari gambar ilustrasi ikan hias. Ikan pertama yang dibuat adalah ikan mas koki.
67 Gambar 3.22. Referensi Ilustrasi Ikan Hias
(Sumber: https://bit.ly/3f35vuk)
Hasil yang didapat yaitu bentuk ilustrasi vektor dari ikan mas koki.
Ikan tersebut adalah ikan pertama yang didapatkan oleh pengguna saat pertama kali menggunakan aplikasi.
Gambar 3.23. Ilustrasi Ikan Virtual Pet
Kemudian membuat ilustrasi bentuk telur ikan dari gambar referensi. Ilustrasi yang dibuat adalah bentuk telur ikan dalam bentuk vektor.
68 Gambar 3.24. Referensi Telur Ikan
(Sumber: https://bit.ly/3eBrDgB)
Berikut adalah hasil dari ilustrasi telur ikan yang diletakan diatas batu dalam akuarium. Nantinya telur ikan ini akan menetas menjadi ikan lainnya seiring penggunaan aplikasi atau setelah pengguna mengonsumsi air minum secara rutin.
Gambar 3.25. Ilustrasi Telur Ikan Virtual Pet 7. Logo
Logo yang dibuat menggunakan gabungan dari kata kunci hydrated dan routine menjadi Hydroutine. Kemudian huruf o diubah menjadi butiran air guna memberi kesan status hidrasi. Berikut logo yang digunakan dan sketsa digital logo dari beberapa warna. Nama Hydroutine itu sendiri memiliki arti “terhidrasi secara rutin”
69 Gambar 3.26. Logo Aplikasi Hydroutine
8. UX Writting
Dalam perancangan aplikasi Hydroutin, peneliti juga membuat sebuah UX Writing yang diimplementasikan pada aplikasi. Penggunaan bahasa yang baik pada aplikasi didapatkan setelah melakukan proses asistensi. Dari proses tersebut didapatkan hasil pilihan kata yang tepat dan sesuai dengan ide awal dari aplikasi.
Tabel 3.2. Perbandingan UX Writing Pada Aplikasi
Don’t Do
Minum secara rutin untuk menetaskan telur peliharaanmu!
Rawat virtual pet dengan minum minimal 8 gelas perhari!
Virtual pet akan mengonsumsi sesuatu setelah kamu minum.
Tetapi virtual pet akan mati apabila kamu tidak minum lebih dari 3 kali sehari.
Jagalah virtual pet dengan minum secara teratur! Jadi jangan sampai lupa untuk minum!
70 Ayo kumpulkan koleksi virtual
pet dan dapatkan hadiah dengan cara menukarkan saldo menjadi kupon belanja.
Koleksi virtual pet kesukaanmu dan tukarlah saldomu menjadi kupon belanja yang
menguntungkan!
Minumlah pada waktu yang ditentukan
Waktu minum selanjutnya
Minumlah apabila kamu merasa haus!
Minumlah untuk menghilangkan rasa hausmu!
Minum 8 kali dalam sehari! Penuhi kebutuhan minum hari/minggu/bulan ini!
Sikat akuarium peliharaanmu! Bersihkan akuarium virtual pet!
Beli pasir akuarium di toko! Ganti pasir akuarium!
Ambil foto peliharaanmu! Foto virtual petmu!
Memberi makanan pada virtual petmu!
Beri makan virtual petmu!
Beli 3 aksesoris di toko! Hias akuarium virtual petmu!
Dapatkan hati peliharaanmu! Buat virtual petmu senang!
Dapatkan uang Rp. 10.000 Raih saldo Rp.10.000 Share foto peliharaanmu! Bagikan foto virtual pet!
Beli mainan di toko untuk virtual petmu!
Beli mainan untuk virtual pet!
71 3.2.3.2. Prototypes
Gambar 3.27. Low Fidelity Aplikasi Hydroutine
Pada pembuatan prototype, peneliti membuat rancangan berupa low fidelity yang kemudian dikembangkan menjadi rancangan high fidelity. Low fidelity adalah proses perancangan yang masih menggunakan warna akromatik dengan bentuk yang lebih sederhana. Pembuatan low fidelity bertujuan untuk mendapatkan gambaran dasar dari tampilan aplikasi secara keseluruhan.
72 Gambar 3.28. High Fidelity Aplikasi Hydroutine
Grid yang digunakan pada tampilan UI aplikasi adalah 10px grid dengan margin 2px pada tiap sisi layar. Menurut Malewicz (2020), 10px grid adalah salah satu grid yang mudah digunakan dalam merancang suatu aplikasi. Kemudian menggunakan dasar grid berupa single coloumn.
Setelah itu, prototype dikembangkan dan dilengkapi kedalam bentuk high fidelity (pemberian warna, tipografi, ikon, dan visual lainnya).
Terdapat pula proses desain dari low fidelity (kiri) ke high fidelity (kanan):
73
Gambar 3.29. Proses Desain Pada Loading Page
Pada bagian loading page, visual yang diperlihatkan adalah logo dari aplikasi Hydroutine yang berada di tengah layar dengan warna putih dan biru sebagai warna kontras dari logo. Menggunakan warna background dari gradasi turunan warna biru yang bertujuan memberikan kesan terhidrasi.
74
Gambar 3.30. Proses Desain Pada Login Page
Pada bagian login page, mata pengguna pertama kali akan melihat logo dari aplikasi yang berada di tengah atas layar. Yang kemudian menuju kearah text field dan button pada layar. Peletakan button ditaruh dibagian bawah supaya ibu jari pengguna dapat menekannya dengan mudah. Warna button menggunakan warna oranye redup ketika pengguna belum memasukan data dirinya dan warna oranye terang ketika data diri sudah lengkap.
75
Gambar 3.31. Proses Desain Pada Halaman Berat Dan Tinggi Badan Ketika baru pertama kali mendaftarkan diri di aplikasi maka pengguna akan dibawa ke halaman pengisian berat dan tinggi badan.
Nantinya data ini yang akan menjadi penentu jangka waktu pengingat penggunannya untuk minum.
76
Gambar 3.32. Proses Desain Pada Halaman Pembukaan
Setelah mengisi data berat dan tinggi badan, pengguna akan dibawa ke halaman pembukaan. Yang dimana terdapat informasi dasar cara penggunaan aplikasi Hydroutine nantinya. Gambar telur nantinya akan menjadi peliharaan pengguna setelah menetas. Cara menentaskan dan merawat peliharaan tersebut yang akan menjadi motivasi pengguna untuk mengonsumsi air minum secara rutin setiap harinya.
77
Gambar 3.33. Proses Desain Pada Halaman Pengingat
Pada halaman pengingat, mata pengguna pertama kali akan melihat jumlah air yang perlu diminum dalam sehari. Kemudian terdapat waktu pengingat yang sudah ditentukan sebelumnya. Dan ketika waktunya tiba maka pengguna dapat menekan button minum pada bagian tengah layar.
Kemudian pengguna harus mengirim bukti proses minum dalam bentuk foto. Nantinya Artificial Intelligence (AI) pada aplikasi akan memproses data tersebut sehingga peliharaan dapat mengonsumsi makanannya.
78
Gambar 3.34. Proses Desain Pada Halaman Informasi
Pada halaman informasi, mata pengguna akan langsung tertuju ke empat button pada layar (pengertian, penyebab, gejala, dan dampak). Di dalamnya terdapat informasi dan ilustrasi tentang dehidrasi yang dapat diakses oleh pengguna.
79
Gambar 3.35. Proses Desain pada Halaman Tombol Darurat
Pada tombol darurat, mata pengguna pertama kali akan melihat tombol yang dapat ditekan oleh pengguna. Kemudian dibawahnya terdapat keterangan dalam bentuk teks dengan keterbacaan yang baik. Setelah tombol ditekan maka akan muncul peringatan dan proses pembuatan janji dengan dokter. Biaya yang diperlukan untuk membuat sebuah janji adalah Rp. 15.000 rupiah uang dalam aplikasi.
80
Gambar 3.36. Proses Desain Pada Halaman Misi
Pada halaman misi, pengguna akan langsung melihat daftar misi yang perlu dikerjakan dalam jangka waktu harian, mingguan, dan bulanan.
Setelah menyelesaikan misi nantinya pengguna akan mendapat reward dalam bentuk mata uang dalam aplikasi sebesar 1000 rupiah (harian), 5000 rupiah (mingguan), 10.000 rupiah (bulanan).
81
Gambar 3.37. Proses Desain Pada Halaman Profil
Pada halaman profil, mata pengguna pertama kali akan melihat peliharaan yang dimilikinya pada bagian bawah layar. Kemudian pengguna juga akan meilihat informasi pribadi berupa nama, peliharaan, dan saldo yang dimiliki. Pengguna dapat melakukan pengisian saldo dari bank manapun. Lalu terdapat button interaksi dengan peliharaan pada bagian bawah layar. Sedangkan pada bagian atas layar terdapat button untuk mengambil kupon belanja dan keluar dari aplikasi, serta kode QR yang dapat digunakan untuk melakukan transaksi dengan menukarkan kupon belanja yang dimiliki.
82 3.2.3.3. Wireframe Dan User Scenario
Wireframe merupakan kerangka dari sebuah aplikasi dengan alur untuk berpindah dari halaman satu ke halaman lain. Kemudian user scenario yang dibuat yaitu mengonsumsi air minum menggunakan bantuan aplikasi.
Gambar 3.38. Wireframe Alur Login
Pertama, logo Hydroutine akan muncul saat pengguna membuka aplikasi. Kemudian pengguna melakukan proses login dengan melengkapi text field berupa nomor handphone atau email dan password. Lalu menekan tombol masuk.
83 Gambar 3.39. Wireframe Alur Pengingat
Pada halaman pengingat, pengguna dapat melihat waktu yang ditentukan sebagai waktu pengingat untuk minum. Kemudian pengguna menekan tombol bubble text untuk melihat sebuah petunjuk. Ketika sudah waktunya maka pengingat akan mengirimkan notifikasi kepada pengguna untuk minum. Pengguna dapat langsung menekan tombol minum dan mengirimkan bukti proses minum kepada AI yang ada di dalam aplikasi.
Setelah selesai maka peliharaan akan mengonsumsi sesuatu dan menjadi terawat.
84 Gambar 3.40. Wireframe Alur Informasi
Skenario kedua, pengguna akan melihat informasi tentang dehidrasi yang ada di dalam aplikasi. Dengan menekan menu navigasi pojok kiri bawah. Kemudian pengguna dapat melihat pengertian, penyebab, gejala, dan dampak dari dehidrasi. Pada setiap halaman konten terdapat button tanda silang untuk membawa kembali kehalaman utama informasi.
Gambar 3.41. Wireframe Alur Tombol Darurat
85 Skenario ketiga, pengguna akan membuat janji dengan dokter untuk konsultasi. Pertama pengguna menekan tombol dengan ikon pada bagian tengah layar. Kemudian melakukan konfirmasi pada bagian peringatan. Lalu mengisi tanggal janjian dan deskripsi kondisi tubuh yang dimiliki. Saat selesai membuat janji maka akan muncul notifikasi bahwa dokter akan segera menghubungi pengguna melalui aplikasi sosial media lain (Whatsapp).
Gambar 3.42. Wireframe Alur Misi
Skenario keempat, pengguna akan melihat misi yang dapat dikerjakan dalam kurun waktu harian, mingguan, dan bulanan. Pengguna perlu menekan ikon panah ke kiri atau ke kanan untuk melihat misi lainnya.
86 Gambar 3.43. Wireframe Alur Profil
Skenario kelima, pengguna melihat halaman profil, berinteraksi dengan peliharaan, dan keluar dari aplikasi. Untuk berinteraksi dengan peliharaan, pengguna perlu menekan tombol yang ada pada bagian peliharaan di layar. Pengguna dapat berkomunikasi, berinteraksi seperti menyikat peliharaan, dan membeli sesuatu untuk peliharaan yang dimiliki.
Pengguna dapat mengumpulkan koleksi peliharaan selama menggunakan aplikasi Hydroutine. Setelah itu, jika pengguna ingin keluar dari aplikasi maka dapat menekan tombol kedua pada bagian informasi pribadi.
87 Gambar 3.44. Wireframe Alur Logout
