Berdasarkan requirement, workflow, flowchart, struktur database dan desain prototipe yang ada, direalisasikanlah tampilan tersebut ke dalam bentuk aplikasi berbasis Android.
Gambar 3.7 Tampilan Halaman Login
Gambar 3.7 merupakan tampilan ketika user membuka aplikasi pertama kali. Untuk menggunakan aplikasi, user harus memiliki akun. Jika sudah memiliki akun, user diminta untuk mengisi email dan password.
Gambar 3.8 Tampilan Halaman Sign up
Gambar 3.8 merupakan tampilan ketika user menekan tab Sign up pada halaman Login. Jika user belum memiliki akun, user diminta untuk membuat akun dengan cara mengisi username, email dan password.
Gambar 3.9 Tampilan Langkah-Langkah Login Menggunakan Akun Google
Gambar 3.9 merupakan tampilan ketika user menekan logo Google pada bagian bawah halaman Login. Halaman akan berpindah menuju halaman Login Google, user diminta untuk mengisi email dan password akun Google. Kemudian halaman kembali ke aplikasi dan user diminta untuk mengisi username.
Gambar 3.10 Tampilan Halaman Forgot Password
mengisi email akun user. Kemudian user akan mendapatkan email (Gambar 3.11) yang berisi tautan untuk membuat password baru.
E. Halaman Utama
Gambar 3.12 Tampilan Halaman Utama
Gambar 3.12 merupakan tampilan utama ketika user telah berhasil melakukan Login. Pada halaman ini, banyak menu atau fitur yang tersedia namun
F. Halaman Quizzes
Gambar 3.13 Tampilan Halaman Quizzes
Gambar 3.13 merupakan tampilan ketika user menekan menu Quizzes. Terdapat dua kategori kuis yaitu Energy Tension Quiz dan Peak State Ready Quiz.
Gambar 3.14 Tampilan Halaman Introduksi Energy Tension Quiz
Gambar 3.14 merupakan tampilan ketika user menekan menu Energy Tension Quiz. Halaman akan menampilkan penjelasan tentang Energy Tension Quiz.
Gambar 3.15 Tampilan Halaman Energy Tension Quiz
Gambar 3.15 merupakan tampilan halaman utama Energy Tension Quiz. Pada halaman ini terdapat sepuluh pertanyaan dan empat pilihan jawaban yang tersedia. User diminta untuk menjawab pertanyaan dengan jawaban yang paling sesuai dengan diri user.
Gambar 3.16 Tampilan Halaman Hasil Energy Tension Quiz
Gambar 3.16 merupakan tampilan halaman hasil dari Energy Tension Quiz. Pada halaman ini ditampilkan tingkat tensi dan energi yang merupakan hasil dari Energy Tension Quiz yang telah diselesaikan oleh user. Terdapat dua pilihan tombol yaitu untuk menuju halaman rekomendasi atau kembali ke halaman Quizzes.
Gambar 3.17 Tampilan Halaman Rekomendasi Energy Tension Quiz
Gambar 3.17 merupakan tampilan halaman rekomendasi dari Energy Tension Quiz. Pada halaman ini ditampilkan beberapa hal yang direkomendasikan untuk user berdasarkan hasil kuis yang telah dikerjakan.
Gambar 3.18 Tampilan Halaman Introduksi Peak State Ready Quiz
Gambar 3.18 merupakan tampilan ketika user menekan menu Peak State Ready Quiz. Halaman akan menampilkan penjelasan tentang Peak State Ready Quiz.
Gambar 3.19 Tampilan Halaman Peak State Ready Quiz
Gambar 3.19 merupakan tampilan halaman utama Peak State Ready Quiz. Pada halaman ini terdapat sepuluh pertanyaan dan lima pilihan jawaban yang tersedia. User diminta untuk menjawab pertanyaan dengan jawaban yang paling sesuai dengan diri user.
Gambar 3.20 Tampilan Halaman Hasil Peak State Ready Quiz
Gambar 3.20 merupakan tampilan halaman hasil dari Peak State Ready Quiz. Pada halaman ini ditampilkan tingkat kesiapan yang merupakan hasil dari Peak State Ready Quiz yang telah diselesaikan oleh user. Terdapat dua pilihan tombol yaitu untuk melihat halaman rekomendasi atau kembali ke halaman Quizzes.
Gambar 3.21 Tampilan Halaman Rekomendasi Peak State Ready Quiz
Gambar 3.21 merupakan tampilan halaman rekomendasi dari Peak State Ready Quiz. Pada halaman ini ditampilkan beberapa hal yang direkomendasikan untuk user berdasarkan hasil kuis yang telah dikerjakan.
Gambar 3.22 Tampilan Halaman Visualization
Gambar 3.22 merupakan tampilan ketika user menekan menu Visualization pada halaman utama aplikasi. User dapat menekan tombol “Let’s Start” untuk memulai proses Visualization.
Gambar 3.23 Tampilan Halaman Introduksi Visualization
Gambar 3.23 merupakan halaman pendahuluan sebelum melakukan proses Visualization.
Gambar 3.24 Tampilan Halaman Kondisi dan Lingkungan Visualization
Gambar 3.24 merupakan halaman yang digunakan untuk mengisi kondisi apa yang ingin user visualisasikan dan bagaimana lingkungan dari kondisi tersebut.
Gambar 3.25 Tampilan Halaman Kondisi Pendukung Visualization
Gambar 3.25 merupakan halaman yang digunakan untuk mengisi kondisi-kondisi pendukung guna memperkuat memori sehingga dapat membantu proses
Gambar 3.26 Tampilan Halaman Review Semua Proses Visualization
Gambar 3.26 merupakan halaman yang menampilkan semua entri Visualization yang telah dibuat oleh user. Sejauh ini, user hanya dapat melakukan entri Visualization sebanyak tiga kali. User dapat melihat rincian proses yang telah dilakukan dengan memilih entri yang diinginkan. Apabila user ingin melakukan proses Visualization baru, user dapat memilih tombol “New Entry”. User juga dapat menghapus entri yang telah dibuat.
Gambar 3.27 Tampilan Halaman Review Visualization
Gambar 3.27 merupakan halaman yang menampilkan detail dari salah satu entri proses Visualization yang telah dibuat.
Gambar 3.28 Tampilan Halaman Anchoring
Gambar 3.28 merupakan tampilan ketika user menekan menu Anchoring pada halaman utama aplikasi. User dapat menekan tombol “Let’s Start” untuk memulai proses Anchoring.
Gambar 3.29 Tampilan Halaman Emosi Anchoring
Gambar 3.29 merupakan tampilan untuk menambahkan emosi ke list. User juga dapat menghapus emosi pada list. Lalu pilih emosi yang diinginkan untuk melakukan proses Anchoring.
Gambar 3.30 Tampilan Halaman Memori Anchoring
Gambar 3.30 merupakan tampilan untuk mengisi memori apa yang dapat membantu proses Anchoring. User juga dapat diminta untuk mengisi detail dari memori tersebut.
Gambar 3.31 Tampilan Halaman Proses Anchoring
Gambar 3.31 merupakan tampilan saat proses Anchoring berlangsung. Proses dapat berlangsung selama lima sampai lima belas detik.
Gambar 3.32 Tampilan Halaman Review Semua Proses Anchoring
Gambar 3.32 merupakan halaman yang menampilkan semua entri Anchoring yang telah dibuat oleh user. Sejauh ini, user hanya dapat melakukan entri Anchoring sebanyak tiga kali. User dapat melihat rincian proses yang telah dilakukan dengan memilih entri yang diinginkan. Apabila user ingin melakukan proses Anchoring baru, user dapat memilih tombol “New Entry”. User juga dapat menghapus entri yang telah dibuat.
Gambar 3.33 Tampilan Halaman Review Anchoring
Gambar 3.33 merupakan halaman yang menampilkan detail dari salah satu entri proses Anchoring yang telah dibuat.
Gambar 3.34 Tampilan Halaman Values & Goals
Gambar 3.34 merupakan tampilan ketika user menekan menu Values & Goals pada halaman utama aplikasi. User dapat menekan tombol “Let’s Start” untuk mulai menggunakan fitur Values & Goals.
Gambar 3.35 Tampilan Halaman Kategori dan Statement pada Values & Goals
Gambar 3.35 merupakan halaman yang menampilkan seluruh kategori goal yang telah disediakan. Setelah memilih kategori, user diminta untuk mengisi statement yang ingin dilakukan.
Gambar 3.36 Tampilan Halaman Konteks Detail pada Values & Goals
Pada halaman ini, user dapat memilih foto, mengisi beberapa goal dan menentukan batas waktu dari setiap goal.
Gambar 3.37 Tampilan Pilih Foto Untuk Konteks Detail pada Values & Goals
User dapat memilih foto melalui galeri handphone atau melalui Unsplash. Unsplash merupakan salah satu platform yang dihubungkan ke aplikasi untuk membantu user dalam mencari foto sesuai yang diinginkan.
Gambar 3.38 Tampilan Membuat Goal Beserta Batas Waktunya Untuk Konteks Detail pada Values & Goals
User dapat mengisi lebih dari satu goal dan menentukan batas waktu untuk setiap goal dengan menggunakan fitur kalender yang telah disediakan. Sampai saat ini, user hanya dapat mengisi tiga goal.
Gambar 3.39 Tampilan Halaman Review Semua Values & Goals
Pada halaman ini akan ditampilkan seluruh entri dengan berbagai kategori yang telah dibuat oleh user. User dapat membuat entri baru dengan menekan tombol “+” di kanan atas halaman. User juga dapat melihat detail dari setiap entri dengan cara memilih entri yang diinginkan.
Gambar 3.40 Tampilan Halaman Review Values & Goals
Pada halaman ini akan ditampilkan seluruh detail dari salah satu entri Values & Goals yang telah dibuat. Apabila user telah menyelesaikan salah satu goal, status goal dapat diubah menjadi “Complete” dengan cara mencentang goal tersebut dan menekan tombol “Complete”.
Gambar 3.41 Tampilan Halaman Review Values & Goals
Gambar 3.41 merupakan tampilan ketika user menekan menu Journal pada halaman utama aplikasi. Halaman ini menampilkan catatan harian dengan lima kategori yaitu aksi kebaikan, bersyukur, kata penyemangat, pencapaian, dan area
