First Impressions Matter: LeanUX Design of Landing Page #1

First Impressions Matter: LeanUX Design of Landing Page

@sprmari0

Lean Startup Machine Tokyo | May 17th-19th 2013

(Courtesy of Jefrey Bulla)

What’s the point?

Think in their workflow

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.

Why?

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

- @davemcclure

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 Destination Web Sites: An Analysis of First Impression

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

“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)

Starting Point of Journey

*User Experience Journey Map

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

Test Your Ideas

Create & Encourage Emotional Connection

Build ‘Memorable’ Website

Emotional Design

*Plutchik’s Emotion Wheel

Different emotional layers

*Emotional Design: Why we Love (or Hate) Everyday Things

Visceral

Reflective Behavioral

Visceral – Attractiveness

Behavioral – Usage

Reflective – Self-Image

‘Emotional’ Landing Page

Simplified Layout

Headline

• Key Benefit • Key Benefit • Key Benefit

Social Proof

Large Graphic

Call-to-Action

Headline

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

*Airbnb

Big Picture Hypothesis = Solution Hypothesis = Value Proposition

Key Benefits

How does your product or service benefit the customer?

*Instagram

Large Graphic

Image high-lighting product and conveys happy customer experience.

*Square

Social Proof

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

Call-to-Action

Solicit one clear action that tests your riskiest assumptions.

*Flickr

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

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

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 be lazy about the page design. Polish =

Credibility.

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

3 Pillars of Emotional Design

Visceral Design

Behavioral Design

Reflective Design

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

Skeumorphism

Tinke

Momento

Path

First Impressions Matter: LeanUX Design of Landing Page

@sprmari0