Websites as Story - WordCamp Denver 2016

Post on 17-Jan-2017

93 views 1 download

Transcript of Websites as Story - WordCamp Denver 2016

Diane Whiddon @dianewhiddon

dianewhiddon.comnovelwebsitedesign.com

What is storytelling?

What is effective storytelling?

What is effective storytelling?

Addressing your visitors’ wants and needs.

What is effective storytelling?1. Good Design (You don’t distract or confuse them.) 2. Communication (You get them.)3. Confidence (You guide them.)

Good Design Doesn’t distract or confuse your visitor.

Good Design Doesn’t distract or confuse your visitor.

● Old design sucks○ Based on print design; not good at communicating with your visitor

Good DesignDoesn’t distract or confuse your visitor.

● Old design sucks○ Based on print design; not good at communicating with your visitor

○ Not responsive so hard to use on mobile devices, which leads to a higher bounce rate

○ Focuses on clicks instead of scrolling so difficult to navigate

○ Breadth, not depth

○ Crappy UX because people are overwhelmed with information, clutter, or disorganization

● Why it matters:

Good DesignDoesn’t distract or confuse your visitor.

● Old design sucks○ Based on print design; not good at communicating with your visitor

○ Not responsive so hard to use on mobile devices, which leads to a higher bounce rate

○ Focuses on clicks instead of scrolling so difficult to navigate

○ Breadth, not depth

○ Crappy UX because people are overwhelmed with information, clutter, or disorganization

● Why it matters: ○ Confused and annoyed people don’t buy!

Good DesignDoesn’t distract or confuse your visitor.

● Old design sucks○ Based on print design; not good at communicating with your visitor

○ Not responsive so hard to use on mobile devices, which leads to a higher bounce rate

○ Focuses on clicks instead of scrolling so difficult to navigate

○ Breadth, not depth

○ Crappy UX because people are overwhelmed with information, clutter, or disorganization

● Why it matters: ○ Confused people don’t buy!

● One-page or Stack Panel design

Good Design Doesn’t distract or confuse your visitor.

● Old design sucks○ Based on print design; not good at communicating with your visitor

○ Not responsive so hard to use on mobile devices, which leads to a higher bounce rate

○ Focuses on clicks instead of scrolling so difficult to navigate

○ Breadth, not depth

○ Crappy UX because people are overwhelmed with information, clutter, or disorganization

● Why it matters: ○ Confused people don’t buy!

● One-page or Stack Panel design○ Forces you to be clear and to focus on what really matters.

○ Forces you to be concise by telling the story of your biz in big blocks, and referring people to

landing pages for more detail

○ Gives depth, not breadth

○ Offers some whiz-bang = emotional satisfaction of interacting with the site

CommunicationYou just get them.

CommunicationYou just get them.

1. Be specific. Don’t try to market to everyone.

CommunicationYou just get them.

1. Be specific. Don’t try to market to everyone. ○ If you try to market to everyone, you’ll end up marketing

to no one.

CommunicationYou just get them.

1. Be specific. Don’t try to market to everyone.

2. Identify with their pain. ○ Builds trust.

CommunicationYou just get them.

1. Be specific. Don’t try to market to everyone.

2. Identify with their pain. ○ Builds trust.

CommunicationYou just get them.

1. Be specific. Don’t try to market to everyone.

2. Identify with their pain. ○ Builds trust.

CommunicationYou just get them.

1. Be specific. Don’t try to market to everyone.

2. Identify with their pain. ○ Builds trust.

CommunicationYou just get them.

1. Be specific. Don’t try to market to everyone.

2. Identify with their pain. ○ Builds trust.○ Specificity of the pain is what narrows your

demographic.

CommunicationYou just get them.

1. Be specific. Don’t try to market to everyone.

2. Identify with their pain.

3. Tell them that you have the solution.

CommunicationYou just get them.

1. Be specific. Don’t try to market to everyone.

2. Identify with their pain.

3. Tell them that you have the solution. ○ Use Features and Benefits

Features v. BenefitsWhat is it?

What does it have? What is it like?

90 minute intake process.

Been in business for 10 years.

Fancy phone case made of (big word)

plastic/alloy.

The coffee maker has a timer.

Why do I care?

How will it improve/change my life?

I create completely customized work.

Reliability, expertise, social proof.

You won’t break it. You won’t keep spending $$ a

year to fix it.

I can sleep in for 10 more minutes.

I won’t be late to work and get fired.

… w

hich

mea

ns th

at ..

.

Remember, the single biggest motivator in sales is how you will make someone’s life better.

Confidence You guide them.

Confidence You guide them.

What is YOUR goal?

What is Your Goal?

a. Build your list? b. Sell products?c. Sell services? d. Have someone sign up for a free consult? e. Have someone call you?f. Get more social shares?g. Build your PR?

What is Your Goal? What do you need to do that?

a. Build your list? (prominent signup form?)b. Sell products? (money-back guarantee?)c. Sell services? (social proof?)d. Have someone sign up for a free consult? (big

font?)e. Have someone call you? (benefits?) f. Get more social shares? (better content?)g. Build your PR? (show events? press releases?)

ConfidenceYou guide them.

Now that you know your goal, you can address theirs. What’s their pain? What are they looking for? How can you put that together in a clearly communicated, stack panel site?

Give people an introduction to orient them to the site, even if it’s just a graphic.

Consider layout, color and font choices to make sure you’re delivering the right ‘feel’.

Stack Panel/Homepage Order1. Introduction

a. Design, graphics, logo, taglines, mission statements (beware sliders)

2. Mission statement, quotes, tagline3. Services, Products (use Features/Benefits!)4. About, Bio, Team (use bubble wrap effects!)5. FAQ/more details6. Location7. Quotes, Testimonials8. Call to Action (make it EASY and OBVIOUS)

My Goal:

For you to witness and recognize your own

brilliance, to get reconnected to your

dreams and fall in love with yourself all over

again.

From THAT place, you can interact with the world in a bigger way