ZenPayroll’s Home Page Teardown

1

Methodology

Apply design and selling principles to home page

• Clarity of copy, segment

• Business-focused actions

• Visual principles

Resources and References • 5 Principles of Persuasive Web Design - link (Peep Laja)

• User Onboarding - link (Samuel Hulick)

• Fogg Behavior Model - link (BJ Fogg)

• Design is SCRAP - link

2

Clarity of copy

3

Clarity of copy

4

Peaceful ‘zen’ background

Redesigned from what? What is a ‘modern’ business?

Easiest Way to Pay – people don’t believe superlatives

Redundant?

Clarity of copy – WIIFM?

5

Which of these give clearer reasons to click on the Start button? Why?

What’s in it for me?

Clarity of copy – WIIFM?

6

Who is the key audience for the landing page? • I was a corporate auditor, and have a certain view of payroll managers and

accountants. Their interests are very different from business owners’.

Focused actions

7

See more testimonials

Try it now

The team does a good job of keeping design consistent with ‘zen’ nature theme (green), and building up toward 1 action per screen.

Visual principles - hierarchy

8

Exercise: order the top 5 visual elements numerically

Visual principles - hierarchy

9

1 2

3

5

4

Is this consistent with business objectives? (i.e. does watching video lead to higher conversion? What about #5?)

Visual principles - contrast

10

It’s not about blue and red button – but about contrasts

Visual principles - SCRAP

11

As we saw earlier does a pretty good job of:

contrast,

repetition,

alignment, and

proximity.

Before - After

12

After - detail

13

WIIFM copy

Nuked clutter

Simpler tagline

Contrast

For more

Feedback? Suggestion?

Tweet us a $19 check.

14

Neil McCarthy @the_neil

David Kim @findinbay dklounge.github.io