ARTS & CRAFTS5 Tips for Becoming a Better Marketer-Designer

Ben Ratner

AGENDA

1 Understand Your Goals

2 Create a Visual Hierarchy

3 Show, Don’t Tell

4 Solve for the Skim

5 Avoid Outdated Trends

BEN RATNER@benjratner

CRM Growth Marketer, Freelance Web Designer, Breakdancer, and Chocolate Milk Connoisseur.

1 Understand Your Goals

WHAT IS DESIGN?

DESIGN ISN’T ART.

IT’S NOT ABOUT MAKING THINGS PRETTIER.

IT’S ABOUT MAKING THINGS PERFORM BETTER.

WHAT IS “GOOD” DESIGN?

THE “GOODNESS” OF DESIGN DEPENDS ON HOW EFFECTIVELY IT ACHIEVES ITS GOALSHere’s what I mean by goals:

• Emails Drive clicks

• Landing Pages Drive form submissions

• CTAs Drive Clicks

• Infographics Drive engagement and recall

• Blog Drive CTA clicks and subscription

• Website Drive engagement and exploration

MEASURING DESIGN REQUIRES AN UNDERSTANDING OF YOUR GOALS

So ask yourself this…

• What metric am I measuring performance off of?

• What is the action that is most important for

people here to take?

• How does this particular page / email / piece of

content fit in to my overall marketing funnel?

A FAMILIAR FRAMEWORK

Understand your goals

Tie your goals to measurable metrics

Set performance targets

Hit those targets!!

BE MY FRIEND

Or get to know me first

BEN’S EVIL TIP

2 Create a Visual Hierarchy

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”

-- Antoine de Saint-Exupery

CREATE A VISUAL HIERARCHY

1. Categorize the elements by importance

2. Emphasize the essential elements

3. Remove or de-emphasize the non-essential elements

4. Arrange the remaining elements effectively

1. CATEGORIZE THE ELEMENTS BY IMPORTANCE

First off, what do I mean by “the elements”?• All of the individual pieces that make up a piece of content

or webpage

• Ex: The headline, the body copy, benefit bullet points, the

CTA or form, the featured image, testimonials, social share

icons, screenshots, video

How to Categorize Elements by Importance• What is essential in order to provide context for conversion?

• What is important for influencing conversion, but not

essential?

• What has no real business being there in the first place?

A CHEAT SHEET

ESSENTIAL NON-ESSENTIAL

OFFER EMAIL Name of offerBrief description of offerLink / CTA to offer

Email signatureAdditional informationSocial share buttonsFeatured imageCompany logo

OFFER LANDING PAGE

Name of offerBrief description of offerForm to download

Benefit bullet pointsTestimonialsWebsite navigationWebsite footerVideoScreenshotsSocial share buttons“How it Works”Additional information

2. EMPHASIZE THE ESSENTIAL ELEMENTS

It’s time to add emphasis to the elements that are essential

for conversion. Here are some common ways to do that:

•Make them big

• Make them bold

• Make them ALL CAPS

• Make them Colorful

Or just give them space!

3. REMOVE OR DE-EMPHASIZE THE NON-ESSENTIAL ELEMENTS

For all of the elements that aren’t absolutely necessary to get

to the point of conversion, you can do 1 of 2 things:

1. Get rid of them entirely

2. Demote them, or move them below the point of conversion

Be smart about how you use these elements, or they’ll get in

your way!

4. ARRANGE THE ELEMENTS EFFECTIVELY

The way elements are emphasized also depends on the way

they’re arranged. To optimize for conversion, you should

arrange the elements based on the principles of human

interaction.

The most common is the “Z” or “F” principle – let’s explore

that.

WHAT

WHY HOW

WHAT

WHY HOW

1

2 3

3 Show, Don’t Tell

USERS ONLY READ ABOUT 20% OF TEXT ON THE AVERAGE PAGE.

(Source)

PEOPLE REMEMBER…

(Source)

HOW CAN YOU SHOW YOUR MESSAGE INSTEAD OF TELLING IT?

WAYS TO SHOW, NOT TELL

• Software company or app? Use screenshots

• Physical product? Show it in use

• Service company or agency? Show your best

work

• Promoting content? Depict the offer visually

• Have video? Use it!

SCREENSHOTS

PRODUCT IN USE

PHYSICAL DEPICTION

BEN’S TOOLKIT

• For screenshots Skitch, by Evernote

• For live action screenshots Placeit.net

• For 3D ebook covers PSDcovers.com

4 Solve for the Skim

YOU HAVE 8 SECONDS TO GET YOUR MESSAGE ACROSS.

Because guess what…

HUMANS HAVE A SHORTER ATTENTION SPAN THAN THE AVERAGE GOLDFISH

8Seconds

9Seconds

(Source)

PEOPLE ARE GOING TO SKIM THROUGH YOUR CONTENT.

(Unless you’re marketing to Goldfish)

SO YOU’LL NEED TO SOLVE FOR THE SKIM

Here are some ways to do so:

• Get the message across with your emphasized

elements

• Create clearly defined sections

• Say enough to hook, but not enough to bore

GET THE MESSAGE ACROSS WITH EMPHASIZED ELEMENTS

• Most of the people who open your emails will

only read 1 or 2 sentences before making a

decision – how do you influence them?

• Use a combination of your subject line, headline,

header image, and CTA to get the full message

across. Namely:– Why you’re emailing them (purpose)– What you’d like them to do about it (call-to-action)

LET’S COMPARE…

70% visual, 30% written

Even in emails!

CREATE CLEARLY DEFINED SECTIONS

• Got a lot of content? Or have multiple points of

conversion? Break it up.

• Why break it into sections?– To add breathing room– To guide the user experience– To allow for harmony between different points of

conversion

A GREAT EXAMPLE

Notice how the pieces of content in this email are broken into clearly defined sections.

When skimming this message, it’s easy to see where one section ends and the next begins, as well as what the CTA for each section is.

SAY ENOUGH TO HOOK, BUT NOT ENOUGH TO BORE

• Say too little and you won’t provide enough

context. Say too much and you’ll lose your

readers along the way.

• Knowing how much to say depends on your

audience and what you’re promoting.

• Rule of thumb: Entice people. Curiosity drives

clicks.

• And remember, you’ve only got 8 seconds!

Yay, Sarah!

Let’s hear it for Sarah, the master of all things HUG! She did a great job…

• Telling the full story through the header and CTA

• Breaking things into sections

• Striking a balance between saying too much and too little

And she isn’t a designer!

5 Avoid Outdated Trends

WARNING

What you’re about to see is really, really bad design. If you scare easily or suffer from any sort of heart condition,

please look away.

1. AWFUL CORPORATE STOCK PHOTOGRAPHY

KID: But mommy I want a ham sandwich like the other kids.

MOM: Stop whining and eat your bucket of fruit.

Suzanne immediately regretted getting her daughter MMA lessons. But by then it was too late.

Recipe:1. Boil Noodles2. Put ketchup on boiled noodles3. Ruin childhood.

UNSPLASH.COM

OR HUBSPOT FREE STOCK

PHOTOS

2. CHEESY IMAGES (OR CLIP ART)

THENOUNPROJECT.COM

3. EXCRUCIATING TYPOGRAPHY

Comic SansPapyrus

Times / Arial

Curlz

GOOGLE FONTS

Want people to believe what

you say? Use Baskerville!

(Source)

PRO TIP

4. IMAGE SLIDERS

WAIT…WHY NOT IMAGE SLIDERS?

• They make the user lose control of their

interaction with the site

• They create banner blindness and are often

ignored

• They simply do not work (and I’ll prove it)

Only 1% of total visitors click through from the carousel, and majority of these visitors (84%) interacted with only the first slide

of the carousel. (Source)

CTR% of Clicks by Slide Position

JUST GET YOUR GROOVE ON!

TO SUMMARIZE

• Don’t use terrible stock photography

• Don’t use cheesy images / clip art

• Don’t use excruciating typography

• If you can…avoid using carousels

Recap

1. UNDERSTAND YOUR GOALS

Understand your goals

Tie your goals to measurable metrics

Set performance targets

Hit those targets

2. CREATE A VISUAL HIERARCHY

Rank the elements by importance

Emphasize the essential elements

Remove or de-emphasize the non-essential

elements

Arrange the remaining elements effectively

3. SHOW, DON’T TELL

Software company or app? Use screenshots

Physical product? Show it in use

Services company or agency? Show your best

work

Promoting content? Depict the offer visually

Have video? Use it!

4. SOLVE FOR THE SKIM

Get the message across using your emphasized

elements

Create clearly defined sections

Say enough to hook, but not enough to bore

5. AVOID TERRIBLE DESIGN

Don’t use horrible stock photography

Don’t use cheesy images and clip art

Don’t use excruciating typography

Try not to use image sliders

QUESTIONS?

THANK YOU