ux design process

1

UX Design Process

© Junying Chang

UX Lecture 1

JuneUX designer, Silicon Valley

Master of HCID at University of Washington

Master of Architecture at University of Michigan

Email: [email protected]

Linkedin

https://www.linkedin.com/in/junying-chang-130aa158/

UX Lecture 1

1 UX Design

2 UCD Procss

3 Book and Software

AGENDA

UX Lecture 1

UX Design用户体验设计

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.

UX Lecture 1

“Design is not just what it looks like and

feels like. Design is how it works.”

- Steven Jobs

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

UX Lecture 1

UX Design

http://www.socialmediatoday.com/marketing/guide-user-journey-maps-and-why-you-need-them

UX Lecture 1

Human- Centered Research Based UCD Process Iteration

UX Design

UX Lecture 1

UX Design

Do You Have What It Takes To Succeed At User Experience Design? - UXBlog

UX Lecture 1

UX Design

Youtube Video: Click the image to view

https://www.youtube.com/watch?v=Ovj4hFxko7c

UX Lecture 1

Case StudyCharity Donation Billboard Takes Credit Cards For Instant Altruism

https://youtu.be/ZcqsRhMHo8o

UX Lecture 1

UCD Process用户体验设计流程

UX Lecture 1

UCD Design Process

Google.com

UX Lecture 1

UCD Design Process

http://dschool.stanford.edu/redesigningtheater/the-design-thinking-process/

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


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.”

UX Lecture 1

User Interview


UX Lecture 1

Survey

image source: http://www.workingwithjosh.info/fandango/

UX Lecture 1

Empathy Map

http://startupbisnis.com/sharing-apa-yang-saya-pelajari-setelah-mengikuti-college-startup-lab-part-2/

UX Lecture 1

User Journey

http://wireframes.linowski.ca/tag/user-journey/

UX Lecture 1

Define


“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.”

UX Lecture 1

Persona


UX Lecture 1

POV


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.

UX Lecture 1

Ideate


“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.

”

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

UX Lecture 1

Ideation Process

http://www.frogdesign.com/services/process.html

UX Lecture 1

Brainstorm

https://www.aptitude.co.uk/blog/using-post-it-notes-for-content-brainstorming/

UX Lecture 1

Affinity Diagram

http://www.pixelstream.com.au/ux-design/how-ego-gets-in-the-way-of-good-ux-

UX Lecture 1

Storyboard


UX Lecture 1

Sketch UI


UX Lecture 1

Prototype


“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.

”

UX Lecture 1

Paper Prototype

http://thenextweb.com/dd/2014/11/12/15-ways-test-minimum-viable-product/

UX Lecture 1

Low-fi Prototypebalsamiq

http://www.meredith-hitchcock.com/inconcert-design/

UX Lecture 1

Low-fi Prototype


UX Lecture 1

Test


“Try out products and use observations and feedback to refine prototypes, learn more about the user, and refine your original point of view.

”

UX Lecture 1

Eye Tracking

http://usabilitygeek.com/an-introduction-to-website-usability-testing/

UX Lecture 1

Test and Observation

http://usabilitygeek.com/an-introduction-to-website-usability-testing/

UX Lecture 1

Test and Observation

https://www.coredevx.com/site/4-tools-for-a-successful-usability-test/

UX Lecture 1

Iteration

http://dschool.stanford.edu/redesigningtheater/the-design-thinking-process/

UX Lecture 1

Test Result Analysis


UX Lecture 1

Iteration and Hi-fi Prototype


UX Lecture 1

Mood Board

by June

UX Lecture 1

Color Analysis

by June

UX Lecture 1

Endless


UX Lecture 1

Iteration


UX Lecture 1

Process Book

A report which documents the design process

• Help make a portfolio• Help show works to interviewers

UX Lecture 1

Process Book

http://www.aaronbrako.com/loop

UX Lecture 1

Process Book

http://www.aaronbrako.com/loop

http://www.aaronbrako.com/files/loop/loop_process-book.pdf

UX Lecture 1

Books, Software..推荐书籍和软件

UX Lecture 1

Low-fi Prototype

Balsamiq

http://www.meredith-hitchcock.com/inconcert-design/

UX Lecture 1

Hi-Fi Prototype

Sketch

UX Lecture 1

Flow Diagram

Omnigraffle

UX Lecture 1

Interactive Prototype

Marvel

UX Lecture 1


Invision

UX Lecture 1


Axure

UX Lecture 1

Book

UX Lecture 1

Q&A问答时间

UX Lecture 1

Lecture Video in Chinese

https://www.youtube.com/watch?v=O4h0pOGMSuA

https://www.youtube.com/watch?v=O4h0pOGMSuA