Presidential Donation Design Race
Barack Obama’s 2012 website campaign became very well known for it’s optimization strategy. In one of many examples, his digital team was able to increase donations by 5% by breaking the donation form from one long form to a four step process. As explained by Kyle Rush, deputy director of front-end web development for his campaign (Rush is now Director of Frontend Engineering and Optimization for Hillary’s campaign):
Following Obama’s lead, most candidates are doing a three to four step process in the donation form. But there are variations on the sequence of field groups, default amount donation options, transition between steps and the overall look of the donation page.
CANDIDATES
I analyzed the four top contenders for both parties according to the aggregated polls of RealClearPolitics (Biden, shown third in the Democratic race, was left out because he has not announced). The list is the following, in the order they appear in the polls:
Democratic candidates: Hillary Clinton, Bernie Sanders, Jim Webb and Martin O’Malley.
Republicans: Donald Trump, Jeb Bush, Scott Walker and Mike Huckabee.
WHAT WE ARE LOOKING AT
How the call to action to donate is displayed on the homepage, the design and error messages of the donation form, the copy and imagery in the form and the donation page.
Hillary Clinton (D)
Homepage Call to Action
Like all candidates except Trump, the main call to action in the homepage is pretty clear: give us your email to receive updates about the campaign. Once you join Hillary’s mailing list and click “Join Us”, the site takes you straight to the donation page (a somewhat obvious decision: voters who are interested in Hillary are more likely to donate; other candidates follow the same idea).
But the donation form you arrive at after joining the mailing list is slightly different than if you were to click the “Donate Now” button in the homepage, located in the main navigation bar — at the bottom of the header image, in opposition to most candidates that have the main navigation bar at the top.
Donation Form
The donation form is a three-step process (Obama’s was four) composed only by numbers — there is no copy saying what field group you are in. If you click directly in “Donate Now” at the homepage, the donation form won’t let you skip between steps (1, 2 or 3) but it will show you what part of the process you are at. The numbers have a white background to start, and they become blue once the info of that group is filled.
If you arrive at the donation form after joining the mailing list, the site does let you skip between field groups but it won’t show you if are at step one, two or three — all numbers have a blue background, no matter if you filled the info out or not.
Hillary’s monthly contribution option is only shown in the last step — most candidates show the option in the first step, when you choose the amount you are going to donate. If you choose to make a recurring payment, you accept to pay that same amount every month for the duration of the campaign (there’s no option to choose how many months either).
Hillary's first amount donation option starts at $3, the lowest among all candidates.
The form has an animation moving the fields from right to left once you click to go to the next field group. If you come back the animation is reverse (from left to right).
Donald Trump (R)
Homepage Call to Action
Trump’s page has two calls to action to “Donate”. One in the main navigation bar, highlighted by a different background color and typeface, and one in the bottom of the header image — with the same weight as the “Join Us” button that allows voters to receive information about the campaign.
Donation Form
Donations go from $10 to $2.700 (the maximum amount allowed by an individual). You can click through the four step tabs, but if any of them contains an error that tab will get a light red background and underline showing that something is wrong. Also, a new box will show up under the form telling you all the fields that were not correctly filled.
The monthly contribution option is at the Amount tab, but like Hillary, there’s no way to choose the number of months you would like to donate.
The order of the donation process is pretty much the same as Obama’s 2012 website campaign: 1) Amount; 2)Info; 3) Payment; and 4) Confirm (when you also need to fill in Employer’s Name and Occupation).
As explained by Rush:
We considered a number of factors to determine the order of the field groups, but the most persuasive was error rates. (…) By putting the easier field groups first we not only lowered the engagement barrier (all you had to do was click a donation amount button to get started vs. typing your first name), but also to produce a sense of investment before users reached the difficult parts of the form.
Bernie Sanders (D)
Homepage Call to Action
Sander’s opted for a different webpage layout, with the main nav at the left, not top or bottom like other candidates. The “Contribute” button is highlighted with a red background.
Donation Form
Bernie’s donation page has no background image, it’s plain white. It’s a four step process with numbers (1 to 4) and copy (Amount, Payment, Name and Tip). There is an option to contribute montlhy but “No” is chosen by default. The “Yes” has an option to choose how many months you would like to contribute.
The form won’t let you go to the next step unless you correctly filled all the fields in the group you are in. If you try clicking the next tab, the form will highlight in red all the missing/error fields.
There is a pretty visible “secured by ActBlue” banner at the top-right corner reassuring users the transaction is secured by the named company.
The last tab is called “tip”. I’m assuming it’s just reviewing the info and accepting the transaction, but I decided not to bet any money on it.
Animation: once you change field groups the new form fields fade in.
Jeb Bush (R)
Homepage Call to Action
Bush is the only candidate who is not massively using either blue or red, but instead yellow. “Donate” button is highligted in the top-right corner.
Donation Form
Bush is also the only one not breaking the form into smaller steps, opting for one long centralized form. He is also the only one not offering the option to make a monthly contribution. A “Required” or “This field is required” error message shows up at the top of the fields that were not filled correctly.
Jim Webb (D)
Homepage Call to Action
The “Donate” button, highlighted with a red background, is in the same nav as social media links, and not at the main navigation bar. It’s also the smallest donate button among all candidates websites.
Donation Form
Webb’s donation page is the same as Bernie Sander’s, with small differences in copy (“Contribute Now” instead of “Stand with Bernie”) and donation amount options (starting at $25; Bernie starts at $10).
Scott Walker (R)
Homepage Call to Action
The copy for donation is neither “Donate” or “Contribute”, but a more friendly “Chip in”, highlighted by a red background on the top-right corner. Walker’s site uses a Hamburger Menu to show the main nav. Differently from most candidates, his donation form will open in a new browser tab.
Donation Form
Donation form is to the left with a background image of the candidate on the right. Three-step process with numbers and copy (Amount, Info and Submit). Field group background changes to red as you advance. Animation is from bottom to top if you move forward and top to bottom if you go back. You can choose “Donation Frequency” with options of weekly, monthly and quarterly donations.
Martin O’Malley (D)
Homepage Call to Action
The “Donate Now” button is red, in contrast to the blue tone for the rest of the page. Like Hillary, the main navigation is at the bottom of the header image.
Donation Form
O’Malley’s form is slightly on top of his head — all other donation pages with background image have a clear picture of the candidate. The form is a three-step process with copy and numbers (Amount, Details and Payment). A nice little detail is that the “Amount” title changes to the value of the chosen donation. Error messages shows on top of the form and fields become red. There is an option to click “x” in the error message that will take the cursor straight to that field so you can correct it.
Mike Huckabee (R)
Homepage Call to Action
The donation form appears before the homepage, along with other links to "Get the Facts" and "Gov. Huckabee on the issues". There is a top-right button called "Continue to Site" letting visitors go to the homepage.
On the homepage, the donate button is a two-in-one button in red and blue. The copy says “$ Donate” and “Support Mike” with an arrow in between.
Donation Form
A three-step process. The tab background for each field group changes from blue to red (get it?) once you select them. Donation options start at $6 and goes up to $500. You can switch between field groups with no error messages, even if you leave them blank. The button to confirm the donation in the last step changes according to the chosen amount. In the example below, the copy shows “Donate $10”.
Conclusion
Obama's website definitely set a trend here, with most candidates breaking the form into small steps. The donation page for Trump, Hillary and Huckabee have a huge picture of the candidate looking towards the form and Walker is pointing to the form (according to some studies, that's a great way to make the user focus on the what matters in the page).
On the Democratic side, Hillary seems to have the easiest form to fill. Three steps, forms with bigger height and width altough they are all inside the viewport for desktop (no need to scroll to see the whole form) and a good transition between form groups (left-to-right and right-to-left).
On the Republican race, it's a close call between Trump and Walker, both having very straight-forward forms (four and three steps, respectively). Walker's form open's in a new tab without warning, which is a little annoying, so I will put Trump as the winner here.
PS: the websites were analysed on the week of August 10 of 2015.
