Setelah merancang moodboard dan information architecture, berikutnya penulis melanjutkan ke tahapan low fidelity yang dimana bertujuan untuk memberikan gambaran kasar mengenai bagian bagian dalam website mobile. Tentunya dalam low fidelity ini masih belum ada warna yang dimasukan kedalamnya dan masih dalam bentuk wireframe. Tahapan ini bertujuan untuk melakukan tahapan awal prototype untuk mendapatkan masukan dari user mengenai tingkat keterbacaan dan apakah user dapat menangkap tujuan dari website ini. Website mobile yang dibuat oleh penulis terdiri dari homescreen dan dilanjutkan kepada bagian quiz untuk menentukan user apakah sudah terkena digital amnesia.
Pada bagian homescreen terdapat button “let’s start” untuk memulai quiz, pada halaman ini juga terdapat beberapa tulisan mengenai website apakah ini dan mengapa website ini dibuat. Pada halaman ini juga ada beberapa illustrasi yang berhubungan dengan website ini, seperti ilustrasi otak, jenis gadget seperti komputer atau handphone, atau adanya ilustrasi karakter yang akan menjadi result pada akhir quiz.
68 Gambar 3.25. Hompage Low Fidelity
Lalu berikutnya adalah halaman quiz yang diamana saat pengguna menekan tombol “let’s start” akan diarahkan kepada page awal mengenai quiz apa yang akan dilakukan dan bagaimana cara mengerjakan quiz tersebut. Dalam halaman ini juga ada instruksi untuk dapat melanjutkan ke dalam proses kuis.
Gambar 3.26. Let’s Start Page Low Fidelity
69 Kemudian setelah pengguna membaca dan mengetuk layar untuk melanjutkan, akan ada beberapa pertanyaan seputar dengan kebiasaan sehari-hari yang berhubungan dengan penggunaan hanphone. Pertanyaan yang diajukan akan berdasarkan dari kuesioner yang telah dilakukan dan pertanyaan yang didapatakn dari hasil wawancara dari para ahli.
Gambar 3.27. Beberapa Pertanyaan Dalam Website Low Fidelity Setelah selesai melakukan quiz tersebut, pengguna akan diarahkan kepada halaman result yang diamana akan ada gambar ilustrasi karakter yang berhubungan dengan hasil yang dia dapat, hasilnya akan ada 3 kemungkinan bisa sudah terkena, sedang mengalami gejala, atau belum mengalami digital amnesia.
70 Gambar 3.28. Result Low Fidelity
Pada halaman ini akan ada button untuk download, share, dan instagram, selain itu juga ada tombol pelajari lebih lanjut agar pengguna dapat mempelajari lebih lanjut mengenai digital amnesia.
Gambar 3.29. Alur Prototype Low Fidelity 3.2.6. High Fidelity
Setelah melakukan pembuatan low fidelity, penulis melanjutkan pada pembuatan high fidelity. Proses pembuatan ini dilakukan setelah melakukan alpha test pada tanggal 6 November 2020. Tahapan ini bertujuan untuk memberikan gambaran akhir dari pembuatan website mobile ini. Tentunya dalam high fidelity ini sudah memasukan warna yang telah dipilih berdasarkan moodboard dan menambahkan beberapa ilustrasi ke dalam webisite. Tahapan ini bertujuan untuk melakukan tahapan akhir untuk dapat melakukan beta test kepada user. Dalam pembuatan website mobile ini penulis menggunakan layout 4 kolom pada penataan tata letak dari konten yang akan digunakan dalam perancangan.
71 Gambar 3.30. Penerapan Layout pada Website Mobile
Pada bagian homescreen ini penulis memasukan warna biru sebagai warna yang paling dominan, sedangkan untuk warna merah di pakai pada bagian body text. Warna merah ini sekaligus menjadi salah satu daya tarik bagi user untuk membaca isi dari tulisan tersebut. Pada halaman ini juga menulis memasukan beberapa ilustrasi seperti handphone dan komputer untuk menambah kesan teknologi, selain itu juga pada bagian atas terdapat gambar ilustrasi otak yang dimana dikelilingi oleh handphone dan komputer, yang dimana memberikan kesan bahwa website ini berhubungan dengan pengaruh gadget kepada otak. Sedangkan pada bagian tulisan “Let’s Start” dibuat menjadi sebuah tombol. Pada bagian pojok kiri atas pada page ditambahkan humburger button untuk memudahkan user ketika ingin membaca informasi mengenai digital amnesia terlebih dahulu atau mencari tahu mengenai website ini.
72 Gambar 3.31 Home Page Bagian Atas High Fidelity
Pada bagian bawah page homescreen juga terdapat logo dari salah satu partner yang bekerja sama dalam penelitian ini. Bagian bawah page ini juga terdapat beberapa icon Instagram agar memudahkan user untuk mencari info lebih lanjut mengenai Merbits melewati instargram atau membagiakan website ini ke orang lain.
Sedangkan logo Merbits yang ada di bagian bawah page berfungsi untuk dapat kembali ke bagian atas halaman.
73 Gambar 3.32. Homepage Bagian Bawah High Fidelity
Lalu berikutnya adalah halaman quiz yang diamana saat pengguna menekan tombol “let’s start” akan diarahkan kepada page awal mengenai quiz apa yang akan dilakukan dan bagaimana cara mengerjakan quiz tersebut, pada bagian ini penulis menambahkan ilustrasi otak yang ditaruh pada bagian pojok bawah dan pada bagian tulisan diberikan background biru yang dibetuk seperti ombak.
74 Gambar 3.33. Let’s Start Page High Fidelity
Kemudian setelah user membaca dan mengetuk layar untuk melanjutkan, terdapat beberapa pertanyaan yang dimana pada bagian ini akan ditunjukan beberapa gambaran atau ilustrasi mengenai hal yang berhubungan dengan pertanyaan yang disampaikan. Pertanyaan yang diberikan adalah pertanyaan yang berhubungan dengan kebiasaan user saat menggunakan gadget, seperti seperti lama menggunakan handphone ataupun seberapa sering menggunakan handphone sebagai alat penyimanan, dan lain-lain.
75 Gambar 3.34. Daftar Beberapa Pertanyaan Website High Fidelity
Setelah selesai melakukan quiz tersebut, pengguna akan diarahkan kepada halaman page result yang diamana akan ada gambar ilustrasi karakter yang berhubungan dengan hasil yang dia dapat, hasilnya akan ada 3 kemungkinan yaitu sudah terkena, sedang mengalami, atau belum mengalami digital amnesia. Ilustrasi yang diberikan menggunakan gambaran karakter yang bertujuan untuk menggambarkan keadaan user saat itu. Pada bagian bawah halaman terdapat button untuk mengarahkan kepada page informasi digital amnesia atau juga user dapat kembali ke halaman utama.
Gambar 3.35. Result High Fidelity
76 3.2.7. Prototype
Setelah semua visual sudah selesai dibuat dalam bentuk high fidelity, maka dilanjutkan pada tahapan prototype yang dimana penulis menggunakan prototype ini untuk membuat ide menjadi lebih nyata dan akan lebih cepat untuk mendapatkan feedback dari pengguna. Dari hasil tahapan sebelumnya, prototype sudah bisa dilihat dan diberikan interaktivitas kedalamnya untuk pengguna atau user mencobanya seakan menggunakan website yang sudah selesai. Prototype ini dibuat menggunakan aplikasi Figma yang membantu untuk menjalankan interaktivitas dalam pembuatan prototype.
Gambar 3.36. Prototyping Figma Low Fidelity
Gambar 3.37. Prototyping Figma High Fidelity
77 3.2.8. Perancangan Website Pc
Website PC dirangan dengan terdiri dari 3 halaman webpage. Halaman tersebut adalah home, about, dan information yang deberi nama “what is digital amnesia?”.
Pertama penulis membuat alur website, karena alur dari website mobile dan PC dibedakan. Ketika di website mobile, user dapat melakukan digital amnesia quiz, sedangkan pada website PC hanya akan berisikan informasi seputar kampanye dan digital amnesia dan terdapat juga pengarahan untuk target user untuk melakukan scan barcode untuk memulai kuis secara mobile. Setelah menentukan alurnya, penulis melanjutkan ke tahapan pembuatan low fidelity untuk memberikan gambaran kasar mengenai tata letak konten dan penulisan teks.
Gambar 3.38. Low Fidelity Website PC
Setelah melakukan perancangan low-fidelity masuklah ke tahapan high fidelity yang dimana aset visual, warna dan typeface yang akan digunakan sama dengan yang dibuat dengan website mobile.
78 Gambar 3.39. High fidelity Homepage dan Layout Website PC
Dalam pembuatan high fidelity ini terdapat beberapa perubahan asset visual pada gambar otak yang dimana ditambahkan QR code. Gambar ini juga dibuat lebih besar agar dapat dilihat lebih mudah oleh user.
Gambar 3.40. Navigation Bar Website PC
Pada navigation bar berisikan beberapa menu yaitu home, about, dan information page bernama “what is digital amnesia?”. Pada setiap menu akan membuka halaman baru. Kemudian setelah selesai, penulis membuat prototype yang dimana dibuat setelah high-fidelity sudah selesai dibuat.
Gambar 3.41. High fidelity Website PC
79 3.2.9. Perancangan Instagram Feed dan Story
a. Instagram Feeds
Berikut adalah mockup atau gambaran dari Instagram feeds. Bertujuan untuk memberikan gambaran secara keseluruhan ketika visual yang telah dibuat diimplementasikan langsung ke dalam media sosial. Mockup ini dapat di akses saat icon Instagram pada bagian bawah halaman homepage ditekan.
Gambar 3.42. Instagram Feeds
Dalam Instagram feed terdapat 3 postingan mengenai quiz yang ada di dalam website mobile Merbits. Tiap postingan dalam Instagram dirancang dengan menggunakan visual dari quiz yang ada di dalam website. Desain post Instagram memiliki elemen dan konten yang sejenis dengan website.
80 Gambar 3.43. Penerapan Layout pada Instagram Post
Pembuatan desain post menggunakan tipe modular grid, agar penempatan isi konten dapat lebih flaksibel. Dalam setiap postingan akan adan link pada bagian deskripsi yang dapat mempermudahkan user untuk mengakses website PC ataupun mobile. Postingan ini bertujuan memberikan pertanyaan yang membuat orang menjadi bertanya tanya dan membuat ingin mencari tahu lebih lanjut dan mencoba untuk mengakses website.
Gambar 3.44. Desain Seluruh Postingan Intagram
81 b. Instagram Story
Berikut adalah mockup atau gambaran dari Instagram Story. Bertujuan untuk memberikan gambaran secara keseluruhan ketika visual yang telah dibuat di implementasikan langsung ke dalam media sosial. Visual ini didapat ketika user telah melakukan tes dan menekan icon Instagram.
Gambar 3.45. Mockup Instagram Story
Instagram story dibentuk dari hasil kuis digital amnesia yang dimainkan oleh target user. Target user dapat mengunduh story dan menyebarkannya ke sosial media mereka sendiri sebagai salah satu bentuk dari keikutsertaan kampanye. Dalam desain story, terdapat tambahan logo Merbits dan sponsor, karena merupakan afiliasi dari kampanye.
Gambar 3.46. Desain Instagram Story
