Interface dan experience adalah dua hal yang berbeda namun saling melengkapi. UX merupakan pengalaman pengguna secara keseluruhan, sedangkan UI adalah bagian yang dapat di lihat dan di sentuh pengguna. Dalam kasus kopi, experience adalah proses memilih, memesan, dan menikmati kopi, sementara interface adalah aplikasi atau menu yang digunakan untuk memesan kopi.

3. UX/UI Design

4. Apa sih bedanya UX/UI?

7. Interface dan experience adalah dua hal yang
berbeda namun selalu bersama

8. Question
UX dan UI dalam kasus kopi: coba bedakan menurut pendapat kalian yang
mana seharusnya sebuah interface dan sebuah experience?
A B

10. "Design process adalah bekal utama yang harus
dipahami oleh seorang designer dan
non-designer"

13. Dicoding design process
Exploratory Prototyping Testing
Building empathize
and reflect what user
need in the real world
Discover ideas and
articulate user need by
craft a best possible
ideas
Learn what we've
created and uncover
problems from our
solution

14. Dicoding design process
Building empathize
Mencari masalah
user di dunia nyata
Define Problem
Mempelajari dan
mencari main
insight
Ideate solution
Mencari solusi yang
paling feasible dan
tepat untuk user

15. Dicoding design process
Build prototype
Proses design yang
paling dinantikan
Testing
Validasi solusi apakah
solusi kita sudah
membantu users

16. Dalam mendesain sebuah aplikasi atau website hindari
langsung membuat sebuah prototype, sebaiknya kita cari
tahu dulu masalah yang sebenarnya users alami
Exploratory

17. Mantra Utama
Goals
Apa tujuan utama
calon pengguna
kita
Needs
Apa yang sebenarnya
paling mereka
butuhkan saat ini
Context
Context of use: users
pakai product kita dalam
keadaan apa?
End to End
Bagaimana users
berinteraksi product
kita dari awal sampai
akhir

18. Exploratory
Define Problem
Saya ingin membuat sebuah
aplikasi untuk pesepeda

19. Goals Needs
Context End to End
Cari tahu masalah users
dan mengartikulasi
kebutuhan users

20. Exploratory
Define Problem
Cara sederhana mencari tahu
masalah users
- Melakukan user survey
- Interview

21. Goals Needs
Context End to End
Analisa masalah user

22. Exploratory
Hasil temuan/findings
Setelah dilakukan survey dan interview
ternyata ditemukan bahwa

23. Exploratory
Masalah Users
- Kadang users merasa malas untuk
bersepeda karena tidak ada teman
bersepeda
- User tidak punya tujuan kemana akan
bersepeda
- Users belum tahu bagaimana tips
bersepeda yang seru
Reframe Problem
- User perlu app yang membuat
mereka jadi rajin bersepeda
- Users ingin melihat jarak tempuh
sepeda mereka dan menemukan
teman terdekat untuk bersepeda
- Users ingin tahu dimana
rekomendasi tujuan bersepeda yang
asyik

24. Goals
User perlu app yang
membuat mereka jadi rajin
bersepeda
Needs
Users ingin melihat jarak tempuh sepeda
mereka dan menemukan teman terdekat
untuk bersepeda
Context
Users akan sering membuka
aplikasi ketika mereka
sedang bersepeda
End to End
Download aplikasi- memulai aplikasi-
mengatur jarak tempuh- bersepeda -
melihat ringkasan performa bersepeda

25. Prototype Membuat rancangan untuk masalah yang ingin kita
selesaikan

26. Dicoding design process
Ideation Decision Prototype
Mencari solusi
sebanyak mungkin
dengan metode
crazy 8s
Menentukan ide
mana yang akan
digunakan
Membuat Hi-Fi
prototype dari ide
yang terpilih

28. Crazy 8s Metode menggambar Cepat
1. Tentukan masalah yang ingin diselesaikan
Contoh: Membuat para pengguna sepeda lebih rajin bersepeda
2. Bagi kertas menjadi 8 bagian
3. Atur timer menjadi 8 menit
4. Mulai gambar 8 ide di setiap bagian kertas yang sudah dibagi tadi
(waktunya hanya 8 menit)

31. Tahap menentukan pilihan
Penentuan ide dapat dilakukan dengan
metode vote (jika Anda memiliki team)
1. Present ide Anda
2. Assumption and Question
3. Dot Vote
4. The Rumble or All-In-One

32. Present ide Anda
Menjelaskan ide yang Anda
gambar pada sesi Crazy 8s
Masing-masing anggota
memiliki waktu 2 menit
untuk menjelaskan ide.

33. Assumption and Question
Biasanya setelah menjelaskan
ide. Team kita membangun
asumsi dan pertanyaan,
gunanya untuk membantu
menyelesaikan masalah yang
mungkin akan dihadapi pada
solusi tersebut

34. Contoh
Assumption: Dengan memberi rekomendasi teman
bersepeda akan membuat user semakin rajin bersepeda
Question: Apakah user akan nyaman bertemu dengan
orang asing?

35. Dot Vote
Setelah membangun asumsi dan
pertanyaan pada sesi sebelumnya.
Saatnya bagi team untuk memilih
solusi mana yang paling tepat
untuk users.
Vote bersifat bebas, untuk
masing-masing anggota team
memiliki 3 kuota vote

37. All in One
Bagaimana jika kita memiliki lebih dari
1 solusi yang terpilih? atau jika ingin
menggabungkan 2 solusi? Kita bisa
melakukan All in One

38. Rumble
Jika kita mendesain seorang diri Rumble
adalah salah satu solusi untuk menentukan
solusi mana yang paling tepat, karena
Rumble membandingkan beberapa solusi
yang nantinya mungkin bisa menjawab
kebutuhan user

39. Tools untuk ideation

42. Build Prototype
Setelah mencari tahu solusi yang akan kita
gunakan, tahap selanjutnya adalah
membangun prototype aplikasi

43. Dicoding design process
Sketching Ideas Wireframes Rapid Prototype
Implementasi ide ke desain yang lebih nyata

44. Sketching Ideas
Cara terbaik untuk menuangkan ide
secepat mungkin
Sketch kadang digunakan untuk
bahan diskusi dengan rekan team

45. Wireframe
Wireframes adalah versi detail dari
sketches berupa rancangan hitam putih
Wireframes sering digunakan untuk
memvalidasi dan mendiskusikan ide
bersama rekan team

46. Prototype
Versi interaktif dari wireframe tapi
prototype adalah desain yang
sudah memiliki interaksi
Contohnya: pada prototype kita
dapat menekan sebuah tombol
karena pada prototype biasanya
sudah memiliki flow

47. Tools untuk prototyping

48. Usability Testing
Menguji coba prototype design langsung ke users untuk
mempelajari apakah kita sudah merancang solusi yang tepat

49. Why Usability Testing?

50. Dicoding design process
Mencari
masalah pada
desain
Menemukan
opportunity
baru
Mempelajari
behavior User

51. Dicoding design process
Preparation Testing Day Learning
Process pada testing

52. Phase 1 Preparation
Preparation
Hal yang perlu disiapkan pada usability testing adalah:
1. Usability Script
2. Recruit Participant

53. Usability Script
- Scenario
- User task
- Testing Notes
Pada usability testing kita mengobservasi users yang
berinteraksi dengan produk kita

54. Testing Day
Pada testing session umumnya kita menyediakan
- Alat rekam
- Device Testing
- Note untuk mencatat

55. Tips Usability Testing
Pada sebelum dan saat testing perlu diperhatikan
- Selalu minta persetujuan untuk merekam
- Jangan beri arahan ke users untuk menyelesaikan sebuah task
- Catat hal penting yang Anda temukan ketika testing
- Buat users sesantai mungkin

56. Learning
Design Thinking adalah proses yang non linear. Dimana hasil
yang kita temukan pada usability testing kita pelajari ulang dan
menganalisanya kembali kemudian memikirkan solusi untuk
menyelesaikannya
Restless learning adalah salah satu prinsip pada
design process Dicoding, yaitu terus mempelajari
produk yang di design

59. Focus on user needs and outcomes.
Is the way to align our different
perspective

60. Focus

63. Live Collaboration

64. Live Collaboration
We Always ask with "Why? or What if?"
to open more opportunities and
possibilities

65. Restless learning
All that we built is a prototype that we have to
learn what's the problem on the prototype

67. Tips
Practice Tips
- Be open with any feedback, but only take
a constructive feedback
- Design thinking is for everybody

68. Tips
Books
- Hooked by Nir Eyal
- The Design Thinker by Rizki Mardita
- Just Enough Research by Erika Hall
- Petunjuk memulai UX dari NOL by
Wasil
Design Publications
- halodesigners.com
- Medium IBM Design
- designbetter.co
- Medium UX Collective
- Medium UX Planet
- airbnb.design