How to redesign the donor pledge flow

We decided in April 2016 that the donor pledge flow was going to be an area of focus for Hubbub for the next six months. This is because it is important to us as a business, and our clients, that users have a good experience here. This post shows how we redesigned the pledge flow focusing on users.

Donor Personas

At each stage of redesigning the pledge flow, we considered our donor personas and used them to help make decisions between different ways of doing things. They really helped us focus on designing around the user.

We also used these to map the journey through our pledge flow that we expected users to take.

We verified this using the data and user lab tests mentioned below, and came out with the following user journey:

Analysing the data

The first thing step was to take an in depth look at our website analytics. We set up goals to measure how many people donated.  We then measured this for a month to understand:

• How many people started on the pledge flow (by clicking ‘sponsor’)
• How many people completed the pledge flow
• How many people were dropping off the pledge flow before making their pledge  
• Where people were dropping off

We found that there was definitely room for improvement, and noted where people were dropping off.

This quantitative analysis was useful in telling us where there might be problems, but we still needed to know what the problems were.

Getting out in the field

We got some ‘typical’ users in and asked them to complete our pledge flow whilst we watched. This was to see if we could find out the ‘What’ mentioned above.  

We found out some problems with the flow that could be tripping users up:

• Some users had issues with signing up
• Some users had issues with the accordions
• They clicked on the big ‘sponsor’ button, and then weren’t sure how to donate as they couldn’t see anywhere to enter the amount.

A data-driven redesign

We used the above gathered data to redesign the pledge flow.  We kept as much as possible exactly the same, so that when it comes to measuring how our redesign has worked we will be able to measure precisely what differences the changes have made.

We firstly came up with a few different ways of meeting the user needs that we had identified above, and then created very basic ‘wireframes’ (drawings!) of these, and asked people to tell us how they thought they might be used.  This was to check that we were correct in thinking that these designs would be more intuitive.

The big changes in our pledge flow were as follows:

• Users had issues with signing up
• Removed the sign up
• Users had issues with the accordions
• So we took them out
• They clicked on the big ‘sponsor’ button, and then weren’t sure how to donate
• So we added ‘select this reward buttons’

Our user journey now looks a bit like this!

But we won’t stop there!

The new pledge flow is live for projects on hubbub.org. We will continue to test and adjust it to make sure that it really works for the users, before rolling out to our clients’ platforms. A few of the ways we will do this are:

• Collect data from the new flow, and compare it to previously collected data on our old pledge flow.
• Do more field research with users, watching them pledge money and noting any issues they have
• Continue to listen to the valuable feedback we receive

And then, we iterate.

If we find any new problems, we will fix them as they come up.

What we’re expecting

We expect we will see about a 13% increase in those who start to sponsor completing the flow. This is based on the number of users who encountered these problems in testing. We will let you know the results!