Obama's fund-raising website production process

Author: Ruan Yifeng

1.

Kyle Rush is a website engineer.

In June 2011, he joined BarackObama.com to design Obama's official website for the 2012 U.S. presidential election.

(The photo shows the official website of Obama in June 2011)

In addition to publicity, the main purpose of the official website is to raise funds.

The last general election, Obama raised $ 690 million. This is a very large figure. However, as the U.S. economy has been sluggish in the past four years, the general election will need to devote more funds to an estimated one billion U.S. dollars in intra-team funding.

A site that has raised $ 1 billion has never been seen before. Kyle Rush wondered if he could do it, but he knew perfectly well that if he did not raise money, Obama could not win the election.

2.

The U.S. presidential election in 2012 is now over, with Obama beating Romney by surprise. He eventually raised $ 1.1 billion to become the highest-paid (and most expensive) presidential candidate in history. (Romney came second, and he raised $ 1 billion.)

Of the $ 1.1 billion, 410 million were raised offline and $ 690 million were online. A BarackObama.com site alone created $ 250 million in donations.

BarackObama.com has over 6 months

* 17,807,917 visitors, 81,548,259 page views

* 4,276,463 donations

* 24% conversion rate of donations (one for every four visitors)

How is this brilliant achievement achieved?

3.

It's no easy task to make a super-massive, experiential web site that can convince people to donate money and safely and quickly process those donations.

Recently, Kyle Rush wrote an article disclosing many inside stories and summarizing the production experience of BarackObama.com from a technical point of view. Let's take a look at how Obama's technical team did it.

(Pictured in May 2012 Obama's official website)

The site's production team, which began in the second half of 2011, is the first front-end engineer to join and responsible for the look and feel of the web.

In the beginning, the site was on a server the team had purchased, running and donating fairly well. However, the situation has become alarming as competition intensifies. By May 2012, Romney's monthly fundraising overtook Obama for the first time.

Campaign headquarters decided that the site must be revised, do everything possible to fight for donations. As a result, the technical team started to expand on a large scale. The full-time front-end engineers expanded from one person to 14 people, of whom 6 were responsible for making fundraising pages.

4.

The first decision the tech team made was to use static website generator Jekyll to replace dynamic web pages with static pages and speed up web pages. The website should open as soon as possible. According to some research, Amazon's sales dropped 1% every 100 milliseconds.

The second decision is to put all the pages on the CDN and use the service provider Akamai. It is the world's largest CDN provider with more than 50,000 servers deployed across the United States for optimal access. Obama campaign headquarters in Chicago, can be loaded into the official website HTML page within 20 milliseconds.

The third decision is to make the donation background API calls. This is because 23% of visitors use mobile devices, so multiple frontends (Web and mobile) must be deployed. Using the API, different frontends can communicate with the background in the same way, passing information to each other in JSON format.

The fourth decision is that the background is developed using the PHP language and placed on Amazon's EC2 platform.

The fifth decision is to develop two backends in order to avoid downtime. Once a system stops working, it automatically switches to another one. This is important because downtime affects not only morale but also huge economic losses. Because donations are pouring in every minute, the highest record is $ 3 million an hour, and you can not stop it.

5.

After the initial completion of the new website, using webpagetest.org for testing, the results are encouraging.

4 seconds after the original page has not been loaded, the new version can only be seen within 1 second. Access to the entire platform increased by 60% and donation conversion rate increased by 14%.

Next, fine-tune the page's various details for a total of 240 a / b tests, which means that at least 240 iterations are iterated.

The adjusted page, visuals, and user experience have all risen dramatically (click to enlarge), resulting in a 49% increase in conversion rates. .

With Obama's election, BarackObama.com conducted 1101 front-end deployments.

6.

Facts have proved that the entire development program was very successful, successfully completed fund-raising tasks, not one minute downtime.

Kyle Rush felt it necessary to summarize and leave a record. In addition to the above development process, he also mentioned tools used by the front-end team: version control Github, a / b test management Optimizely, code compiled CodeKit.

Kyle Rush concludes:

"I'm 100% sure, this is the best development environment I've ever experienced, and we're constantly adjusting to the incredible increase in conversion rates for donations. The team is extremely satisfied, but happily ever saw January 2013 21st Barack Obama remains president of the United States! "

(Finish)