Ux design process
-
Upload
junying-chang -
Category
Design
-
view
465 -
download
7
Transcript of Ux design process
![Page 1: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/1.jpg)
1
UX Design Process
© Junying Chang
![Page 2: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/2.jpg)
UX Lecture 1
JuneUX designer, Silicon Valley
Master of HCID at University of Washington
Master of Architecture at University of Michigan
Email: [email protected]
![Page 3: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/3.jpg)
UX Lecture 1
1 UX Design
2 UCD Procss
3 Book and Software
AGENDA
![Page 4: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/4.jpg)
UX Lecture 1
UX Design用户体验设计
![Page 5: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/5.jpg)
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.
![Page 6: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/6.jpg)
UX Lecture 1
“Design is not just what it looks like and
feels like. Design is how it works.”
- Steven Jobs
![Page 7: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/7.jpg)
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
![Page 8: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/8.jpg)
UX Lecture 1
UX Design
http://www.socialmediatoday.com/marketing/guide-user-journey-maps-and-why-you-need-them
![Page 9: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/9.jpg)
UX Lecture 1
Human- Centered Research Based UCD Process Iteration
UX Design
![Page 10: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/10.jpg)
UX Lecture 1
UX Design
Do You Have What It Takes To Succeed At User Experience Design? - UXBlog
![Page 11: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/11.jpg)
UX Lecture 1
UX Design
Youtube Video: Click the image to view
![Page 12: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/12.jpg)
UX Lecture 1
Case StudyCharity Donation Billboard Takes Credit Cards For Instant Altruism
https://youtu.be/ZcqsRhMHo8o
![Page 13: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/13.jpg)
UX Lecture 1
UCD Process用户体验设计流程
![Page 14: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/14.jpg)
UX Lecture 1
UCD Design Process
Google.com
![Page 15: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/15.jpg)
UX Lecture 1
UCD Design Process
http://dschool.stanford.edu/redesigningtheater/the-design-thinking-process/
![Page 16: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/16.jpg)
UX Lecture 1
Case StudyProblem:
It is hard to find things at
home.
Goal:
help people find things at
home.
http://tonyip.com/doko.html
![Page 17: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/17.jpg)
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.”
![Page 18: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/18.jpg)
UX Lecture 1
User Interview
image source: https://theconfidencepost.com/2014/05/06/stop-listen-and-
![Page 19: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/19.jpg)
UX Lecture 1
Survey
image source: http://www.workingwithjosh.info/fandango/
![Page 20: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/20.jpg)
UX Lecture 1
Empathy Map
http://startupbisnis.com/sharing-apa-yang-saya-pelajari-setelah-mengikuti-college-startup-lab-part-2/
![Page 21: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/21.jpg)
UX Lecture 1
User Journey
http://wireframes.linowski.ca/tag/user-journey/
![Page 22: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/22.jpg)
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.”
![Page 23: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/23.jpg)
UX Lecture 1
Persona
image source: https://theconfidencepost.com/2014/05/06/stop-listen-and-
![Page 24: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/24.jpg)
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.
![Page 25: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/25.jpg)
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.
”
![Page 26: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/26.jpg)
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
![Page 27: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/27.jpg)
UX Lecture 1
Ideation Process
http://www.frogdesign.com/services/process.html
![Page 28: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/28.jpg)
UX Lecture 1
Brainstorm
https://www.aptitude.co.uk/blog/using-post-it-notes-for-content-brainstorming/
![Page 29: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/29.jpg)
UX Lecture 1
Brainstorm
https://www.aptitude.co.uk/blog/using-post-it-notes-for-content-brainstorming/
![Page 30: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/30.jpg)
UX Lecture 1
Affinity Diagram
http://www.pixelstream.com.au/ux-design/how-ego-gets-in-the-way-of-good-ux-
![Page 31: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/31.jpg)
UX Lecture 1
Storyboard
http://tonyip.com/doko.html
![Page 32: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/32.jpg)
UX Lecture 1
Sketch UI
http://tonyip.com/doko.html
![Page 33: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/33.jpg)
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.
”
![Page 34: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/34.jpg)
UX Lecture 1
Paper Prototype
http://thenextweb.com/dd/2014/11/12/15-ways-test-minimum-viable-product/
![Page 35: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/35.jpg)
UX Lecture 1
Low-fi Prototypebalsamiq
http://www.meredith-hitchcock.com/inconcert-design/
![Page 36: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/36.jpg)
UX Lecture 1
Low-fi Prototype
http://tonyip.com/doko.html
![Page 37: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/37.jpg)
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.
”
![Page 38: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/38.jpg)
UX Lecture 1
Eye Tracking
http://usabilitygeek.com/an-introduction-to-website-usability-testing/
![Page 39: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/39.jpg)
UX Lecture 1
Test and Observation
http://usabilitygeek.com/an-introduction-to-website-usability-testing/
![Page 40: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/40.jpg)
UX Lecture 1
Test and Observation
http://usabilitygeek.com/an-introduction-to-website-usability-testing/
![Page 41: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/41.jpg)
UX Lecture 1
Test and Observation
https://www.coredevx.com/site/4-tools-for-a-successful-usability-test/
![Page 42: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/42.jpg)
UX Lecture 1
Iteration
http://dschool.stanford.edu/redesigningtheater/the-design-thinking-process/
![Page 43: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/43.jpg)
UX Lecture 1
Test Result Analysis
http://tonyip.com/doko.html
![Page 44: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/44.jpg)
UX Lecture 1
Iteration and Hi-fi Prototype
http://tonyip.com/doko.html
![Page 45: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/45.jpg)
UX Lecture 1
Mood Board
by June
![Page 46: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/46.jpg)
UX Lecture 1
Color Analysis
by June
![Page 47: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/47.jpg)
UX Lecture 1
Endless
http://tonyip.com/doko.html
![Page 48: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/48.jpg)
UX Lecture 1
Iteration
http://tonyip.com/doko.html
![Page 49: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/49.jpg)
UX Lecture 1
Iteration
http://tonyip.com/doko.html
![Page 50: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/50.jpg)
UX Lecture 1
Process Book
A report which documents the design process
• Help make a portfolio• Help show works to interviewers
![Page 51: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/51.jpg)
UX Lecture 1
Process Book
http://www.aaronbrako.com/loop
![Page 52: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/52.jpg)
UX Lecture 1
Process Book
http://www.aaronbrako.com/loop
![Page 53: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/53.jpg)
UX Lecture 1
Books, Software..推荐书籍和软件
![Page 54: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/54.jpg)
UX Lecture 1
Low-fi Prototype
Balsamiq
http://www.meredith-hitchcock.com/inconcert-design/
![Page 55: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/55.jpg)
UX Lecture 1
Hi-Fi Prototype
Sketch
![Page 56: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/56.jpg)
UX Lecture 1
Flow Diagram
Omnigraffle
![Page 57: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/57.jpg)
UX Lecture 1
Interactive Prototype
Marvel
![Page 58: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/58.jpg)
UX Lecture 1
Interactive Prototype
Invision
![Page 59: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/59.jpg)
UX Lecture 1
Interactive Prototype
Axure
![Page 60: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/60.jpg)
UX Lecture 1
Book
![Page 61: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/61.jpg)
UX Lecture 1
Book
![Page 62: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/62.jpg)
UX Lecture 1
Book
![Page 63: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/63.jpg)
UX Lecture 1
Book
![Page 64: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/64.jpg)
UX Lecture 1
Q&A问答时间
![Page 65: Ux design process](https://reader034.fdocuments.net/reader034/viewer/2022042520/58ac37511a28ab145e8b59d9/html5/thumbnails/65.jpg)
UX Lecture 1
Lecture Video in Chinese
https://www.youtube.com/watch?v=O4h0pOGMSuA