1. DESIGN
FOR STARTUPS

2. INTRODUCE
<? echo ‘Hello world!’ ?>

3. 2000 2002 2004 2007 2009 2012
Dizyatec Pyramid Sony Y&R Ringier
Singapore Consulting Vietnam Vietnam Vietnam
Product Manager Web Designer Web Manager Interactive Mgr. DMD
Asisstant
NGUYEN NGOC HIEU
www.ngochieu.com

4. 2012
CEO & Product Director
Skynet Vietnam
Feature Projects
NGUYEN NGOC HIEU
www.ngochieu.com

5. WHY
WE DESIGN?
WE DO ALL THIS?

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)

50. SCENARIOS

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)

80. USER EXPERIENCE DESIGN
VISUAL DESIGN
THE INTERFACE IS THE PRODUCT

81. GREAT INTERFACES

83. WHY
Clear call to action
Clear message
Straight to the point

85. WHY
Elegant
Fun
Clear call to action

86. CALL TO ACTION

87. DESIGN = Deliver your tool
(design)
{ - fast, easy, convenience
(they don’t care how beautiful you are)

88. WHAT DO YOU WANT
ME TO DO???

89. DON’T CONFUSE ME

90. ALWAYS ASK YOURSEFL
IS THIS CLEAR?

103. REMEMBER! REDUCE CHOICES!

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)

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

126. LET’S BUILD
A PRODUCT TO HELP YOUR USER
(NOT TO SCREW THEM)

127. AND THEY WILL YOU

128. THANK YOU, AND I YOU
NGUYEN NGOC HIEU
ngochieu.com