Today’s usability test is a on a charity website, MSF.org. I can’t remember how I first donated to MSF Switzerland because I now receive letters in the mail, but I’m not sure I’ve done it online. So why not give it a try and check the UX aspect of it. (As usual, this is not a complete UX review, just one user persona with just one task, and performed only on desktop.)
Woman, mid-30s, working;
Has a family and is very empathic to charity causes;
Donated to different charities in the past;
Is a savvy online user and shopper.
My task is to make a one-time donation, the quickest and easiest way possible.
First impression: yes, this is focused on the cause (photography, headline)! I feel like I opened the door to step into their world.
It’s clear that they use brand’s red color for accent and in a consistent way – to the point where it’s used for different action buttons. From Donate, to Accept cookies, and lower down the page also for Learn more etc. This part of UI should be revised because taking action like Donating and Accepting cookies is very different in terms of importance (for the organisation and for the user). Right now all these actions seem equal. As a user with a task to donate, I have to use brain power to filter between these two buttons (let alone if I scroll down and see more red buttons).
I like the headline – talking about healthcare being denied is very on point for MSF, and it’s above the fold.
Since I’m here to donate and I see a clear button on the top right, I clicked that and landed on this page. Love the photography but it’s taking too much space. I don’t see anything unless I start scrolling. And that Accept cookies button is too jarring.
I scrolled down the page and arrived at a question about where I live. I used to work for UNICEF so I know where this is going but as a user without that knowledge, it’s confusing. What does my donation have to do with them asking me this question?
I do like the little blurb about how donations are used and the pie chart on the distribution. I’d suggest turning the red circle into a more positive color (from their brand book). Red says action or danger but I think what they want to communicate here is the positive aspect of the use of funds, not that it’s ‘just’ 82%.
I play along and click on the dropdown menu to see a list of countries. I like that I can type in my country instead of scrolling endlessly (especially useful if I were using my phone for this). I also like that I can immediately choose the French Swiss, and avoid having to change the language from German to French once I land on the next page (because I happen to know where I will land).
The cog wheel turned for 2 seconds and then I was presented with another Donate Now button. To be honest, I’m starting to lose a little patience here. I like that they explain what will happen when I click the Donate Now button but why do I need to click again? This is the second time I had to emotionally and intellectually decide if I really want to donate or not (which is what happens before we click the Donate button). I do click the button!
I know I landed on the MSF Switzerland page because of that small note (which not everyone will read). First impression – yes! I landed where I wanted, after a few hoops, finally.
Page is clean, clear, very focused. The choice between making a one-time or a regular donation is clear. I’ve not seen an amount being underlined before so this doesn’t give me complete confidence of what’s selected. I’ll put in my own amount just to be sure.
Further below I need to choose a payment option. I like the 3 tabs that I can switch between and check what looks most convenient. I pick the last option.
Further down, I need to fill out my details. I’m not sure what’s mandatory vs. optional. My browser fills in the information but I want to change my email address. I deleted my email address but I notice that the tick box is still there (as in, I’ve filled it out correctly). Just a little glitch that should be ironed out.
I’m not sure why there’s a comment box in this section? It seems like it’s just taking extra space.
Oh, there’s more? At this point (4th section on the page), I’m getting a little tired of filling things out. Is my address really necessary? Is this optional? I can’t tell. In any case I would merge these field with the 3rd section above. And it would look like 3 steps instead of 4.
I tried submitting my data as it was but I had to go back to add my email address back in (makes sense) and my postal code (but not house number). This cog wheel was turning for a little while, which I understand happens when a payment is being processed but I would suggest putting a note like “Thank you for your patience while your donation is being processed” or something to that effect.
Thank you page
I like the success (tick) icon and a note with Thank you for your donation. I’d put that text in the headline though, because the headline still says ‘Make a donation’ (‘Making a donation’, if I translate directly).
I’m not sure how I feel about the “Make another donation” button underneath. I suppose they’ve tested and realized that users do this rather than something else? Something like this could be tested – asking for a non-financial action (like sharing on social media), or up-selling to a monthly donation. But I doubt that taking the exact same action as I just completed is the best ask.
I scrolled on the page to reach the confidence-building symbols. On the MSF homepage it was written that 82% of donations go to the aid programs, not 92%. Hm?
I also received an email confirmation with further details on how to make the bank transfer. Simple text email, nothing flashy. I find it a little dry, no photos, no formatting, nothing that would round up the experience nicely.
After the donation I went back on the MSF international donation page and I noticed that there was no more Donate button. My country was still selected but no way to get back to the donation form. I would have to click on the top right Donate button again, re-load this page, re-select the country and click again on the button that seems to have disappeared. A glitch?
It’s a little tricky for me to be brutally honest about the donation experience, simply because the biggest hiccup was the transition between clicking Donate to actually landing on a donation page. I know exactly what the reasons behind this are, as I myself had set that up for UNICEF international. So I understand the organization’s perspective. But here, as a user who doesn’t have this insight (nor do they care!) the transition is a bit rough. I would bet this is the point with the biggest drop off in the user journey.
The other thing I noticed was that on every step of the journey there was less and less use of photography, which was quite engaging upon landing on the homepage. Yes, the donation form should be clean but after that the volume of imagery should go back up.
I do like MSF’s branding, and the use of black and red for creating urgency. I can also tell, without testing, that the website is fully responsive so the user experience is adapted based on the device used. Having a responsive website today is a must but still not all big organizations have it, so well done.