on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That...
Transcript of on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That...
![Page 1: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/1.jpg)
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
![Page 2: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/2.jpg)
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.
![Page 3: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/3.jpg)
C O N T A C T
Jessica Moon@moonspired
Connect with me onLinkedin | Website
![Page 4: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/4.jpg)
I’m an experience designer.
![Page 5: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/5.jpg)
“a what…?”
![Page 6: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/6.jpg)
I create experiences for a living.
![Page 7: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/7.jpg)
![Page 8: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/8.jpg)
I create experiences for a living.
![Page 9: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/9.jpg)
People hire me to design things for them.
![Page 11: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/11.jpg)
Er… less artsy, more techy.
![Page 12: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/12.jpg)
![Page 13: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/13.jpg)
People hire me to design things for them.
![Page 14: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/14.jpg)
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!
![Page 17: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/17.jpg)
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
![Page 18: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/18.jpg)
“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
![Page 19: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/19.jpg)
What does natural storytelling look like?
![Page 20: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/20.jpg)
Storyteller Audience
![Page 21: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/21.jpg)
Storyteller Audience
Gestures
Props
Inflection
Feedback
![Page 22: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/22.jpg)
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
![Page 23: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/23.jpg)
What do website versions of storytelling commonly look like?
![Page 24: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/24.jpg)
Website Internet
![Page 25: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/25.jpg)
Website
Over-edited or under-edited message
Unengaging orCTA tunnel vision
Flat voice & tone
Internet
Too much or too little info
![Page 26: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/26.jpg)
What stories on websites feel like (for both storytellers and visitors).
![Page 27: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/27.jpg)
Let’s reconnect natural storytelling best practices to our website experiences.
![Page 28: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/28.jpg)
Flat voice & tone → Inflection
![Page 29: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/29.jpg)
Flat voice & tone → Inflection
Label-mania (2-3 word titles, everywhere)All caps all the time
Typography and punctuation = personality
![Page 30: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/30.jpg)
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.
![Page 31: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/31.jpg)
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.
![Page 32: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/32.jpg)
Too much or little info → Feedback
![Page 33: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/33.jpg)
Too much or little info → Feedback
The 10 second impressionHow much scrolling until the “ah ha” moment
The right content in the right place
![Page 34: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/34.jpg)
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?
![Page 35: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/35.jpg)
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.
![Page 36: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/36.jpg)
Over-edited or under-edited message → Props
![Page 37: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/37.jpg)
Over-edited or under-edited message → Props
Grandiose or vague statementsContext is king
A picture is worth 1000 words
![Page 38: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/38.jpg)
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.
![Page 39: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/39.jpg)
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.
![Page 40: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/40.jpg)
Unengaging or CTA tunnel vision → Gestures
![Page 41: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/41.jpg)
Unengaging or CTA tunnel vision → Gestures
CTAs everywhere (or nowhere)All words, no play
Finding delightful interactions
![Page 42: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/42.jpg)
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.
![Page 43: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/43.jpg)
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.
![Page 44: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/44.jpg)
“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
![Page 45: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/45.jpg)
C O N T A C T
Jessica Moon@moonspired
Connect with me onLinkedin | Website
![Page 46: on Your Website Help You Tell a Better Story Simple Design ...2017... · Simple Design Tips That Will Help You Tell a Better Story on Your Website Fri Nov 10, 2017 | 11:00 AM - 12:00](https://reader033.fdocuments.us/reader033/viewer/2022053015/5f160afbdfeea14e64530c2b/html5/thumbnails/46.jpg)
Thank you!!!