Update: New design process diagram Some thoughts about design career This is a talk for introducing UX concept, process and prototyping tools I gave for undergraduate design students.

1. Kaba Su
Yahoo Design

2. Who do you want to be?
‣ Start up founder
‣ Designer
‣ F–codeDesigner
‣ PM
‣ Developer

3. Interaction Designer
What the society think I do. What my friends think I do. What my mom think I do.
?
What engineers think I do What I think I do. What I really do.

4. ‣ UXE)ÜFe]Ü
‣ †‹
‣ r¯87–code

6. 使用者經驗

8. USER
Bad experience
塊
陶
啊

9. 存續
Business
viability
可行
Technology
feasibility
需求
User
desirability
:®D

10. UX User eXperience
]!b1y

11. UCD User Centered Design
]!bn[

12. Empathy ~)6

13. ⤓⑺ 䗹⑺

14. $4)/E0
.k-3 /////

15. UX策略與設計流程

16. 策略就是方向、 時機跟程度。
而且順序不能錯。
՝Ô

17. Self-actualization
%yd
Esteem
%É
Social needs
ĉ6*
Safety and Security
jn_ƒÓ
Physiological needs
¶t/b|}
Maslow - Hierarchy of needs

18. vT’Ž
_”{q
Meaningful
)AEy
Emotional
A.
Rational
M
E
R

19. vT’Ž
strategy
”
h}
n[
Inspiration
Ideation
Design
Vision

20. vT’Ž
strategy
”
Inspiration
Ideation
n[
Design
‘2
Build
(g
Evaluate
plreoaarcntiinvge lreeaarcntiinveg

21. Optimization Revamp Innovation
‣ Metrics driven
‣ Usability
‣ Lean testing
‣ User Study ‣ Design research
‣ Exploratory
research
‣ Conceptual front-end

22. ]!b 9

23. 廟算者，多算勝，少算敗？

24. ¿JŸ„~
{OŸ„~
Ÿ„ÃÀz
dŒ UX ŽÆ²©Ë:
87‹
œdQb

25. source: Nordstrom Innovation Lab

26. 食無定味，適口者珍
山家清供，林洪

27. Don’t listen to your users

28. Context
†
Concept
Ïš
Observe them

29. -H
30:+œ
Uk@.%
]!ba;,
#n[cY‰k@]!1y
˜p(Z]!b4k@SIN]!b_”›
j„^t$

30. ;

31. 3!

32. 8A

34. !—z«ÊÐ
E‚Ü
^E!B—¥ž
E‚Ü
^E=,4
E‚Ü
^E!@%?¾¨

35. E‚Ü
ÖºØÙ
....

36. ™l]!b–=
R`k@.%

37. © 2011 Jeremy Alexis
52
Need Finding Idea generation Prototyping
“how might
we?”
Value
proposition
Research Patterns Ideas Concept
systems
Build Iterate

38. 設計就是不停地戰鬥

39. 2,500,000
Lotus Elise S

40. X L— X 12 = ? NTD

41. F(7J

42. fi:t
Ïš ªo h:

43. fi:t
Ïš ªo h:

44. 2345N1

45. 0
2
3
4
5
N
1

46. 0 1

47. „¼
KGWŠšKSV d
Íx×´

48. prototype

49. B% (g~z

50. 世界之窗，重新設計
Redesigning
the way you
see the world

52. 使用者告訴我們...
What we learned from users

53. 使用者告訴我們...
What we learned from users
Hų…+
!LD`
!¤y5i™
În¹Â
產品設計原則
Product design principles ¤yS9
!#v¡A
ra
t
Efficiency
Rich content
To to know simply express They want what participate themselves
diversity
others and
feel

54. 彙整多元觀點

55. 快速
易於參與

56. 產品設計原則
Product design principles

57. )%7.'C
1S2+6
HOW MIGHT WE DESIGN THE EASIEST WAY
FOR USERS TO EXPRESS THEIR OPINION?

58. R#5-
THE MOST DELIGHTFUL WAY TO
KNOW WHAT OTHERS FEEL?

59. 戰鬥就是快
Rapid Prototyping

60. /-M|

61. -5O

66. Prototyping tools

67. Prototyping tools
3 O9 O9 O9 $9 9
i O O O $M OM OM
*oXN $M ¦ ¦ $ OM OM
Œ*wN $ $M $M M OM OM
€'Cw M M M OM $ $¦
(gˆf ¦ ¦ ¦ $ M $
“8 ¦ M OM $M ¦ M

68. Prototyping tools
Axure http://www.axure.com/
Flinto
https://www.flinto.com/
example screens:
http://goo.gl/5w1Gkk
Invision http://www.invisionapp.com/
framer.js http://framerjs.com/
pixate http://www.pixate.com/

69. Keynote
animation prototype
87+sÛO9
›FÛO
J €°sÛ$M
¿J¬sÛ$R
m¬±d¬sÛM
g•¸”Û¦

73. Flinto
Browser base prototype
87+sÛO9
›FÛO
J €°sÛ¦
¿J¬sÛ$M
m¬±d¬sÛM
ÌvÛM
g•¸”Û¦

75. Invision
Browser base prototype
87+sÛO9
›FÛO
J €°sÛ¦
¿J¬sÛ$M
m¬±d¬sÛM
ÌvÛOM
g•¸”Û¦

76. Axure
Browser base prototype
87+sÛ
›FÛ$M
J €°sÛ$R
¿J¬sÛM
m¬±d¬sÛM
g•¸”Û$

77. Pixate
interactive single screen
prototyping
87+sÛ9
›FÛOM
J €°sÛOM
±d¿J¬sÛOM
m¬±d¬sÛ$¦
g•¸”Û$

78. framer.js
highly interactive single screen
prototyping
87+sÛ9
›FÛOM
J €°sÛOM
±d¿J¬sÛOM
m¬±d¬sÛ$
g•¸”ÛM

80. 小結

81. ‣ Developer
‘aZÚ£w‹»
O#BÒÈc
Code for a meaning
‣ Designer
motion ’½rµ
user insightlu­
prototyping F@ˆÁH·“
§z‡!{OŠ
‣ PM / founder
˜ ;¢ŸÚoWq
eN²©g0ÑS
6²©2Yp

82. Tactic Strategic
your career

83. your career
Tactic Strategic

84. your career
Tactic Strategic

85. 一位非常成功的微禿中年曾說

86. 你的時間有限，不要為別人而
活，不要規循別人的信念中...
最重要的是，鼓起勇氣跟隨你
的心靈與直覺，它們才知道你
想成為怎樣的人。
Stay hungry, stay foolish.

87. 重要的是，千萬不要以為你是 Steve Jobs

88. 與夥伴一起改變世界！

89. Ç¿JŸ„~Ì

91. Thank you