Andar Donation Portal Redesign
Upcoming SlideShare
Loading in...5
×
 

Andar Donation Portal Redesign

on

  • 188 views

Redesign for Andar Donation Portal Redesign

Redesign for Andar Donation Portal Redesign

Statistics

Views

Total Views
188
Views on SlideShare
186
Embed Views
2

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 2

https://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Andar Donation Portal Redesign Presentation Transcript

  • 1. 2014 CAMPAIGN ePLEDGE REDESIGN UNITED WAY OF THE BAY AREA “Intuitive design is how we give the user new superpowers.” Jared Spool
  • 2. e-Pledge Redesign ii ePLEDGE REDESIGN ePledge Redesign ii ePLEDGE REDESIGN GOAL UNITED 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.
  • 3. 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.............................................................................................. 10 Personas............................................................................................................................... 12 ePledge flow chart........................................................................................................... 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................................................................... 23 Step One-B clicked: AGENCY SEARCH in modal window (keep search fields visible).24 Step Two: Preferences.................................................................................................... 25 Step Three: Review and approve (Top bar).................................................................... 26 Step Three: Review and approve (POP UP modal to add funds right here)................ 27 Step Three: Review and approve (Top bar closed)....................................................... 28 Final ePledge to print or log off....................................................................................... 29 Email Confirmation........................................................................................................... 30 Thank You Landing Page................................................................................................. 31 TABLE OF CONTENTS
  • 4. ePledge Redesign 1 ePLEDGE REDESIGN CURRENT WEBSITES AND E-PLEDGE PORTALS United Way of the Bay Area (uwba.org) United Way of Central Maryland (uwcm.org) United Way of Greater Rochester (uwgr.org)
  • 5. 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
  • 6. 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
  • 7. 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)
  • 8. ePledge Redesign 5 ePLEDGE REDESIGN WEBSITE DESIGN EXAMPLES Modal Windows Donation forms on Home Page Tabbed Design Pattern Progress Bar Design Pattern
  • 9. e-Pledge Redesign 6 ePLEDGE REDESIGN EXAMPLES OF SIGN-IN MODAL WINDOWS
  • 10. e-Pledge Redesign 7 ePLEDGE REDESIGN EXAMPLES OF DONATION WELCOME PAGES
  • 11. e-Pledge Redesign 8 ePLEDGE REDESIGN EXAMPLES OF PROGRESS PATTERNS
  • 12. 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 Pattern Use 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.
  • 13. e-Pledge Redesign 10 ePLEDGE REDESIGN EXAMPLE OF TABBED PATTERN
  • 14. ePledge Redesign 11 ePLEDGE REDESIGN PERSONAS 3 Workplace Campaign Donors 1 Workplace Campaign Captain
  • 15. e-Pledge Redesign 12 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
  • 16. ePledge Redesign 13 ePLEDGE REDESIGN FLOW CHART
  • 17. e-Pledge Redesign 14 ePLEDGE REDESIGN EPLEDGE FLOW CHART LOG IN FUM GIFT TO UWBA SPLIT TO 3 KEY AREAS PROFILE (PREFERENCES) STEP 1: THANK YOU PAGE REDIRECT (GOAL COMPLETE) STEP 2: THANK YOU EMAIL SENT DESIGNATE UWBA AGENCY (S) CHOOSE FROM LIST DESIGNATE WRITE IN CREDIT PAYROLL Choose amount x number of paychecks & number of pay periods Choose amount x 12 monhly payments or 1 time payment (minimum $120 per year) Choose date/amount x 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 DONATION TIME SENSITIVE
  • 18. ePledge Redesign 15 ePLEDGE REDESIGN LOGIN AND WELCOME DESIGN
  • 19. e-Pledge Redesign 16 ePLEDGE REDESIGN CURRENT EPLEDGE LOG IN SCREEN Employee receives the login credentials from their employer
  • 20. e-Pledge Redesign 17 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
  • 21. e-Pledge Redesign 18 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.
  • 22. e-Pledge Redesign 19 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
  • 23. e-Pledge Redesign 20 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
  • 24. ePledge Redesign 21 ePLEDGE REDESIGN FORM PROCESS TO MAKE A CONTRIBUTION NOTE TO DEVELOPER: The first two choices will be entered on the welcome screen and populate the screens with forms for editing if desired. Store values in session cookies.
  • 25. 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.” Jose Alvarez, SparkPoint Client 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
  • 26. ePledge Redesign 23 ePLEDGE REDESIGN “This year, we kept all of our tax return. Thank you!” Shelley Chen, Earn It! Keep It! Save It! 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? ? ? ?
  • 27. ePledge Redesign 24 ePLEDGE REDESIGN “This year, we kept all of our tax return. Thank you!” Shelley Chen, Earn It! Keep It! Save It! 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 Contribution Details My Profile Review and Approve √ 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 √ √
  • 28. ePledge Redesign 25 ePLEDGE REDESIGN “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 only to send you a confidential tax receipt. First name Last name Personal email Home address Line 2 City State Zip John Donor johndonor@gmail.com 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 Contribution Details My Profile Review and Approve 2 ? ?
  • 29. 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 split United Way of the Bay Area: $1000 826 Valencia: $100 Habitat for Humanity: $100 Total: $1200 edit Pledge Type: Payroll Deduction Number of Pay Periods: 12 Number of Deductions: 12 Deduction per pay period: $172 edit John Donor 1352 Halibut Street Foster City, CA 94404 lshum@uwba.org 415-808-4268 edit 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
  • 30. ePledge Redesign 27 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 split United Way of the Bay Area: $800 826 Valencia: $100 Habitat for Humanity: $100 Total: $1200 edit Pledge Type: Payroll Deduction Number of Pay Periods: 12 Number of Deductions: 12 Deduction per pay period: $100 edit John Donor 1352 Halibut Street Foster City, CA 94404 lshum@uwba.org 415-808-4268 edit 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 ADDMATCH100
  • 31. ePledge Redesign 28 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 split United Way of the Bay Area: $1000 Matched gift: $100 826 Valencia: $100 Habitat for Humanity: $100 Total: $1300 edit Pledge Type: Payroll Deduction Number of Pay Periods: 12 Number of Deductions: 12 Deduction per pay period: $108 edit John Donor 1352 Halibut Street Foster City, CA 94404 lshum@uwba.org 415-808-4268 edit STEP THREE: REVIEW AND APPROVE (TOP BAR) 1 3 Contribution Details My Profile Review and Approve 2 CANCELPREVIOUS CONFIRM ___
  • 32. 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: $800 Matched amount: $100 826 Valencia: $100 Habitat for Humanity: $100 Total: $1100 Reference Number: 45379872 Pledge Type: Payroll Deduction Number of Pay Periods: 12 Number of Deductions: 12 Deduction per pay period: $100 John Donor 1352 Halibut Street Foster City, CA 94404 lshum@uwba.org 415-808-4268 Communication Preferences “Thanks to donors like you, my child will have a better life.” Susan Hall, Community Schools
  • 33. e-Pledge Redesign 30 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: $800 Matched amount: $100 826 Valencia: $100 Gift Processing
  • 34. e-Pledge Redesign 31 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