Design for Startups

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