websites that win hearts: designing for emotional engagement

82
A Beaconfire Webinar | November 20 th , 2014 Eve Simon, Creative Director

Upload: eve-simon

Post on 01-Jul-2015

400 views

Category:

Design


0 download

DESCRIPTION

Beaconfire Webinar, given Nov 20th 2014

TRANSCRIPT

Page 1: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | November 20th, 2014 Eve Simon, Creative Director

Page 2: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 3: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Digital strategies, campaigns & web sites for social good

Page 4: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

RyderJennifer, Data Analyst and Production Lead

OJAmy, UX Designer

Bella & TrevorAndrew, Director of Business Development

Page 5: Websites That Win Hearts: Designing for Emotional Engagement

Max & ZoeEve, Creative Director

Page 6: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 7: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 8: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 9: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 10: Websites That Win Hearts: Designing for Emotional Engagement

Digital Engagement

Ecosystem

Web

Display

Mobile

Social Media

Content

Email

Paid Search

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 11: Websites That Win Hearts: Designing for Emotional Engagement

Digital Engagement

Ecosystem

Web

Display

Mobile

Social Media

Content

Email

Paid Search

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 12: Websites That Win Hearts: Designing for Emotional Engagement
Page 13: Websites That Win Hearts: Designing for Emotional Engagement
Page 14: Websites That Win Hearts: Designing for Emotional Engagement
Page 15: Websites That Win Hearts: Designing for Emotional Engagement
Page 16: Websites That Win Hearts: Designing for Emotional Engagement

“ If you don't know where you're going, any road will get you there.- The Cheshire Cat

Page 17: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 18: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 19: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 20: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 21: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 22: Websites That Win Hearts: Designing for Emotional Engagement

KodiKristin, Talent Director

Page 23: Websites That Win Hearts: Designing for Emotional Engagement

“Give me six hours to chop down a tree and I will spend the first four sharpening the axe.

- Abraham Lincoln

Page 24: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 25: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 26: Websites That Win Hearts: Designing for Emotional Engagement
Page 27: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 28: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Remember those pain points?

Page 29: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Lets turn them into goals

Page 30: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 31: Websites That Win Hearts: Designing for Emotional Engagement

Giving time has a different satisfaction. The connections, networking and seeing people you are more familiar with. You see what the organization is doing.”

Christopher is 32 years old and lives in San Diego. He enjoys being outdoors – surfing, hiking, biking, camping, you name it. Christopher wants to make his community the very best it can be – this is his home and one day, he hopes to raise his family here. He volunteers frequently around his community. He likes knowing his time and efforts are directly impacting the area where he lives and the people he regularly comes into contact.

Occasionally Christopher makes a donation to an organization. Typically it’s a small amount of money to charities prompted when friends and family ask. He likes to check out the charity before giving a donation, just to make sure they’ll use his money wisely.

“Tech WatchChristopher loves gadgets and technology. He has had a tablet and smart phone for years. He often uses the tablet or checks email on his phone while watching TV. Christopher checks sports and news online. He uses Twitter for news, to connect with friends and set-up weekend activities. He also uses the web to research purchases like outdoor gear and electronics.

What Drives His Engagement >• Organization is trusted

• Has events and gatherings where I can donate in person

• Is an organization I would feel proud to talk about with others

• Makes me feel I made a smart decision to donate

• Helps me feel part of a broader community

Involved Do-Gooder

Prospect

Page 32: Websites That Win Hearts: Designing for Emotional Engagement

Giving time has a different satisfaction. The connections, networking and seeing people you are more familiar with. You see what the organization is doing.”

Christopher is 32 years old and lives in San Diego. He enjoys being outdoors – surfing, hiking, biking, camping, you name it. Christopher wants to make his community the very best it can be – this is his home and one day, he hopes to raise his family here. He volunteers frequently around his community. He likes knowing his time and efforts are directly impacting the area where he lives and the people he regularly comes into contact.

Occasionally Christopher makes a donation to an organization. Typically it’s a small amount of money to charities prompted when friends and family ask. He likes to check out the charity before giving a donation, just to make sure they’ll use his money wisely.

“Tech WatchChristopher loves gadgets and technology. He has had a tablet and smart phone for years. He often uses the tablet or checks email on his phone while watching TV. Christopher checks sports and news online. He uses Twitter for news, to connect with friends and set-up weekend activities. He also uses the web to research purchases like outdoor gear and electronics.

What Drives His Engagement >• Organization is trusted

• Has events and gatherings where I can donate in person

• Is an organization I would feel proud to talk about with others

• Makes me feel I made a smart decision to donate

• Helps me feel part of a broader community

Involved Do-Gooder

Prospect

Page 33: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 34: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Sample Content Inventory

Downloadable Content Inventory Spreadsheet:http://maadmob.com.au/resources/content_inventory

Page 35: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 36: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 37: Websites That Win Hearts: Designing for Emotional Engagement

AllegraTim, Front end developer

Page 38: Websites That Win Hearts: Designing for Emotional Engagement

“No, Watson, this was not done by accident, but by design.

- Sherlock Holmes

Page 39: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 40: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 41: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 42: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 43: Websites That Win Hearts: Designing for Emotional Engagement

“Don’t make something unless it is both necessary and useful; but if it is both necessary and useful, don’t hesitate to make it beautiful.

- Shaker Philosophy

Page 44: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 45: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 46: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 47: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 48: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

GeorgeLynn, CEO

https://color.adobe.com/create/image/

Page 49: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Goodhttp://www.checkmycolours.com/

Page 50: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 51: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 52: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 53: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 54: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 55: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Working with imagesThe French General (aka “Frenchie”) Cara, Director of Services Delivery

Page 56: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Scale, don’t distort

Page 57: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Square

Horizontal(Landscape)

Vertical(Portrait)

Aspect ratio is your friend

Page 58: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 59: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 60: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 61: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 62: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 63: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 64: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 65: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good https://www.myfonts.com/WhatTheFont/

Page 66: Websites That Win Hearts: Designing for Emotional Engagement
Page 67: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Goodhttp://thenounproject.com/

Page 68: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 69: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 70: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 71: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 72: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Lucky (and Rocky)Darren, Data Analyst

Page 73: Websites That Win Hearts: Designing for Emotional Engagement

“The most valuable commodity I know of is information.

- Gordon Gekko

Page 74: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Basic Google Analytics Dashboard

Google Analytics Academy:https://analyticsacademy.withgoogle.com/explorer

Analytics Exchange for Non profits:http://www.webanalyticsdemystified.com/ae/ae-business.asp

Page 75: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

http://www.crazyegg.com/

Page 76: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 77: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 78: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

htt

p:/

/ww

w.u

sert

est

ing

.co

m/

Page 79: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good https://www.surveymonkey.com/

Page 80: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For Good

Page 81: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For GoodA Beaconfire Webinar | Websites That Win Hearts, For Good

Page 82: Websites That Win Hearts: Designing for Emotional Engagement

A Beaconfire Webinar | Websites That Win Hearts, For GoodBest Friends National Conference | Websites That Win Hearts, For Good