Andar Donation Portal Redesign

2014 CAMPAIGN ePLEDGE REDESIGNUNITED WAY OF THE BAY AREA

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

e-Pledge Redesign ii

ePLEDGE REDESIGN

ePledge Redesign ii

ePLEDGE REDESIGN

GOALUNITED WAY OF THE BAY AREA

Our ePledge donation portal experience is a mismatch with our brand and, unfortunately, is sometimes the only contact a donor will have with United Way.

The look and feel of the new e-Pledge user experience will be evergreen to blend with current uwba.org website and other core United Way of the Bay Area brand assets.

Our goal is to design a donation experience that reflects our brand and encourages donors to consider giving their gift to United Way rather than another agency.

e-Pledge Redesign iii

ePLEDGE REDESIGN

ePledge Redesign iii

ePLEDGE REDESIGN

CURRENT UNITED WAY WEBSITES AND ePLEDGE SITES United Way of the Bay Area .............................................................................................. 2 United Way of Central Maryland ....................................................................................... 3 United Way of Greater Rochester ..................................................................................... 4

DESIGN PATTERN RESEARCH Examples of sign-in modal windows ................................................................................ 6 Examples of Donation welcome pages ............................................................................ 7 Examples of Progress Patterns ........................................................................................ 8 About the Progress Bar Pattern ....................................................................................... 9 Example of tabbed pattern ............................................................................................. 10Personas .............................................................................................................................. 12ePledgeflowchart .......................................................................................................... 14

WELCOME SCREENS Current ePledge Log in screen ...................................................................................... 16 ePledge Log in screen redesign ..................................................................................... 17 Current ePledge Welcome screen .................................................................................. 19 ePledge Welcome screen redesign ................................................................................ 19 Create infographic for home page ................................................................................ 20

WIREFRAMES Step One-A: Choose payment method ......................................................................... 22 Step One-B: Assign gift and split if desired .................................................................. 23StepOne-Bclicked:AGENCYSEARCHinmodalwindow(keepsearchfieldsvisible) 24 Step Two: Preferences ................................................................................................... 25StepThree:Reviewandapprove(Topbar) ................................................................... 26StepThree:Reviewandapprove(POPUPmodaltoaddfundsrighthere) ............... 27StepThree:Reviewandapprove(Topbarclosed) ...................................................... 28FinalePledgetoprintorlogoff ...................................................................................... 29EmailConfirmation .......................................................................................................... 30Thank You Landing Page ................................................................................................ 31

TABLE OF CONTENTS

ePledge Redesign 1

ePLEDGE REDESIGN

CURRENT WEBSITES AND E-PLEDGE PORTALSUnited Way of the Bay Area (uwba.org)

United Way of Central Maryland (uwcm.org)

United Way of Greater Rochester (uwgr.org)

e-Pledge Redesign 2

ePLEDGE REDESIGN UNITED WAY OF THE BAY AREA

uwba.org public facing website

current uwba.org ePledge landing screen

current uwba.org ePledge welcome screen

e-Pledge Redesign 3

ePLEDGE REDESIGN UNITED WAY OF CENTRAL MARYLAND

uwcm.org public facing website uwcm.org ePledge landing screen

uwcm.org ePledge welcome screen

e-Pledge Redesign 4

ePLEDGE REDESIGN UNITED WAY OF GREATER ROCHESTER

uwgr.org public facing website

uwgr.org ePledge landing screen

uwgr.org ePledge welcome screen modal window

uwgr.org ePledge welcome screen (after closing modal window)

ePledge Redesign 5

ePLEDGE REDESIGN

WEBSITE DESIGN EXAMPLESModal WindowsDonation forms on Home PageTabbed Design PatternProgress Bar Design Pattern

e-Pledge Redesign 6

ePLEDGE REDESIGN EXAMPLES OF SIGN-IN MODAL WINDOWS

e-Pledge Redesign 7

ePLEDGE REDESIGN EXAMPLES OF DONATION WELCOME PAGES

e-Pledge Redesign 8

ePLEDGE REDESIGN EXAMPLES OF PROGRESS PATTERNS

e-Pledge Redesign 9

ePLEDGE REDESIGN ABOUT THE PROGRESS BAR PATTERN

sourced from Yahoo User Interface Design Patterns

What Problem Does This Solve?The user needs to know where they are in a multi-screen process (such as purchase or set-up).

When to Use This PatternUse a progress bar in a wizard or other predefined multi-step process that the user may only ever have to complete one time, or at most on rare occasions. Do not use for routine tasks for which a heavy step-by-step hand-holding will eventually wear out its welcome.

What’s the Solution?Show a progress bar (or progress meter), which is a persistent navigation bar displaying a sequence of steps and highlighting the current step and optionally the degree or percentage of completion so far.

The progress bar should begin as soon as the user has decided to start the process.

Break down steps in a meaningful way. There doesn’t need to be a 1:1 step-to-screen correlation as long as it’s clear the steps refer to actions rather than individual screens. For example: “Sign In” may involve a sign-in page and registration.

Use short names for steps and use parallel construction. Action-oriented verbs are good, but use only if each step can be fairly described this way.

Ensure the progress bar is accurate and reliable in all use cases. No user should skip steps or encounter steps that aren’t reflected in the progress bar. Be sure to include sign-in as needed. Create different progress bars for different use cases as necessary.

Ensure the visual design can’t be mistaken for clickable navigation.

The final step in the progress bar should reflect the last screen where action is required (e.g., Complete Registration, Submit Order). Don’t include a passive Confirmation or Receipt Page in the progress bar.

Why Use This Pattern?A progress bar can set expectations for the length of process, give a preview of the overall process, and keep users informed about how far they’ve progressed in the prescribed flow.

e-Pledge Redesign 10

ePLEDGE REDESIGN EXAMPLE OF TABBED PATTERN

ePledge Redesign 11

ePLEDGE REDESIGN

PERSONAS3 Workplace Campaign Donors1 Workplace Campaign Captain


ePLEDGE REDESIGN PERSONAS

VALERIE VOLUNTEER

38 years old

Finance Administration Manager

Volunteers every month at local foodbank and at United Way sponsored events

Valerie is more interested in volunteering. She has volunteered with some of United Way’s events and is a member of UWBA’s Women’s Leadership Council. She donates what she can comfortable fit into her budget.

EVELINA ENTHUSIASTIC

26 years old

Help Desk Support

Volunteers at church every week

Donates a modest amount to United Way’s Workplace Campaign every year and advocates for United Way’s programs.

GREGORY GENEROUS

45 years old

Business Development Manager

Volunteers to coach AYSO soccer teams

Donates an increasing amount every year to United Way’s Workplace Campaign and he is part of the Leadership Giving program. One or two of his associates are Toqueville Society members.

CARRIE CHAMPION

48 years old

Human Resources Director

Volunteers to lead Campaign in addition to her regular job

Leads United Way Campaigns inside a medium size company. Donates at the leadership level and encourages her team to donate whatever amount they feel they can manage.

Employees participating in corporate workplace campaigns Corporate Lead inside company

ePledge Redesign 13

ePLEDGE REDESIGN

FLOW CHART


ePLEDGE REDESIGN 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

ePledge Redesign 15

ePLEDGE REDESIGN

LOGIN AND WELCOME DESIGN


ePLEDGE REDESIGN CURRENT EPLEDGE LOG IN SCREEN

Employee receives the login credentials from their employer


ePLEDGE REDESIGN 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.

NOTE TO DEVELOPER: If they decide to close the modal window and add amounts to the home page first, then check the session header and keep their donation choices in a cookie while the modal window comes back up to allow them to log in and continue to work on their goal of completing their pledge (should the language be pledge or donation? Whichever we choose we should be consistent--check with Erica J. on this).

Suggestion: Add Logo of Company to Modal Window


ePLEDGE REDESIGN CURRENT WELCOME SCREEN

ISSUE with Current Welcome Screen: After logging in, currently the employee must figure out to click “Pledge Now” in the left menu.

As they are focused on making a gift it may be distracting to include so much information text at this point in the flow? They may not want to watch the video at this point either.

Perhaps on the Thank You screen we can include more information and text.


ePLEDGE REDESIGN

Suggestion for new design:

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

The employee can play with the donation amounts before determining their final contributions on the following screens.

Use an active volunteering image to communicate the relevant work of United Way in the community.

Include a thank you letter from Anne immediately under the donation area.

Space is provided for custom company logo.

Include pie chart showing information about United Way’s 3 key areas which the donor will encounter once they land on the contribution details screen.

Footer includes secure seal at all times to provide assurance of safety for the donor’s data.

Suggestion to possibly include mission statement.

EPLEDGE WELCOME SCREEN


ePLEDGE REDESIGN

Results

We partner with San Francisco Bay Area community and build pathways to independent and happy families. Our focus of education, income and basic needs are the building blocks for a good quality of life.

United Way of Southeastern Michigan: Three key areasIt was suggested by an ECC to have a graphic on the welcome page to describe our work at United Way. The infographic below is from United Way of Southeastern Michigan’s website. Something like this could work for us also. It shows the breakdown for our three key areas which was a request from the ECC at Dodge & Cox.

CREATE INFOGRAPHIC FOR HOME PAGE

ePledge Redesign 21

ePLEDGE REDESIGN

FORM PROCESS TO MAKE A CONTRIBUTION

NOTE TO DEVELOPER:

Thefirsttwochoiceswillbeenteredonthewelcomescreen and populate the screens with forms for editing ifdesired.Storevaluesinsessioncookies.

ePledge Redesign 22

ePLEDGE REDESIGN

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

STEP ONE-A: CHOOSE PAYMENT METHOD WIREFRAME

“Thank you for helping me to provide for my children.” JoseAlvarez,SparkPointClient

Payroll Deduction Donate by Credit Card Donate by e-Check

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.

Support critical programs Sem lacinia quam venenatis vestibulum. Poverty cutting id dolor id SparkPoint, 211, Matchbridge, Earn It! Keep It! Save It! ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.

Emerging Leaders

Womens Leadership Circle

Tocqueville Society (10K +)

12 Pay Periods

$1200.00

$100.00

12 Deductions

CONTINUE

ePledge Redesign 23

ePLEDGE REDESIGN

“This year, we kept all of our tax return. Thank you!” ShelleyChen,EarnIt!KeepIt!SaveIt!Client

Contribution Details My total pledge: $1200

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 70%

30%

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

PREVIOUS CONTINUE

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?

? ? ?

ePledge Redesign 24

ePLEDGE REDESIGN

“This year, we kept all of our tax return. Thank you!” ShelleyChen,EarnIt!KeepIt!SaveIt!Client

Contribution Details My total pledge: $1200

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 70%

30%

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

PREVIOUS CONTINUE

1 2 3


√

Split your gift to more agencies?

? ? ?

STEP ONE-B CLICKED: AGENCY SEARCH IN MODAL WINDOW (KEEP SEARCH FIELDS VISIBLE)

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.

KEYWORD

CITY

* Any State

SEARCHCANCEL

Search for an agency X

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

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.

Name of agency

826 Valencia

Guide Dogs for the Blind

Red Cross

Oceana

Habitat for Humanity

Charity Water

Glide Memorial Church

211

$100

0

0

0

$100

0

0

0

Amount Check to Add

FINISHED

Write in

√

√

ePledge Redesign 25

ePLEDGE REDESIGN

“I have confidence that I can achieve my dream.” TerekTurner,MatchbridgeClient

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 only to 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 only to send a confirmation of your gift or important tax information.

My Profile My total pledge: $1200 CANCELPREVIOUS CONTINUE

1 3


2

?

?

ePledge Redesign 26

ePLEDGE REDESIGN

“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


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

ePledge Redesign 27

ePLEDGE REDESIGN

“I found I was eligible for CalFresh. So grateful for the help!” VanessaGrove,Callerto211

Review and Approve


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



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

1 3


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

ePledge Redesign 28

ePLEDGE REDESIGN

“I found I was eligible for CalFresh. So grateful for the help!” VanessaGrove,Callerto211

Review and Approve


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



STEP THREE: REVIEW AND APPROVE (TOP BAR)

1 3


2

CANCELPREVIOUS CONFIRM

___

ePledge Redesign 29

ePLEDGE REDESIGN

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


Communication Preferences

“Thanks to donors like you, my child will have a better life.” SusanHall,CommunitySchools


ePLEDGE REDESIGN 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


ePLEDGE REDESIGN

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