Uploaded byJoy Tsai
專案設計流程 x Prott 蹦出新滋味
文档介绍了精诚随想的设计流程以及客户沟通的策略，强调通过用户故事和功能分析来满足客户需求。该公司有成功的项目经验，包括与多家银行和政府机构的合作。文档还提到使用Prott工具来快速建立原型和改进用户体验。
![[MIX 2015] 回歸用戶需求—日本YAMAHA鋼琴的創新故事 / 陳鼎文 (beBit微拓公司 大中華區總經理)](https://cdn.slidesharecdn.com/ss_thumbnails/20150515mix2015bebit-150527064954-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![[MIX2018]台灣體驗設計的視野與展望 - 陳啟亮／UiGathering 台灣使用者經驗設計協會 理事長](https://cdn.slidesharecdn.com/ss_thumbnails/03charles20180503-180528060239-thumbnail.jpg?width=640&height=640&fit=bounds)
專案設計流程 x Prott 蹦出新滋味
- 1. 專案設計流程 x Prott蹦出新滋味 J o y
- 2. Hello! I am JoyTsai 現任 • 精誠隨想 UI/UX Designer 其他經歷 • 2017 AI Chat Bot office365組-亞軍 • 2016 一秒搞動政府創意競賽 通關全局獎 • 2015 新竹市府官網黑客松大賽 冠軍
- 3. 1 關於精誠隨想 2隨想的設計流程 3 隨想的客戶溝通心法 4 隨想玩Prott CONTENT
- 4. 精 誠 隨想 是 幹 嘛 的 ？ 關於精誠隨想 1
- 5.
- 6. • 精誠隨想成立 • 2004 •培養長期合作客戶 • 與台北富邦銀行推出消金專屬APP • 與南山合作推出理賠通、服務通、行動業務員 • 與長榮航空合作推出EVA Cargo • 2013 • 數位轉型 • 證券與銀行線上開戶 • 與遊戲橘子數位行銷 • 第一銀行理專數位行銷 • 2016 • 2011年加入精誠集團 • 與新光人壽合作壽險軟體平台業務 • 其他產業發展，百貨、通路、航空 • 與安泰投信合作推出行動業務員 • 2005-2012 • 穩定成長 • Yahoo股市、星展銀行個人信貸 • 兆豐銀行信用卡補件、第一銀行企網Worklight • 新光人壽保單健診、新光保全行動出勤、威航訂票 • 2014-2015 精誠隨想深耕行動技術超過10年
- 7. 1 2 3 56 7 4 8 銀行 第一 / 彰銀 / 瑞興 / 新光 / 兆 豐 / 元大 / 匯豐 / 富邦 / 中信 / 澳盛 / 星展/ 玉山/凱基/上海商 銀 行動銀行、APP Portal、信用 卡補件、個人信貸申辦、信用 卡優惠訊息、線上開戶。企業 內部行動行銷系統 證券/期貨 Yahoo!/元大 / 兆豐 / 永豐 / 永全 / 元富 / 新光 / 國泰/ Yahoo!/凱基證/富邦證/合庫證 /日盛證/統一證 投資人看盤下單APP、線上開 戶 投信/投顧 聯大 / ING（野村投信） 客戶的看盤APP、基金推薦、 行動業務員 電信業者 遠傳 / 中華電信 / 台哥大 投資人看盤下單APP 流通運輸 長榮 / 立榮 / 酒品經銷商 / HKS好康多 / 東森 客戶查詢APP、企業內部應用 APP 政府 交通部 / 台電/ 科專計畫 民眾查詢APP、旅遊資訊APP 產壽險 南山 / 富邦 / 新光 / 蘇黎世 / 國泰/中壽/第一金壽 電子簽名、行銷工具、保單資 訊、建議書、推播系統 其他 默沙東藥廠/兄弟象/新光保全 查詢醫療APP/球場互動APP/ 保全勤務系統 APP建置經驗 深耕擴展各產業
- 8.
- 9. SoftMobile Design ABC ArtAcademy 設計 管理與訓練 Business Strategy 商務營運與策略 Customer Facing 顧客溝通與洞察
- 10.
- 11.
- 12.
- 14.
- 15. 客戶這樣說…… • 我們要有ＯＯＯＯ的功能 • 我們要合併Ａapp跟B app • 一定要透過Xxapp登入使用 • 現行的網站內容都要放進去喔 • 可以用FB註冊吧，Line也可以吧？ • 我們已經有一個現行的系統，可以直接 給你們資料做成app • 一定要可以推播 • 介面越簡單越好 • 色彩要用我們企業的顏色 • 風格不要退流行 • Apple可以這樣做，你們也可以吧 • 首頁可以放很多功能嗎？ • 步驟越少越好 • 操作可以越快越好 • 我們想要參考ＸＸＸapp的設計
- 17.
- 18. 解決_______問題 • 客 戶在 作 業 流 程 上 有 繁 瑣 的 流 程 ， 需 要 被 解 決 需要_______的服 務• 客 戶 需 要 一 個 數 位 轉 型 的 服 務 一個需求的開始
- 19.
- 20. UI/UX Design Process User Story 1.需求定義2.設計規劃 3.系統研發 Function Map • 快速發現痛點與需求 • 聚焦功能 • 產品定位 • 產品架構與流程 • 設計語言與風格 • 介面一致性 Flow Chart UI Flow Wireframe Prototype Mockup Total Feedback & Review Design Spec & Guideline 設計模型
- 21. User Story 精 準的 分 析 使 用 者 ， 快 速 抓 出 使 用 者 的 樣 貌 確切地找到使用者的特點 了 解 使 用 者 需 求 ， 能 用 文 字 描 述 具 體 呈 現 深入了解客戶需求 以 使 用 者 為 中 心 ， 用 情 境 的 模 式 ， 更 能 貼 近 使 用 者 使用者導向 利 用 一 個 一 個 小 的 故 事 ， 開 發 出 一 個 一 個 的 小 功 能 快速了解產品情境
- 22. Functional Map 確 切擬 定 專 案 需 求 範 圍 ， 確 保 失 焦 聚焦專案需求範圍 了 解 資 訊 內 容 的 流 動 資訊架構分層 快 速 釐 清 專 案 所 需 功 能 項 目 總覽APP整體功能 透 過 功 能 分 類 ， 掌 握 A P P 會 產 生 的 各 種 事 件 與 狀 態 掌握App會發生的狀態
- 23. UI Flow 了 解產 品 最 完 整 的 流 程 操 作 ， 可 以 預 防 出 錯 的 機 率 理解操作動線 可 以 清 楚 的 知 道 頁 面 與 頁 面 的 關 係 ， 了 解 所 有 頁 面 的 串 連 方 式 了解頁面串連
- 24. 設計模型 設計模型 擬真嗎？ Paper Wireframe 擬真＝模擬真實最後產出 Wireframe Paper WireframeX Prototype Mockup Wireframe X Prototype Mockup X Prototype 內部快速溝通 低 高 客戶溝通
- 25.
- 26.
- 27.
- 28. 善用「組織、聚焦、圖像化」 精準確立客戶需求，落實設計流程，讓團隊在開發產品時更為順利 • 完善的設計管理，建構完整的設計語言 • 為客戶組織、量身打造UX策略 •邏輯性且聚焦的和客戶一起解決問題、建構服務
- 29. 是 怎 麼給 客 戶 灌 迷 湯 的 ？ 隨想與客戶的溝通心法 3
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38. 遵照準則走 Human Interface GuidelinesGoogle Design - Material design
- 39.
- 40.
- 41. 看 看 隨想 怎 麼 應 用 P r o t t 的 隨想玩Prott 4
- 42. PMDesigner RD 主要編輯者 Check Comments ResolvedComments 簡報模式愛用者 Comments狂人 Check Resolved 會議紀錄 規格紀錄 檢核UI flow 確認規格紀錄 客戶 URL享用者
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53. 谢 谢 聆听THANKS FOR YOUR WATCHING Any Questions? joy_tsai@softmobile.com.tw
Editor's Notes
- #6 精誠隨想隸屬於精誠資訊集團旗下的金融服務事業體
- #13 在專案開始前，我們都可以從各方角度去聽到客戶想要的是什麼、想做什麼
- #16 開始面對客戶的時候，客戶都會說出一些他們所謂“想做的東西”
- #19 客戶因為在一個“什麼樣的情況下”，有“什麼樣的問題”需要被解決，又或者，他們需要一個“什麼樣的”服務。
- #21 為了更確實的能更瞭解客戶的需求，我們會導入完整的 UI/UX Design Process 而整體會由PM和設計師去針對專案的性質、時程，做細部Process的微調，像是可能會簡化某些區塊的內容。
- #22 這邊我們會用最簡單的Persona 來定義出目標使用者的樣貌與輪廓 再透過5W1H的方式，釐清客戶的需求，並延伸出產品執行的策略。
- #23 而有了User Story之後，會快速地抓到使用者需要的功能，我們可以擬定出整體的功能清單並發展出 Functional Map 做完了Functional Map 之後，我們可以有四個好處， 並能有這個文件依據，能和客戶做局部的需求釐清後，就能更聚焦的繼續往下Go
- #24 介面流程（UI Flow）主要用來說明頁面與頁面的操作動線。 因為使用者這樣操作、以及我們有這些功能和資訊要呈現，所以頁面和頁面之間如此串接。
- #27 建構一套設計語言，與通用的元件，可以確保介面的一致性
- #30 接下來這個部分，分享一些身為接案公司的隨想，都是怎麼跟客戶溝通的一些心法
- #31 這邊分成 溝通 和 說服 兩個面向來說 在溝通這個部分，我整理出三個通用的重點
- #32 第一個建立共同語言，
- #33 專案工作說明書(Project Statement Of Work 1/RFP / SOW / Scope / TA / Insights / Features 2/用詞彼此有無理解
- #37 備好完善的設計模型，讓客戶實際進行操作，並觀察客戶操作時遇到的問題，並尋問他為什麼，或是著詢問他的想法 從客戶的想法與設計的模型中，找出脈絡與解決的辦法。
- #46 完整的服務流程置放在手機上，讓客戶可以直接把玩，體驗
- #51 我們公司有四個設計師，各自擁有獨立的案子， 當案子一多的時候list 會很多，會像大海撈針一般，群組的功能， 會讓我們自己快速找到自己的案子 到客戶端demo時，可以將其他專案隱藏起來。
- #52 到客戶端討論介面的時候，可以快速地針對區塊或頁面作紀錄，更具視覺性的紀錄方式
- #53 回到辦公室的時候，再透過comments檢核所有需要修改的內容