從 Personas 到 Scenarios 再到 Stories，最後得到 Requirements 根據上述資訊，不斷進行 Refinement

1. About Face 4
Ch5 : Designing the Product
Framework and Refinement

2. What we get from Ch4
Personas
Scenarios
Stories
Requirements

3. We get user stories and
requirements
Storyboarding

4. Why
Design Framework ?
1

5. “Design Framework is the overall
structure of users’ experience and
associated behaviors.

6. Design Framework
◎ Interaction framework
◎ Visual design framework
◎ Industrial design framework
◎ Service design framework

7. TechnologiesPeople Context
Interfaction framework：PACT
Activities

8. Interaction Framework：
Five dimensions
Bill Moggridge
IDEO 創辦人之一
1. Words
2. Visual
representations
3. Physical objects or
space
4. Time
5. Behavior
From 《Designing Interactions》

9. 關鍵設計報告
（Designing Interactions）

10. Interfaction framework
◎ factor, posture, input method
◎ functional and data elements
◎ functional groups and hierarchy
◎ sketch
◎ key path scenarios
◎ check design with scenarios

11. Interfaction framework
Sketch tools
◎ POP app
◎ Sketch ?
◎ Axure RP ?
◎ Balsamiq Mockups
◎ 直接畫白板 + 拍照
◎ fluidui
◎

12. Visual design framework
◎ experience attributes
◉ 品牌形象
◉ Design guideline
◎ visual language studies
◎ apply the style with interaction
framework

13. Service design framework
◎ User Journey Map ( Customer
Journey Map, Experience Map )
◎ Service blueprint (Shostack,
1984)
◎ QFD (Quality Function
Deployment, 品質機能展開, 赤尾
洋二和水野滋, 1972)
◎ Experience prototype

14. Service design framework
User Journey Map
◎
圖片來源：UX 實驗室

15. Service design framework
User Journey Map
◎ Starbucks Experience Map

16. Service design framework
Service blueprint
圖片來源：經理人

17. Service design framework
QFD
圖片來源：《新產品管理》，華泰出
版

18. Service design framework
Experience prototype
圖片來源：servicedesignbtools

19. Refinement
◎ UI : Wireframe -> Mockup ->
Prototype
(Sketch, Axure RP …)
◎ Iteration of key path scenarios
◎ Detail storyboarding
◎ HTML/CSS/JavaScript
◎ Guideline Document
◎

20. Validation and Testing
◎ Usability Test
◉ explain the design for user’s
feedback
◉ predefined tasks/jobs for
user
◎ It’s Evaluation ! Not Creation !
◎ User research is more important
then User usability test

21. Test what ?
◎ Naming
◎ Category
◎ First-time use
◎ Discoverability
◎ Effectiveness
◎

22. Thanks!
Any questions?