michelle mielru's profile

GoodLife The Accessible Mental Health App - Case Study

Hai! Perkenalkan nama saya Michelle. Saya merupakan pelajar UI/UX Research and Design Bootcamp di BINAR Academy.

GoodLife adalah sebuah aplikasi dan ide dari Carolina, dan dipilih sebagai proyek kolaborasi antara tim UI/UX Research & Design dan tim Product Management BINAR Academy untuk dikembangkan sebagai tugas akhir sebelum lulus dari BINAR Academy.

☘️ The GoodLuck Team️
Tim ini terdiri dari 6 member:

UI/UX (Wave 29)
Carolina AnastasiaUX Researcher (user interview, usability testing)
Firdaus Suminar Adi — UI Designer (user flow and lo-fi)
Michelle UI Designer (hi-fi and prototype)


🎯 Design Objective
Membuat high-fidelity prototype yang siap untuk digunakan pada tahap usability testing.
🏋🏻 My Role
User Interface Design, Prototyping
⏳ Timeline
💭 Background

Kesehatan mental merupakan hal yang sangat penting bagi kehidupan manusia. Sayangnya saat ini kesadaran akan pentingnya kesehatan mental di Indonesia masih kurang. Bahkan ada mindset bahwa kesehatan mental adalah sesuatu yang tabu dan malu untuk didiskusikan.

Berdasarkan data yang diterbitkan Kementerian Kesehatan dalam Riset Kesehatan Dasar (Rikerdas) 2018, dinyatakan bahwa lebih dari 19 juta penduduk berusia di atas 15 tahun mengalami gangguan mental emosional. Selain itu, 12 juta penduduk yang berusia di atas 15 tahun diketahui mengalami depresi.

Tidak dipungkiri bahwa pandemi Covid-19 telah membawa sejumlah perubahan besar dalam kehidupan manusia, salah satunya pada aspek kesehatan mental. Banyaknya perusahaan yang gulung tikar dan menyebabkan PHK massal sehingga banyak orang yang kehilangan pekerjaan di situasi pandemi menjadi titik awal terjadinya gangguan kesehatan mental.
👨‍🏫 Problem
How to help the user understand and be aware of mental health?
🎯 Goals
Media yang mudah diakses saat membutuhkan konseling tentang kesehatan mental serta tempat untuk menyalurkan perasaan dan emosionalnya.
📝 Methodology
Metode dalam pengerjaan case study ini adalah Design Thinking Process, yang terdiri dari 5 tahapan yaitu Empathise, Define, Ideate, Prototype dan Test.
Stage 1: Emphatise
Tahap ini telah dilaksanakan oleh Carolina. Ia melakukan user research dengan metode user interview terhadap orang berusia produktif yang menjalani kegiatan rutin yang tetap sehari-hari. Hasilnya bisa dibaca di [artikel ini]. Saya hanya akan menampilkan beberapa kesimpulan dari apa yang telah didapatkan oleh Carolina.
💬 Affinity Mapping
Stage 2: Define
Tahap ini pun telah dilaksanakan oleh Carolina dan bisa dibaca di [artikel ini].
🧍🏻 User Persona
🙋‍♀️ How-Might-We
Stage 3: Develop (Ideate)
Dari permasalahan ini, Carolina mempunyai ide untuk membuat sebuah aplikasi dengan nama GoodLife.

GoodLife adalah sebuah aplikasi berbasis mobile application yang menyediakan layanan untuk membantu user dalam mendapatkan informasi seputar kesehatan mental dengan kredibilitas yang terjamin serta membantu user untuk mendapatkan konsultasi kesehatan mental.

GoodLife hadir sesuai dengan artinya yaitu menuju hidup yang lebih baik dan mengajak masyarakat terutama user untuk “aware” terhadap kesehatan mental mereka.
GoodLife juga hadir sebagai jawaban dari permasalahan yang ada ketika user cukup kebingungan harus atau ingin bercerita atau berkonsultasi dengan psikiater professional.
GoodLife memiliki 3 fitur utama, yaitu Consult, Journals, dan News.

- Consult adalah layanan konsultasi user dengan psikiater professional, di mana user bisa memilih psikiater dan jadwal psikiater tersebut serta dapat melihat tarif dan melakukan booking konsultasi.

- Journals adalah fitur bagi user untuk melakukan pencatatan teks atau audio sebagai sarana untuk menyalurkan uneq-uneq di hati dan pikiran user.

- Good News Life, atau disingkat News, adalah fitur di mana user bisa membaca artikel dan berita terpercaya seputar kesehatan mental.

Carolina telah membuat desain untuk ketiga fitur tersebut, namun untuk fitur Consult, user baru hanya bisa booking dan belum bisa checkout dan bayar.

Oleh karena itu, pada design sprint yang dilakukan secara kolaborasi bersama tim PM, mereka memutuskan untuk mengembangkan fitur “payment” untuk menyempurnakan fitur Consult sehingga aplikasi ini mencapai tahap minimal viable product (MVP).

🏃‍♂️ User Flow & 🔨 Low-Fidelity
Terkait user flow dan low-fidelity, kedua proses ini dilaksanakan oleh Firdaus yang bisa dicek pada [artikelnya di sini].
Stage 4: Deliver (Prototype)
⚡ High-Fidelity Mockup
Di tahap ini, selain saya mendesain fitur “payment” yang baru, saya juga melakukan redesain GoodLife yang sebelumnya didesain oleh Carolina.
Stage 5: Test
Tahap ini dilakukan oleh Carolina selaku UX Researcher dan bisa dibaca selengkapnya di [artikelnya].

UT dilakukan untuk memvalidasi apakah solusi (aplikasi GoodLife) yang dibuat sudah sesuai dengan kebutuhan yang diperlukan user atau tidak, serta mengamati dan mengetahui interaksi pengguna dengan aplikasi.

Target partisipan yang dipilih untuk mengikuti proses UT adalah:

- Orang yang tidak merasa aman dan nyaman untuk terbuka bercerita terhadap orang lain jika tidak mengenal dekat.
- Orang yang kesulitan untuk menentukan dan menemukan konsultasi mudah serta cocok dengan kebutuhannya.
- Orang yang bekerja dan berusia produktif kisaran umur 23–27 tahun yang memiliki rutinitas tetap / monoton dan berdomisili di ibukota Jakarta.
- Jumlah partisipan sebanyak 4 orang.

Metode yang digunakan dalam UT ini adalah moderated testing, menggunakan platform Maze dan Zoom Meeting.

Stage 6: Iterasi
Berdasarkan feedback dari usability testing, kami akan mendapati bahwa:
- CTA button kurang kontras sehingga sulit untuk dibaca oleh user.
- Tampilan warna pada aplikasi perlu dikembangkan / diperbaiki karena kurang terlihat jelas dan terlihat menyatu dengan warna latar belakang (background).

Selain itu, saya juga melakukan beberapa penyesuaian ukuran tipografi karena saya mendapati tulisan yang digunakan dengan base 12 pt terlalu kecil dan tipis dan sulit dibaca di layar.

Dan berikut adalah desain final dari hasil iterasi.
Beberapa hal yang saya perbaiki di desain adalah:
- Penggunaan warna primer (warna button) yang lebih kontras dan telah lulus melewati contrast ratio.
- Menggunakan ukuran tipografi dengan base 14.22 pt.
✨ Before Vs. After
👉 Prototype
Berikut adalah link ke prototype yang bisa dicoba: [GoodLife Figma Prototype]
🎨 Design Library
Berikut adalah design library yang terakhir dan telah mengalami update setelah desain iterasi.
GoodLife menggunakan warna biru dan kuning sebagai warna utama. Biru diasosiasikan dengan ketenangan dan kedamaian. Sedangkan warna kuning menunjukkan optimisme, keceriaan, dan energi. Dengan menggunakan kedua warna tersebut, diharapkan GoodLife bisa memberikan kesan yang nyaman digunakan bagi user.
Credits
- Gambar ilustrasi menggunakan Storyset by Freepik.
- Icons menggunakan Google Material Symbols.
🐳 Restropective
Dari kolaborasi design sprint ini, kelompok kami melakukan refleksi:
- Membagi dan me-manage waktu dengan lebih baik lagi di challenge/sprint selanjutnya.
- Komunikasi dan kolaborasi yang lebih baik antar-anggota tim.
- Mengambil keputusan based on data.
- Melakukan update progres kegiatan secara berkala dalam tim.

Bagi saya pribadi, di case study ini saya belajar:
- Melakukan desain dengan efisiensi dan efektif.
- Pentingnya untuk menggunakan warna button yang kontras (yang tentunya lulus contrast ratio).
- Menggunakan ukuran tipografi dengan base minimal 14 pt untuk kenyamanan user dan untuk tingkat keterbacaan yang baik.
🎁 And… That’s a wrap!
Terima kasih juga kepada teman-teman satu tim dan fasilitator dari tim BINAR Academy, yaitu Mas Riyadh dan Mba Diana.

Akhir kata, case study ini dibuat hanya untuk bahan pembelajaran dan masih banyak kekurangan pada teknik desain dan design library yang saya buat. Semoga case study ini bisa berguna bagi teman-teman yang membacanya. Adios!
This case study is also published at Medium!
👋Let's connect
GoodLife The Accessible Mental Health App - Case Study
Published:

Owner

GoodLife The Accessible Mental Health App - Case Study

Published: