My lecture PPT: Shows the whole UX design process. If you want to see the lecture video in Chinese: https://v.qq.com/x/page/v03454ulip8.html

1. 1
UX Design Process
© Junying Chang

2. UX Lecture 1
June
UX designer, Silicon Valley
Master of HCID at University of Washington
Master of Architecture at University of Michigan
Email: cjunying@uw.edu
Linkedin

3. UX Lecture 1
1 UX Design
2 UCD Procss
3 Book and Software
AGENDA

4. UX Lecture 1
UX Design
用户体验设计

5. UX Lecture 1
Human Computer Interaction
User Experience Design (UXD)
User experience design is the process of enhancing user satisfaction
with a product by improving the usability, accessibility, and pleasure
provided in the interaction with the product.

6. UX Lecture 1
“Design is not just what it looks like and
feels like. Design is how it works.”
- Steven Jobs

7. UX Lecture 1
“Perhaps this is the fundamental distinc-
tion between pure art and pure design.
While great art makes you wonder, great
design makes things clear.”
- John Maeda

8. UX Lecture 1
UX Design
http://www.socialmediatoday.com/marketing/guide-user-journey-maps-and-why-you-need-them

9. UX Lecture 1
Human- Centered Research Based UCD Process Iteration
UX Design

10. UX Lecture 1
UX Design
Do You Have What It Takes To Succeed At User Experience Design? - UXBlog

11. UX Lecture 1
UX Design
Youtube Video: Click the image to view

12. UX Lecture 1
Case Study
Charity Donation Billboard Takes Credit Cards For Instant Altruism
https://youtu.be/ZcqsRhMHo8o

13. UX Lecture 1
UCD Process
用户体验设计流程

14. UX Lecture 1
UCD Design Process
Google.com

15. UX Lecture 1
UCD Design Process
http://dschool.stanford.edu/redesigningtheater/the-design-thinking-process/

16. UX Lecture 1
Case Study
Problem:
It is hard to find things at
home.
Goal:
help people find things at
home.
http://tonyip.com/doko.html

17. UX Lecture 1
Empathize
image source: https://theconfidencepost.com/2014/05/06/stop-listen-and-
“Work to fully understand the experi-
ence of the user for whom you are de-
signing. Do this through observation,
interaction, and immersing yourself in
their experiences.”

18. UX Lecture 1
User Interview
image source: https://theconfidencepost.com/2014/05/06/stop-listen-and-

19. UX Lecture 1
Survey
image source: http://www.workingwithjosh.info/fandango/

20. UX Lecture 1
Empathy Map
http://startupbisnis.com/sharing-apa-yang-saya-pelajari-setelah-mengikuti-college-startup-lab-part-2/

21. UX Lecture 1
User Journey
http://wireframes.linowski.ca/tag/user-journey/

22. UX Lecture 1
Define
image source: https://theconfidencepost.com/2014/05/06/stop-listen-and-
“Process and synthesize the findings
from your empathy work in order to
form a user point of view that you will
address with your design.”

23. UX Lecture 1
Persona
image source: https://theconfidencepost.com/2014/05/06/stop-listen-and-

24. UX Lecture 1
POV
image source: https://theconfidencepost.com/2014/05/06/stop-listen-and-
WHO, WHAT, WHY
A teenage girl with a bleak outlook needs to feel more socially accepted
when eating healthy food, because in her hood a social risk is more danger-
ous than a health risk.

25. UX Lecture 1
Ideate
image source: https://theconfidencepost.com/2014/05/06/stop-listen-and-
“Explore a wide variety of possible solutions through generat-
ing a large quantity of diverse possible solutions, allowing you
to step beyond the obvious and explore a range of ideas.
”

26. UX Lecture 1
同理心图
http://startupbisnis.com/sharing-apa-yang-saya-pelajari-setelah-mengikuti-college-startup-lab-part-2/
Human Computer Interaction
“If you want to have good ideas you
must have many ideas.”
- Linus Carl Pauling (1901 -1994)
Quantum Biochemist
Nobel Prize in Chemistry
Founder of Molecular Biology

27. UX Lecture 1
Ideation Process
http://www.frogdesign.com/services/process.html

28. UX Lecture 1
Brainstorm
https://www.aptitude.co.uk/blog/using-post-it-notes-for-content-brainstorming/

29. UX Lecture 1
Brainstorm
https://www.aptitude.co.uk/blog/using-post-it-notes-for-content-brainstorming/

30. UX Lecture 1
Affinity Diagram
http://www.pixelstream.com.au/ux-design/how-ego-gets-in-the-way-of-good-ux-

31. UX Lecture 1
Storyboard
http://tonyip.com/doko.html

32. UX Lecture 1
Sketch UI
http://tonyip.com/doko.html

33. UX Lecture 1
Prototype
image source: https://theconfidencepost.com/2014/05/06/stop-listen-and-
“Transform your ideas into a physical form so that you can ex-
perience and interact with them and, in the process, learn and
develop more empathy.
”

34. UX Lecture 1
Paper Prototype
http://thenextweb.com/dd/2014/11/12/15-ways-test-minimum-viable-product/

35. UX Lecture 1
Low-fi Prototype
balsamiq
http://www.meredith-hitchcock.com/inconcert-design/

36. UX Lecture 1
Low-fi Prototype
http://tonyip.com/doko.html

37. UX Lecture 1
Test
image source: https://theconfidencepost.com/2014/05/06/stop-listen-and-
“Try out products and use observations and feedback to refine
prototypes, learn more about the user, and refine your original
point of view.
”

38. UX Lecture 1
Eye Tracking
http://usabilitygeek.com/an-introduction-to-website-usability-testing/

39. UX Lecture 1
Test and Observation
http://usabilitygeek.com/an-introduction-to-website-usability-testing/

40. UX Lecture 1
Test and Observation
http://usabilitygeek.com/an-introduction-to-website-usability-testing/

41. UX Lecture 1
Test and Observation
https://www.coredevx.com/site/4-tools-for-a-successful-usability-test/

42. UX Lecture 1
Iteration
http://dschool.stanford.edu/redesigningtheater/the-design-thinking-process/

43. UX Lecture 1
Test Result Analysis
http://tonyip.com/doko.html

44. UX Lecture 1
Iteration and Hi-fi Prototype
http://tonyip.com/doko.html

45. UX Lecture 1
Mood Board
by June

46. UX Lecture 1
Color Analysis
by June

47. UX Lecture 1
Endless
http://tonyip.com/doko.html

48. UX Lecture 1
Iteration
http://tonyip.com/doko.html

49. UX Lecture 1
Iteration
http://tonyip.com/doko.html

50. UX Lecture 1
Process Book
A report which documents the design process
• Help make a portfolio
• Help show works to interviewers

51. UX Lecture 1
Process Book
http://www.aaronbrako.com/loop

52. UX Lecture 1
Process Book
http://www.aaronbrako.com/loop

53. UX Lecture 1
Books, Software..
推荐书籍和软件

54. UX Lecture 1
Low-fi Prototype
Balsamiq
http://www.meredith-hitchcock.com/inconcert-design/

55. UX Lecture 1
Hi-Fi Prototype
Sketch

56. UX Lecture 1
Flow Diagram
Omnigraffle

57. UX Lecture 1
Interactive Prototype
Marvel

58. UX Lecture 1
Interactive Prototype
Invision

59. UX Lecture 1
Interactive Prototype
Axure

60. UX Lecture 1
Book

61. UX Lecture 1
Book

62. UX Lecture 1
Book

63. UX Lecture 1
Book

64. UX Lecture 1
Q&A
问答时间

65. UX Lecture 1
Lecture Video in Chinese
https://www.youtube.com/watch?v=O4h0pOGMSuA