Case study

CAF Donate Wizard

Campaign setup wizard for charities

Launched
July 2017

What I did
User research, Sketching, Wireframing,
UI design, Prototyping, Usability testing

Web link
CAF Donate

The story

Our digital fundraising platform, CAF Donate, helps charities reach more people and process their donations quickly without any hassle. Every month charities can have a number of fundraising events and can operate in multiple locations across the country.

The challenge was to design an all new campaign set-up wizard for charities to easily create dedicated donation pages, ready to embed on their websites in just minutes for one-off projects or ongoing campaigns to reach new donors and receive donations online.

Before the re-design, customers heavily relied on our customer services team and a PDF user guide to help them setup their campaign pages and customer feedback told us that initially it was an overwhelming process. Users also couldn't see a preview of their pages until after they published, which was a big frustration when they got to the end and had to correct things.

“Our first priorities were simplification and organisation. We knew that the current campaign setup had a lot of the right pieces, but may not have been organised in the most intuitive way.”

Key UX improvements

  • Users can now change how their fundraising page looks as they go along.
  • Users can have a main campaign and add unlimited additional campaigns – previously they could only have one.
  • They can quickly copy a previous campaign, update it and be ready to receive donations in a fraction of the time.
  • They can upload their charity logo, resizing automatically for mobile phones with minimal fuss.
  • They can instantly preview how their campaign will look across multiple devices.
  • An auto-save feature now included so changes are never lost and can be returned to easily.
  • They can customise their thank you messages, adding a personal touch once a donation has been received.
  • We guide the user through the journey in bite size chunks clearly explaining exactly why we need the information.

Wireframing and prototyping

Working collaboratively with my friends at UX agency Webcredible, we initially sketched out a few ideas before creating a series of medium fidelity wireframes to begin defining specific elements and visual hierarchy on our wizard in order to discuss specifics like layout and content. It also allowed me to present the ideas to the product manager and high-level stakeholders, to quickly iterate further, and before designing the finer details.

Next we constructed a prototype of the wizard in Axure to help add clarity to the concept, and make the wizard steps interactive and functional for sharing across the team. As designers we take in all the feedback and use it to make informed decisions.

Prototyping the template in Axure

Above: Prototyping the template in Axure

An early wireframe of the brand look and feel tab

Above: An early wireframe of the brand look and feel tab

I had to solve a challenge with the charity logo upload. Previously we asked the customers to upload two different logos for desktop and mobile, which wasn't ideal. We did specify the image dimensions, but unsurprisingly feedback told us that it was a big pain point for users as they didn't have the digital skills or software to resize images. The solution I came up with was to just have a single upload field for the logo, but behind the scenes we would code it automatically to resize for desktop and mobile removing this task from the user, saving time and frustration.

Visual design

Then it was time to fire up Sketch and get started on the high fidelity designs and include everything we learned so far.

Donate Wizard in Sketch

Above: My many artboards in Sketch

Donate Wizard

Above: A single upload field for the logo, which automatically resizes for desktop and mobile removing this task from the user, saving time and frustration.

Donate Wizard

Above: The donation options tab; allowing you to choose preset amounts and descriptions of how your donation can help. The preview on the right is dynamic and instantly shows how your page will look before publishing.

Donate Wizard Donate Wizard Donate Home

Above: The new wizard also sits just behind a stunning signed in homepage, recently redesigned for customers to manage their fundraising online

Donation pages

Above: Using our new wizard, customers can easily customise the look and feel of their donation pages matching their charities brand for consistency and familiarity. Following research with donors, we improved the UX of these pages too, designing them responsively across multiple devices, reducing the number of steps and removing questions that weren't 100% necessary.

User testing

We ran three user testing sessions to get valuable feedback on our designs and iterate on it. At CAF we put a lot of value on testing our designs and our assumptions to be sure we’re building the right thing for charities and donors. We created a number of scenarios, and a series of tasks for each scenario to get feedback on functionality and usability of the wizard.

Overall, the feedback we received from testing was great - we were able to get positive feedback and capture potential errors and issues in the design.

Participants found the dynamic preview to be very helpful and they felt it was a lot simpler to use. Image auto-resizing to mobile was important and they liked the tips on the input fields and get that really helped them make the most of their campaigns. Participants reported losing their progress in the past because of the session timeout as they were resizing their logo, talking to a colleague or performing a different task at the time. The auto-save feature we now have was well-received.

An issue we fixed was to do with the publish button being treated as a way to move onto the next step. Participants scrolled down the screen and clicked on that thinking it would move them to the next session. In turn, we then designed a sticky header for the tabs and moved the publish button there so it always remained in the user's view.

Additionally, participants sometimes only wanted to have a set amount. For example, one of the charities organises a fun run where charity amounts are set in whole amounts with no other options. They also wanted the option not to add text in donation options. It was important feedback so we changed both of these to be optional.

Final thoughts

By enhancing the UX significantly, we not only made it much easier for charities to setup and amend their campaigns more efficiently, we effectively reduced the time for customer support saving the company effort, time and money and caused positive word of mouth with recommendations for our product.

Let's start taking your idea to the next level.

Do you have an interesting design challenge for me? Let's design something incredible together.

Copyright © Neil Berry 2017.