What is ux design? A behind the scenes tour
-
Upload
neil-turner -
Category
Design
-
view
111 -
download
3
description
Transcript of What is ux design? A behind the scenes tour
![Page 1: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/1.jpg)
Neil TurnerDec 2012
What is UX design? A behind the scenes tour
![Page 2: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/2.jpg)
“Most people make the mistake of thinking design is what it looks like. It’s not just what it looks like and feels like. Design is how it works.”
Steve Jobs
![Page 3: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/3.jpg)
"What makes people passionate, pure and simple, is great experiences. If they have great experience with your product (and) they have great experiences with your service, they’re going to be passionate about your brand."
Jesse James Garrett
![Page 4: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/4.jpg)
![Page 5: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/5.jpg)
The finished design… is just the tip of the iceberg!
![Page 6: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/6.jpg)
a web page
The 7 ages of man
![Page 7: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/7.jpg)
1. The idea
![Page 8: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/8.jpg)
Business needs Customer needs
UX
The sweet spot…
![Page 9: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/9.jpg)
2. The concept
![Page 10: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/10.jpg)
Storyboards
![Page 11: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/11.jpg)
Sitemaps
![Page 12: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/12.jpg)
3. The sketch
![Page 13: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/13.jpg)
Page sketches
![Page 14: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/14.jpg)
Getting feedback
![Page 15: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/15.jpg)
Survival of the fittest
![Page 16: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/16.jpg)
4. The wireframe
![Page 17: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/17.jpg)
Wireframes
![Page 18: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/18.jpg)
Nearly there…
Testing the design
![Page 19: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/19.jpg)
5. The visual mock up
![Page 20: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/20.jpg)
Visuals
![Page 21: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/21.jpg)
Style guide
![Page 22: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/22.jpg)
6. The prototype
![Page 23: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/23.jpg)
More usability testing
![Page 24: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/24.jpg)
Nearly there…
![Page 25: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/25.jpg)
7. The live page
![Page 26: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/26.jpg)
Web pages
![Page 27: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/27.jpg)
Tracking performance
![Page 28: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/28.jpg)
Testing different versions
Version A
Version B
![Page 29: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/29.jpg)
Version A Version B
![Page 30: What is ux design? A behind the scenes tour](https://reader037.fdocuments.net/reader037/viewer/2022103111/54c704254a7959a27c8b45a0/html5/thumbnails/30.jpg)
Testing different versions
Version A
Version B
“Will you guys stop following
me…”
Optimising the design