本文介绍了金融服务创新的概念原型，通过设计思考双钻结构进行用户研究和定义使用者故事，强调功能地图和关键线框稿的作用，以确保用户体验和开发人员的有效沟通。同时，提供了有关交互原型和流程图的概念，以便团队在创意和实施阶段的协同工作。

1. 金融服務
創新 王思如
2021.5.18
概念原型

2. 2
本週角色分配
導
演
副
導
演
設
計
師
研
究
員
看
護
員

3. 3
設計思考雙鑽結構
機會
研究
破 立
解構符號 建造符號
解方
洞察 創意 原型
探索 定義 發展 產出

4. 4
今日課程
創意概念 概念原型
創新
矩陣
UI Flow
用戶研究 分析洞察
招募
訪談
劇本法
Scenario
人物誌
Persona
議題卡
HMW
主軸
命題
顧客
歷程
樂高
微場景
Story Map
Prototype
Function
Map

5. 5
使用者
故事對照
User Story Mapping
幫助團隊協同合作
並想像產品的
使用經驗

6. 6
執行方式
1. 從顧客歷程元素地圖中，定義出與
系統服務相關的使用情境
2. 將使用情境拆解成數個用戶與系統
服務的使用步驟
3. 把每一個互動步驟，轉化成具體的
用戶故事
4. 用戶故事的描述：
身為 什麼樣的角色
我想要 做什麼事/如何使用功能
所以我能夠 獲得某種利益
5. 在描述用戶的過程中，可以再增添
一些不同的用戶與旁枝的故事

7. 7
功能
地圖
Functional Map
將使用者需求變成功能規格
圖表的方法。
主要用於與開發人員確認功
能，通常以心智圖方式呈現。

8. 8
功能地圖
從用戶故事裡
我想要 做什麼事/如何使用功能
拆解、盤點系統裡的功能
再進行分類，畫成心智圖

9. 9
關鍵
線框稿
Key Wireframe
低保真度的設計原型，在
去除所有視覺設計細節後，
進行頁面結構、功能、內
容的規劃

10. 10
關鍵線框稿
從使用步驟中
拆解用戶的互動畫面
再依據功能使用的需求
以及基本互動的邏輯
規劃出關鍵頁面的結構
Reference: https://boagworld.com/season/lean-ux/episode/create-wireframes/

11. 11
流程圖
Logic Flow
便於與開發人員討論並
確認所有狀態和需要功能
Reference: https://ithelp.ithome.com.tw/articles/10240019

12. 12
Flow Chart
使用了特定圖形符號
來表示解決問題的步驟和程序，
可以用來檢驗使用者操作時，
可能發生的所有功能狀態

13. 13
UI Flow
頁面之間的操作流程。
知道使用者怎麼操作一項功能後，
才能去規劃動線。

14. 14
Wireflow
有頁面的線框稿呈現、也有頁面間的動線，
適合擅長視覺思考的設計師使用

15. 15
互動
原型
Prototype
可以擁有完整互動體驗與設計
甚至呈現產品真實資料的高保
真原型

16. 16

17. 17
作業
下次課堂帶來：
- 手機版互動原型
- 關鍵互動畫面截圖(1:1 輸出)

18. 金融服務
創新
Thank you!
概念原型