I prepared this slide to teach at START CENTER (an incubator funded by World Bank), source file can be download here: http://blog.ngochieu.com/chia-se/bai-giang-design-for-startups/
6. WHY?
WHY?
SOLVE MAKE them we
their LOVE us WANT
problem User
(and stay with us)
(they don’t care about you to Click
or your technology to Subscribe
or your company to Register
or your partner, your wife, your dog… to Purchase
THEY JUST DON’T CARE) …
7. FINDING GOOD PROBLEM
- A problem not yet solve by anyway SOLVE
their
- Or solved, but not completely problem
8. HOW?
- Finding a good problem
(business model)
{ - Not yet solve
- Solved, but not completely (as your)
SOLVE
their
{
problem
- Tool to solve - fast, convenience
(technology) (they don’t care how strong, how complicated…)
- Deliver your tool
(design)
{ - fast, convenience
(they don’t care how beautiful you are)
9. PRODUCT TEAM = Finding a good problem
(business model)
{ - Not yet solve
- Solved, but not co
DEV TEAM = Tool to solve
(technology)
{- fast, convenience
(they don’t care how strong, ho
DESIGN TEAM = Deliver your tool
(design)
{ - fast, easy, convenience
(they don’t care how beauti
10. PRODUCT TEAM = Finding a good problem
(business model) { - Not yet solve
- Solved, but not co
DEV TEAM = Tool to solve
(technology) {- fast, convenience
(they don’t care how strong, ho
DESIGN TEAM = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beauti
11. EXAMPLES
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
12. AMAZING GRAPHIC / BAD UX
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
13. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
14. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
15. www.eyeball-design.com
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
16. “POOR” GRAPHIC / GOOD UX
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
17. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
18. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
19. DESIGN = Deliver your tool
(design)
{ - fast, easy, convenience
(they don’t care how beautiful you are)
20. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
21. GREAT GRAPHIC / GREAT UX
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
22. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
23. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
24. POOR GRAPHIC / POOR UX?
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
25. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
26. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
27. GOOD DESIGN = EASY TO USE + GOOD LOOKING
UX Art
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
28. BAD NEWS
Art
is what you born with
Which mean it is HARD to improve
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
29. GOOD NEWS
UX
which is key to lead you to what you want
CAN BE LEARN
DESIGN = Deliver your tool
(design)
{ - fast, easy, convenience
(they don’t care how beautiful you are)
30. BREAK
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
31. Task:
DESIGN A CAR DASHBOARD
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
32. TECH’ DESIGN
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
33. ARTISTS’ DESIGN
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
34. WE WILL
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
35. WHAT IS DESIGN?
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
36. DESIGN IS NOT
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
37. NOT: Painting, Drawing, Decorating
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
38. NOT: How amazing it looks
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
39. NOT: Showing off technology
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
40. DESIGN IS
just like air
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
41. FOCUS ON THE
USER
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
42. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
43. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
44. USER
CENTERED = get closer & closer to what your user need
DESIGN
45. lean design
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
46. UX DESIGN
from Strategy to Prototype Prototype
Strategy Structure
& Flow Mockup
Functional Functional Prioritize
Spec List
Wireframe
Information Information
Design Architecture
Content
Strategy
47. STRUCTURE
USER PERSONAS
SCENARIOS & CASES
TASK FLOW
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
48. Homepage
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
49. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
51. a house wife come to our website site, browse and purchase an item
52. a house wife come to our website site, browse and purchase an item
53. USER PERSONAS
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
54. USER PERSONAS
Minimum Optional
1. Photo 1. Education level
2. Name 2. Salary range
3. Age 3. Personal Quote
4. Location 4. Online activities
5. Occupation 5. Offiline activities
6. Biography 6. Technical level
7. Social level
8. Mobile level
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
55. a house wife come to our website site, browse and purchase an item
56. CASES
a house wife come to our website site, browse and purchase an item
Parent Category
Main Category
Add to Cart Purchase Payment Confirm Done
Sub Category
Search One click purchase Confirm Done
57. iA
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
58. iA
iA transform tons of content to well organize, easy to find,
easy to understand content
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
59. INTERACTION DESIGN
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
60. FUNCTIONAL LIST
All the “weapons” a page have to carry
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
61. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
62. PRIORITIZE LIST
what is most important, what is nice to have,
what is in the middle
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
63. WIREFRAME, MOCKUP & PROTOTYPE
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
64. WIREFRAME
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
65. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
66. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
67. How detail is enough?
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
68. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
69. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
70. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
71. Tools?
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
72. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
73. Paper & Pencil? No problem!
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
74. MOCKUP
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
75. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
76. PROTOTYPE
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
77. EXERCISE
• Choose a page from a project
• Describe your goal(s)
• Build a functional list
• Prioritize list
• Wireframe
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
78. BREAK
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
79. REVIEW
EXERCISE
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
106. GREAT = Clear call to action
Clear user feedback
INTERFACES Clear workflow
107. VISUAL DESIGN
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
108. GOOD DESIGN IS
C.R.A.P.
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
109. CONTRAST
REPETITION
ALIGNMENT
PROXIMITY
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
110. CONTRAST
If elements on your page are not the same, make them very different.
Contrast attracts the attention of your viewers.
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
111. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
112. REPEAT
Repeat visual elements throughout each page and your entire site.
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
113. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
114. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
115. DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
116. ALIGNMENT
Every element should have a visual connection with another on the page
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
117. DO DON’T
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
118. DO DON’T
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
119. DO DON’T
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
120. PROXIMITY
Items related to each other should be grouped close together.
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
121. DO DON’T
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
122.
123. CONTRAST
REPETITION
ALIGNMENT
PROXIMITY
DESIGN = Deliver your tool
(design) { - fast, easy, convenience
(they don’t care how beautiful you are)
124. EXERCISE
• Review a website
• Determine their goal(s)
• List out:
• Call to action
• Message
• C.R.A.P
125. UX DESIGN
FOR STARTUP
Prototype
Strategy Structure
& Flow Mockup
Functional Functional Prioritize
Spec List
Wireframe
Information Information
Design Architecture
Content
Strategy