good non profit web design, afp congress toronto

From good intentions to more web donations

AFP Toronto Congress

© Beate Sørum 2014

#AFPcongress - @BeateSorum

– no donor, ever.

«I have decided to give, and I will do so even if this form is a bit incomprehensible and it takes me all afternoon»

Todays agenda

#AFPcongress @BeateSorum

‣ Form design best practice ‣ Guiding your users ‣ Defaults and priorities

«I really want a hot dog»

«Do I really want a hot dog..?»

♥Giving is an emotional

decision - not a rational one.

«help out»-menu

«help out»-menu

Become a member

«help out»-menu

Become a member

Webshop

«help out»-menu

Become a member

Webshop

Donate withdrawn coins

has not changed

has not changed

can highlight current events

♥ ✚

Don’t make me

think

Slides:bit.ly/

donationformsrule

- Luke Wroblewski

«The best forms are invisible»

«Web form design «(2008 p.2)

First name

Last name

Adress

Zip code

City

Cancel OK

Looks good, right?

First name

Last name

Adress

Zip code

City

Cancel OK

we can do better!Looks good, right?

Cancel OK

First name

Last name

Adress

Zip codeCity

Cancel OK

First name

Last name

Adress

Zip codeCity

adapt field

lengths

Cancel OK

First name

Last name

Adress

Zip codeCity

Cancel OK

First name

Last name

Adress

Zip codeCity

group fields

Cancel OK

First name

Last name

Adress

Zip codeCity

buttons clearly state

what they do

Delete Donate

First name

Last name

Adress

Zip codeCity

buttons clearly state

what they do

DonateDelete

First name

Last name

Adress

Zip codeCity

DonateDelete

First name

Last name

Adress

Zip codeCity

clear first

choice

DonateLet me throw away all the work I just did

First name

Last name

Adress

Zip code

City

DonateLet me throw away all the work I just did

First name

Last name

Adress

Zip code

City

remove things that hurt more than help

Donate

First name

Last name

Adress

Zip codeCity

Donate

First name

Last name

Adress

Zip codeCity

remove things that hurt more than help

Donate

First name

Last name

Adress

Zip code

City

Donate

First name

Last name

Adress

Zip code

City

right-align for easy

reading and scanning

First name

Last name

Adress

Zip code

City

Donate

First name

Last name

Adress

Zip code

City

Donate

top-align for mobile

First name

Last name

Adress

Zip code

City

Donate

DON’T EVER DO

THIS!!

I

First name

Zip code

City

Donate

Last name

DON’T EVER DO

THIS!!

clearly state what

went wrong & how to fix

A zip code has 5 digits

First name

Last name

Adress

Zip code

There is an error. Please correct the highlighted field below.!

!

City

Donate

THE DATABASE IS

NOTin charge!

«Address line 1» «Address line 2»

Just because your database has a field for it, does not mean you have to ask for it.

Every extra field in your form hurts

your donations.

http://bit.ly/ContactFormConversion



From 11 to 4 fields Submissions up 140%


WHAT’S THE LEAST YOU CAN GET AWAY WITH?

*google translated form. Please don’t blame me for bad grammar.

as a conversation

think of your forms

• Questions that belong • Understandable questions • Explain why you’re asking • Ask follow-up questions when the

task is done.

A conversation:

MATTERforms

Photo: Flickr-user renemensen CC-BY

donate

DONATE NOW

blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla

we have to guideour users.☛

✚

what are our business goals?

1. Fewer people should get cancer

2. More of those who do, should survive

3. Those who have to live with cancer should have a better life

business goals

1. A better life for patients and next of kin.

2. Increase knowledge of cancer and prevention.

3. More people using our programs

4. Improve the Cancer Society’s position and reputation

web page goals

sender receivermessage


the internet is a pull medium


the internet is a pull medium

what you want is less important

what do the users want?

♥

- Cancer treatments

- Symptoms

- Preventing cancer

- Cancer forms

- Latest research

- Choosing a hospital

THESE 6 HAD 25% OF THE VOTES

*Norwegian Cancer Society, Customer CareWords survey.

- …

- …

- …

- …

- …

- …

- …

- …

- …

- …

- …

- give money!

HOME PAGE

Facebook, research

Googled lung cancer

Facebook, research

business goals user needs

«The core model», developed by awesome UX agency Netlife Resarch

CORE PAGES

Googled lung cancer ?

Googled lung cancer Talk to someone on the help line

Facebook, research

Facebook, research

Would you like to support the ongoing research?

research project

core page path forward

business goal: inform about research

user need:

read latest research

research project

core page

make a donation

path forward

business goal: inform about research

user need:

read latest research

right CONTEXT + short PATH

to completionaction=

2006 2007 2008 2009 2010 2011 2012 2013

cancer line conversations

average + 40 %

blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla

DONATE NOW


20 euros from Beate

donate

GIVE NOW?


20 euros from Beate

donate

GIVE NOW?

✃

google did this

blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla

*all the feels*

blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla blablablablablablablablablablabla

20 euros from Beate

donate

GIVE NOW?

*all the feels*

PRIORITIESmake

Donate!Member! Regular gift!

Instagram!Facebook! Twitter!

Volunteer!Legacy! Sponsor!

Give stuff!Fundraise! Holiday cards!

App!Webshop! Newsletter!

Member! Regular gift!

Instagram!Facebook! Twitter!

Volunteer!Legacy! Sponsor!

Give stuff!Fundraise! Holiday cards!

App!Webshop! Newsletter!

Donate!

♥

Don’t make me

think

defaultsUSE

«what are others giving..?»

annual value of regular donors*

*signed up online

2011 2012 2013 2014 (October)


*signed up online

2011 2012 2013 2014 (October)


*signed up online

LAUNCH

2011 2012 2013 2014 (October)


*signed up online

LAUNCH

5x

increase

«do you live with anyone else who

wants to be a member? It is

only $12 extra»

ca. 30%

«do you live with anyone else who

wants to be a member? It is

only $12 extra»

beMOBILE-friendly

conversions, christmas appeal


15%


15% 17%


15% 17% 10%

* conversion rates

recruiting members from facebook

10%

* conversion rates


10%

5,2%* conversion rates


10%

5,2% 6,8%* conversion rates



* conversion rates


49

* conversion rates


49

69* conversion rates


49

69 170* conversion rates

CONTEXTis more important than

GADGET

More donations: • Design (and code) your forms right • Fewer fields are better • Context is king • Nudge • Tell your users what you need • Be device agnostic

thanks for listening!

http://about.me/beatesorum

questions? http://bit.ly/donationformsrule

good non profit web design, afp congress toronto

Technology

translated form

invisibleweb form design

forms questions

highlighted field

extra field

address line

followup questions

understandable questions