PERANCANGAN UI/UX APLIKASI MINDFULNESS UNTUK MAHASISWA UMUR TAHUN

(1)

PERANCANGAN UI/UX APLIKASI MINDFULNESS UNTUK MAHASISWA UMUR 18-25 TAHUN

LAPORAN TUGAS AKHIR

Jesslyn Winata

00000027422

PROGRAM STUDI DESAIN KOMUNIKASI VISUAL FAKULTAS SENI DAN DESAIN

UNIVERSITAS MULTIMEDIA NUSANTARA TANGERANG

2022

(2)

i

Perancangan UI/UX Aplikasi Mindfulness untuk Mahasiswa umur 18-25 tahun

PERANCANGAN UI/UX APLIKASI MINDFULNESS UNTUK MAHASISWA UMUR 18-25 TAHUN

LAPORAN TUGAS AKHIR

Diajukan sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Desain (S.Ds.)

Jesslyn Winata

00000027422

PROGRAM STUDI DESAIN KOMUNIKASI VISUAL FAKULTAS SENI DAN DESAIN

UNIVERSITAS MULTIMEDIA NUSANTARA TANGERANG

2022

(3)

ii

(4)

iii

Ketua Sidang

Roy Anthonius Susanto S.Sn., M.Ds E061071 / 0402038006

Penguji

Dr. Ratna Cahaya Rina Wirawan Putri, S.Sos., M.Ds.

E023899 / 0324087506 Pembimbing

Lalitya Talitha Pinasthika, M.Ds.

E034812/0308078801

Ketua Program Studi Desain Komunikasi Visual

Mohammad Rizaldi, S.T., M.Ds.

0313068301/E023907

HALAMAN PENGESAHAN

Tugas Akhir dengan judul

Perancangan UI/UX Aplikasi Mindfulness untuk Mahasiswa umur 18-25 tahun Oleh

Nama : Jesslyn Winata

NIM : 00000027422

Program Studi : Desain Komunikasi Visual Fakultas : Seni & Desain

Telah diujikan pada hari Kamis, 6 Januari 2022 Pukul 16.00 s.d 16.450 dan dinyatakan

LULUS

Dengan susunan penguji sebagai berikut.

(5)

iv

HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS

Sebagai civitas academica Universitas Multimedia Nusantara, saya yang bertanda tangan di bawah ini:

Nama : Jesslyn Winata

NIM : 00000027422

Program Studi : Desain Komunikasi Visual Fakultas : Seni & Desain

JenisKarya : *Tesis/Skripsi/Tugas Akhir (*coret yang tidak perlu) Demi pengembangan ilmu pengetahuan, menyetujui untuk memberikan kepada Universitas Multimedia Nusantara Hak Bebas Royalti Nonekslusif (Non-exclusive Royalty-Free Right) atas karya ilmiah saya yang berjudul.

Perancangan UI/UX Aplikasi Mindfulness untuk Mahasiswa umur 18-25 tahun Beserta perangkat yang ada (jika diperlukan). Dengan Hak Bebas Royalti Noneksklusif ini, Universitas Multimedia Nusantara berhak menyimpan, mengalihmediakan/mengalihformatkan, mengelola dalam bentuk pangkalan data (database), merawat, dan memublikasikan tugas akhir saya selama tetap mencantumkan nama saya sebagai penulis/pencipta dan sebagai pemilik Hak Cipta. Demikian pernyataan ini saya buat dengan sebenarnya.

Tangerang, 5 Januari 2022 Yang menyatakan,

(Jesslyn Winata)

(6)

v

KATA PENGANTAR

Puji syukur penulis panjatkan kepada Tuhan Yang Maha Esa sehingga dapat menyelesaikan proposal Tugas Akhir yang berjudul “Perancangan UI/UX Aplikasi Mindfulness untuk Mahasiswa umur 18-25 tahun”. Penulis memilih topik ini karena penulis sendiri kegelisahan yang sama pada topik yang diangkat dan memiliki ketertarikan pada meditasi mindfulness yang telah dijalani sebelumnya dan merasakan sendiri dampak yang dimiliki sangat berguna untuk pengembangan diri.

Oleh karena itu penulis juga ingin mengucapkan terima kasih kepada;

1. Dr. Ninok Leksono, selaku Rektor Universitas Multimedia Nusantara.

2. Muhammad Cahya Mulya Daulay, S.Sn., M. Ds. selaku Dekan Fakultas Seni dan Desain.

3. Mohammad Rizaldi, S.T., M.Ds. selaku Ketua Program Studi Desain Komunikasi Visual.

4. Lalitya Talitha Pinasthika, M.Ds. sebagai Pembimbing pertama yang telah memberikan bimbingan, arahan, dan motivasi atas terselesainya tugas akhir ini.

5. Keluarga saya yang telah memberikan bantuan dukungan material dan moral, sehingga penulis dapat menyelesaikan tugas akhir ini.

6. Teman teman seperjuangan yang memberi dukungan mental

Dalam penyusunan proposal Tugas Akhir ini, penulis banyak mendapatkan pembelajaran. Penulis berharap dengan menulis proposal ini, pembaca juga memperoleh manfaat pengetahuan.

Tangerang, 5 Januari 2022

(Jesslyn Winata)

(7)

vi

PERANCANGAN UI/UX APLIKASI MINDFULNESS UNTUK MAHASISWA UMUR 18-25 TAHUN

(Jesslyn Winata) ABSTRAK

Pada era digital yang dipenuhi ditraksi dari berbagai media, mindfulness adalah salah satu solusi yang dihadirkan dalam “penyakit manusia modern”.

Beberapa diantaranya ada burn out, kecemasan, stress, sulit berkonsentrasi dan fokus hingga menghambat kemajuan akademik. Praktik mindfulness telah terbukti melalui beberapa riset studi lain memiliki dampak terhadap kesehatan, performa kognitif bagi kebutuhan pelajar mahasiswa. Oleh karena itu solusi yang ditawarkan dalam permasalahan ini adalah perancangan media informasi tentang tata cara meditasi mindfulness yang informatif dan menarik berupa aplikasi pada ponsel cerdas. Dalam Perancangan ini digunakan metode penelitian hybrid kuantitatif dan kualitatif, dan metode perancangan pada user experience dari Garret (2011).

Melalui perancangan ini, didapati kesimpulan bahwa masyarakat akan memiliki minat terhadap informasi mindfulness tersebut apabila disajikan dalam media informasi yang menarik baik secara tampilan maupun kenyamanan penggunaan.

Kata kunci: distraksi digital, mindfulness, media informasi interaktif, tampilan antarmuka, aplikasi, ui/ux

(8)

vii

UI/UX DESIGN ABOUT MINDFULNESS FOR COLLEGE STUDENTS OF AGE 18-25

(Jesslyn Winata) ABSTRACT (English)

In this digital era filled with traction from various media, mindfulness is one of the solutions presented in the "disease of modern humans". Some of them have burnout, anxiety, stress, difficulty concentrating and focusing to hinder academic progress. The practice of mindfulness has been proven through several other research studies to have an impact on health, cognitive performance for the needs of students. Therefore, the solution offered in this problem is designing informative and interesting information media about mindfulness meditation procedures in the form of applications on smartphones. In this design, hybrid quantitative and qualitative research methods are used, the design method used are focused on user experience from Garret (2011). Through this design, it can be concluded that the public will have an interest in mindfulness information if it is presented in attractive information media, both in appearance and interesting use features.

Keywords digital distraction, mindfulness, interactive media information, user interface, user experience

(9)

viii

DAFTAR ISI

HALAMAN PENGESAHAN ... iii

HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS ... iv

KATA PENGANTAR ... v

ABSTRAK ... vi

ABSTRACT (English) ... vii

DAFTAR ISI ... viii

DAFTAR TABEL ... xi

DAFTAR GAMBAR ... xii

DAFTAR LAMPIRAN ... xv

BAB I PENDAHULUAN ... 1

Latar Belakang ... 1

Rumusan Masalah ... 3

Batasan Masalah ... 3

Demografis ... 3

Geografis ... 3

Psikografis ... 3

Tujuan Tugas Akhir ... 4

Manfaat Tugas Akhir ... 4

(10)

ix

BAB II TINJAUAN PUSTAKA ... 5

Desain Komunikasi Visual... 5

Unsur Desain Komunikasi Visual ... 5

Prinsip Desain Komunikasi Visual... 11

Tipografi dalam Desain Komunikasi Visual ... 13

Sistem Grid dalam Desain Komunikasi Visual... 15

User Interface ... 16

Prinsip ... 17

User Experience ... 20

Elemen ... 21

Aplikasi ... 24

Jenis ... 25

Mindfulness ... 27

BAB III METODOLOGI PENELITIAN ... 29

Metode Pengumpulan Data ... 29

Wawancara dengan Ahli ... 29

Kuisioner ... 32

Focus Group Discussion ... 36

Studi Referensi ... 38

Metode Perancangan ... 43

User Needs ... 44

Functionality and Content ... 44

Design structure and Interaction Design ... 44

Information Design ... 44

Sensory Design ... 45

(11)

x

The Elements Applied... 45

BAB IV STRATEGI & ANALISIS PERANCANGAN ... 46

Strategi Perancangan ... 46

User needs ... 46

Functionality and Content ... 50

Information Design ... 53

Design structure and Interaction Design ... 65

Sensory Design ... 68

The Elements Applied... 77

Analisis Alpha Test ... 78

Hasil Analisis Interface ... 79

Hasil Analisis UX ... 80

Hasil perbaikkan... 82

Analisis Beta Test ... 87

Analisis Desain ... 88

Analisis Beta Test ... 95

Budgeting ... 98

BAB V PENUTUP... 99

Simpulan ... 99

Saran ... 100

DAFTAR PUSTAKA ... xiii

LAMPIRAN ... xvii

(12)

xi

DAFTAR TABEL

Tabel 3.1 Analisis apilkasi Riliv... 40

Tabel 3.2 Analisis aplikasi Meditopia ... 41

Tabel 4.1 Ikon dalam perancangan ... 60

Tabel 4.2 Hasil feedback kuisioner Interface beta test ... 79

Tabel 4.3 Hasil feedback kuisioner UX beta test ... 80

Tabel 4.4 Hasil Evaluasi Beta Testing User Interface ... 96

Tabel 4.5 Hasil feedback kuisioner UX beta test ... 97

Tabel 4.6 Budgeting Perancangan Aplikasi ... 98

(13)

xii

DAFTAR GAMBAR

Gambar 2.1 Garis ... 6

Gambar 2.2 Bentuk geometris, organis dan abstrak ... 6

Gambar 2.3 Tekstur ... 7

Gambar 2.4 Kontras Sumber : Anggaraini & Nathalia (2014)... 7

Gambar 2.5 Ukuran ... 8

Gambar 2.6 Warna primer, sekunder dan tersier ... 9

Gambar 2.7 Warna Intermediate ... 9

Gambar 2.8 Warna analogus dari kuning ke biru ... 10

Gambar 2.9 Keseimbangan simetris dan asimetris ... 12

Gambar 2.10 Ritme ... 12

Gambar 2.11 Script ... 14

Gambar 2.12 Dekoratif ... 15

Gambar 2.13 Elemen UX ... 21

Gambar 2.14 Native Apps ... 25

Gambar 2.15 Web Apps ... 26

Gambar 3.1 Dokumentasi wawancara dengan Zaneti Sugiharti ... 30

Gambar 3.2 Ilustrasi CNE dan DMN ... 31

Gambar 3.3 Pie Chart 1 ... 33

Gambar 3.6 Tabel Chart ... 35

Gambar 3.7 Pie Chart X ... 36

Gambar 3.8 Dokumentasi FGD ... 37

Gambar 3.9 Wireframe aplikasi Riliv ... 40

Gambar 3.10 Wireframe aplikasi Meditopia ... 43

Gambar 4.1 Persona 1 ... 47

Gambar 4.2 Persona 2 ... 48

Gambar 4.3 User Journey map ... 50

Gambar 4.5 Big Idea ... 52

(14)

xiii

Gambar 4.6 Moodboard Sumber : Canva dan Pinterest... 54

Gambar 4.7 Skema Warna ... 55

Gambar 4.8 Pemilihan Font ... 56

Gambar 4.9 Sketsa Logo ... 57

Gambar 4.10 Digitalisasi Logo ... 58

Gambar 4.11 Referensi Style Ilustrasi ... 58

Gambar 4.12 Referensi Ilustrasi Sumber : Freepik.com ... 59

Gambar 4.13 Sketsa dan Hasil Digitalisasi Ilustrasi ... 59

Gambar 4.14 Referensi Icons Sumber : Freepik... 59

Gambar 4.15 Grid System Dari Material.io dan Contoh Penerapan nya ... 60

Gambar 4.16 Emosi dasar manusia Sumber : verywellmind.com ... 64

Gambar 4.17 Daftar buttons ... 64

Gambar 4.18 Contoh penerapan grid, dan drop shadow pada buttons ... 65

Gambar 4.19 Information Architecture ... 66

Gambar 4.20 Sketsa kasar low fidelity ... 67

Gambar 4.22 Proses High Fidelity Halaman Onboarding ... 68

Gambar 4.23 Proses High Fidelity Halaman Pertanyaan Personalisasi ... 69

Gambar 4.24 Low Fidelity dan High Fidelity Home Screen ... 70

Gambar 4.25 Low Fidelity dan High Fidelity Halaman "Mindfulness" ... 71

Gambar 4.26 Low Fidelity dan High Fidelity Halaman Kelas Live ... 72

Gambar 4.27 Low Fidelity dan High Fidelity Halaman Sub-Kategori "Relaksasi" ... 73

Gambar 4.28 Low Fidelity dan High Fidelity Halaman Renungan ... 73

Gambar 4.29 Low Fidelity dan High Fidelity Halaman Sesi Meditasi... 74

Gambar 4.30 Skenario Navigation Bar ... 75

Gambar 4.31 Skenario Menambahkan Favorit ... 75

Gambar 4.32 Skenario Untuk Mengaktifkan Notifikasi Pengingat Kelas LIVE ... 76

Gambar 4.33 High Fidelity dan Wireframe Aplikasi untuk Alpha Test ... 77

Gambar 4.34 Revisi Tampilan Home Bagian Atas. Kiri = Sebelum, Kanan = Sesudah. ... 82

Gambar 4.35 Revisi tampilan halaman utama (home) dengan flow fitur baru... 83

(15)

xiv

Gambar 4.36 Revisi halaman dan menu favorit. Kiri = sebelum, kanan = sesudah.

... 83

Gambar 4.37 Revisi halaman utama bagian pilihan Mood Emoji. Kiri = sebelum, kanan = sesudah ... 84

Gambar 4.38 Revisi halaman renungan. Kiri = sebelum, kanan = sesudah. ... 85

Gambar 4.39 Revisi dan Tambahan pada Halaman "Relieve Breathing" 1 ... 85

Gambar 4.40 Revisi Dan Tambahan Pada Halaman "Relieve Breathing" 2 ... 86

Gambar 4.41 Tambahan Fitur Countdown Timer Pada Halaman Relieve Breathing ... 86

Gambar 4.42 Penambahan Tampilan Jurnal dan Fitur Kode Keamanan ... 87

Gambar 4.43 Layout home screen aplikasi REJAK ... 89

Gambar 4.44 Card Overview Carousel... 91

Gambar 4.45 Navigation Tab Bar ... 91

Gambar 4.46 Pop Up Button dan Penerapan Figure Ground ... 93

Gambar 4.47 Halaman Mindfulness Bagian Kelas LIVE ... 94

Gambar 4.48 Revisi Halaman Renungan ... 95

(16)

xv

DAFTAR LAMPIRAN

Lampiran A Form Bimbingan ... xvii

Lampiran B Transkrip Wawanara dengan Zaneti Sugiharti... xix

Lampiran C Transkrip FGD ... xxix

Lampiran D Hasil Kuisioner Kuantitatif ... xxxvii Lampiran E Hasil Kuisioner Feedback Alpha Test ... xliii Lampiran F Hasil Kuisioner Feedback Beta Test ... l