1. 專案設計流程 x Prott 蹦出新滋味
J o y

2. Hello!
I am Joy Tsai
現任
• 精誠隨想 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
5 6 7
4
8
銀行
第一 / 彰銀 / 瑞興 / 新光 / 兆
豐 / 元大 / 匯豐 / 富邦 / 中信 /
澳盛 / 星展/ 玉山/凱基/上海商
銀
行動銀行、APP Portal、信用
卡補件、個人信貸申辦、信用
卡優惠訊息、線上開戶。企業
內部行動行銷系統
證券/期貨
Yahoo!/元大 / 兆豐 / 永豐 /
永全 / 元富 / 新光 / 國泰/
Yahoo!/凱基證/富邦證/合庫證
/日盛證/統一證
投資人看盤下單APP、線上開
戶
投信/投顧
聯大 / ING（野村投信）
客戶的看盤APP、基金推薦、
行動業務員
電信業者
遠傳 / 中華電信 / 台哥大
投資人看盤下單APP
流通運輸
長榮 / 立榮 / 酒品經銷商 /
HKS好康多 / 東森
客戶查詢APP、企業內部應用
APP
政府
交通部 / 台電/ 科專計畫
民眾查詢APP、旅遊資訊APP
產壽險
南山 / 富邦 / 新光 / 蘇黎世 /
國泰/中壽/第一金壽
電子簽名、行銷工具、保單資
訊、建議書、推播系統
其他
默沙東藥廠/兄弟象/新光保全
查詢醫療APP/球場互動APP/
保全勤務系統
APP建置經驗 深耕擴展各產業

8. 接案公司的UIUX Design Process
隨想的設計流程
2

9. SoftMobile Design ABC
Art Academy
設計 管理與訓練
Business Strategy
商務營運與策略
Customer Facing
顧客溝通與洞察

10. 以保險業專案來看隨想的設計流程

11. 專案開始前 腦力激盪期 專案開發中

12. 給內部
使用的
業務員要
用的
每個人使用都很
好上手的
我們要做
一個APP
以前有做
過，但是
很難用
希望他們
每天都可
以用
簡單又
好用
可以走到
哪用到哪
Android
和iOS 都
可以用
那個誰誰
誰有做，
我們也想
做
可以跟
Line/FB
連結嗎？
舊的介面很醜，
想改漂亮一點
客戶
資料
機密
壽險
業
就是
要快
手機
的好
了

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 Wireframe X
Prototype
Mockup
Wireframe X Prototype
Mockup X Prototype
內部快速溝通
低 高
客戶溝通

25. 專案開始前 腦力激盪期 專案開發中

26. UI Kit

27. Design Guideline

28. 善用「組織、聚焦、圖像化」
精準確立客戶需求，落實設計流程，讓團隊在開發產品時更為順利
• 完善的設計管理，建構完整的設計語言
• 為客戶組織、量身打造UX策略
• 邏輯性且聚焦的和客戶一起解決問題、建構服務

29. 是 怎 麼 給 客 戶 灌 迷 湯 的 ？
隨想與客戶的溝通心法
3

30. 客戶溝通的三大重點

31. 建立共同語言

32. 建立共通語言
產品目標策略一致
使用的名詞彼此是否理解

33. 讓畫面說話

34. 讓畫面說話
聚焦內容
同步概念

35. 讓客戶玩玩看、
聆聽客戶的聲音

36. 讓客戶玩玩看、聆聽客戶的聲音
讓客戶實際體驗
讓客戶說說他的想法

37. 說服客戶的三個心法

38. 遵照準則走
Human Interface Guidelines Google Design - Material design

39. 站在巨人肩膀
成功案例怎麼做
3個地區3個成功案例

40. 說個故事給他聽

41. 看 看 隨 想 怎 麼 應 用 P r o t t 的
隨想玩Prott
4

42. PMDesigner RD
主要編輯者
Check Comments
Resolved Comments
簡報模式愛用者
Comments狂人
Check Resolved
會議紀錄
規格紀錄
檢核UI flow
確認規格紀錄
客戶
URL享用者

43. 提案

44. 4
4
華麗的簡報模式

45. 擬真的prototype

46. 專案進行中…

47. 直觀快速的建立Prototype

48. 操作體驗的確認

49. 明確的UI flow

50. 群組管理與隱藏專案

51. 和客戶討論的會議記錄

52. 透過comments
檢核修改項目

53. 谢 谢 聆 听THANKS FOR YOUR WATCHING
Any Questions?
joy_tsai@softmobile.com.tw