Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

專案設計流程 x Prott 蹦出新滋味

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
人機協作迎向Ai+世代
人機協作迎向Ai+世代
Cargando en…3
×

Eche un vistazo a continuación

1 de 53 Anuncio

Más Contenido Relacionado

Presentaciones para usted (18)

Anuncio

Similares a 專案設計流程 x Prott 蹦出新滋味 (20)

Anuncio

專案設計流程 x Prott 蹦出新滋味

  1. 1. 專案設計流程 x Prott 蹦出新滋味 J o y
  2. 2. Hello! I am Joy Tsai 現任 • 精誠隨想 UI/UX Designer 其他經歷 • 2017 AI Chat Bot office365組-亞軍 • 2016 一秒搞動政府創意競賽 通關全局獎 • 2015 新竹市府官網黑客松大賽 冠軍
  3. 3. 1 關於精誠隨想 2 隨想的設計流程 3 隨想的客戶溝通心法 4 隨想玩Prott CONTENT
  4. 4. 精 誠 隨 想 是 幹 嘛 的 ? 關於精誠隨想 1
  5. 5. 精誠資訊 跨國/跨區運作組織 行動應用開發
  6. 6. • 精誠隨想成立 • 2004 • 培養長期合作客戶 • 與台北富邦銀行推出消金專屬APP • 與南山合作推出理賠通、服務通、行動業務員 • 與長榮航空合作推出EVA Cargo • 2013 • 數位轉型 • 證券與銀行線上開戶 • 與遊戲橘子數位行銷 • 第一銀行理專數位行銷 • 2016 • 2011年加入精誠集團 • 與新光人壽合作壽險軟體平台業務 • 其他產業發展,百貨、通路、航空 • 與安泰投信合作推出行動業務員 • 2005-2012 • 穩定成長 • Yahoo股市、星展銀行個人信貸 • 兆豐銀行信用卡補件、第一銀行企網Worklight • 新光人壽保單健診、新光保全行動出勤、威航訂票 • 2014-2015 精誠隨想深耕行動技術超過10年
  7. 7. 1 2 3 5 6 7 4 8 銀行 第一 / 彰銀 / 瑞興 / 新光 / 兆 豐 / 元大 / 匯豐 / 富邦 / 中信 / 澳盛 / 星展/ 玉山/凱基/上海商 銀 行動銀行、APP Portal、信用 卡補件、個人信貸申辦、信用 卡優惠訊息、線上開戶。企業 內部行動行銷系統 證券/期貨 Yahoo!/元大 / 兆豐 / 永豐 / 永全 / 元富 / 新光 / 國泰/ Yahoo!/凱基證/富邦證/合庫證 /日盛證/統一證 投資人看盤下單APP、線上開 戶 投信/投顧 聯大 / ING(野村投信) 客戶的看盤APP、基金推薦、 行動業務員 電信業者 遠傳 / 中華電信 / 台哥大 投資人看盤下單APP 流通運輸 長榮 / 立榮 / 酒品經銷商 / HKS好康多 / 東森 客戶查詢APP、企業內部應用 APP 政府 交通部 / 台電/ 科專計畫 民眾查詢APP、旅遊資訊APP 產壽險 南山 / 富邦 / 新光 / 蘇黎世 / 國泰/中壽/第一金壽 電子簽名、行銷工具、保單資 訊、建議書、推播系統 其他 默沙東藥廠/兄弟象/新光保全 查詢醫療APP/球場互動APP/ 保全勤務系統 APP建置經驗 深耕擴展各產業
  8. 8. 接案公司的UIUX Design Process 隨想的設計流程 2
  9. 9. SoftMobile Design ABC Art Academy 設計 管理與訓練 Business Strategy 商務營運與策略 Customer Facing 顧客溝通與洞察
  10. 10. 以保險業專案來看隨想的設計流程
  11. 11. 專案開始前 腦力激盪期 專案開發中
  12. 12. 給內部 使用的 業務員要 用的 每個人使用都很 好上手的 我們要做 一個APP 以前有做 過,但是 很難用 希望他們 每天都可 以用 簡單又 好用 可以走到 哪用到哪 Android 和iOS 都 可以用 那個誰誰 誰有做, 我們也想 做 可以跟 Line/FB 連結嗎? 舊的介面很醜, 想改漂亮一點 客戶 資料 機密 壽險 業 就是 要快 手機 的好 了
  13. 13. 找客戶泡茶聊聊天
  14. 14. 客戶這樣說…… • 我們要有OOOO的功能 • 我們要合併Aapp跟 B app • 一定要透過Xxapp登入使用 • 現行的網站內容都要放進去喔 • 可以用FB註冊吧,Line也可以吧? • 我們已經有一個現行的系統,可以直接 給你們資料做成app • 一定要可以推播 • 介面越簡單越好 • 色彩要用我們企業的顏色 • 風格不要退流行 • Apple可以這樣做,你們也可以吧 • 首頁可以放很多功能嗎? • 步驟越少越好 • 操作可以越快越好 • 我們想要參考XXXapp的設計
  15. 15. 分類・細化
  16. 16. 解決_______問題 • 客 戶 在 作 業 流 程 上 有 繁 瑣 的 流 程 , 需 要 被 解 決 需要_______的服 務• 客 戶 需 要 一 個 數 位 轉 型 的 服 務 一個需求的開始
  17. 17. 專案開始前 腦力激盪期 專案開發中
  18. 18. UI/UX Design Process User Story 1.需求定義 2.設計規劃 3.系統研發 Function Map • 快速發現痛點與需求 • 聚焦功能 • 產品定位 • 產品架構與流程 • 設計語言與風格 • 介面一致性 Flow Chart UI Flow Wireframe Prototype Mockup Total Feedback & Review Design Spec & Guideline 設計模型
  19. 19. User Story 精 準 的 分 析 使 用 者 , 快 速 抓 出 使 用 者 的 樣 貌 確切地找到使用者的特點 了 解 使 用 者 需 求 , 能 用 文 字 描 述 具 體 呈 現 深入了解客戶需求 以 使 用 者 為 中 心 , 用 情 境 的 模 式 , 更 能 貼 近 使 用 者 使用者導向 利 用 一 個 一 個 小 的 故 事 , 開 發 出 一 個 一 個 的 小 功 能 快速了解產品情境
  20. 20. Functional Map 確 切 擬 定 專 案 需 求 範 圍 , 確 保 失 焦 聚焦專案需求範圍 了 解 資 訊 內 容 的 流 動 資訊架構分層 快 速 釐 清 專 案 所 需 功 能 項 目 總覽APP整體功能 透 過 功 能 分 類 , 掌 握 A P P 會 產 生 的 各 種 事 件 與 狀 態 掌握App會發生的狀態
  21. 21. UI Flow 了 解 產 品 最 完 整 的 流 程 操 作 , 可 以 預 防 出 錯 的 機 率 理解操作動線 可 以 清 楚 的 知 道 頁 面 與 頁 面 的 關 係 , 了 解 所 有 頁 面 的 串 連 方 式 了解頁面串連
  22. 22. 設計模型 設計模型 擬真嗎? Paper Wireframe 擬真=模擬真實最後產出 Wireframe Paper Wireframe X Prototype Mockup Wireframe X Prototype Mockup X Prototype 內部快速溝通 低 高 客戶溝通
  23. 23. 專案開始前 腦力激盪期 專案開發中
  24. 24. UI Kit
  25. 25. Design Guideline
  26. 26. 善用「組織、聚焦、圖像化」 精準確立客戶需求,落實設計流程,讓團隊在開發產品時更為順利 • 完善的設計管理,建構完整的設計語言 • 為客戶組織、量身打造UX策略 • 邏輯性且聚焦的和客戶一起解決問題、建構服務
  27. 27. 是 怎 麼 給 客 戶 灌 迷 湯 的 ? 隨想與客戶的溝通心法 3
  28. 28. 客戶溝通的三大重點
  29. 29. 建立共同語言
  30. 30. 建立共通語言 產品目標策略一致 使用的名詞彼此是否理解
  31. 31. 讓畫面說話
  32. 32. 讓畫面說話 聚焦內容 同步概念
  33. 33. 讓客戶玩玩看、 聆聽客戶的聲音
  34. 34. 讓客戶玩玩看、聆聽客戶的聲音 讓客戶實際體驗 讓客戶說說他的想法
  35. 35. 說服客戶的三個心法
  36. 36. 遵照準則走 Human Interface Guidelines Google Design - Material design
  37. 37. 站在巨人肩膀 成功案例怎麼做 3個地區3個成功案例
  38. 38. 說個故事給他聽
  39. 39. 看 看 隨 想 怎 麼 應 用 P r o t t 的 隨想玩Prott 4
  40. 40. PMDesigner RD 主要編輯者 Check Comments Resolved Comments 簡報模式愛用者 Comments狂人 Check Resolved 會議紀錄 規格紀錄 檢核UI flow 確認規格紀錄 客戶 URL享用者
  41. 41. 提案
  42. 42. 4 4 華麗的簡報模式
  43. 43. 擬真的prototype
  44. 44. 專案進行中…
  45. 45. 直觀快速的建立Prototype
  46. 46. 操作體驗的確認
  47. 47. 明確的UI flow
  48. 48. 群組管理與隱藏專案
  49. 49. 和客戶討論的會議記錄
  50. 50. 透過comments 檢核修改項目
  51. 51. 谢 谢 聆 听THANKS FOR YOUR WATCHING Any Questions? joy_tsai@softmobile.com.tw

Notas del editor

  • 精誠隨想隸屬於精誠資訊集團旗下的金融服務事業體
  • 在專案開始前,我們都可以從各方角度去聽到客戶想要的是什麼、想做什麼
  • 開始面對客戶的時候,客戶都會說出一些他們所謂“想做的東西”
  • 客戶因為在一個“什麼樣的情況下”,有“什麼樣的問題”需要被解決,又或者,他們需要一個“什麼樣的”服務。
  • 為了更確實的能更瞭解客戶的需求,我們會導入完整的 UI/UX Design Process 而整體會由PM和設計師去針對專案的性質、時程,做細部Process的微調,像是可能會簡化某些區塊的內容。
  • 這邊我們會用最簡單的Persona 來定義出目標使用者的樣貌與輪廓 再透過5W1H的方式,釐清客戶的需求,並延伸出產品執行的策略。
  • 而有了User Story之後,會快速地抓到使用者需要的功能,我們可以擬定出整體的功能清單並發展出 Functional Map
    做完了Functional Map 之後,我們可以有四個好處, 並能有這個文件依據,能和客戶做局部的需求釐清後,就能更聚焦的繼續往下Go
  • 介面流程(UI Flow)主要用來說明頁面與頁面的操作動線。 因為使用者這樣操作、以及我們有這些功能和資訊要呈現,所以頁面和頁面之間如此串接。
  • 建構一套設計語言,與通用的元件,可以確保介面的一致性
  • 接下來這個部分,分享一些身為接案公司的隨想,都是怎麼跟客戶溝通的一些心法
  • 這邊分成 溝通 和 說服 兩個面向來說 在溝通這個部分,我整理出三個通用的重點
  • 第一個建立共同語言,
  • 專案工作說明書(Project Statement Of Work 1/RFP / SOW / Scope / TA / Insights / Features
    2/用詞彼此有無理解
  • 備好完善的設計模型,讓客戶實際進行操作,並觀察客戶操作時遇到的問題,並尋問他為什麼,或是著詢問他的想法
    從客戶的想法與設計的模型中,找出脈絡與解決的辦法。
  • 完整的服務流程置放在手機上,讓客戶可以直接把玩,體驗
  • 我們公司有四個設計師,各自擁有獨立的案子, 當案子一多的時候list 會很多,會像大海撈針一般,群組的功能, 會讓我們自己快速找到自己的案子 到客戶端demo時,可以將其他專案隱藏起來。
  • 到客戶端討論介面的時候,可以快速地針對區塊或頁面作紀錄,更具視覺性的紀錄方式
  • 回到辦公室的時候,再透過comments檢核所有需要修改的內容

×