BRAINSTORMING &

USABILITY TESTING
DENGAN FIGMA
SHARING SESSION EBCO
JUMAT, 6 & 13 OKTOBER 2023

Pamela Sarnia
PERSIAPAN SHARING
SESSION
• Buat akun Figma
Link signup: https://www.figma.com/signup

• Download Figma dari Google Playstore

Link download:
https://play.google.com/store/apps/details?id=com.figma.mirror&pcampaig
nid=web_share
AGENDA
• Penjelasan Mengenai Design Thinking
• Praktek Brainstorming dengan FigJam
• ​Praktek Usability Testing dengan Prototype
Figma
DESIGN THINKING
 5

“
Design thinking adalah metode
pemecahan masalah yang bersifat
non-linear dan iterative. Tujuannya,
memahami pengguna, menguji
asumsi, menyimpulkan masalah,
dan menciptakan solusi inovatif

”
untuk prototype dan tes.
 6

5 TAHAP DESIGN THINKING

EMPATHIZE DEFINE IDEATE PROTOTYPE TEST

(UX) (UX) (UX) (UI) (UX)

Menetapkan
Riset kebutuhan kebutuhan dan Menguji asumsi dan
Menciptakan solusi Menguji solusi
pengguna masalah yang dialami mengeluarkan ide
pengguna
7
 8

1. EMPHATIZE
• Observasi pengguna nyata dengan pertanyaan apa,
bagaimana, dan mengapa
• Wawancara pengguna
• Melakukan Focus Group Discussion (FGD)
• Persona
• Riset review Google Playstore dari aplikasi sejenis
• Mencoba aplikasi sejenis dan mengevaluasi
dengan metode heuristic evaluation
• Membuat daftar paint point yang dialami pengguna
 9

2. DEFINE
• Mengelompokkan paint point dengan affinity
diagram
• Membuat problem statement dari pain point yang
sudah dipilih dengan pendekatan Point of View
(POV) atau How Might We (HMW)
• Membuat skala prioritas masalah
 10

3. IDEATE
• Brainstorming untuk menuangkan ide dan solusi
berdasarkan masalah yang dianggap prioritas
• Mengelompokkan solusi dengan affinity diagram
• Membuat skala prioritas dari solusi
• Membuat proses penggunaan dengan user flow
• Membuat sketsa dari solusi prioritas dengan
metode Crazy Eight
 11

4. PROTOTYPE
• Mengembangkan sketsa yang terpilih pada saat
Crazy Eight menjadi wireframe/wireflow
• Mengembangkan wireframe menjadi mock up
dengan flow proses yang sesuai dengan ide solusi
• Mengembangkan mock up menjadi prototype yang
akan digunakan untuk testing
 12

5. TEST
• Mengevaluasi solusi desain UI yang sudah dibuat
dalam bentuk prototype
BRAINSTORMING
DENGAN FIGJAM
 14

LINK FIGJAM
https://www.figma.com/file/zfDBFPquTlsXaNuHKFftFg/Brainstorming-
dengan-FigJam---Sharing-Session-EBCO?type=whiteboard&node-
id=0%3A1&t=jpi8yoKBEvkebf49-1
 ​ SABILITY
U
TESTING DENGAN
PROTOTYPE FIGMA
 16

LINK PROTOTYPE SAM

MOBILE APP SAM
https://www.figma.com/proto/eXmN8lzTiEl8iRuWuCSDYw/UI-Design-SAM?
page-id=6%3A12&type=design&node-id=720-
87817&viewport=528%2C117%2C0.02&t=z1DmH7dbrbyLfl48-
8&scaling=scale-down&starting-point-node-id=720%3A87817&hide-ui=1

WEBSITE SAM
https://www.figma.com/proto/eXmN8lzTiEl8iRuWuCSDYw/UI-Design-SAM?
page-id=1472%3A248404&type=design&node-id=1479-
367180&viewport=278%2C-472%2C0.02&t=7Aj3PZFepE2eNLbU-
8&scaling=min-zoom&starting-point-node-id=1479%3A367180&hide-ui=1
 17

USABILITY TESTING
Task: Membuat Rencana Kerja
Canvassing

Skenario:
Sebagai supervisor Anda hendak
menugaskan Zaenal Abidin sebagai
sales Anda untuk melakukan canvassing
ke 10 toko.
 18

FOLLOW UP
QUESTION
• Berapa lama waktu yang diperlukan untuk
menyelesasikan task?
• Bagaimana pendapat Anda melakukan task tadi?
Jelaskan alasannya.
• Dari 1-5 berapa tingkat kepuasan anda dalam
melakukan task tadi? Jelaskan alasannya.
• Apa ekspektasi Anda terkait fitur ini? Apakah sesuai
dengan ekspektasi/harapan Anda?
• Fungsi/fitur apa saja yang menurut Anda jika ditambah
bisa meningkatkan tingkat kegunaan?
• Keberhasilan (Direct Success/Indirect/Fail)
TERIMA KASIH