Websites as Story - WordCamp Denver 2016

40
Diane Whiddon @dianewhiddon dianewhiddon.com novelwebsitedesign.com

Transcript of Websites as Story - WordCamp Denver 2016

Page 1: Websites as Story -  WordCamp Denver 2016

Diane Whiddon @dianewhiddon

dianewhiddon.comnovelwebsitedesign.com

Page 2: Websites as Story -  WordCamp Denver 2016

What is storytelling?

Page 3: Websites as Story -  WordCamp Denver 2016

What is effective storytelling?

Page 4: Websites as Story -  WordCamp Denver 2016

What is effective storytelling?

Addressing your visitors’ wants and needs.

Page 5: Websites as Story -  WordCamp Denver 2016

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

Page 6: Websites as Story -  WordCamp Denver 2016

Good Design Doesn’t distract or confuse your visitor.

Page 7: Websites as Story -  WordCamp Denver 2016

Good Design Doesn’t distract or confuse your visitor.

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

Page 8: Websites as Story -  WordCamp Denver 2016
Page 9: Websites as Story -  WordCamp Denver 2016
Page 10: Websites as Story -  WordCamp Denver 2016

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:

Page 11: Websites as Story -  WordCamp Denver 2016

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!

Page 12: Websites as Story -  WordCamp Denver 2016

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

Page 13: Websites as Story -  WordCamp Denver 2016
Page 14: Websites as Story -  WordCamp Denver 2016
Page 15: Websites as Story -  WordCamp Denver 2016
Page 16: Websites as Story -  WordCamp Denver 2016
Page 17: Websites as Story -  WordCamp Denver 2016

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

Page 18: Websites as Story -  WordCamp Denver 2016
Page 19: Websites as Story -  WordCamp Denver 2016

CommunicationYou just get them.

Page 20: Websites as Story -  WordCamp Denver 2016

CommunicationYou just get them.

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

Page 21: Websites as Story -  WordCamp Denver 2016

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.

Page 22: Websites as Story -  WordCamp Denver 2016

CommunicationYou just get them.

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

2. Identify with their pain. ○ Builds trust.

Page 23: Websites as Story -  WordCamp Denver 2016
Page 24: Websites as Story -  WordCamp Denver 2016

CommunicationYou just get them.

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

2. Identify with their pain. ○ Builds trust.

Page 25: Websites as Story -  WordCamp Denver 2016

CommunicationYou just get them.

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

2. Identify with their pain. ○ Builds trust.

Page 26: Websites as Story -  WordCamp Denver 2016

CommunicationYou just get them.

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

2. Identify with their pain. ○ Builds trust.

Page 27: Websites as Story -  WordCamp Denver 2016

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.

Page 28: Websites as Story -  WordCamp Denver 2016

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.

Page 29: Websites as Story -  WordCamp Denver 2016
Page 30: Websites as Story -  WordCamp Denver 2016
Page 31: Websites as Story -  WordCamp Denver 2016

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

Page 32: Websites as Story -  WordCamp Denver 2016

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 ..

.

Page 33: Websites as Story -  WordCamp Denver 2016

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

Page 34: Websites as Story -  WordCamp Denver 2016

Confidence You guide them.

Page 35: Websites as Story -  WordCamp Denver 2016

Confidence You guide them.

What is YOUR goal?

Page 36: Websites as Story -  WordCamp Denver 2016

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?

Page 37: Websites as Story -  WordCamp Denver 2016

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

Page 38: Websites as Story -  WordCamp Denver 2016

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’.

Page 39: Websites as Story -  WordCamp Denver 2016

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)

Page 40: Websites as Story -  WordCamp Denver 2016

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