How UX & UI Work Together

A talk I did alongside my colleague, Takuya Uchida, at UX Bridge Tokyo Vol. 3. We talked about our experience of how UX and UI work together in the team behind the collaborative prototyping tool Prott.

Transcript

1. ٕؒؿإ؎ٝ
   ؤ،ي
   ⰻ歊
   ⼾䓘
   UX Bridge vol.3
 2017/12/14 HOW UX & UI WORK TOGETHER
2. © 2017 Goodpatch Inc. All Right Reserved. 2 HI! ֿ׿ל׿כ
3. © 2017 Goodpatch Inc. All Right Reserved. 3 ٕؒؿإ؎ٝ
   ؤ،ي 1SPUU
   
   69رؠ؎ش٦ ⰻ歊
   ⼾䓘 1SPUU
   
   6*رؠ؎ش٦ Takuya Uchida Mariam El Hussein
4. © 2017 Goodpatch Inc. All Right Reserved. 4 ؚحسػحثחאְג
5. © 2017 Goodpatch Inc. All Right Reserved. 5 㛇劤䞔㜠 ؚحسػحثחאְג ع٦زח갟ֻ6*׾鷄実ׅ׷
   ؚٗ٦غٕז6*رؠ؎ٝؕٝػص٦ (PPEQBUDI吳䒭⠓爡ؚحسػحثכ匌❨ծكٕٔٝծىُٝق ٝծ〴⻌ח֮׷8FC
   
   J04
   
   "OESPJEזוوٕثرغ؎أ،فٔ؛٦ ءّٝך6*رؠ؎ٝؕٝػص٦דׅկ؟٦ؽأװفٗتؙزך⟰歗鏣 鎘ַ׵ꟼ׻׶؝ٝإفزً؎ؚؗٝծ69鏣鎘ծفٗزة؎ؾؚٝծ 㹋鄲תדٙٝأزحفד䲿⣘׃גְתׅկ Tokyo Berlin/Munchen Taipei
6. © 2017 Goodpatch Inc. All Right Reserved. 6 ؟٦ؽأ ؚحسػحثחאְג 6*رؠ؎ٝ 69رؠ؎ٝ 䨌殛فٓٝصؚٝ鏣鎘 Ꟛ涪㹋鄲 㕂ⰻزحفؙٓأך6*رؠ؎ ش٦׾䫴ִծ㢳ֻך㹋籐ַ׵ך 穗꿀׌ֽדזֻծ䌢ח㕂ⰻ嵲㢩 ך6*ך✲⢽׾؎ٝفحز׃ծ ِ٦ؠ٦ך湡简ח甧׍ծِ٦ ؠ٦ָ⢪ְװְׅծ䗰㖑葺ְה 䠬ׄ׷6*׾فٗزة؎ؾؚٝ׾ 粸׶鵤׃זָ׵رؠ؎ٝ׃ת ׅկ ٔ؟٦ثծِ٦ؠ٦ؼ،ؚٔٝ ַ׵⟎铡׾甧גծفٗآؙؑز ؞٦ٕך鏣㹀ծ؝ٝإفزً؎ ؚؗٝծ湡䭷ِׅ٦ؠ٦⡤꿀׾ 㹀纏׃ծؙٓ؎،ٝزה؝ٝإ ٝ؟أ׾《׶זָ׵ծ湡䭷ׅ ِ٦ؠ٦⡤꿀׾ע׵ׁ׆חفٗ آؙؑزث٦يָⰼ徽ח؞٦ٕ חぢִַ׷״ֲח׃תׅկ 傈劤ך؟٦ؽأفٓٝصؚٝח כِ٦ؠ٦ַ׵ך鋔挿ָ䫙ֽ衅 ׍גְ׷؛٦أָ㢳ֻ֮׶ת ׅկ猘׋׍כ䗳׆؟٦ؽأך鏣 鎘ַ׵ꟼ׻׶ծِ٦ؠ٦鼅㹀ծ ⣣⦼䲿⣘ծوطة؎ؤծو٦ ؛حزهآءّٝ׾♧筰ח罋 ִծ㕂ⰻ㢩ך剑倜✲⢽זוך灇 瑔׮驎תִג؟ه٦ز׃תׅկ ؚحسػحثכرؠ؎ٝ⠓爡ד ָׅծ㢳ֻךؒٝآص،׾䫴ִ גְתׅկؿٗٝزؒٝسծ؟٦ غ٦؟؎سծJ04ծ"OESPJEך ؒٝآص،׾䫴ִծ֮׵ײ׷، فٔ؛٦ءָّٝ爡ⰻדꟚ涪ד ֹ׷⡤ⵖחז׏גְתׅկؒٝ آص،Ⰻ㆞ָرؠ؎ٝ㥨ֹ׌ה ְֲך׮אך暴䗙דׅկ
7. © 2017 Goodpatch Inc. All Right Reserved. 7 فٗتؙز✲噟1SPUU ؚحسػحثחאְג 1SPUUכծ⽃秪חفٗزة؎ف׾אֻ׷خ٦ ٕדכזֻծفٗزة؎ؾؚٝ׾ث٦يח؎ ٝأز٦ٕׅ׷خ٦ٕדׅկ(PPEQBUDIך 荈爡؟٦ؽأה׃ג䎃剢ח姻䒭ٔ ٔ٦أկ㣐䩛ؐؑـ؟٦ؽأ⟰噟חג &OUFSQSJTFفٓٝך䱰欽㹋籐㢳侧 :BIPPծ%F/"ծ(3&&ծ3FDSVJUծ嚂㣓 זוկ ך⠓陽״׶ծאךفٗزة؎ف 䎃䏝ؚحسرؠ؎ٝ颣「颣
8. © 2017 Goodpatch Inc. All Right Reserved. 8 1SPUUךꟚ涪חאְג
9. BE 4 FE 4 Native 2 UI 2 UX 2 PM 2 © 2017 Goodpatch Inc. All Right Reserved. 9 1SPUUךꟚ涪ًٝغ٦ 1SPUUךꟚ涪חאְג
10. © 2017 Goodpatch Inc. All Right Reserved. 10 ٌغ؎ٕꟚ涪ًٝغ٦ 1SPUUךꟚ涪חאְג "OESPJEؒٝآص، 69رؠ؎ش٦ فٗتؙزوط٦آٍ٦ 6*رؠ؎ش٦ J04ؒٝآص،
11. © 2017 Goodpatch Inc. All Right Reserved. 11 Ꟛ涪أة؎ٕ 1SPUUךꟚ涪חאְג
12. ِ٦ؠ٦ٔ؟٦ث ِ٦ؠ٦؎ٝةؽُ٦ ِ٦ؠ٦ذأز لٕاش ؕأةو٦آٍ٦ص٦وحف ٙ؎َ٦ؿٖ٦ي ؽآُ،ٕرؠ؎ٝ فٗزة؎ؾؚٝ 畸さ锃叨 6*鏣鎘 رؠ؎ٝءأذي ؎ٝةؙٓءّٝرؠ؎ٝ © 2017 Goodpatch Inc. All Right Reserved. 12 ةأؙהٖأهٝءؽٔذ؍ 1SPUUךꟚ涪חאְג UX DESIGNER UI DESIGNER ِ٦ؠ٦ٔ؟٦ث ِ٦ؠ٦؎ٝةؽُ٦ ِ٦ؠ٦ذأز لٕاش ؕأةو٦آٍ٦ص٦وحف ٙ؎َ٦ؿٖ٦ي ؽآُ،ٕرؠ؎ٝ فٗزة؎ؾؚٝ 畸さ锃叨 6*鏣鎘 رؠ؎ٝءأذي ؎ٝةؙٓءّٝرؠ؎ٝ
13. © 2017 Goodpatch Inc. All Right Reserved. 13 ؝ىُص؛٦ءّٝ 1SPUUךꟚ涪חאְג UX UI
14. 㹋ꥷכأةحؙ׃ג׋
15. © 2017 Goodpatch Inc. All Right Reserved. 15 Ꟛ涪أة؎ٕ 1SPUUךꟚ涪חאְג
16. © 2017 Goodpatch Inc. All Right Reserved. 16 أفٔٝزך⚥ָؐؓ٦ة٦ؿؓ٦ٕח 1SPUUךꟚ涪חאְג
17. ؝ٓنٖ٦ءّٝדֹגְזַ׏׋
18. © 2017 Goodpatch Inc. All Right Reserved. 18 ׫׿זד何㊣׃ת׃׳ֲ
19. © 2017 Goodpatch Inc. All Right Reserved. 19 ؝ىُص؛٦ءّٝך鋅湫׃ Ꟛ涪ؿٗ٦ך何㊣ UX UI
20. © 2017 Goodpatch Inc. All Right Reserved. 20 UX Dev UI
21. © 2017 Goodpatch Inc. All Right Reserved. 21 ؿ؍إٓؕن٦سח㢌ִ׋ Ꟛ涪ؿٗ٦ך何㊣ UX UI Dev
25. © 2017 Goodpatch Inc. All Right Reserved. 25 ׫׿זדXIJUFCPBSEך⵸ח鑧ׅ儗꟦׾⡲׷ Ꟛ涪ؿٗ٦ך何㊣
    UX UI Dev
26. © 2017 Goodpatch Inc. All Right Reserved. 26 ׫׿זדXIJUFCPBSEך⵸ח鑧ׅ儗꟦׾⡲׷ Ꟛ涪ؿٗ٦ך何㊣
    UX UI Dev
28. © 2017 Goodpatch Inc. All Right Reserved. 28 ׫׿זדِ٦ؠ٦ذأز׾ׅ׷ Ꟛ涪ؿٗ٦ך何㊣
    UX UI Dev
29. © 2017 Goodpatch Inc. All Right Reserved. 29 ׫׿זדِ٦ؠ٦ذأز׾ׅ׷ UX UI Dev Ꟛ涪ؿٗ٦ך何㊣
    
30. 30 ل٦آة؎زٕ ثٍفة٦せ
31. © 2017 Goodpatch Inc. All Right Reserved. 31 ׫׿זדXJSFGSBNF׾⡲׷ Ꟛ涪ؿٗ٦ך何㊣ UX UI Dev
32. © 2017 Goodpatch Inc. All Right Reserved. 32 ׫׿זדXJSFGSBNF׾⡲׷ Ꟛ涪ؿٗ٦ך何㊣ UX UI Dev
34. © 2017 Goodpatch Inc. All Right Reserved. 34 UX UI Dev
35. © 2017 Goodpatch Inc. All Right Reserved. 35 UX UI Dev
36. © 2017 Goodpatch Inc. All Right Reserved. 36 69رؠ؎ش٦ה6*رؠ؎ش٦ךةأؙ Ꟛ涪ؿٗ٦ך何㊣ ِ٦ؠ٦ٔ؟٦ث ِ٦ؠ٦؎ٝةؽُ٦ ِ٦ؠ٦ذأز لٕاش ؕأةو٦آٍ٦ص٦وحف ٙ؎َ٦ؿٖ٦ي ؽآُ،ٕرؠ؎ٝ فٗزة؎ؾؚٝ 畸さ锃叨 6*鏣鎘 رؠ؎ٝءأذي ؎ٝةؙٓءّٝرؠ؎ٝ UX DESIGNER UI DESIGNER ِ٦ؠ٦ٔ؟٦ث ِ٦ؠ٦؎ٝةؽُ٦ ِ٦ؠ٦ذأز لٕاش ؕأةو٦آٍ٦ص٦وحف ٙ؎َ٦ؿٖ٦ي ؽآُ،ٕرؠ؎ٝ فٗزة؎ؾؚٝ 畸さ锃叨 6*鏣鎘 رؠ؎ٝءأذي ؎ٝةؙٓءّٝرؠ؎ٝ
37. © 2017 Goodpatch Inc. All Right Reserved. 37 69رؠ؎ش٦ה6*رؠ؎ش٦ךةأؙ Ꟛ涪ؿٗ٦ך何㊣ ِ٦ؠ٦ٔ؟٦ث ِ٦ؠ٦؎ٝةؽُ٦ ِ٦ؠ٦ذأز لٕاش ؕأةو٦آٍ٦ص٦وحف ٙ؎َ٦ؿٖ٦ي ؽآُ،ٕرؠ؎ٝ فٗزة؎ؾؚٝ 畸さ锃叨 6*鏣鎘 رؠ؎ٝءأذي ؎ٝةؙٓءّٝرؠ؎ٝ UX DESIGNER UI DESIGNER ِ٦ؠ٦ٔ؟٦ث ِ٦ؠ٦؎ٝةؽُ٦ ِ٦ؠ٦ذأز لٕاش ؕأةو٦آٍ٦ص٦وحف ٙ؎َ٦ؿٖ٦ي ؽآُ،ٕرؠ؎ٝ فٗزة؎ؾؚٝ 畸さ锃叨 6*鏣鎘 رؠ؎ٝءأذي ؎ٝةؙٓءّٝرؠ؎ٝ
38. & UX DESIGNER UI DESIGNER © 2017 Goodpatch Inc. All Right Reserved. 38 ِ٦ؠ٦ٔ؟٦ث ِ٦ؠ٦؎ٝةؽُ٦ ِ٦ؠ٦ذأز لٕاش ؕأةو٦آٍ٦ص٦وحف ٙ؎َ٦ؿٖ٦ي ؽآُ،ٕرؠ؎ٝ فٗزة؎ؾؚٝ 畸さ锃叨 6*鏣鎘 رؠ؎ٝءأذي ؎ٝةؙٓءّٝرؠ؎ٝ
39. © 2017 Goodpatch Inc. All Right Reserved. 39 㷕׿׌ֿה Ꟛ涪ؿٗ٦ך何㊣ ˖ 䠐䙼寸㹀ָ傍ְ
    ˖ ىأ؝ىُص؛٦ءָّٝזֻז׏׋"
    ˖ ׉׸׊׸ָ荈ⴓך䠐鋅׾鎉ֲֿהָדֹ׷״ֲחז׏׋#
    ˖ 嚂׃ַ׏׋
    
40. © 2017 Goodpatch Inc. All Right Reserved. 40 UX UI Dev
41. © 2017 Goodpatch Inc. All Right Reserved. 41 ؝ٓنٖ٦ءّׅٝ׷׋׭ך5*14 Ꟛ涪ؿٗ٦ך何㊣ ˖ װ׏ג׷ծ㔭׏ג׷ծ罋ִג׷ֿה׾➭ך➂ח鋅ִ׷䕎חׅ׷
    ˖ ♧筰ח⫴ֻ儗꟦׾ـٗحؙׅ׷
    ˖ ♧㔐׌ֽד׮Ⰻ㆞ِ٦ؠ٦ذأزח⿫⸇ׅ׷
    ˖ ׫׿זד،؎ر؍ؒ٦ءّٝ׃גծٙ؎َ٦ؿٖ٦ي׾⡲׷
42. © 2017 Goodpatch Inc. All Right Reserved. 42 ل٦آة؎زٕ ثٍفة٦せ UXσβΠφʔ͸νʔϜͷUX΋ߟ͑Δ
43. © 2017 Goodpatch Inc. All Right Reserved. 43 Thank you! ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ