Websites that are ahead of the game always provide smooth user experience.
Even more so when the website provides essential, life-saving services.
On this episode of The Research Lab, Emma was joined by Luka Nikolic, CRO Specialist at Avast.
Together, they conducted a live heuristic review of the Samaritans website, a UK charity that provides mental health support.
Step by step, they explained why:
- The basics—like contact information—must be nailed first
- The relevance and context of images should be established
- The donation journey must be smooth for companies that rely on financial support
Samaritans doesn’t just provide emotional support for people struggling with emotional distress and thoughts of suicide. They also collect money from donors and accept help from volunteers. This means that from a website perspective, they speak to three key audiences.
Read on to hear how they applied Speero’s UX heuristic principles to each section of the website, and identified concrete areas for improvement.
The Brilliant Basics
When conducting a heuristic review, start with the basics. Begin by fixing the most critical or “broken” elements, and go from there. Here are the opportunities for “Brillant Basic” updates that Emma and Luka identified.
Optimize for mobile
“I’d say the first probably thing for them to do would be to make the site responsive. And this especially pertains to the mobile version of the website. When you open the mobile site, there's a lot of arguably unnecessary space taking up valuable real estate. For instance, the hero image is not necessarily helpful or useful. And it's definitely distracting in terms of it takes away the attention from the main element on the page—on the entire site, probably—which is the phone number,” said Luka.
A website like Samaritans is serving individuals with urgent needs. Someone coming to the site in need of aid is probably hoping to do one thing immediately: get on the phone. Luka likened the current organization of elements as the equivalent of not having the website call to action visible above the fold.
Implement click to call
On that same note, Emma realized that on the mobile site, the phone number appears to be clickable, but isn’t.
“Obviously if you're on mobile, when you want to click on the phone number you expect to click to call. But actually it takes you through to this next page, which is about contact. And then the phone number is no longer visible until you scroll down,” said Emma.
In an emergency situation, users will want to get in contact as quickly as possible. When mobile formatting doesn’t line up with industry standards, it can be confusing and potentially distressing.
On the desktop version, the phone number is styled like a button, which is also jarring because it looks clickable, but isn’t.
Give the phone number more prominence
The best approach is one of consistency across all pages and versions of your website. One way this could be accomplished is by placing the phone number in the header.
“I was quite surprised to not see the phone number actually in the header,” Emma said. “Quite often, on websites in general, you'll have a phone number in the header and then it does have that consistent place. Then you don't need to worry so much about styling it consistently throughout different pages, because it's ultimately one element that’s always there.”
While headlines are important, the first priority should be to serve your core audience.
“It would be worth testing inverting the information hierarchy such that the phone number gets much more visual prominence. Obviously, headlines are important. But when you're dealing with such issues which we have to take into account here, you really need to make sure that you're serving your primary audience,” said Luka.
Relevance & Context
After tackling the basics, Emma and Luka moved on to issues of relevance and context throughout the site, particularly as it pertained to imagery.
Use diverse photography
“For me, one of the things that stood out as a female when I arrived on this page was that there’s two pictures of men, and it specifically calls out ‘you can help Samaritans reach more men who are struggling.’ I guess for me, I felt like if I was coming here in a state of distress and I needed some support, I maybe would feel, but this wasn't the right place for me,” said Emma.
It turns out that there was a purpose in Samaritans’ feature of men, as the site mentions elsewhere that men in the UK are at a much higher risk of committing suicide than women. But that doesn’t mean you should avoid giving proper context.
“From that standpoint, of course, it makes more sense maybe to address it the way they do. They could definitely add information via tool tips or asterisks or something that can kind of explain earlier on the page, without having to scroll down to see why they're like talking about men more than women,” said Luka.
Lead with statistics
A tool tip would do the trick for adding context, but so could a more informative headline that included the relevant suicide statistics.
Emma said that in general, statistics are very compelling and should be used when available.
“An additional sentence in that headline or maybe actually in the subheading would help address why that is. I was also having to look around at some other charity websites just for some inspiration, and I came across an example of WaterAid. Obviously, a completely different situation, but I liked the fact that they led with some stats,” said Emma.
Samaritans could easily lead with more states that state how many men are at risk in order to help validate the focus of their content.
Give context for image selections
It can also be helpful to give an even deeper level of context to make the imagery more relevant.
“On the point of imagery, I was kind of questioning well, who are these people? I think it's a really easy opportunity to put a name and an age and a location. And like he's one of our volunteers maybe, or maybe he's somebody that was helped by the Samaritans. Although there are quite a lot of pictures of people, the site felt a little bit faceless because I didn't know who any of them were,” Emma said.
Luka agreed that showcasing real people could be of great value to an organization like the Samaritans.
“They don't really have nearly enough pictures of and quotes from their team members, their volunteers, the people in the organization. You feel as if you're looking at a bunch of stock photos, and that might not be the case. If they actually featured their team, you wouldn't feel that the website is a barrier. You would feel as if you're already in touch with them,” Luka said.
Donation Journey
The final area to undergo heuristic review was the donation journey, where Emma and Luke focused on the experience of donors, specifically.
Improve the donation slider & copy
The first area for improvement identified with the donation slider, a feature that allows donors to see how far their donation goes as they increase the amount of their gift.
“I think from a UX standpoint and also a copywriting standpoint it could be improved in a couple of ways. For one, many people might not even consider donating more than the minimum amount. You only get the information for what donating 10-20 pounds does for Samaritans once you change the slider to that amount. But if you don't change the slider, which many people might not bother to, they will never know how much more they can help if they donate just five pounds more,” Luka said.
The layout of the slider could be changed to make that information more obvious.
Motivate visitors to donate
Donors should just know how to donate, they should also have a compelling reason why. Currently, the Samaritans donation page could provide more of an emotional appeal.
“I just felt this page was very functional. There are all the form fields that are necessary. It does its job. But something that we say in terms of UX principles is yes, users need to be able to physically fill in the form. Fields need to be clearly labeled, you want error messaging that's clear for users. But ultimately after it's functional, users need to actually be motivated to do the thing. And I think at this point it really lucks any of that: you’re two steps away from helping save a life, or some of those kinds of pulling at the heartstrings a little bit,” said Emma.
Keeping donors focused on the reason they’re on the page is an important priority at this stage in the donor journey.
Provide social proof
Finally, Luka recommended incorporating social proof to make the donation request even more powerful. Similar to contextualizing the images on the site, social proof on the donor page can help humanize the Samaritans’ mission.
“With this kind of service, if I can call it that, it's tremendously important to keep the context in mind at all times, because it's not your typical checkout. It's not your typical e-commerce site. We're dealing with very, very sensitive issues here. And I think the more humane and reaffirming you can make your entire funnel, including this donation step, the better,” said Luka.
Using social proof like volunteer quotes on the donation page might help validate donor decisions and help push people in the right direction.
Key Takeaways
- Optimize for mobile: don’t waste real estate, keep pages focused on key content and ensure features such as click to call are implemented effectively.
- Ensure key elements are given the appropriate prominence throughout,e.g.the phone number.
- Use content and messaging to motivate users: more diverse imagery, social proof, statistics, motivational messaging (especially around forms).
.svg)
