Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bridging the Gap – Developers Meet Design

598 views

Published on

Designers and developers are innovators! Merge mindsets between designers, engineers and other stakeholders with design thinking. Come together and engage in the development process with a more effective approach.

Presented on GDG DevFest Hong Kong 2017

Published in: Design
  • Be the first to comment

Bridging the Gap – Developers Meet Design

  1. 1. 1# D E V F E S T 1 7 U S E R E X P E R I E N C E & C O L L A B O R A T I V E W O R K F L O W www.constance-tang.com Bridging the Gap Developers Meet Design Constance Tang UI/UX Designer
  2. 2. 2 應⽤用 Design Thinking 來來設計產品 以⽤用⼾戶為本的設計 # D E V F E S T 1 7 www.constance-tang.com 理理解各⼈人的⼯工作⽬目標,並進⾏行行有效率的開發 多⽅方合作 現時流⾏行行的設計及開發協作⼯工具 協作⼯工具 探討設計與 UX 的本質 解構 UX Bridging the Gap Developers Meet Design
  3. 3. 3# D E V F E S T 1 7 www.constance-tang.com 解構 UX 我們先談談設計的本質
  4. 4. 認知 ⽬目標 情緒 對象 4# D E V F E S T 1 7 www.constance-tang.com 各⾨門各路路的設計師,不論是平⾯面設計、互動設計、產品設計、室內設計、 介⾯面設計、廣告設計、印刷設計、⽤用⼾戶體驗設計等,都是藉設計去解決 「⼈人」的問題或傳達訊息。 以⼈人為本 解決問題 設計的本質
  5. 5. 5# D E V F E S T 1 7 www.constance-tang.com 銷售對象 設計熱⽔水煲 Office Lady ⽤用⼾戶需求/功能 輕便便易易攜、可煲湯煮飯、容易易清洗 產品造型(認知/情緒) ⼩小型、單⼿手可攜、多種女性偏好的顏⾊色可選 解構 UX
  6. 6. 6# D E V F E S T 1 7 www.constance-tang.com Don Norman – Former Apple Advanced Technology Group VP I invented the term because I thought Human Interface and usability were too narrow: I wanted to cover all aspects of the person’s experience with a system, including industrial design, graphics, the interface, the physical interaction, and the manual.
  7. 7. UX以⽤用⼾戶為本解決問題 # D E V F E S T 1 7 7www.constance-tang.com 視覺 + 介⾯面 + 易易⽤用性 + 系統 + ⼯工業 + 互動 + ...
  8. 8. 8# D E V F E S T 1 7 www.constance-tang.com 以⽤用⼾戶為本的設計 尋找與製訂 user requirement
  9. 9. 9# D E V F E S T 1 7 www.constance-tang.com 各⾨門各路路的設計師,不論是平⾯面設計、互動設計、產品設計、室內設計、 介⾯面設計、廣告設計、印刷設計、⽤用⼾戶體驗設計等,都是藉設計去解決 「⼈人」的問題或傳達訊息。 「⽤用法」決定「功能」 製訂產品要求 功能 範圍 內容對象 媒介
  10. 10. 1 0 Design Thinking Stakeholder / User Interview Focus Group Investigation Quantitative / Qualitative Survey Competitive Audit Content Audit Metric Analysis EMPATHIZE 理理解 IDEO Design Thinking ⽅方法論建議設計師⽤用研究和驗證,設計以⽤用⼾戶為本的產品。 從探討⽤用⼾戶需要開始,最後考慮技術上的可⾏行行性。 User Pain Points Persona User Journey Mapping User Pattern DEFINE 定義 Crazy Eights / Brainstorming Diverge / Converge Thinking Define User Requirements Prioritize Ideas / Features User Flow / Scenario Storyboard Task Analysis Card Sorting Wireframe IDEATE 概念念 Mockups Code Prototype PROTOTYPE 原型 # D E V F E S T 1 7 www.constance-tang.com User Testing A/B Test Usability Testing Accessibility Testing Eye Tracking TEST 測試
  11. 11. 1 1# D E V F E S T 1 7 www.constance-tang.com User Story 需要以 persona 為根據,較適合有 persona 或⽬目標⽤用⼾戶群 ⼗十分明顯的產品。 ⾝身為空中銷售員,
 我希望提升銷售技巧,
 因此可以有更更多乘客下單 User Story ! !
  12. 12. 1 2# D E V F E S T 1 7 www.constance-tang.com Job Story 適合⽤用於⽬目標⽤用⼾戶群不太明顯的產品,或產品要求已製訂好 的情況。 當乘客向我查詢貨品時,
 我希望快捷地找出貨品編號,
 因此可以減少乘客等待時間。 Job Story
  13. 13. 1 3# D E V F E S T 1 7 你或許也是⽬目標⽤用⼾戶之⼀一,多從⽤用⼾戶⾓角度思考 ⽤用 Task Analysis 去分析、推論⽤用⼾戶需求 UX Designer 毋須做齊所有 deliverables,做得太多反 ⽽而裹⾜足不前 如果你無法接觸 user research 或 service design,那 就要很清楚產品想達到怎樣的⽬目標。 www.constance-tang.com 以⽤用⼾戶為本 的設計
  14. 14. 1 4# D E V F E S T 1 7 www.constance-tang.com 多⽅方合作 ⼀一件產品成功與否,由誰去決定?
  15. 15. 1 5 太有創意=無⼈人鍾意? # D E V F E S T 1 7 www.constance-tang.com 驗證設計概念念,其實要從 business model 和 service design 開始計劃。 程式對⽤用⼾戶有何裨益? 服務該如何營運? 如何留留住活躍⽤用⼾戶? 這些問題是令設計概念念不再離地的考量量。
  16. 16. 創造完美的產品 1 6# D E V F E S T 1 7 www.constance-tang.com Product Design Business Marketing Tech 在局限下開發最好的產品
  17. 17. # D E V F E S T 1 7 1 7www.constance-tang.com REQUIREMENT MOCKUP DEVELOPMENT LAUNCH UAT WIREFRAME 流⽔水式開發流程 ⼯工作流程 Product Owner + PM Product Owner + PM Designer Product Owner + PM + Developer Developer
  18. 18. # D E V F E S T 1 7 1 8www.constance-tang.com 雙線並⾏行行的開發流程 ⼯工作流程 Design Development REQUIREMENT DESIGN MOCKUP, UI SPEC FRAMEWORK SOURCING,
 ARCHITECT & SYSTEM DESIGN, DEV FEATURE LAUNCHUAT RESEARCH / WIREFRAMING DEV UIFEATURE STUDY
  19. 19. 1 9# D E V F E S T 1 7 讓設計師在開發早期加入團隊 多溝通、多向隊友詢問意⾒見見 拿捏設計與技術上的平衡 多以⽤用⼾戶的⾓角度分析設計的效益 切忌對設計改動/⼯工程師的看法感到抗拒 www.constance-tang.com 有效率的
 ⼯工作流程
  20. 20. 2 0# D E V F E S T 1 7 www.constance-tang.com 協作⼯工具 ⼿手寫 spec 甚麼的很麻煩吧!
  21. 21. # D E V F E S T 1 7 2 1www.constance-tang.com Zeplin
  22. 22. # D E V F E S T 1 7 2 2www.constance-tang.com Zeplin
  23. 23. 2 3# D E V F E S T 1 7 以客觀的態度評論設計 暸解設計背後的動機 補⾜足設計師想漏了了的事物,讓他逐步掌握設計與技術的平 衡 www.constance-tang.com 去理理解設計
  24. 24. 2 4www.constance-tang.com Thanks for listening. # D E V F E S T 1 7

×