Water & Light

Discover

Water & Light is a non-profit funded mostly by family and friends of the founders. News of the work they are doing spreads mostly by word of mouth from those friends and partners. This means that the founder I worked with has a personal connection to most of the donor base, usually responds to new donors with a personal thank you note, and therefore knows the typical users of the website fairly well. I left our opening dialog with a good understanding of the users and the business goals.

Business Goals

We established several goals to guide the website refresh:

• Present a professional and engaging story of the impact of the Water & Light.

• Increase usability by making information easy to find and well organized, so that new donors can quickly find what they need to feel confident that they are contributing to an organization that they believe in.

• Increase financial contributions by providing a seamless donation experience with clear calls to action, leaving users feeling excited that they gave and carrying that good feeling throughout their day.

Users

The most frequent contributors to Water & Light are typically people with a middle class or higher income level who have some extra funds that they would like to give away to a good cause. With so many commendable organizations to support, they may need confirmation that this is the right organization to give to. They are busy people (with work and often children to care for) who are used to navigating the web and need to be able to find information and take action quickly.

A Quick Iteration

With their annual child sponsorship drive coming quickly, the stakeholder’s timeline didn’t match up with my availability for a complete redesign of the website. We walked through the site as it was, and I highlighted the most glaring usability issues that I saw, giving suggestions on how to fix them. Calls to action were often not well placed or descriptive of where they would take the user.

With some problems defined and new ideas on the table, the stakeholder went forward with a new iteration of the site, focusing on redesigning the home page into brief snippets of their work and setting up clearer calls to action. Below is an example of one change I pushed for.

In an effort to ease people in, the previous version of the site had the language, "Take Action," on a nav button that leads to the donation page. I suggested we simply use the word, "Donate," instead.

Early Results

With time in short supply, the stakeholder was happy to let the sponsorship drive timeframe be the testing phase for this first iteration. Afterward, we compared the year-over-year analytics for the month of the drive. Out of the site visitors who had made it to the donation page, we saw a 19% lift in conversion!

Early Feedback

One donor emailed Water & Light to say that while this was one of the best small non-profit sites they had visited, they had had a little trouble making their donation. We had set up the CRM platform to populate with the specific monthly donation amount to sponsor a student, thinking that we were saving users a couple of steps. This particular donor wanted to sponsor two students and had had no way to change the amount.

The stakeholder and I had a thorough discussion about ways we could possibly fix this. I thought surely we could just add a simple stepper, but the CRM platform wasn’t as flexible as I had hoped. The stakeholder assumed these instances were rare (and that motivated donors would reach out to him in situations like this, as this one had). So against my advice, we moved on without a solution.

Define

Heuristic Analysis

Later when our timelines were more aligned, I continued the work with a more thorough definition of the problem. I opened up a Google Sheet, and dove into a page by page heuristic analysis of the website. Some of the suggestions I had made previously had been implemented, but I still found plenty of space to empathize with users.

The Problem

The site had a thorough lack of hierarchy. Headings were often being used for emphasis instead of for organizing information. Levels in the hierarchy were often skipped right over, and there wasn't any consistency with alignment. Sometimes a good block of text content would just be a in place that didn't quite make sense for the page. In short, the site needed an information architecture overhaul. Here are some examples of the original site.

Ideate & Iterate

After discussing my findings with the stakeholder, I went to work mocking up pages in Squarespace (where the site is hosted). The stakeholder got to work updating the photos.

Calls to Action

The original site had at least three differently styled buttons, but there didn’t seem to be any rhyme or reason for it. Seeking to reduce the cognitive load for users, I suggested we move to one style of button in a more accessible color.

Headings and Text Styling

I broke long sections of content into digestible chunks, rearranged blocks of text, added headings, edited copy, wrote new copy where necessary. I resized images for continuity and page flow, added white space to let the site breathe, and reduced seven typefaces down to three to speed up load time. In the process I became very familiar with which font styles were buried deeper in the Squarespace platform and which font styles might be easy for the Water & Light team to inadvertently adjust. For those, I created a style guide.

Test

True usability testing is still something I hope to do. There are more changes coming to the website, and I plan to observe people using it before the next sponsorship drive. In the absence of usability testing, I was curious to see what the analytics would show in the year-to-date period since we had begun making changes.

The numbers are not exact because the website traffic is not so large as to cancel out our own functional testing, but my best guess is that they are within a 10% margin of error. I don’t claim to be a data analyst, but this is what I’m seeing.

Donations

The 47% increase in donations should not be attributed to the website changes alone—there are several factors that could have been at play (extra funds from staying at home during the pandemic, another year of word-of-mouth advertising, etc.). Still when I asked the stakeholder to put that number in perspective for me he said, “This is our only storefront. In a year where we couldn't go anywhere [travel and hold events for fundraising during COVID-19] it was more important than ever for people to be able to find out about us and to find the donate button…The website gave the people talking us up through word of mouth a way to share a snapshot of what we do where people could read and make a decision.”

Time on Page

This is a key indicator that the content is more engaging, well-organized, and digestible, although the copy didn’t change a whole lot. The time users spent on the main content pages was up substantially:

• Time on the Home Page was up by 54 seconds

• Time on the Education Page was up by 44 seconds

• Time on the Turtle Rescue Page was up by 62 seconds

Conversion

This is the number I feel most confident about hanging my hat on. Over the nine-month period, conversion on the donation page had held at 19%. Time on the Donate Page was also down 35 seconds, while the content had barely changed! I take this to mean that the information site-wide was more clear, easy-to-find, and that users were more likely to navigate to the donation page on purpose, with intent to donate.

Next Steps

More Updates

We started with the most important, highly-trafficked pages. Most visitors to the site won’t see the rest of the pages, but it is important to me to give them all a consistent look and feel. We have plans in the coming months to continue bringing the rest of the site up to the new standards and styling.

Usability Testing

I hope to do some usability testing, even if that means recruiting friends and paying them in baked goods. I know that we have improved the user experience of the site, but there are some things I still have questions about. Observing people using the site will be the only way to get to the bottom of these questions. My hope is that I can facilitate usability testing and iterate again before the next sponsorship drive.

Retrospective

My work with Water & Light is intermittent and ongoing as the needs of the website change and expand, so this doesn't make the tidiest case study. Still, as a UX evangelist, I love seeing the work reflected in the numbers and sharing the results. I'll update this case study as I have more results and learnings to share.

What Has Gone Well so Far?

• The receptivity from the stakeholder has been great! Where occasionally he pushed back on my suggestions, he also appreciated the data-informed approach.

• Since the site is hosted on Squarespace, it made it quick and easy for me to get an idea of the constraints, show a mock-up, and implement the changes myself.

• This project was an excellent opportunity to put standard heuristics in place and dig into the analytics to uncover the results.

What would you do differently?

• Skipping or postponing usability testing was killing me the whole time. While I’m sure we made positive changes to the site, I want to know what we missed!

• It would have been nice to rework the site behind the scenes and then make the changes live all at once. The stakeholder wasn’t concerned about that and was happy to work in bite sized chunks, publishing a page at a time.