How ElizabethWarren.com redefined traditional campaign websites

by Joe Kent, March 2020

Originally published on Medium

It was early May when Joe Rospars pulled Matt Ipcar and myself aside at the old Blue State office in Soho to help bring to life a wild idea he had, a calculator on our website that could explain Elizabeth’s new plan to cancel student loan debt. The ask was simple, the calculator needs to quickly tell people how much of their student loan debt the plan would cancel with large bold headlines. About five days later, the calculator was live, and Elizabeth was telling students at Iowa State University to pull out their phones and go to our website.

After walking the crowd through her online calculator, Warren asked the crowd to shout out what their debt forgiveness would be. One person said he would be debt-free. Another said she would get $50,000 in loan forgiveness.

“Whoa, she got $50,000! We have a winner here,” Warren said.

The calculator received hundreds of thousands of page views, dozens of media hits, and it was a sensation online, with tens of thousands of people posting screenshots of their debt cancellation on social media and what it meant for them.

We released 6 policy calculators over the course of the campaign, but our most successful launch after the student debt calculator was in the fall when we released our billionaires calculator. It was a great troll made in response to Bill Gates and other rich people crying in public because they were scared of a wealth tax. What most people don’t know is that behind the scenes, the billionaires calculator was conceptualized by Iram Ali at 9pm in a Slack conversation with me, and then launched less than 24 hours later. Unbeknownst to us at the time, it also ended up launching just hours before Mike Bloomberg had essentially entered the presidential race.

We moved on the Bloomberg news so quickly that they nearly sent this tweet before I published Bloomberg in the calculator. And if that sounds crazy, don’t ask about the time Victoria Adams and I literally finished shipping the complete redesign of the entire calculator experience the night before we released our Medicare For All policy/calculator.

Our team did not invent policy calculators, but we treated them differently. We focused on good design and copywriting that zeroed-in on clarity rather than technocratic policy language. As a result, the calculators were some of the most persuasive pieces of content on our website. A special shoutout to Bharat, Tess, and the rest of the policy team for always going the extra-mile to explain the plans and to make sure our algorithms were right.

But I would be selling ourselves short if I stopped here, our team built so much more than calculators.

We collectively invested tens of hours of our time across multiple teams building highly dynamic and fun to scroll pages (internally we called it “Scrollytelling”). We launched two of these pages, one for Elizabeth’s bio and one for explaining the wealth gap in America.

These pages were beautiful, engaging, and helped the campaign tell a bigger story about where these plans came from and what problems they could solve. And don’t quote me on this because I might be wrong — but I don’t think any presidential campaign, let alone any political campaign at any level, has ever made a web page that compares to the level of depth we put into scrollytelling.

Showing the interactive scrolling features of Elizabeth's bio page.

The scrollytelling pages aren’t going anywhere, so I highly suggest checking them out: Wealth Gap, Bio.

The website team also invested heavily (against my will*) in pushing the barrier on how campaigns do personalization on the web. Campaigns spend much of their time building out lists of audiences to target across most of their channels, except on web, where most traffic is treated as anonymous people.

On ElizabethWarren.com, we decided to change that by fundamentally reshaping our entire website based on where we believed you lived. In the weeks leading up to Iowa, residents in that state saw “commit to caucus” instead of donation buttons, and this was across the entire website. As we approached other election days in February or on Super Tuesday, all of the potential voters in those states saw our in-house designed and engineered polling locator tool as the first module of the homepage and similar pop-ups on other high traffic pages.

While most campaigns relied on the DNC polling lookup tool (iwillvote.com — which went down during the NH election, and had data accuracy problems for some counties on Super Tuesday due to DNC error) we opted to build out our own polling location and voter information infrastructure. It took a lot of work across so many teams, but these pages never went down, any last minute changes to polling sites could be quickly updated by us, and most importantly it was an incredibly clean and well thought out user experience for teaching people where and how to vote. In fact, we’re so proud of this tool we’re actively working to package it up and open source it, so other campaigns or organizations can build on the progress we made. ~Stay tuned!~

UPDATE: Read about our open source efforts!

Speaking of Democratic party technology failures, lets talk about Iowa caucuses which were a horrendous mess because of the confusing rules that the state party put in place which 3x multiplied the amount of math involved at the caucus site. What didn’t make this process any easier, was the well known technical problems with the app that the Iowa state party had commissioned a company to make. I’m very proud to say our team not only created an Iowa reporting app that didn’t go down, but the team spent countless hours pouring over the Iowa rules to make sure they handled every possible edge case correctly. And as a result, we snagged some extra delegates.

A small but mighty feature I’m really proud to brag about is our search bar. To my knowledge, no other 2020 campaign had a site-wide search. Scaling search to 80+ plans, 80+ organizing toolkits, and countless other content pages takes a lot of engineering and project management, but it helped thousands of people find the plan they were looking for.

I mentioned our homepage earlier, and I want to take a moment to reflect on it and the herculean effort that went into making it. Most political campaign homepages follow a similar style. Large bold photo of the candidate at the top, a signup box, and then things start to get uglier and boring as you scroll down (cough). Instead, we created a system that made it simple for content editors to tell a narrative about how to get involved with our campaign, using large imagery or video as a backdrop throughout the entire experience. Just as important, we worked with the Perkins School For The Blind to make sure sure the entire homepage, and so many other parts of our website, were keyboard accessible and a11y compliant.

And behind all of this incredible work was a ton of Javascript. Our campaign relied on React, Styled Components, and other modern Javascript libraries that aren’t common in the political world, but gave us the power to push all of these boundaries and make incredibly dynamic pages. But what you might find more surprising is that this entire website was originally built on Wordpress at the very start, as I was the lone React developer on a small agency team.

Not long after the February 9 campaign launch and much of the development responsibility started to fall on my shoulders, I started planning how I would modernize the tech stack. There were some bumps along the way, and it turns out trying to migrate website infrastructure while also trying to ship tons of work on tight deadlines is quite hard. But it all worked out, and by January of this year the entire website was static and living in a cdn bucket (human speak: we had a really reliable hosting mechanism for the website that would make it incredibly hard for it to ever go down). Our custom backend wasn’t always perfect, but it let us server side render React pages in realtime as changes in our headless CMS were made (apologies to everyone wondering wtf this means, I promise it’s really cool), and would even automatically clear the relevant cache keys for the page you updated (if you’ve ever had to do content entry for a large site before — you understand this struggle). Spending a year trying to improve React server side rendering taught me a lot, and I’m looking forward to doing a more in-depth blog post or conference talk on how everything worked for all of the nerds out there.

UPDATE: Read about the server side rendering architecture here!

Above all of the technical work we did and all of the incredible content we put out, I’m really excited about the team we put together. It’s so rare to be in a job where you love the mission, the team, and the work you do. This was the first time in my career I was tasked with leading a team, and I quite frankly was just winging it the entire time. But in the closing weeks of the campaign as things got tough, I wish I was a stronger shoulder to lean on.

I want to end by saying that Elizabeth Warren is the strongest person I know. I’m so grateful that I had this opportunity to be in the fight with her, and there are so many moments from this campaign I’ll never forget. It’s going to take some time to reset, but I know myself and so many of my colleagues on Team Warren will be back in the fight before you know it. And hopefully, the next time someone wants to make a really ambitious website for a Democratic campaign, they will point to ElizabethWarren.com as their north star for what is possible.

(oh — and please hire these brilliant people if they come knocking on your door or get in touch with me if you’d like me to make an introduction!)

Product: Colin Le

Data & Analytics: Chip Betterley

Project Management: Julianna Egner, Julia Cohen, Molly Simon, Adam Garner, Leidy Restrepo

Design: Led by Victoria Adams with some help along the way from Judy Su, Rizalina Hernandez, and Raquel Breternitz

Frontend Engineering: Julia Schultz, Jon Jandoc, Patrick Higgins, Chelsi Asulin, Sienna Svob

Creative: Nathan Maggio, Iram Ali

Ads: Maggie He