Revisions with developer notes

28
2014 CAMPAIGN ePLEDGE REDESIGN UNITED WAY OF THE BAY AREA “Intuitive design is how we give the user new superpowers.” Jared Spool

description

For Jorge

Transcript of Revisions with developer notes

Page 1: Revisions with developer notes

2014 CAMPAIGN ePLEDGE REDESIGNUNITED WAY OF THE BAY AREA

“Intuitive design is how we give the user new superpowers.” Jared Spool

Page 2: Revisions with developer notes

e-Pledge Redesign 2

EPLEDGE FLOW CHART

LOG INFUM GIFT TO UWBA

SPLIT TO 3 KEY AREAS

PROFILE (PREFERENCES)

STEP 1: THANK YOU PAGE REDIRECT(GOAL COMPLETE)

STEP 2:THANK YOU EMAIL SENT

DESIGNATEUWBA AGENCY (S)

CHOOSE FROM LIST

DESIGNATEWRITE IN

CREDIT

PAYROLLChoose amountx number of paychecks & number of pay periods

Choose amountx 12 monhly payments or 1 time payment (minimum $120 per year)

Choose date/amountx 12 monhly payments or 1 time payment provide rounting info

E-CHECK

WELCOME

1. Contribution Details 2. My Profile 3. Review and Approve

REVIEW & CONFIRM GIFT DETAILS

UP-SELL DONATIONTIME SENSITIVE

Page 3: Revisions with developer notes

e-Pledge Redesign 3

EPLEDGE LOG IN SCREEN

Suggestion for new design: Create a modal window to allow a speedy log in to get started. Donor can see a hint of the experience behind the darkened screen and can close the window if desired.

Add Logo of Company to Modal Window using a parameter in the url.

Page 4: Revisions with developer notes

e-Pledge Redesign 4

Personalized greeting in the header.

Get employee started with entering an amount which will pre-populate the screens following.

Prepopulate amount with donation from last year plus 5%The employee can input donation amount-keep value to populate future screens (session cookie?)

After the next patch we can include the radio buttons here but for Phase One

Image can be swapped out for each company.

By default, include a thank you letter from Anne immediately under the donation area. Can be swapped out with letter from CEO of the workplace company

Custom company logo will be defined.

Include static (or possibly dynamic) pie chart showing information about United Way’s 3 key areas. (Artwork to come)

Footer includes secure seal at all times to provide assurance of safety for the donor’s data. Make sure the customer service phone number is also present at all time.

Possibly include mission statement.

EPLEDGE WELCOME SCREEN

Page 5: Revisions with developer notes

ePledge Redesign 5

CHOOSE PLEDGE METHOD

STEP ONE: CHOOSE PAYMENT METHOD WIREFRAME FOR RADIO BUTTONS

“Grateful for the help to find a safe haven for my family.” Carrie M., Emergency Food & Shelter

PREVIOUS CONTINUEMY TOTAL PLEDGE: $1200

Payroll Deduction

Credit Card

e-Check

YES, I’D LIKE TO PLEDGE BY:

Notes to Developer:

Display Donor’s first name in header

Top Menu items:

Hide menu bar unless required by company

Display buttons in consistent place

Add “article” to swap out quotes

Display pledge amount from welcome page

Pick up styles from website, this is a wireframe only. Look at the donation page: http://uwba.org/donate

Page 6: Revisions with developer notes

ePledge Redesign 6

I authorize my employer to deduct my total annual contribution from my paycheck as specified below.

Deduction per Pay Period

Number of Pay Periods

Number of Deductions to Make

Total Annual Pledge

PAYROLL DEDUCTION

STEP ONE-A: CHOOSE PAYMENT METHOD WIREFRAME

“Thank you for helping me to provide for my children.” Jose Alvarez, SparkPoint Client

SUCCESS STORY Sem lacinia quam venenatis vestibulum. ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.

Note: If your contribution is $1000 or more per year, you are eligible to join one of United Way of the Bay Area affinity groups. If you would like to join a leadership group check one of the boxes below.

Emerging Leaders

Womens Leadership Circle

12 Pay Periods

$1200.00

$100.00

12 Deductions

CONTINUE

PREVIOUS CONTINUEMY TOTAL PLEDGE: $1200

Notes to Developer:

Display Donor’s first name in header

Hide menu bar unless required by company

Display buttons in consistent place

Add “article” to swap out quotes

Display pledge amount from welcome page

Add “article” to swap out success stories

Add “article” to display affinity groups (question for Eric on where this information can be stored in Andar)

Pick up styles from website, this is a wireframe only. Look at the donation page: http://uwba.org/donate

If the split gift option has to be on this page make it small and insignificant. It will go to page 7 or skip to the prefeences if not clicked.

In that case the contribution details part of the progress bar will not show. Split your gift?

Page 7: Revisions with developer notes

ePledge Redesign 7

“This year, we kept all of our tax return. Thank you!” Shelley Chen, Earn It! Keep It! Save It! Client

Your gift to United Way Community Fund will go where the need is the greatest to help hundreds of Bay Area families in your neighborhood to get jobs, go to school, find affordable housing, and put food on the table. Thank you for supporting critical programs in the Bay Area.

United Way Community Fund: Give my gift where the need is the greatest $1000

Education: Level the playing field Financial: Making ends meet Basic Needs: Critical services

STEP ONE-B: ASSIGN GIFT AND SPLIT IF DESIRED

1 2 3

Contribution Details My Profile Review and Approve

Split your gift to more agencies?

? ? ?

CONTRIBUTION DETAILS PREVIOUS CONTINUEMY TOTAL PLEDGE: $1200

$200

Notes to Developer:

Large radio button is checked by default and total amount populates UW community fund field.

Photos and text below do not have fields showing until checked.

When check box is checked below the image a field will appear to enter a dollar amount.

Change the button “Agency Search” to a text link that says “Split your gift to more agencies?”

Page 8: Revisions with developer notes

ePledge Redesign 8

“This year, we kept all of our tax return. Thank you!” Shelley Chen, Earn It! Keep It! Save It! Client

STEP ONE-B: AGENCY SEARCH

1 2 3

Contribution Details My Profile Review and Approve

CONTRIBUTION DETAILS PREVIOUS CANCEL CONTINUEMY TOTAL PLEDGE: $1200

Search by keyword, city and/or state for a non-profit currently listed with United Way. Once the search results are populated, enter the annual amount for each of your selected agencies. Click “Cancel” to return to the main page.

Search for an agency

Please enter amounts below to the agencies of your choice. Minimum amount per agency is $100.

If your agency is not listed, select the “write-in” option. Or try to search again using different keywords. Click “Finished” to add your choices. You will have a chance to review the result and return to the main page after confirmation.

KEYWORD

CITY

* Any State

SEARCHWrite in

Page 9: Revisions with developer notes

ePledge Redesign 9

“This year, we kept all of our tax return. Thank you!” Shelley Chen, Earn It! Keep It! Save It! Client

1 2 3

Contribution Details My Profile Review and Approve

STEP ONE-B CLICKED: AGENCY SEARCH RESULTS

Showing Agencies 1-20 of 4486 | 21-40 | < > | 150-430

Name of agency

826 Valencia

Guide Dogs for the Blind

Red Cross

Oceana

Habitat for Humanity

$100

0

0

0

$100

Amount

Agency search results

Please enter the amounts below for the agencies of your choice, $100 minimum per agency.

If your agency is not located, choose the write-in option.

CONTRIBUTION DETAILS PREVIOUS CANCEL ADDMY TOTAL PLEDGE: $1200

KEYWORD

CITY

* Any State

SEARCHWrite in

Page 10: Revisions with developer notes

ePledge Redesign 10

“This year, we kept all of our tax return. Thank you!” Shelley Chen, Earn It! Keep It! Save It! Client

Your gift to United Way Community Fund will go where the need is the greatest to help hundreds of Bay Area families in your neighborhood to get jobs, go to school, find affordable housing, and put food on the table. Thank you for supporting critical programs in the Bay Area.

United Way Community Fund: Give my gift where the need is the greatest

211 Bay Area

$800

$200

Education: Level the playing field Financial: Making ends meet Basic Needs: Critical services

1 2 3

Contribution Details My Profile Review and Approve

Split your gift to more agencies?

? ? ?

CONTRIBUTION DETAILS PREVIOUS CONTINUEMY TOTAL PLEDGE: $1200

$200

Notes to Developer:

Cancel will take them back to this page.

If they add then the designation will show up above the text link and the amount will be deducted from the UW Community Fund.

If they want to do a write in they can choose split a gift again and then the new amount will show below the other fields but above the “split your gift”. The little text link will move further down the page and will be as inconspicuous as possible.

Page 11: Revisions with developer notes

ePledge Redesign 11

“I have confidence that I can achieve my dream.” Terek Turner, Matchbridge Client

Please review your information below and confirm that it is correct. Let us know how you would like your gift confirmed. Your information is not released to any parties without your permission and will be used o send you a confidential tax receipt.

First name

Last name

Personal email

Home address

Line 2

City

State

Zip

John

Donor

[email protected]

1352 Halibut Street

Foster City

94404

CA

Apartment #201

STEP TWO: PREFERENCES

Your email is used to send a confirmation of your gift or important tax information.

CANCELPREVIOUS CONTINUE

1 3

Contribution Details My Profile Review and Approve

2

?

?

MY PROFILE MY TOTAL PLEDGE: $1200

Page 12: Revisions with developer notes

ePledge Redesign 12

“I found I was eligible for CalFresh. So grateful for the help!” Vanessa Grove, Caller to 211

Review and Approve

If you have no changes, please press “Confirm”. If you would like to make a change use the “Previous” button. “Cancel” will take you back to the welcome page.

Gift splitUnited Way of the Bay Area: $1000826 Valencia: $100Habitat for Humanity: $100Total: $1200edit

Pledge Type: Payroll DeductionNumber of Pay Periods: 12Number of Deductions: 12Deduction per pay period: $172edit

John Donor1352 Halibut StreetFoster City, CA [email protected]

STEP THREE: REVIEW AND APPROVE (TOP BAR)

1 3

Contribution Details My Profile Review and Approve

2

CANCELPREVIOUS CONTINUE

Great news! For a limited time if you add $100 per year to your contribution to United Way Community Fund your company will match it 100%! Click the button now and enter this code MATCH100 when prompted.

ADD $100 PER YEAR TO UNITED WAY COMMUNITY FUND

X

Page 13: Revisions with developer notes

ePledge Redesign 13

“I found I was eligible for CalFresh. So grateful for the help!” Vanessa Grove, Caller to 211

Review and Approve

If you have no changes, please press “Confirm”. If you would like to make a change use the “Previous” button. “Cancel” will take you back to the welcome page.

Gift splitUnited Way of the Bay Area: $800826 Valencia: $100Habitat for Humanity: $100Total: $1200edit

Pledge Type: Payroll DeductionNumber of Pay Periods: 12Number of Deductions: 12Deduction per pay period: $100edit

John Donor1352 Halibut StreetFoster City, CA [email protected]

STEP THREE: REVIEW AND APPROVE (POP UP MODAL TO ADD FUNDS RIGHT HERE)

1 3

Contribution Details My Profile Review and Approve

2

CANCELPREVIOUS CONTINUE

Great news! For a limited time if you add $10 per pay period to your contribution to United Way Community Fund your company will match it 100%! Click the button now and enter this code MATCH100 when prompted.

ADD $10 PER PAY PERIOD TO UNITED WAY COMMUNITY FUND

X

Yes! I want to make a bigger impact! For a limited time you may add $100 per year and Dodge & Cox will match 100%.

Enter your promo code

X

ADD MATCH100

Page 14: Revisions with developer notes

ePledge Redesign 14

“I found I was eligible for CalFresh. So grateful for the help!” Vanessa Grove, Caller to 211

Review and Approve

If you have no changes, please press “Confirm”. If you would like to make a change use the “Previous” button. “Cancel” will take you back to the welcome page.

Gift splitUnited Way of the Bay Area: $1000Matched gift: $100826 Valencia: $100Habitat for Humanity: $100Total: $1300edit

Pledge Type: Payroll DeductionNumber of Pay Periods: 12Number of Deductions: 12Deduction per pay period: $108edit

John Donor1352 Halibut StreetFoster City, CA [email protected]

STEP THREE: REVIEW AND APPROVE (TOP BAR)

1 3

Contribution Details My Profile Review and Approve

2

CANCELPREVIOUS CONFIRM

___

Page 15: Revisions with developer notes

ePledge Redesign 15

Pledge Confirmation

Print using the “Print” button below and save a copy for your records.

Thank you for making an impact in the lives of many, many Bay Area families! Your support of poverty cutting programs in your neighborhood is appreciated by donors, volunteers and the working families who benefit.

Please email me an acknowledgment of my contribution.

Release my address to my designated nonprofit.Please email a confirmation of the pledge to the email address above.

FINAL PLEDGE CONFIRMATION TO PRINT

LOG OFFPRINT

Gift split:United Way of the Bay Area: $800Matched amount: $100826 Valencia: $100Habitat for Humanity: $100Total: $1100

Reference Number: 45379872Pledge Type: Payroll DeductionNumber of Pay Periods: 12Number of Deductions: 12Deduction per pay period: $100

John Donor1352 Halibut StreetFoster City, CA [email protected]

Communication Preferences

“Thanks to donors like you, my child will have a better life.” Susan Hall, Community Schools

Page 16: Revisions with developer notes

e-Pledge Redesign 16

EMAIL CONFIRMATION

Suggestion:

Use HTML in our brand template with an appropriate image.

Display name, can it be Gift Processing?

The subject line could say something like: “Thank you for your United Way pledge” open for review.

Email confirmation is sent to the donor in plain text. It is possible to use HTML for this.

We should consider styling the thank you and perhaps adding text that confirms that the donor’s money will be put to really good programs if they donated to United Way.

Also the gifts should be listed with United Way Community Fund at the top, then the key areas, then any other designations.

Thank you for your 2014 United Way ePledge Donation

Dear John Donor,

Thank you for your commitment and support by making your gift to the 2014 United Way Campaign. You are helping people like Angel Plascencia who recently had his taxes done at Earn It! Keep It! Save It! for free.

Your pledge is summarized below for your 06/19/2014 transaction.

Gift split:United Way of the Bay Area: $800Matched amount: $100826 Valencia: $100Habitat for Humanity: $100Total: $1100

If there is any incorrect information, please contact us at [email protected], or call (800) 273-1779.

This confirms your gift to United Way of the Bay Area, and along with a bank record of your payment (check or credit card) or your

Gift Processing

Page 17: Revisions with developer notes

e-Pledge Redesign 17

Thank you page after logging off.

Consider option to not log off yet but instead review history or other task associated with account.

EPLEDGE THANK YOU SCREEN

Page 18: Revisions with developer notes

ePledge Redesign 18

CURRENT APPLICATION SCREENS

Page 19: Revisions with developer notes

e-Pledge Redesign 19

CHOOSING METHOD OF DONATION

Payroll DeductionSelect the type from radio button set Credit Card

e-Check Paper Check

Combine both steps on the home page or simply have the user enter an amount that they want to donate per year and then start the process? The amount they chose will pre-populate step two and they can use the calculator to change it. (2013 campaign results: average payroll gift is $800.)

Payroll DeductionCredit Carde-Check

I want to donate _________________ per year

DONATE >

$800

Note: Cannot click next until you add an amount

Note: These radio buttons will show up again later in the process if the donor wishes to change.

Form from home page

Possible to use this but is not offered as a choice to most companies

Per Sonali:Delete designation checkbox

Page 20: Revisions with developer notes

e-Pledge Redesign 20

STEP TWO: CHOOSE TYPE OF DESIGNATION

United Way Community Fund and Key Areas Agency Search of Known Listed Non-profits Write-in Your Own on-profit

Agency search is the starting place for search and will show the search results on another screen or modal window.

Default to checking the United Way option. Offer split my donation. Drop un-designated and unrestricted terms as they are unfamiliar to donors. Could be interpreted as they haven’t designated so they SHOULD do it.

Page 21: Revisions with developer notes

e-Pledge Redesign 21

STEP ONE-B: DEFAULT TO UNITED WAY’S COMMUNITY FUND

NOTE TO DEVELOPER: Maureen added the option “do you want to designate your gift” so you can see this behavior. Leaving this check box blank will take you to the final screen to complete your gift bypassing the agency search. This would be the same experience if the setting was added “repeat same gift as last year”.

NOTE: Confused as to why populating the key areas doesn’t populate Community Fund. Are the key areas part of Community Fund?

Suggestion: Have the field “United Way Community Fund” populated with full gift until designated to one of the three areas.

Suggestion: Keep the Pledge amount/designation and the navigation buttons consistent on the screen so that the donor does not need to look for the them on each screen.

Page 22: Revisions with developer notes

e-Pledge Redesign 22

STEP TWO: IF “SEARCH FOR AGENCIES” IS CLICKED

Agency search is the starting place for search and will show the search results on another screen or modal window.

Suggestion: Paginate both top and bottom of the displayed search results list. Keep search fields present and populated with the donor’s search terms throughout the search process and allow the donor to change the search parameters at any time. Style the pop up window when the magnifying glass is clicked so that it matches our branding.

Page 23: Revisions with developer notes

e-Pledge Redesign 23

STEP THREE: PREFERENCES SCREEN

Page 24: Revisions with developer notes

e-Pledge Redesign 24

STEP THREE: VERIFICATION SCREEN

NOTE TO DEVELOPER: Screen with confirm button (which was not there before in the demo). Maureen has enabled live transaction (please use the check option --use any number for the check -- not payroll) but we must use carefully as it costs .45 per transaction and involved Steve cancelling the transaction immediately afterwards.

Page 25: Revisions with developer notes

e-Pledge Redesign 25

Step Five: FINISHED

Thoughts: Wonder if we can change the language, Finished doesn’t seem like the best word for this step. Maybe a word like Complete would sound better. Wonder if it can be changed?

Best practice state that the final step does not show up in the progress bar.

The only options are Log Off or Print but suggestion is that when you Log Off that you land on the home page or a specific Thank You page that will complete the experience.

Page 26: Revisions with developer notes

e-Pledge Redesign 26

CURRENT EMAIL CONFIRMATION

Display name, can it be Gift Processing?

The subject line could say something like: “Thank you for your United Way pledge” open for review.

Email confirmation is sent to the donor in plain text. It is possible to use HTML for this.

We should consider styling the thank you and perhaps adding text that confirms that the donor’s money will be put to really good programs if they donated to United Way.

Also the gifts should be listed with United Way Community Fund at the top, then the key areas, then any other designations.

Page 27: Revisions with developer notes

e-Pledge Redesign 27

CURRENT PRINT CONFIRMATION

Observation: Print brings up print dialog screen inside the browser window. This is not expected behavior but it does work. Perhaps it is an aspect of the secure website behavior?

Page 28: Revisions with developer notes

e-Pledge Redesign 28

CURRENT LOG OFF

This is how the LOG OFF screen looks. Definitely an opportunity to improve the ending!!

Noticed this link error on the Give button, we will fix the error when we do the updates. Should probably go to the donate page on uwba.org or to the landing page where we talk about giving.

http://uwba.org/volunteerhttp://uwba.org/advocate

In progress