first impressions matter: leanux design of landing page #2

44
First Impressions Matter: LeanUX Design of Landing Page ‘13 @mariosakata Lean Startup Machine Tokyo | Dec 13 th -15 th 2013 (Courtesy of Jefrey Bulla)

Upload: kazumichi-mario-sakata

Post on 17-Aug-2014

2.698 views

Category:

Design


3 download

DESCRIPTION

My talk from Lean Startup Machine Tokyo 2013 held Dec. 13th - 15th.

TRANSCRIPT

Page 1: First Impressions Matter: LeanUX Design of Landing Page #2

First Impressions Matter: LeanUX Design of Landing Page ‘13

@mariosakata

Lean Startup Machine Tokyo | Dec 13th-15th 2013

(Courtesy of Jefrey Bulla)

Page 2: First Impressions Matter: LeanUX Design of Landing Page #2

User Experience & User Experience Design

Page 3: First Impressions Matter: LeanUX Design of Landing Page #2

What’s the point?

UX Design is NOT new

Page 4: First Impressions Matter: LeanUX Design of Landing Page #2

What’s the point?

UX Design is NOT time consuming

Page 5: First Impressions Matter: LeanUX Design of Landing Page #2

What’s the point?

UX Design IS added value

Page 6: First Impressions Matter: LeanUX Design of Landing Page #2

What’s the point?

KNOW the User ⌃

UNDERSTAND

Page 7: First Impressions Matter: LeanUX Design of Landing Page #2

What’s the point?

Think in their WORKFLOW

Page 8: First Impressions Matter: LeanUX Design of Landing Page #2

What’s the point?

Speak in their LANGUAGE

Page 9: First Impressions Matter: LeanUX Design of Landing Page #2

Why?

•  There is an intended behavior we want to

create.

•  We have no direct control over user behavior.

•  Design gives us means to control the

contextual environment and evaluate the

resulting effect.

Page 10: First Impressions Matter: LeanUX Design of Landing Page #2

Why?

“Customers don’t care about your solution. They care about their problems.”

- @davemcclure

Page 11: First Impressions Matter: LeanUX Design of Landing Page #2

First Touchpoint Experience

Customers are increasingly using the web as first touchpoint. *Winning  the  Zero  Moment  of  Truth  (ZMOT)  

First impressions are 94% design related; positive first impressions lead to higher satisfaction. *Persuasive  Design  of  Des:na:on  Web  Sites:  An  Analysis  of  First  Impression  

*Users  love  simple  and  familiar  designs  –  Why  website  need  to  make  great  first  impression  

Page 12: First Impressions Matter: LeanUX Design of Landing Page #2

“Powers of 10”

0.1sec: Form first impression about a website.

1sec: Stay focused on their current train of thought.

10sec: Often leave the website.

1min: Able to complete simple task.

10min: Long visit to a website.

*Powers  of  10:  Time  Scales  in  User  Experience  

(Cont’d)

Page 13: First Impressions Matter: LeanUX Design of Landing Page #2

Starting Point of Journey

*User  Experience  Journey  Map  

Page 14: First Impressions Matter: LeanUX Design of Landing Page #2

Create & Encourage Emotional Connection

Build ‘Memorable’ Website

Page 15: First Impressions Matter: LeanUX Design of Landing Page #2

What’s ‘Memorable’?

Create & Encourage Emotional Connection

Page 16: First Impressions Matter: LeanUX Design of Landing Page #2

*Plutchik’s  Emo:on  Wheel  

Create & Encourage Emotional Connection

Attractive

Page 17: First Impressions Matter: LeanUX Design of Landing Page #2

Create & Encourage Emotional Connection

Useful

Page 18: First Impressions Matter: LeanUX Design of Landing Page #2

Create & Encourage Emotional Connection

Empathy

Page 19: First Impressions Matter: LeanUX Design of Landing Page #2

‘Emotional’ Landing Page

Page 20: First Impressions Matter: LeanUX Design of Landing Page #2

Tinke

Page 21: First Impressions Matter: LeanUX Design of Landing Page #2

Knock

Page 22: First Impressions Matter: LeanUX Design of Landing Page #2

Path

Page 23: First Impressions Matter: LeanUX Design of Landing Page #2

Simplified Layout

Headline

•  Key Benefit •  Key Benefit •  Key Benefit

Social Proof

Large Graphic

Call-to-Action

éé          êê          

ççèè        

Page 24: First Impressions Matter: LeanUX Design of Landing Page #2

Headline

First thing read for customers to search for specific solution to their problem.

*Airbnb  

Big Picture Hypothesis = Solution Hypothesis = Value Proposition

Page 25: First Impressions Matter: LeanUX Design of Landing Page #2

Key Benefits

How does your product or service benefit the customer?

*Instagram  

Page 26: First Impressions Matter: LeanUX Design of Landing Page #2

Large Graphic

Image high-lighting product and conveys happy customer experience.

*Square  

Page 27: First Impressions Matter: LeanUX Design of Landing Page #2

Social Proof

Social networks to establish credibility and trust by building multi-touchpoints.

Page 28: First Impressions Matter: LeanUX Design of Landing Page #2

Call-to-Action

Solicit one clear action that tests your riskiest assumptions.

*Flickr  

Total number and ratio of early adaptors, interests, etc.

Page 29: First Impressions Matter: LeanUX Design of Landing Page #2

Questions to be answered

Stimulus Awareness Relevance Confidence Satisfaction

Who is this for?

How long will this take?

What should I do next?

Where should I go next?

How should I do it? *ARCS  Model  

Page 30: First Impressions Matter: LeanUX Design of Landing Page #2

Lean Startup + User Experience

Page 31: First Impressions Matter: LeanUX Design of Landing Page #2

LeanUX

*  LiU  of  Pi  

Page 32: First Impressions Matter: LeanUX Design of Landing Page #2

LeanUX book is coming out in Japanese next month!

LeanUX

Page 33: First Impressions Matter: LeanUX Design of Landing Page #2

LeanUX Thinking

Collaborative, Transparent, and Demystify.

Page 34: First Impressions Matter: LeanUX Design of Landing Page #2

LeanUX Thinking

Documents don’t solve customer solutions.

Page 35: First Impressions Matter: LeanUX Design of Landing Page #2

LeanUX Thinking

Build the right ‘it’ before build ‘it’ right.

Page 36: First Impressions Matter: LeanUX Design of Landing Page #2

Make An Assumption of Your Customers

Name and Picture

What does the persona look like? What’s the persona’s name?

Characteristics

What are the persona’s relevant characteristics?

Need and Pain

Why the persona want to use the product ?

*Persona  Sets  

Page 37: First Impressions Matter: LeanUX Design of Landing Page #2

Make An Assumption of Your Customers

Page 38: First Impressions Matter: LeanUX Design of Landing Page #2

Test Your Ideas

*Lean  ways  to  test  your  new  business  idea  

Page 39: First Impressions Matter: LeanUX Design of Landing Page #2

Test Your Ideas

Page 40: First Impressions Matter: LeanUX Design of Landing Page #2

How’s his/her journey?

*User  Experience  Journey  Map  

Page 41: First Impressions Matter: LeanUX Design of Landing Page #2

Don’t blow it

•  The headline is everything and will probably

have the biggest impact on conversions—A/B

Split Test the Headline.

•  Don’t speak about your product or function,

speak about your vision.

•  Don’t be lazy about the page design.

Polish = Credibility.

•  People don’t read. Keep copy clear & concise.

Page 42: First Impressions Matter: LeanUX Design of Landing Page #2

Memorable Landing Page

Attractive Useful Empathy

Makes you feel… Helps you do… Says about your…

Page 43: First Impressions Matter: LeanUX Design of Landing Page #2

CPS Evaluation

No Data Make an

assumption�With Data�

Identify pattern

Hypothesis

User Research Planning� Execute�

Evaluation�

Success!�

Planning�

KPI Setting� Points of Improvement�

Pivot or Die�

Change Target User�

Change Hypothesis�

Solution

Customer

Problem

Page 44: First Impressions Matter: LeanUX Design of Landing Page #2

First Impressions Matter: LeanUX Design of Landing Page

@mariosakata