on your website help you tell a better story simple design ...2017... · simple design tips that...
TRANSCRIPT
Simple Design Tips That Will Help You Tell a Better Story
on Your Website
Fri Nov 10, 2017 | 11:00 AM - 12:00 PM Board Room | Harbor Ballroom G-I
A C T I V I T Y
Turn to a neighbor.
Tell them your name.
Recommend them to a recent restaurant or place you’ve visited.
C O N T A C T
Jessica Moon@moonspired
Connect with me onLinkedin | Website
I’m an experience designer.
“a what…?”
I create experiences for a living.
I create experiences for a living.
People hire me to design things for them.
Er… less artsy, more techy.
People hire me to design things for them.
You know the apps you use on your phone? Or sites you visit?
“Oh, yeah. Uh huh.”
Well, I design those app or site experiences for a living!
Team of one
Too many stakeholders
Limited technology
Lack of access to the right assets (i.e., photography)
Lack of the right specialized skills (i.e., writing)
Done in a time crunch
Lack of understanding who the REAL audience is
Adopted project by someone else
No alignment on vision and story
“When we tell stories to our friends, we prove we're all natural born storytellers. These experiences show that
we all have an innate sense of what makes a good story, but we tend to forget it at work.”
N I C O L E K A H N, I D E O
What does natural storytelling look like?
Storyteller Audience
Storyteller Audience
Gestures
Props
Inflection
Feedback
You know the apps you use on your phone? Or sites you visit?
“Oh, yeah. Uh huh.”
Well, I design those app or site experiences for a living!
Gestures
Gestures
Props
Feedback
Inflection
Inflection
Inflection Inflection
Feedback
Gestures
What do website versions of storytelling commonly look like?
Website Internet
Website
Over-edited or under-edited message
Unengaging orCTA tunnel vision
Flat voice & tone
Internet
Too much or too little info
What stories on websites feel like (for both storytellers and visitors).
Let’s reconnect natural storytelling best practices to our website experiences.
Flat voice & tone → Inflection
Flat voice & tone → Inflection
Label-mania (2-3 word titles, everywhere)All caps all the time
Typography and punctuation = personality
A C T I V I T Y
Flat voice & tone → Inflection
Ask your neighbor to read the main headlines of their website out loud as if they were naturally talking to you (ad lib if needed). Give
feedback how to close the gap based on inflection heard.
A D D I T I O N A L T I P
Flat voice & tone → Inflection
Get in a room with those who understand your brand the best. Come up with key adjectives that capture the tone
you want to give. Use those words as a north star.
Too much or little info → Feedback
Too much or little info → Feedback
The 10 second impressionHow much scrolling until the “ah ha” moment
The right content in the right place
A C T I V I T Y
Too much or little info → Feedback
Ask your neighbor to skim your website in <1 minute. Then ask:1) what do you remember the most?
2) what would like to learn more about and why?
A D D I T I O N A L T I P
Too much or little info → Feedback
Regularly talk to the people who are coming to your site.Collect feedback and adjust your story.
Over-edited or under-edited message → Props
Over-edited or under-edited message → Props
Grandiose or vague statementsContext is king
A picture is worth 1000 words
A C T I V I T Y
Over-edited or under-edited message → Props
Tell your neighbor in one sentence, what you want them to take away from your website. Then ask them to point out 2 things that seem out of place from that takeaway.
A D D I T I O N A L T I P
Over-edited or under-edited message → Props
Make a list of what evidence or props compel people to having a “wow” moment with your cause. Spend more
time surfacing this on your site.
Unengaging or CTA tunnel vision → Gestures
Unengaging or CTA tunnel vision → Gestures
CTAs everywhere (or nowhere)All words, no play
Finding delightful interactions
A C T I V I T Y
Unengaging or CTA tunnel vision → Gestures
Ask your neighbor what the top two actions are that they want you to take. Tell them what would compel you to
consider taking them.
A D D I T I O N A L T I P
Unengaging or CTA tunnel driven → Gestures
Determine what the primary two actions are that you want your visitors to take. Connect props to these
actions as gracefully as possible.
“I’m not serving a dish. I’m serving a story.”
D O M I N I Q U E C R E N N
C O N T A C T
Jessica Moon@moonspired
Connect with me onLinkedin | Website
Thank you!!!