Upload
hieu-nguyen
View
55
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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/
Citation preview
DESIGNFOR STARTUPS
INTRODUCE<? echo ‘Hello world!’ ?>
2012
RingierVietnam
DMD
2009
Y&RVietnam
Interactive Mgr.
2007
SonyVietnam
Web Manager
2004
PyramidConsulting
Web Designer
2002
NGUYEN NGOC HIEUwww.ngochieu.com
DizyatecSingapore
Product ManagerAsisstant
2000
CEO & Product Director2012
Skynet Vietnam
Feature Projects
NGUYEN NGOC HIEUwww.ngochieu.com
WHYWE DESIGN?
WE DO ALL THIS?
WHY?
weWANTUser
to Clickto Subscribeto Registerto Purchase…
SOLVEtheirproblem
(they don’t care about youor your technologyor your companyor your partner, your wife, your dog…THEY JUST DON’T CARE)
MAKE themLOVE us
(and stay with us)
WHY?
SOLVEtheirproblem
- A problem not yet solve by anyway- Or solved, but not completely
FINDING GOOD PROBLEM
SOLVEtheirproblem
- Finding a good problem(business model)
- Tool to solve(technology)
- Deliver your tool(design)
{ - Not yet solve- Solved, but not completely (as your)
{ - fast, convenience(they don’t care how strong, how complicated…)
{ - fast, convenience(they don’t care how beautiful you are)
HOW?
Finding a good problem(business model)
Tool to solve(technology)
Deliver your tool(design)
{ - Not yet solve- Solved, but not co
{ - fast, convenience(they don’t care how strong, ho
{ - fast, easy, convenience(they don’t care how beauti
DEV TEAM
PRODUCT TEAM
DESIGN TEAM
=
=
=
Finding a good problem(business model)
Tool to solve(technology)
Deliver your tool(design)
{ - Not yet solve- Solved, but not co
{ - fast, convenience(they don’t care how strong, ho
{ - fast, easy, convenience(they don’t care how beauti
DEV TEAM
PRODUCT TEAM
DESIGN TEAM
=
=
=
EXAMPLES
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
AMAZING GRAPHIC / BAD UX
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
www.eyeball-design.com
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
“POOR” GRAPHIC / GOOD UX
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design)
{ - fast, easy, convenience(they don’t care how beautiful you are)
DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
GREAT GRAPHIC / GREAT UX
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
POOR GRAPHIC / POOR UX?
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
GOOD DESIGN = EASY TO USE + GOOD LOOKING
UX Art
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
BAD NEWS
Artis what you born with
Which mean it is HARD to improve
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
GOOD NEWS
UX which is key to lead you to what you want
CAN BE LEARN
Deliver your tool(design)
{ - fast, easy, convenience(they don’t care how beautiful you are)
DESIGN =
BREAK
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
DESIGN A CAR DASHBOARDTask:
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
TECH’ DESIGN
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
ARTISTS’ DESIGN
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
WE WILL
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
WHAT IS DESIGN?
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
DESIGN IS NOT
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
NOT: Painting, Drawing, Decorating
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
NOT: How amazing it looks
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
NOT: Showing off technology
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
DESIGN IS
just like air
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
FOCUS ON THE
USER
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
USERCENTEREDDESIGN
= get closer & closer to what your user need
lean design
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Strategy
FunctionalSpec
FunctionalList
Wireframe
Mockup
Prototype
ContentStrategy
InformationDesign
InformationArchitecture
UX DESIGN
Structure& Flow
from Strategy to Prototype
Prioritize
STRUCTURE
USER PERSONAS
SCENARIOS & CASES
TASK FLOW
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Homepage
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
SCENARIOS
a house wife come to our website site, browse and purchase an item
a house wife come to our website site, browse and purchase an item
USER PERSONAS
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Minimum
1. Photo2. Name3. Age4. Location5. Occupation6. Biography
Optional
1. Education level2. Salary range3. Personal Quote4. Online activities5. Offiline activities6. Technical level7. Social level8. Mobile level
USER PERSONAS
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
a house wife come to our website site, browse and purchase an item
Parent Category
Main Category
Sub CategoryAdd to Cart Purchase Payment Confirm Done
One click purchase Confirm DoneSearch
CASES
a house wife come to our website site, browse and purchase an item
iA
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
iA transform tons of content to well organize, easy to find,easy to understand content
iA
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
INTERACTION DESIGN
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
FUNCTIONAL LISTAll the “weapons” a page have to carry
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
PRIORITIZE LISTwhat is most important, what is nice to have,
what is in the middle
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
WIREFRAME, MOCKUP & PROTOTYPE
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
WIREFRAME
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
How detail is enough?
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Tools?
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Paper & Pencil? No problem!
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
MOCKUP
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
PROTOTYPE
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
EXERCISE• Choose a page from a project
• Describe your goal(s)
• Build a functional list
• Prioritize list
• Wireframe
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
BREAK
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
EXERCISEREVIEW
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
USER EXPERIENCE DESIGN
VISUAL DESIGN
THE INTERFACE IS THE PRODUCT
GREAT INTERFACES
WHYClear call to action
Clear message
Straight to the point
WHYElegant
Fun
Clear call to action
CALL TO ACTION
Deliver your tool(design)
{ - fast, easy, convenience(they don’t care how beautiful you are)
DESIGN =
WHAT DO YOU WANTME TO DO???
DON’T CONFUSE ME
ALWAYS ASK YOURSEFL
IS THIS CLEAR?
REMEMBER! REDUCE CHOICES!
GREATINTERFACES
Clear call to action
Clear user feedback
Clear workflow=
VISUAL DESIGN
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
GOOD DESIGN IS
C.R.A.P.
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
CONTRAST
REPETITION
ALIGNMENT
PROXIMITY
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
CONTRASTIf elements on your page are not the same, make them very different.
Contrast attracts the attention of your viewers.
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
REPEATRepeat visual elements throughout each page and your entire site.
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
ALIGNMENTEvery element should have a visual connection with another on the page
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
DO DON’T
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
DO DON’T
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
DO DON’T
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
PROXIMITYItems related to each other should be grouped close together.
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
DO DON’T
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
CONTRAST
REPETITION
ALIGNMENT
PROXIMITY
Deliver your tool(design) { - fast, easy, convenience
(they don’t care how beautiful you are)DESIGN =
EXERCISE
• Review a website• Determine their goal(s)• List out:• Call to action• Message• C.R.A.P
Strategy
FunctionalSpec
FunctionalList
Wireframe
Mockup
Prototype
ContentStrategy
InformationDesign
InformationArchitecture
UX DESIGN
Structure& Flow
Prioritize
FOR STARTUP
LET’S BUILDA PRODUCT TO HELP YOUR USER
(NOT TO SCREW THEM)
AND THEY WILL Ɔ YOU
THANK YOU, AND I Ɔ YOU
NGUYEN NGOC HIEUngochieu.com