As one of the first designers on President Obama's 2012 reelection campaign, I led the redesign of two critical digital touchpoints: the campaign's main website homepage serving millions of visitors, and the donation platform that would become the primary fundraising engine.
Increased Donation Rates
Campaign Contributions
A/B Tests Conducted
Presidential Hug
🇺🇸
The Mission
To create a vision for the next phase of the second term while keeping that inspirational impact that the first campaign identity had developed. We focused on the Obama brand's vibrant hopefulness while maintaining the presidency's seriousness.
I participated in the early concept work, where we ideated on a series of evolving ideas. We started from the existing 2012 campaign announcement site and focused on the essential content blocks: donation call-to-actions, blog posts, and accomplishments.
The Handoff
From that moment on, I owned many of the experiences on the homepage and content creation. How can we develop a system for rapid content creation that can respond to new insights from the campaign? How can we ensure the photography of the President works in the context of the day's messaging? How does the new Facebook OpenGraph work on the homepage? Can we add more donation buttons? 😁
Every day, I focused on all blog post imagery, homepage heroes, and interactive elements for supporters of the President.
The Goal
The contribution platform had one goal: to make the page as frictionless as possible for supporters to donate and remind them of why they are donating.
We had a run-of-the-mill form, a photo of the President, donation copy, and legalese. The left is the campaign announcement page, and the right is the page 'ported' to the new site design system. We needed to keep those four elements and improve conversions—a pretty clear goal! ✅
Each week, we created new hypotheses. I would then think through and design concepts against them. We'd then break down the designs to create as close as possible A/B tests to track what was and wasn't successful.
Does 'bucketing' each section help with the cognitive load of the page?
Does having a larger image of the President create a more profound impact on supporters?
The larger photo worked very well and became a recurring theme during the campaign across the site. The far left had a background image that would fade out on the scroll and reveal the legalese. We knew it would convert better with that separated from the main content. We also tried various other ideas, such as a condensed form or a form where the credit card information looked like the back of a card. It would reveal the card type after the first four digits were entered.
This project was the first time I designed around a goal backed with data, and I loved it!
As we started to nail down those four main elements and produce a design that tested very well, we wanted to make a more significant impact. The team had thorough research, and we wanted to push towards a sequential/stepped-form process.
"Don't show the user the whole mountain, but little steps to achieve their goal." - Kyle Rush, Deputy Director of Development.
Our lead user experience engineer, Manik Rathee, and I spent a lot of time on this new update. We felt that keeping the first step as simple as possible would entice the user to feel like they were moving right along. We worked on better transitions, better in-line validation errors, and eventually going to a full-screen background photo.
Our fearless leader even used the tool (pre-sequential) and discussed how easy it was to use! 🙌
"This is all, pretty convenient." - President Barack Obama
Every once in a while, I was able to spread my wings and participate in print design, branding, social, and campaign photography. We had the honor of meeting the President the morning after the election day and thank him personally. A once-in-a-lifetime experience and career jumpstart!
