Slides for UI/UX Study Jam #2 GDSC UPI

1. UX Design Process
Muhammad Fachri
@mittnavneraere
with Design Thinking

2. Metode Design Thinking
Overview
Kamu familiar kan sama istilah metode? Metode itu cara
yang ditempuh untuk mencapai tujuan tertentu. Kalo
dalam penelitian, kita mengenal yang namanya metode
kualitatif dan kuantitatif. Dalam desain produk, ada
metodenya tersendiri. Yang disebut Design Thinking.

3. Lengkapnya, design thinking adalah serangkaian
proses kognitif, strategis, dan praktis dalam desain
suatu produk. Digunakan untuk memecahkan
masalah dan menciptakan solusi inovatif dengan
memahami pengguna dan kebutuhannya.
Apa itu Design Thinking?

4. Why it is important
Penerapan design thinking memiliki beberapa kegunaan, yaitu:
1. Memahami kebutuhan pengguna.
2. Menghasilkan produk yang indah dipandang dan mudah digunakan.
3. Menghasilkan produk yang dapat menjadi solusi permasalahan
manusia.
4. Mengurangi resiko penolakan produk oleh pengguna.
Kegunaan Design Thinking

5. Lima Fase dalam Design Thinking
Kita bahas satu-persatu, yuk! :)

6. Fase pertama dari proses design thinking adalah memahami
permasalahan yang ada.
Cara memahami permasalahan bisa melalui observasi (mengamati
secara langsung) atau melalui wawancara secara one-on-one dengan
user untuk memahami kesan mereka terhadap suatu produk.
1. Empathize
Research Your Users' Needs

7. UX research adalah metode ilmiah yang digunakan untuk
memahami pikiran, perasaan, dan perilaku pengguna ketika
menggunakan suatu produk atau layanan.
Tanpa riset, kita akan mendesain berdasarkan asumsi. Yang
namanya asumsi pasti akan menimbulkan bias.
1. Empathize
UX Research

8. 1. Empathize
UX Research Steps

9. 1. Empathize
UX Research Methods

10. • Setelah memperoleh data mengenai kesan dan kebutuhan user melalui
observasi maupun wawancara, selanjutnya seorang desainer UI/UX
melakukan proses define (memilah data sehingga dapat dipetakan
inti permasalahan).
• Pemetaan inti permasalahan harus dilakukan dari sudut pandang user.
2. Define
State Your Users' Needs and Problems

11. • POV adalah pandangan yang memberikan panduan untuk berfokus
pada karakter spesifik, temuan spesifik, dan kebutuhan user
secara spesifik.
• POV ini berguna sebagai panduan utama selama proses desain. POV juga
bisa membantu kita untuk lebih fokus melakukan ideasi dan menyelesaikan
masalah user.
2. Define
Point of View (POV)

12. Point of View (POV)

13. • User persona adalah karakter fiksi atau aktual, yang kita buat
berdasarkan penelitian untuk mewakili berbagai jenis pengguna
yang menggunakan layanan, produk, situs, atau merek.
• User Persona akan membantu kita dalam memahami tujuan user
menggunakan produk, sekaligus memberikan gambaran bagaimana
kemungkinan perilaku user ketika menggunakan suatu produk atau
layanan.
2. Define
User Persona

14. User Persona

15. • User journey map adalah gambaran tahap-tahap yang mendeskripsikan
interaksi user dengan layanan atau produk tertentu. Sederhananya, user
journey map adalah visualisasi dari proses yang dilalui seorang user untuk
mencapai tujuannya.
• Mendemonstrasikan cara pengguna berinteraksi dengan produk, website,
atau layanan pada saat ini maupun dimasa depan.
2. Define
User Journey Map

16. User Journey
Map

17. 3. Ideate
• Pada fase define, kita menyortir data untuk memetakan inti permasalahan.
Setelah mengetahui inti permasalahan, kita siap menciptakan sesuatu
untuk menjawab permasalahan tersebut.
• Tapi, sebelum itu, kita harus menemukan ide produk seperti apa yang ingin
dikembangkan untuk menjawab permasalahan. Proses menemukan ide
inilah yang disebut ideate atau ideation.
Challenge Assumptions and Create Ideas

18. 3. Ideate
• Information Architecture adalah gambaran suatu model atau konsep
informasi yang digunakan dalam aktivitas-aktivitas yang membutuhkan
detail eksplisit dari suatu sistem yang kompleks.
• Information Architecture berfokus pada pengorganisasian, penataan,
dan pelabelan konten dengan cara yang efektif. Tujuannya adalah untuk
membantu pengguna menemukan informasi yang akurat.
Information Architecture

19. Information Architecture

20. 3. Ideate
• Kalo kita coba pahami arti katanya, flow bisa diartikan sebagai alur, dan
chart adalah bagan atau diagram. Sehingga, flowchart secara harfiah
adalah diagram alur. Secara sederhana, flowchart bisa kita pahami sebagai
diagram yang menggambarkan alur dari suatu proses tertentu.
• Umumnya, flowchart terdiri dari beragam simbol yang berguna untuk
menjelaskan urutan aktivitas secara lengkap.
User Flow/Flow Chart

21. Simbol Terminator (Start/End Point)
Simbol ini digunakan untuk menandakan
dimulainya sebuah proses (Start Point)
hingga proses tersebut selesai (End Point).
User Flow/Flow Chart
Simbol Process
Simbol ini menunjukkan sebuah proses
dari kegiatan atau aktivitas tertentu yang
dilakukan oleh user.

22. Simbol Flow (Arus)
Simbol tanda panah ini digunakan sebagai
penghubung simbol satu ke simbol lainnya.
Juga sebagai penanda alur prosesnya.
User Flow/Flow Chart
Simbol Decision (Keputusan)
Simbol ini digunakan ketika ada proses
yang membutuhkan keputusan sesuai
dengan kondisi yang dialami user.

23. 3. Ideate
• Wireframe itu sendiri merupakan sebuah kerangka untuk menata suatu
item di laman website atau aplikasi.
• Nah, untuk menyusun wireframes ini, ada empat langkah.
Wireframe
Aspect Ratio Navigasi Elemen Besar Detail

24. Wireframe

25. 4. Prototype
• Prototype dalam Bahasa Indonesia disebut sebagai purwa rupa.
• Ia merupakan bentuk draft dari produk yang bisa ditunjukkan kepada user ataupun
klien, agar mereka bisa merasakan dan melakukan eksplorasi konsep fitur dari
produk yang kita buat.
• Berbeda dengan wireframe dan mockup, prototype bentuknya simulasi. Ia bisa
direspon dan memungkinkan seseorang untuk merasakan langsung bagaimana
rasanya menggunakan produk ini.
Start to Create Solutions

26. 4. Prototype
• Low-fidelity prototype merupakan prototipe yang mempunyai tingkat presisi
ataupun tingkat detail yang rendah.
• Ini merupakan cara cepat untuk membuat visualisasi dari konsep produk.
• Jenis prototipe ini hanya berfokus pada pengecekan fungsi dan juga interaksi antar
screen.
Low Fidelity Prototype

27. Low Fidelity Prototype

28. 4. Prototype
• Selain berfokus untuk menjelaskan interaksi antar tampilan, high-fidelity
prototype juga mengedepankan tampilan visual dari interface design
untuk setiap konten yang ada di dalam produk.
• High-fidelity prototype adalah desain yang sudah melalui proses coding sederhana,
sehingga fitur-fitur di dalamnya bisa dicoba (clickable) oleh user ketika melakukan
evaluasi.
High Fidelity Prototype

29. High Fidelity Prototype

30. 1) Adobe XD
2) Sketch
3) Figma
5) InVision
6) Axure
7) Proto.io
8) Kertas dan pulpen
Prototyping Tools

31. 5. Test
Try Your Solutions Out
• Fase ini adalah tahap percobaan yang tujuannya untuk mengidentifikasi solusi
terbaik. Desainer atau evaluator secara ketat menguji produk lengkap
menggunakan solusi terbaik yang ditemukan selama fase pembuatan prototipe.
• Aktivitas kunci pada fase ini adalah menguji untuk belajar: menyempurnakan ide
dengan mengumpulkan umpan balik (feedback) dan bereksperimen ke depan.

32. 5. Test
Usability Testing
• Usability testing atau pengujian kegunaan adalah proses pengujian berbagai bagian
situs web atau aplikasi oleh pengguna.
• Tujuannya, menemukan cara paling baik dan efektif untuk pengguna
dalam menyelesaikan suatu aktivitas berdasarkan feedback secara langsung
dari pengguna dengan berdasarkan pengalaman yang langsung dan nyata

33. 5. Test
Usability Testing
• Proses ini juga dikenal sebagai UX testing atau pengujian pengalaman pengguna.
Sehingga, ukuran seberapa “berguna” sebuah web atau aplikasi ditentukan dari
percobaan pengguna mengakses produk tersebut.
• Pengguna diminta mengamati dan memakai produk, sekaligus memberikan
pendapat mereka selama proses berlangsung.

34. 5. Test
Usability Testing
• Usability testing pada umumnya berjalan seperti ini:
Prototipe atau produk yang sudah berfungsi ditampilkan kepada pengguna.
Kemudian, mereka diberikan skenario dan diminta untuk melakukan sejumlah
aktivitas atau tugas terkait skenario tersebut.

35. 1)Guerilla Testing
2)Lab Usability Testing
3)A/B Testing
4)Heat Mapping
5)Card Sorting
6)Session Recording
7)First Click Testing
8)Tree Testing
9)Eye Tracking
10)Phone or Remote Review
Methods Tools

36. Takeaway
1. Memilih satu dari 3 kasus yang telah disediakan
2. Merencanakan sebuah produk mobile terkait kasus yang
dipilih.
3. Membuat user persona dari salah satu pelanggan
produk.
4. Membuat user journey map secara umum dari
pengalaman menggunakan produk.
5. Membuat Information Architecture dan User flow dari
satu alur pemakaian produk.

37. Cases
1. Coffee shop kecil yang mulai memiliki banyak pelanggan dan
antrian panjang.
2. Rental mobil yang perlu menginformasikan jenis - jenis mobil,
informasi terkait, availability
kepada pelanggan dan merancang sistem pick-up dan drop-off
melalui aplikasinya.
3. Toko kue yang mulai memiliki pelanggan yang malas keluar
rumah dan menginginkan
delivery.

38. Deliverables
Submit here : https://forms.gle/hS2WoG4uJiTDNMrp9
• Takeaway disajikan dalam bentuk deck presentasi via
Google Slides (Hasil pengerjaan + Link ke tools)
• Upload ke folder Google Drive masing-masing
• Submit link Google Drive pada form yang disediakan
• Deadline 1 pekan (s.d. 14/01/2023)

39. Thank you.