The UX of politics

Before the Covid 19 pandemic broke, one of the biggest news stories watched around the world was how in the United States of America the democratic candidates were slugging it out for the upcoming elections. From the start it’s been quite the political pendulum. Looking back, we now know the then back runners were destined to become the fore-runners and it has only been Bernie Sanders who has garnered most of the limelight consistently from the start. But even his charm didn’t dent the juggernaut that would become Joe Biden’s campaign. Most of this success comes down to messaging surely? You naturally think back to previous democratic political pushes in past elections and you can’t but help not think about the digital impact. The catalyst for putting Barack Obama into office was his clever Social Media Campaign. Even Hillary Clinton was known for her ‘Pant Suit’ design language that unified her digital presence. So, I was naturally curious what would this round of digital campaigns and websites look like.

What would be the design story for this year’s campaign? That pivotal thing that could inspire a run to the polls. I remember as a young digital advertising practitioner I stood in front of an agency of people, along with my boss, to give a presentation about how Barack Obama had made his bid for the oval office with what was then an innovative campaign across social channels. The objective of this presentation was to educate what was till then primarily a print and TV agency about its new fledgling digital team. That was the first (and last) time I wore a tie in Ad Land. Perhaps it was that memory or a general curiosity to see how the political candidates would traverse the digital rabbit hole that lead me to investigate how the competition for the 2020 election stacked up. What’s more, I noticed how each candidate was feverishly plugging in their website domain names whenever they spoke on TV at a debate.

We’ve come such a long way in web design, surely this year’s campaign must have some cutting-edge design and tech powering it. Truth be told after looking them over, I don’t think this was the case. I think this is partly because of the need to constantly iterate the design with the latest campaign development. What surprised me was that there were some ways in which the different websites were so similar, while also noticing the other design and content decisions that really made candidates stand apart. I’ve picked four of my favourite candidates to explore a little more.

While I did have a look at their websites before they dropped out of the race, for the purpose of this article I had to turn to the Internet’s Wayback Machine to access snapshots of their website that you will see below. These are just top line thoughts and impressions and doesn’t aim to be a detailed audit or critique.

What’s Common

Fund Raising

One thing common across the sites and the UX is that key objective is to earn dollars. Sure, winning hearts and minds is important, but these websites exist to raise funding. Which is why most of these sites opt for an interstitial or splash page in the beginning of the user journey. Its sole purpose is to ask you to donate. It also simplifies donating by creating pre-set donation amounts that a user can just click and donate. This eliminates any friction you may have about how much should I donate so that I am not overtly generous, yet don’t come across as a Scrooge.

Establishing a reason why

These interstitial splash pages also act at as the tip of the spear when it comes to establishing that single campaign thought that the candidates want to put forth. The simpler the message and the more times its repeated the more likely the candidate will carve a mark in the conscience of everyone.

Getting support

If its not monetary support, its feet on the ground that is essential for the campaign to succeed. Where the UX places a form to sign up during the user journey will be of critical success. Too early and the visitor doesn’t get to know their candidate enough. Too tucked away, may mean that we are losing potential help. The safe ground then is prominently on the homepage as we assume that after perusing the site the user will exit the experience from homepage. It’s the first and last place he’s going to look for critical information about how to participate. Apart from the Contact Us Page. 

Speaking your language

You notice that most of the Democrat’s website has an option to be translated into Spanish to talk the language of the Hispanic voter base. I don’t recall Obama’s campaign doing this. Not too sure about Hillary Clinton’s either.

Covid-19

Covid-19, the Coronavirus that has swept the globe has likely changed the very dynamics of the next election. At the point at which it ravages America the only Democratic runners left (Bernie and Biden) have covered what it means in their site. The problem however is that they both didn’t seem to know where to put it. Shouldn’t it have been a key message? Or would that be seen as politicising a Pandemic. Remember these were early days and America wasn’t on lock-down at this point. They both have dedicated pages that elaborate their stance on how the pandemic needs leadership and communities need support. The only way to access said pages though was through a ticker banner that ran on the top of the home pages. Bernie’s being more visible below the main navigation while Biden was unobtrusive being flush on the top of the website but becoming a sticky menu item as you scrolled through pages.

The Candidates.

Amy Klobuchar

Amy Klobuchar’s website is what I’ve come to think of as the middle ground for political campaign websites. It’s simple, slick and gets the job done. Is it extraordinary and a technical feat? No. But it cleverly uses imagery to tell a convincing tale of how ‘Amy is from the Heartland’. It both shows and tells how she connects with her voters. Its visual simplicity and ease of use sets it apart.

When you look at the homepage you realise the website is optimised for the first-time visitor. Which makes sense right? Think about it, you are a potential voter and you came to the website because you’ve heard of Amy. If you were an ardent supporter and contributor, then it would make more sense to bring you into an entirely different engagement eco-system or funnel. Like a slack collaboration or an intranet. It doesn’t need to be through the website.  

I do like how the designer integrated the Join Us form right below the carousel in a single line. With your email and Zip Code as the only mandatory fields and a mobile number as optional. Interestingly they don’t want your landline. It’s a testament to the times.

Green is Amy’s campaign colour of choice and is used to highlight buttons, links and other UX elements. With blue being the colour of choice for headings. Yet the first buttons you see are in orange. That’s right, the buttons for the donation denominations. So its interesting how that colour is dedicated to only  task and that one UI element across the entire UX.

Elizabeth Warren

If a well-designed website could get you into the White House, then Elizabeth Warren would be the next POTUS. Sadly, this is not going to happen, but you have to admit she has one snazzy website. It’s what you would come to expect of a contemporary website in politics.

By any benchmark Warren’s website is the top of the pick. It’s contemporary, the information architecture and information scent are spot on. Full page video backgrounds that show Elizabeth interacting with voters from all walks of life really bring her story to life. What’s more, these videos are paused by default (perhaps on lower bandwidths). She’s also one of the only candidates who created a donor wall where contributors are listed by their first name. It’s these nice little touches that make this user experience stand apart.

But don’t get me wrong, its not just a pretty design. There is a wealth of content that is tucked away once the site engages you. Warren goes into detail about her different plans if you have the patience to read it all. Plans are often re-purposed Medium posts. An indicator that she’s using everything in the online arsenal to get her message out there. All this however is a result of iterative design. Looking at the Way Back Machine you realise that Warren has spent considerable time learning the ropes of what works for her and what doesn’t with a constant web presence as a senator.

Another notable feature of the site is how it tells Warren’s story. The clever use of parallax animation and headings that build on that sense of anticipation that not only connects but culminates in her vision for her White House run. Its an equal dose of show and tell with video clippings integrated and snaps from her life to build a sense of intimacy with the candidate. Like flipping through a personal diary. This is content strategy crafted to tug at heart strings of the readers. Now we know even the most patient person skims a website. Another beautiful little tech tidbit integrated on the page is dynamic highlighting of the text as the user scrolls through the content. You can’t help but not notice the key points you need to notice. It’s a small flourish but it’s just brilliant!

The only let down is how the UX consists of different interconnected platforms for tasks and the user journey breaks while shifting from one platform to the other. So, if you were to jump to the events page or the shop page, you can’t easily navigate back to the homepage or the main menu. Sure, you could hit that back button. But it’s easy to fix and would go a long way to prevent any unwanted drop offs.

Bernie Sanders

The Bernie Sanders approach is definitely different from the rest. He stands out for his bold message right off the bat. What I really like is that his messaging clearly harps a unified approach both at the party level and the individual level.

From a design aesthetic its classic. The juxtaposition of serif and sans serif fonts. The red and blue colour highlights against a pristine white background and the red buttons are all patriotic cues that are woven in. And the little scribbles such as under the paid for by Bernie sign which reads ‘not by the billionaires’ add a little humanity to the crisp layout.

Unlike the other candidates, Bernie Sanders isn’t afraid to tell his story through video. Which let’s face it, in this age is the most engaging way to do so. No amount of fancy animation (though they increase your engagement metrics) can match the depth of watching a video. And Bernie has a lot of material to rest his case with video.

Finally, the feather in his cap is the Bernie Sanders Podcast. The perfect way to get in the ear of those voters who are on the move but who are willing to spare a lending ear. I don’t see this kind of commitment by any other of the candidate’s digital campaigns.

While a lot of thought has been put into getting the homepage right the other sectional pages seem to have suffered. The About Bernie page looks lacklustre compared to the competition. The design choice of using accordions for one-line answers with button links on the Issues Page is debatable. Those entries should have been separated from the ones that really needed it.

I do like the clean design of the Volunteer Page. However, drilling down to the level of making calls from home causes the navigation to break. You can’t get back to the main site without hitting your browser’s back button. This page is on a subdomain by itself and is probably the landing page for their banner campaigns. There are similar issues to Events Page and Store as well. I can’t quite tell what other benefits of having separate subdomains could be.

All in all I’d say they spent more time thinking about what they could leverage for Bernie Sanders on his digital platform. You notice integrations like a floating Help pop up form that is powered by Zen Desk. You notice the social icons on a drop-down menu – the first time I’ve seen them used like that. It’s all these little things that demonstrate the expertise thrown at this property. But it still isn’t in the league of Warren’s team.

Joe Biden

If I was a betting man I’d say Biden bet on a formula. His campaign website reeks of something the Obama team may have conceived off. Even his logo looks a bit like Obama’s.

What I don’t quite like though is the first splash page doesn’t make it overtly obvious that you can continue to the homepage without donating. This is a bit of Dark UX as anyone would have expected the cross sign to be able to close the pop up. The strong drive to donate is continued on the main homepage with a clear call to action with buttons for pre-defined donation buttons. This turns into a sticky menu as you scroll down the page! Relegating what was the primary menu into a drop down. I can’t quite decide if this is ingenious or an overkill.

Biden is one of the only campaigners whose website builds credibility for the candidate through association with a page that highlights those luminaries and organisations who are pledging support. And it looks to be a long list with governors, senators, members of Congress on it.

A call to be part of the movement comes even before getting into Joe’s story. Which seems a little odd. I’d have thought that they would have lead with Joe’s vision first. Biden can go toe to toe with Bernie when it comes to his legacy content that he can whip together to tell his story. What I do like is how they pepper the site with his sayings and quotes which really help you get the flavour of the man.

Where the site really stands out is the section Joe’s Story. It’s the way the story is brought alive with a train journey that connects a routine experienced by millions of commuters to a life journey that makes this depiction so meaningful. Biden like Warren goes into elaborate details about his different plans for those who are willing to invest in a read. The key difference though is he has a synopsis video before each of these verbose plans. It makes all the difference. Though cobbled together with a lot of stock footage, you hear Biden give you a summation of what he plans to do. It’s clever, it leaves a mark, especially when you hear his own voice and not some polished voice over.

Is Biden winning just because of his website? I think its unlikely. But as a website it crosses off all the check boxes you need to make an impact. It is one of the only sites that doesn’t have a broken navigation when you navigate the Store. 

Pete Buttigieg

Of all the websites, I couldn’t quite get a complete overview of Pete Buttigieg’s. A problem with the Way Back Machine. And I can’t quite recall a lot of what I saw when the site was live. What Pete did right was capturing the right domain name. Peteforamerica.com.  That was a smart move. After all its likely interested voters just wouldn’t have got the surname right. It would be interesting to know whether the Amy Klobuchar camp had a similar problem. They could easily have gone with Amyforamerica too.

In terms of the UX, this is a site that is trying to cater to too many audience that it falls a little short on its messaging opportunity for the first time visitor. I sometimes wonder about the juxtaposition of campaign messaging next to tactical fund-raising elements. But I think the designer had a lot to say and wasn’t too clear what he could drop. As you scroll down however things seem to improve with a clear clustering of elements for participants. I like the fact that it goes down to the level of being able to download assets to create your own material for rousing up support.

One of the interesting things the homepage does is how it treats donation. On the first look you may think it plays it down. Yes, there a nice yellow button on the top right that catches your eye. But you don’t really see a call to donate till you scroll down to the end of the page. But then you hit the navigation menu to browse the site and there within the mega menu you notice the donation box. Think about it. No matter where you want to go on the site that forms going to be staring you in your face now. Clever or obtrusive, you decide. Bit of a Dark UX pattern.

Pixel power in politics

To conclude, it’s easy to analyse websites, but the team environment, resources and planning that goes into crafting a digital experience makes all the difference. All things are not equal when making these websites. I would guess most of these sites were developed by professional agencies, though one or two might have been executed by the in-house campaign team themselves. Whichever may be the case, websites are only the tip of the iceberg of a political campaign, I am sure there are countless social media posts, articles and collateral out there that work together meaningfully crafting a cohesive narrative.

During the writing of this article the Democratic race has fallen solely on the shoulders of Biden and while Bernie will still be on the ballots it is now evident who is going to face off against Trump. Will their candidate’s digital narrative trump Trump? Time will tell.