What if the foundation for charitable giving didn't have to be a profound sense of sadness or an anxious appeal for help? What if it could be joy?

Read

Introduction

Wahoo is an award-winning new gifting, celebration and fundraising platform for WaterAid.

WaterAid transforms lives by providing access to clean, safe water and sanitation. They work across all aspects of social improvement, working with local partners to deliver services, influencing decision-makers to make change happen, and generating incredible support across the world.

Like many UK charities, WaterAid has experienced a decline in virtual giving in recent years. In response, WaterAid felt it was time to answer this need for an improved gifting experience in a way that was innovative, unique and engaging.

“By focusing on the simple joy clean safe water brings we aim to bring our supporters and their recipients closer to our issue” — Jeremy Gibson, WaterAid

We set out to enhance WaterAid’s entire online donation presence. We wanted to create something different that would really stand out in the third sector.

Where previously WaterAid had an online shop that allowed users to gift something like a water pump or a toilet seat, Wahoo allows users to gift the story of how someone has had their life changed by clean and safe water. By gifting a Wahoo moment of joy, WaterAid hopes to change your donation into a celebration shared between you, your friends and the person receiving clean water.

Focusing around the key message that just one £15 gift can provide a person with clean water for life, the site aims to convey the joy that this brings by exploring the stories of people who have had their lives changed but also enable users of the site to create their own fundraising or celebratory pages such as pledging your birthday to raise these £15 donations to the cause.

Designing a message

In the design of the site, we used really strong imagery to convey the joy that has been brought to the people in these stories by gaining access to clean water. These big smiles, really bring Wahoo to life, allowing people to share this moment of joy with their loved ones in a truly emotive way.

"The site utilises the fantastic photography provided to us by WaterAid at every possible turn. The impact that clean water can bring comes across really well because of the full screen photography we used where possible to tell these great stories. Each story on the site explains in detail what their lives were like before they were changed by Wahoo and so for these sadder aspects of the stories we used illustrations to convey their emotions or situations at the time." — Colin Grist, Senior Designer, Numiko

The unique nature of each story creates a highly personalised gifting experience. As we launched the site in time for Valentine’s Day, the last story we added to the site was Jhalak and Hira's, a married couple from Nepal. We did this to ensure gifters could find a relevance in their donation by adding a personal message in the context of both the story, and their lives.

Transactional experience

We wanted to ensure that the gifter was able to connect with the experience as much as the recipient; both needed to be able to enjoy a rich and immersive digital experience. To facilitate this, the desktop version of the site splits the screen, allowing for a live preview of the personalised message as  the user types which provides a nice visual element to accompany the form-filling process.

We were acutely aware that an overly long registration process would impact negatively on a person's willingness to continue on their Wahoo journey. Most importantly, we wanted to ensure the registration form provided the lowest possible barrier  to entry by keeping this to one page so that prospective gifters didn't feel they were being asked for too much information upfront.

Aiding the user experience

We included postcode lookup to ensure data capture, and designed a form that provides handy hints and tips such as "if you fill this in you are likely to receive 20% more donations." We kept the form to one page to ensure minimum resistance, and used lots of cues and calls to action to encourage users to personalise their pages as much as possible.

Celebrating with Wahoo

Celebration and fundraising pages are user-owned pages that can be completely personalised to raise money on behalf of Wahoo.

Fundraising pages allow users to setup their own page to raise money for something like a marathon or mountain climb, whereas celebration pages ask users to pledge funds for a specific event. So on your wedding day, instead of asking your guests for gifts, you could ask them to pledge money to your celebration page on Wahoo to help raise money for such a great cause. Other examples are pledging your birthday one year or asking for Christmas donations rather than presents.

Personalise the celebration

Users are able to differentiate and individualise their page by uploading videos, images and update/thank you messages throughout their fundraising campaign. Furthermore, users can personalise the thank you message that is displayed at the end of the gifting process.

"We really wanted to try and make a users' donation page feel personal to them. A lot of charity sites provide a few basic options to personalise pages but nothing on the scale of what we are attempting here. Users can upload their own media including videos and photographs as well as add updates to events to keep the page fresh. At the core of our page design are what we call 'impact moments' which a user can select from as part of their page personalisation - seamless looping video showing the change that donating to Wahoo can make to a person's life." — Colin Grist, Senior Designer, Numiko

All of these touches were designed to make the donations process feel much more personal, rather than simply another generic online transaction. It's equally important for those donating to WaterAid and supporting a fundraiser’s celebration to feel they are connected to the change the charity affects, as well as to their friend or relative’s special day.

“You took a simple moment of joy when somebody gets clean water for the first time and you turned it into something beautiful and powerful. It creates an indelible connection between everybody who experiences it.” — Jeremy Gibson, WaterAid

The psychology of donating

The gifting call to action is a sticking banner that moves as a user scrolls up and down the page. A data visualisation of the fundraising progress provides a constantly moving target that seeks to incentivise and motivate people to donate no matter how close/far from your target a fundraiser is.

This way, it never feels unachievable, and donors are encouraged to give to push the target to the next milestone. For example, the target may be £3,000, but so as to not disappoint with being so far from the final target, the first target might be £20, which feels more achievable and donors are often inclined to give more than they had originally planned to help meet the next target.

Responsive design

To ensure a flexible and future-proofed design, Wahoo was built from the ground up to work seamlessly on mobile platforms using a 'mobile first' methodology. What this means is every element was thought about, designed and built with the smallest screen size in mind first. This kept the team focused on creating a user interface that best helped the user perform tasks across the site rather than getting distracted by the luxuries a large screen can sometimes provide.

Only once we had a solid mobile foundation would we look at additional enhancements for the larger screen by utilising media queries and feature detection.

"Wahoo was probably one of the most challenging, yet enjoyable responsive websites I've built in my career - purely down to the fact that there is at no point a screen size where the user experience is worse than any other. The team were really keen to provide a great site no matter what the device." — Adam Robinson, Senior Developer, Numiko

Animations

We used animations throughout the site to add an element of personality and interactivity. This included adding a simulated illustration of a gift being posted through a letterbox at the end of the gifting process, and other minor details such as the clouds moving at the bottom of each story page where we depict a water tap filling up buckets of water in the village.

Real-time feedback

We wanted to keep the user constantly updated in the stepped process of creating a Wahoo with real-time feedback on their progress through the process. Features employed were:

  • Client side validation of form elements to provide real-time validation rather than POST based.
  • CSS animation based on viewport status- enabling us to trigger animations based on the users actions.
  • HTML 5 Image upload for avatars
  • Real-time thumb-nailing of any supporting YouTube/Vimeo url added to support a Wahoo event.
  • Looping native HTML5 video support
  • Real-time rendered preview of the card that is mailed out as part of a Wahoo gift.
  • The front end application was supported by Symphony based PHP application, integrating with WaterAid’s donation management system and payment gateway.

Summary

This new way to involve audiences and build support is quickly being recognised as the future of charitable fundraising. Its power lies in providing social proof of the impact of donations by giving the gift of a story that has really happened; of a life that has really been saved, and of the impact such a gift has made.

The effectiveness of Wahoo's messaging and approach has been recognised by the UXUK Awards who named the site winner of their not-for-profit category 2014.

"The combination of up-to-date design and interactive elements stimulate users to explore and navigate the website. Users can donate in different ways and even make donations to specific stories, which adds to the personal experience” —UXUK Awards Judge Cath Baillie (Senior Customer and Experience Delivery Manager at EE)

The judges praised our thoroughly documented UX process which has resulted in persuasive design, a different take on donations and a very simple transactional process. The winner of this prize is a site which is truly user-centred in nature and which leaves audiences empowered to help and inspired to do so, which is exactly what we set out to achieve.