Discuss

last person joined: 5 days ago 

Ask a question. Give advice. Share resources. Looking for software or hardware recommendations? Want to know how others are using text messaging in their work? Trying to find examples of IT policies? The NTEN Discuss forum is a great resource for all of the above and more! It's the general discussion list for the NTEN community, and folks all over the US (and the world) are sharing their questions, answers, and news about nonprofit technology.

Creating a new way to donate for our nonprofit

  • 1.  Creating a new way to donate for our nonprofit

    Posted 12 days ago
    Edited by Chris Frantz 11 days ago

    Hey all,

    I'm currently designing a new widget for our nonprofit that lets donors donate directly through clicking a heart-shaped button in the bottom right-hand corner of the screen. I'm planning for it to live on every page and just provide an alternative way to donate quickly. I was hoping I could get some feedback from the community before I turn it from design into code.

    You can click through the interactive demo I made to preview the design here

    Best viewed on desktop as it's not mobile formatted. 


    Let me know if you have any feedback on things I can change before I start building it and adding it to my nonprofit's site. Thanks!


    Edit: 

    Updated with a working link!

    https://www.figma.com/proto/5uxihD026ZU8REF44WqxkQ/Riffing?node-id=109%3A696&viewport=957%2C567%2C0.5957314372062683&scaling=contain
    ------------------------------
    Chris Frantz
    ------------------------------

    Tech Accelerate


  • 2.  RE: Creating a new way to donate for our nonprofit

    Posted 11 days ago
    Hey Chris, the link isn't working for me. Can you post a different one?

    Larry

    ------------------------------
    Larry Rose
    Technology Solutions Specialist
    Oakland, CA
    ------------------------------

    Tech Accelerate


  • 3.  RE: Creating a new way to donate for our nonprofit

    Posted 11 days ago

    Ah, my fault! Please see the edited original post or here for the correct link:

    https://www.figma.com/proto/5uxihD026ZU8REF44WqxkQ/Riffing?node-id=109%3A696&viewport=957%2C567%2C0.5957314372062683&scaling=contain



    ------------------------------
    Chris Frantz
    ------------------------------

    Tech Accelerate


  • 4.  RE: Creating a new way to donate for our nonprofit

    Posted 10 days ago
    I think it looks great Chris! Nice job.

    I just have a few suggestions for consideration.  #1, when the donation box opens, the only real messaging is "Every bit helps."  You might consider something a little stronger, along the lines of "Your gift will transform lives​ for families lacking clean water"  etc.

    #2 I didn't see any way to step backwards. I'm a big one for going back even though it seems like you shouldn't have to.  I might want to change the amount, or decide to make my gift in honor of someone after I've passed that screen.  As we know from UX studies, if you don't offer a clear "Back" button people will use the back button in the browser, which I would expect in this case would close the box and take me to a different web page, leaving me confused.

    And #3, once I've donated and the box closes it might be cool if, for the rest of my visit, the floating heart icon​ changed to something that acknowledged my donation in some visual way.  ​

    Good luck with it!
    Nate

    ------------------------------
    Nathan Gasser
    President & Executive Chef
    Report Kitchen
    :::
    A more delicious way to publish your
    project, policy, and research reports.
    :::
    http://reportkitchen.com
    ------------------------------

    Tech Accelerate


  • 5.  RE: Creating a new way to donate for our nonprofit

    Posted 10 days ago
    Thanks Nathan! I appreciate it.

    #1 - Yep, that's a good call. I'll think about trying more action-driven copy here.

    #2 - That's a really good point! Can't believe I forgot a way to travel to the previous page. This is a definite add.

    #3 - I love the idea of switching the heart to a slightly different icon after they've donated. I'll think on that one a bit.


    ------------------------------
    Chris Frantz
    ------------------------------

    Tech Accelerate


  • 6.  RE: Creating a new way to donate for our nonprofit

    Posted 7 days ago
    Hi Chris,

    I like it. I trialed it after you made the first two changes suggested by Nathan and can really see how those improve my user experience. It was all pretty slow to load/respond in Chrome (okay in Safari) but I'm thinking that is a function of the trial software? I like the 3rd idea from Nathan so do keep thinking on that. What about starting it as a water drop and then turning it into a heart after donating?

    Kai

    ------------------------------
    Kai Williams
    Executive Director
    Eugene, OR
    ------------------------------

    Tech Accelerate


  • 7.  RE: Creating a new way to donate for our nonprofit

    Posted 7 days ago

    Hey Kai,

    Thanks for the response! I'm pretty sure the slowness is just due to the size of some of the images used, I didn't compress anything for the preview. If/when I get a chance to build this it will be much faster!

    I like the idea of switching the icons, I think that might go in the designs!

    I'll keep working on this, open to any other feedback anyone might have 🙂



    ------------------------------
    Chris Frantz
    ------------------------------

    Tech Accelerate


  • 8.  RE: Creating a new way to donate for our nonprofit

    Posted 6 days ago

    Looks pretty cool! As a quick comment, it's not clear to me as a user that the heart icon indicates donation. Maybe I'm missing some context that your audience would already have. But my experience with using other websites is that this type of placement is most often for a live-chat kind of feature, so I'd probably assume that by default.

     

    Possibly there's a way to improve that without complicating the design? For example maybe a hover action for when the user mouses over the icon? Anyways, just a suggestion.

     

    Martin

     

     


    Martin Hansen
    Senior Consultant / R&D Lead
    519.725.7875 x2120 | 888.817.3048


    PeaceWorks™ Technology Solutions
    101 - 554 Parkside Drive,
    Waterloo ON  N2L 5Z4
    www.peaceworks.ca

     

    Mission driven technology solutions

    This communication is intended for only the party to whom it is addressed and may contain information that is privileged or confidential. Any other distribution, copying or disclosure is strictly prohibited and is not a waiver of privilege or confidentiality. If you have received this telecommunication in error, please notify the sender immediately by return email and delete this message from your computer.

    Please note: If you do not wish to receive promotional emails from us, please reply to this message indicating your preference and we will refrain from sending further promotional emails.

     




    Tech Accelerate


  • 9.  RE: Creating a new way to donate for our nonprofit

    Posted 6 days ago
    @Martin Hansen stole my comment! 😆

    I similarly wouldn't have guessed it was for donating if I hadn't been told before I looked at it, and it does look like the common live chat UI pattern. I'm reminded of the excellent Nielsen Norman Group article "5 Tips to Get Donations on Nonprofit and Charity Websites". #4 is more or less, "make the button say 'donate'"!

    When it comes to interactions on hover, please make sure that the button is still accessible to keyboard users and anyone with a visual impairment. With hover, you always have to have an alternative for touch devices too.

    Overall, it's a very attractive design, though, and providing a super easy user flow to donate is definitely a positive. (That's point #5 in the article, in fact!) I wonder if what you mocked up might inspire revisions to the existing donation flow if this is further streamlined?
    ​​

    ------------------------------
    Mark Root-Wiley

    MRW Web Design / MRWweb.com / @MRWweb
    Thoughtful WordPress Website for Nonprofits & Mission-Driven Organizations
    Seattle, WA
    ------------------------------

    Tech Accelerate