UX Review: Save The Children Website
The first of 3 heuristic analysis I’m doing in the websites of charities related with the sponsoring of children as part of a personal project for a Charity in Uganda.
For this analysis, I have used Jakob Nielsen 10 heuristics.
This doesn’t pretend to be an exhaustive list of the site issues, it just highlights the most relevant ones and is part of a full discovery stage for the design of Goodlife’s Community Project website, in Paula Scher words:
“It’s through mistakes that you actually can grow. You have to get bad in order to get good.”
How to improve the Homepage?
Heuristic used: Aesthetic and minimalist design
There are too many elements competing for the user’s attention making hard to identify the primary action (I’m gonna guess making a donation…)
Recommendation: I would imagine that the primary goal is getting donations, 2nd capture users data but I don’t think this is the place for the news. I would validate that hypothesis using analytics and A/B testing and update the design accordingly
Heuristic used: Aesthetic and minimalist design
That’s just noise, distracting the user from the primary actions on the page:
- Donating
- Enrolling on the newsletter
Recommendation: I would recommend relegating this to a less relevant position as based on my research for other services users nowadays receive the news via email or RSS, they rarely go to the website itself. I would try to use the articles to attract traffic to the site using other channels such as newsletters, social media ads and posts, etc….
Heuristic used: Visibility of system status
Having 2 actions as part of the title is confusing, what am I doing as a user? Maybe I only want to do one of the things? How do I do it? Should I leave this screen and check somewhere else if I can just do one of the tasks?
Recommendation: Simplify the subject, choose one or create a new one, something like: “Receive our latest news in your email” may work.
Heuristic used: Aesthetic and minimalist design
This form is too complicated for what it needs to do (I would say that the objective is to capture emails to send communications).
I don’t know where to look at. Having 2 columns makes the user jump from one to another.
Recommendation: Make it a one column form, it makes it easier to scan and faster to fill. As the extra mile, maybe play with infield top aligned labels? A/B test is a must to find the right approach.
Heuristic used: Aesthetic and minimalist design
What’s the goal of this form? If the idea is to capture contact details for the newsletter as I suppose, why do they need the name and surname? Can’t it be reduced upfront and maybe ask for the extra information later?
Recommendation: Remove the name fields and just leave the email one, the other information can be collected when the user performs other tasks such as donating or becoming a sponsor.
Heuristic used: Visibility of system status
Label too generic, it’s not clear what will happen next.
Recommendation: Use a different and more action-specific copy. Something like: “Sign up” or “Enroll newsletter”
Heuristic used: Consistency and standards
Why does this element have the same importance as the ‘create account’? Is it also clickable? It feels like it’s a title, but the location is weird…
Recommendation: Make it a title element and simplify the layout of the rest of the boxes (Maybe a 2 column??) use the analytics and A/B testing to help with that
Heuristic used: Visibility of system status
The elements at the top of the top rectangle don’t look clickable, they look more like a disabled element it’s not until you hover them that it’s clear that they are interactive
Recommendation: Make the clickable elements more obvious. Maybe convert them to tabs? Or use a red outline to match with the rest of the primary buttons on the site? A/B testing should help to find the right solution.
Heuristic used: Consistency and standards
Wait, What?! How can a link in the text be the main action?? After covering the screen with this component, the primary call to action is a link lost in the content
Recommendation: Add a button, links in a block of text should take the user to a section related to the content of the link, but in this case, it’s a 2 step navigation, first see the summary and then access to the full article.
Heuristic used: Match between system and the real world
Because of all the bad press honesty is something that charities need to prove. Shouldn’t be this data more important and place in a more visible area of the page?
Recommendation: Maybe move it to the top area along with the donation and enrollment (A/B test is recommended to see if it increases traffic to the other 2 journeys)
Heuristic used: Recognition rather than recall
Is a reference to a footnote at the end of the page??? Yes, it is!!, should I remind that interaction is one of the cores of this technology?
Recommendation: Add a recognisable element (How about the info icon?)that when an action is taken (Maybe click/hovering?) displays the information.
How to improve the donation form?
Heuristic used: Recognition rather than recall
By the time the users reach this page they are focused on the task at hand. This text is gonna be skipped most of the time. Based on previous research for similar scenarios, most of the users are blind to blocks of writing outside the interactive elements.
Recommendation: Shorten and add it to the interactive element “MONTHLY” of the first step, that only should drastically increase the number of users reading it.
Heuristic used: Consistency and standards
If I came from the donation button but here is called ‘GIFT’?? Consistency in the language is essential as using different terms with the same meaning can generate confusion and make the user think they are in the wrong place (“But I wanted to make a donation, why am I in the gifts form? I don’t want to make a gift to anyone…”)
Recommendation: Choose one or the other but keep it consistent, probably “Donation” is more concise as “Gift” is a bit generic and could easily be misinterpreted.
Heuristic used: Aesthetic and minimalist design
Why 2 columns??, a lot of research has proved that 1 column forms are more comfortable to scan and faster to fill, that this kind of layout is only recommended if there is a need of the users reading informational text as the scanning is harder and slower.
Recommendation: Make it 1 column. Test it using A/B testing and analytics such as completion rate and completion time.
Heuristic used: Consistency and standards
These elements look like buttons when their real role is the radios, that could lead to confusion mainly for users with low technical skills generating questions like: “If I click here will I be sent somewhere else? But I want to complete the donation!! What should I do?”
Recommendation: “If it’s not broken, don’t fix it”. Make it radio buttons. Radio buttons are a settled standard, and as such we only should get away from it when there is substantial research supporting the decision.
Heuristic used: Aesthetic and minimalist design
Why four columns? As explained before this kind of pattern makes it harder to scan and fill the form.
Why so many options? Research has proved that the more options we offer, the harder it is for the users to take a decision.
Recommendation: Use analytics to select the identify most common selections and maybe highlight the most popular option. Create a 1 column design. A/B testing and analytics should be in the core of the redesign process.
Heuristic Used: Consistency and standards
As in the previous form step, these elements look like buttons when their real role is the radios, that could lead to confusion mainly for users with low technical skills.
Recommendation: Make them radio buttons. Radio buttons are a settled standard and should be used unless there is a good reason not to do it.
Heuristic used: Recognition rather than recall
The usage of “Required field” is perceived negatively, as if the user was ordered to do something, as Jordane Sanson clearly explains:
This is a case of psychology quite simple, indicate the positive is better because it gives a better feeling to users, the decision is made by the user: gives them the power to believe that they have the choice.
Source: https://uxdesign.cc/form-field-required-vs-optional-9b4d7cdbf400
Recommendation: Identify the optional input in the labels instead of the required one. Give the user the “illusion of choice”.
Heuristic used: Consistency and standards
Why is this the only optional field marked as such? As explained before this would be the prefered approach, but it needs to be consistent if not the users will think: “Wait, what? so the other field didn’t have an asterisk, but it didn’t say optional either, maybe it’s mandatory?”
Recommendation: Do the same in the rest of the optional fields, keep consistency to reduce user confusion.
Heuristic used: Match between system and the real world
The whole form feels long and impersonal.
Recommendation: Why not try a “conversational” approach and separate the sections in the steps of the conversation? Making a form feel like a conversation is more about how you write and split the questions. You don’t need to mess up with complex chatbot technologies or anything like that.
Heuristic Used: Match between system and the real world
These address inputs are too focused on the US. I need to navigate all the way to the end of the “STATE/PROVINCE” dropdown to know what to do if I’m not from the US. How is the user supposed to know it? What if they don’t expand the dropdown? What if even after expanding it they miss the option?
Recommendation: Make more visible the option for non-us donors. Maybe a checkbox saying: “I live outside the United States”, once the checkbox is selected the input fields should be disabled
Heuristic Used: Error prevention
The “ZIP/POSTAL CODE” only accepts numbers. Postcodes with letters like the UK don’t work.
Recommendation: Design for internationalisation, this is a critical problem, as a UK resident I can move forward with my donation, I’m completely blocked.
Heuristic used: Error prevention
Clearly, a US format number and the form doesn’t ask for prefixes? How are they gonna contact me? How will they know? Those are the questions that users have at this point.
Recommendation: Design for internationalisation. Donors can come from anywhere.
The “Sponsor a Child” Journey and how to make it better
Heuristic used: Consistency and standards
The sponsor a child sub-menu is confusing.
The first two options “Sponsor a Child Around the World” and “Sponsor a Child in the U.S.” seem to send the user to the same page as the parent item (the U.S. one only updates the location dropdown and filters the results).
Recommendation: If there is a marketing/SEO reason for this branching (Maybe helps users accomplish specific tasks), use different images and titles in the landing pages, so the change is evident.
If there is no marketing/SEO reason, group them in one option to avoid confusion.
Why is there a Manage my account option? Is it different from the one in the top-right? Maybe it’s only for sponsor accounts? The users may be thinking that right now
Recommendation: If the Account is different be clear, maybe change the one of the sub-menu to “Manage Sponsorship”.
Ideally, there should only be one account where the users can manage the sponsorships among other things unless there are unavoidable technical constraints. Always avoid duplication as it may lead to confusion, use analytics and A/B testing to validate new solutions, maybe some usability testing will be needed to get a deeper understanding.
Heuristic used: Consistency and standards
These two buttons behaviour is different. The primary action ‘SPONSOR NOW’ just scrolls me down to the row below and the learn more opens another page.
Recommendation: Remove the whole banner and move the search bar up. I can’t think about any good reason to keep this Hero. It just adds complexity and noise.
Heuristic used: Match between system and the real world
This feels like a search tool (The “Search” button may be a big reason…) when in reality it’s only a filter.
Also, all the fields are optional, but I didn’t know until I played with them my first reaction was filling the whole form. As humans, we have a natural need to complete things, and in this case, this need pushes hard!
Recommendation: If it’s a filter make it look like a filter and behave like a filter.
Change the button text to something like: “Update results” or just “Filter results”.
Changing the location to a less relevant space (maybe to the right??) so the photos of the children can be seen, may also help to reduce the perception of it as a search bar.
Heuristic used: Aesthetic and minimalist design
Why is this image at the top? Is it the child school? Is it an archive image? The top picture is stealing the attention of the information about the child, probably even more on the mobile version
Recommendation: Move the information about the child to this area, define the goals of this page clearly and prioritise the content according to the goals. Test different layouts as this is probably an essential step in the journey.
Heuristic used: Match between system and the real world
This whole page is too e-commerce style feels dehumanising as if I was buying a stolen baby.
We are dealing with children here it shouldn’t feel as if I am on the Amazon or Wallmart websites…
Having a shopping basket makes is quite crude when dealing with kids
Recommendation: Create different designs trying to get away from the e-commerce metaphor of the shopping cart. Organising a co-design workshop with users may be a good start point.
The title is brutally standard from a shopping website and can hurt some sensibilities (It hurts mine at least…)
Recommendation: Test different copy options and get away from the e-commerce language, maybe make it part of the codesign workshop.
In general, this step needs to be researched and designed from scratch looking for a more humane solution, trying to move away from the e-commerce language.
Heuristic used: Match between system and the real world
The form feels too long and the language distant, same as most of the questionaires in this website.
Recommendation: I would try the same suggestion as in the donation form try a simulated conversational interface (I would be tempted to use the voice of the child), split into separated steps. No need to get lost in chatbot services this can be solved changing the tone of the questions and with a well planned conditional navigation.
Heuristic used: Aesthetic and minimalist design
Sooooo much white!!!
Recommendation: Maybe a 2 columns layout is not the best approach for this page…
Heuristic used: Visibility of system status
What’s happening here? When I click on the red button, it says “selected”… What?? Do I need to do something? Maybe I can select several kids? Maybe compare them in the next screen? Wow!! Perhaps I can even find my doppelganger!!!
Recommendation: Need to be careful with the update messages, a wrong status message can be worse than no message at all.
Creating an account: Another failed form design
Heuristic used: Aesthetic and minimalist design
The user just wants to create a basic account, why do we need all this information?
Recommendation: Unless there is a strong reason, you can collect the extra information in future steps, such as the first donation, etc… Ask only for the vital information; most users will run away from this form.
Heuristic used: Flexibility and efficiency of use
These are a useful way to create an account fast. Why are they relegated to the bottom?? I would be pissed off if I fill the whole form an then I see I could have used my Facebook account to do the same in a couple of clicks…
Recommendation: Move it to the top of the form, so the users see these options before they start filling the form
Heuristic used: Consistency and standards
Why? Why the modal window? I already selected the Facebook icon, I expect it to take me there, not ask me to choose the same thing again, I’m not sure to trust you with my data…
Recommendation: The “Sign in using one of your preferred sites” link is a duplication of the text above and as such may be removed. As a user I expect the round social media buttons to start the account creation taking me to the specific social site.
Conclusion
Visibility of system status
There is a lack of consistency on the updates and even wrong status updates that will confuse the users.
Match between system and the real world
Sometimes the language is distant and doesn’t match with the humanity of the action taking place. This completely clear during the checkout process of the “sponsor a child” flow.
Consistency and standards
There is no consistency at all, I have counted at least 3 different button designs that are used randomly through the site, a more in-depth analysis of the site focusing on that will be needed.
Error prevention
There are critical issues in this area that, as a matter of fact, block non-US residents form donating or sponsoring a child, design for internationalisation should be in the core of a global organisation.
Recognition rather than recall
There are some non-critical issues on this subject.
Flexibility and efficiency of use
Long forms, lack of clear prioritisation and other challenges need to be considered.
Aesthetic and minimalist design
The whole site lacks it, and in some cases, it could be critical a thorough review of the design of the screens and the flows may be needed.
About the “Help users recognise, diagnose, and recover from errors” and “Help and documentation” rules I have skipped them in this review as it’s not a need for the discovery stage right now. I may expand this article in the future with them
