UX Design - Case Study [Sugar Tracking].pptx

sandraekoprasetya90 6 views 36 slides Oct 28, 2025
Slide 1
Slide 1 of 36
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27
Slide 28
28
Slide 29
29
Slide 30
30
Slide 31
31
Slide 32
32
Slide 33
33
Slide 34
34
Slide 35
35
Slide 36
36

About This Presentation

UX Design - Case Study [Sugar Tracking]


Slide Content

Sugar Tracking App for Diabetic Sandra Eko Prasetya Case Study

Penjelasan Produk : Sugar tracking merupakan aplikasi yang berfokus pada pelacakan asupan gula. Ini penting untuk membantu penderita diabetes memantau dan mengatur konsumsi gula mereka secara efektif. Ringkasan Project Durasi p roject: 20 - 23 Agustus 2023. Gambaran hasil desain yang sudah jadi

Masalah : Masih jarang aplikasi yang berfokus pada pelacakan asupan gula dengan bahasa Indonesia. Ringkasan Project Tujuan : Merancang aplikasi yang relevan bagi penderita diabetes yang harus membatasi konsumsi gula mereka.

Posisi : UX Researcher dan UX Designer Ringkasan Project Tanggung Jawab : User research, membuat wireframe, dan membuat prototyping.

Empathize, Define, & Ideate User research User p ersona Problem statement User journey map Brainstorming

Ringkasan User R esearch “Saya telah melakukan survei terhadap para penderita diabetes untuk mengetahui kebiasaan, kebutuhan, dan masalah mereka ketika mengatur konsumsi gula mereka. Berdasarkan hasil survei, sebagian besar dari mereka menggunakan aplikasi yang memiliki antarmuka yang rumit atau memerlukan banyak langkah untuk memasukkan informasi, selain itu font huruf yang kecil menyebabkan penderita diabetes mungkin merasa kesulitan dan malas untuk menggunakannya secara teratur.”

User research: pain points [Antarmuka Rumit ] Antarmuka yang rumit menyebabkan penderita diabetes kesulitan untuk memasukan data ke aplikasi. [Ukuran Font Kecil] Sebagian penderita diabetes berusia manula. Font yang kecil menyebabkan mereka sulit membaca. [Tidak Intuitif] Navigasi aplikasi tidak mudah dipahami, pengguna menghadapi kesulitan dalam memahami informasi. 1 2 3

Persona: Ibu Encum Encum Umur : Pendidikan : Domisili : Status Menikah : Pekerjaan : 65 S1 Yogyakarta Cerai mati Pensiunan Guru “ Mudah-mudahan diberikan hidup yang sehat dan berkah agar bisa bermain dengan cucu ” Goals Ingin menikmati masa pensiun dan hidup sehat dengan gula darah terkontrol. Frustrations Kompleksitas pengisian data Navigasi tidak intuitif dan sulit dipahami Font size terlalu kecil sehingga sulit dibaca. Ibu Encum adalah seorang pensiunan guru dan menghabiskan waktu sehari-harinya di rumah. Beliau menderita diabetes dan ingin mengubah pola hidup menjadi lebih sehat dengan mengontrol gula darahnya. Namun aplikasi yang tersedia sangat sulit untuk digunakan. Maka dari itu beliau berharap ada aplikasi yang memenuhi kebutuhannya.

User Story : Ibu Encum

Persona: Ibu Encum Goal: Mengontrol gula darah AKTIVITAS Persiapan Aplikasi Menginput Data Tracking dan Monitoring Pengingat dan Edukasi Konsultasi Medis DETAIL AKTIVITAS A. Download aplikasi di Playstore B. Masukan alamat email atau no telepon untuk register atau login C. Membaca onboarding page D. Izinkan lokasi A. Mulai menginput data gula darahnya. B. Aplikasi juga memungkinkan Ibu Encum untuk mencatat makanan yang dikonsumsi dan aktivitas fisiknya. A. Menghasilkan laporan untuk memantau perubahan kadar gula darah. B. Melihat tren dan pola terkait dengan makanan tertentu.. A. Mengirimkan pengingat kepada pengguna untuk mengukur gula darah secara teratur dan memasukkan. B. Memberikan artikel dan saran tentang pengelolaan diabetes. A. Menyediakan fitur untuk menghubungkan pengguna dengan dokter jika dia memerlukan bantuan lebih lanjut dalam mengelola diabetesnya. PERASAAN/EMOSI PENGGUNA Senang dengan aplikasi yang baru diunduhnya. Input data gula darah masih manual sehingga agak merepotkan. Ibu Encum masih sering lupa dengan target gula darahnya. Masih kurang termotivasi dalam mengontrol kadar gula darahnya. Ketersediaan dokter dirasa kurang akurat dan lokasi yang jauh. PELUANG IMPROVISASI Login lebih mudah dengan biometric authentication. Login dengan sidik jari maupun pengenalan wajah. Alat pengukur gula darah yang dihubungkan ke aplikasi melalui Bluetooth untuk memudahkan pengisian data. Aplikasi memberikan notifikasi jika kadar gula darahnya di luar rentang target yang ditentukan sebelumnya. Aplikasi memberikan pujian dan insentif kecil untuk memotivasi dia untuk tetap berkomitmen pada perawatan yang baik. Menggunakan API yang menyediakan data tentang lokasi dokter atau rumah sakit terdekat.

Problem Statement PROBLEM STATEMENT Ibu Encum adalah seorang penderita diabetes n ama karakteristik pengguna yang membutuhkan Aplikasi yang berfokus pada pelacakan asupan gula k arena Beliau ingin mengontrol diabetesnya dengan lebih baik . alasan

Brainstorming dengan HMW Menciptakan antarmuka yang intuitif dan mudah digunakan. 1 Membuat notifikasi yang efektif dan tidak mengganggu untuk pengingat pengguna . 2 Menyediakan feedback real-time yang jelas dan informatif ketika data diinput . 3 HMW mendesain fitur untuk mentracking kadar gula darah dengan mudah. Fitur berbagi data kadar gula darah mereka dengan profesional medis atau keluarga terdekat . 4

Competitive Audit (Opsional) Aplikasi dapat dihubungkan dengan perangkat cek gula darah . 1 Pentingnya membuat flow input asupan kalori yang singkat dan jelas . 2 Notifikasi yang tidak mengganggu namun memotivasi sangat diperlukan . 3 Competitive Audit sangat diperlukan untuk lebih memahami aplikasi serupa yang saat ini sudah beredar di market. Berikut ini adalah beberapa insight yang saya dapatkan:

Goal Statement User Flow Digital w ireframes Starting the design

Goal Statement

User Flow Gambar User Flow atau link lampiran

Storyboard (Opsional) Big picture Close-up

Wireframe Kertas (Opsional) Foto sketsa wireframe pada kertas yang berisi lima versi dari halaman yang sama dan sebuah sketsa versi penyempurnaannya

Wireframe Digital Tampilkan minimal 4 halaman beserta link project-nya

Wireframe D igital [Catatan tentang tujuan dan bagaimana proses kamu mendesain wireframe ini] Penjelasan elemen dan manfaatnya untuk pengguna Masukkan wireframe pertama yang menunjukkan hasil Design Thinking yang sesuai dengan hasil riset. Penjelasan elemen dan manfaatnya untuk pengguna

Mockup Design System Pertimbangan Aksesibilitas High-fidelity prototype Mockup & Prototype

Mockup [Catatan tentang tujuan dan bagaimana proses kamu mendesain wireframe ini] Halaman yang masih dalam bentuk wireframe (lo-fi design) Halaman yang sudah dalam bentuk mockup (hi-fi design)

Mockup Mockup Halaman Pilihan Mockup Halaman Pilihan Mockup Halaman Pilihan Mockup Halaman Pilihan

Design System (Opsional) Screenshot dari design system. JIka tidak cukup silakan lampirkan link-nya.

Pertimbangan Aksesibilitas Memiliki fitur yang dapat disesuaikan dengan kebutuhan pengguna. Fitur-fitur tersebut dapat berupa pengaturan alarm, pengingat, dan notifikasi. Dengan fitur-fitur ini, pengguna dapat menyesuaikan aplikasi agar sesuai dengan gaya hidup dan kebutuhan mereka. Tampilan yang mudah dibaca dan dinavigasi, terutama bagi pengguna yang memiliki gangguan penglihatan atau motorik. Tampilan aplikasi harus menggunakan font yang besar dan jelas, serta memiliki tata letak yang sederhana dan mudah dipahami. Penggunaan dapat diakses dengan berbagai perangkat dan sistem operasi, agar dapat digunakan oleh pengguna dengan berbagai latar belakang. Aplikasi juga harus dapat diakses melalui berbagai mode, seperti mode web, mode seluler, dan mode desktop. . 1 2 3

High-fidelity prototype [Link ke high-fidelity prototype] Screenshot dari prototype dengan connections atau prototype berupa GIF

Usability Study Plan Insight Hasil Test Modifikasi Desain Berdasarkan Insight UX Research & Testing

Usability Study Plan Screenshot hasil dari usability study plan. JIka tidak cukup, silakan lampirkan link-nya.

Affinity Diagram (Opsional) Screenshot hasil dari affinity diagram. JIka tidak cukup, silakan lampirkan link-nya.

Usability study: Insight Deskripsi singkat tentang metode usability study plan yang dipilih dan jumlah partisipan yang dites. Insight Insight hasil dari tes. 1 Insight hasil dari tes. 2 Insight hasil dari tes. 3

Modifikasi Desain [Catatan tentang apa yang kamu modifikasi dan alasannya] Mockup halaman pilihan sebelum usability study Sebelum usability study Setelah usability study Mockup halaman pilihan setelah usability study

Takeaways Next steps Going forward

Takeaways Dampak: Tuliskan satu atau dua kalimat yang menunjukkan dampak dari desain yang kamu buat. Pada kasus nyatanya ini bisa berisi jumlah download atau anggota baru. Namun karena ini hanya project untuk kelas, kamu bisa memasukkan komentar positif dari pengguna. Pelajaran yang Didapat: Masukkan beberapa kalimat yang berisi pelajaran yang kamu dapat dari studi kasus ini.

Langkah selanjutnya Tuliskan beberapa beberapa kalimat tentang apa yang akan kamu lakukan selanjutnya pada project ini dan alasannya. Tuliskan beberapa beberapa kalimat tentang apa yang akan kamu lakukan selanjutnya pada project ini dan alasannya. Tuliskan beberapa beberapa kalimat tentang apa yang akan kamu lakukan selanjutnya pada project ini dan alasannya. 1 2 3

Let’s connect! Tuliskan kalimat singkat untuk mengajak berkolaborasi dan melihat karya yang lainnya. Masukkan informasi kontak Anda di sini, bisa berupa email, nomor handphone, atau website portofolio.

Terima Kasih!
Tags