UX design. It’s one of those things we all hear a lot about and know is important, but can be hard to nail down exactly what it is in practice. Here’s a simplified definition:

User Experience is how a person feels when interacting with a website (or other digital platforms). The feeling generated is a result of their interactions with the design, performance, accessibility, architecture, and language, which then results in how the user feels about the company or product, and if the user’s experience was successful or not.

That can make it seem like there are a lot of things to factor in, and there are.

But let’s simplify by comparing some UX factors in two live campaign websites for the current 2016 presidential candidates. They’re an interesting sample set since they are all recently launched sites and were designed with similar objectives in mind.

We will focus on three elements: copy, visual design and user interactions, with examples of how each element illustrates why UX decisions are so important.


UX Copy

Best practices to keep in mind:

Let’s take a look at the tone, length and placement of copy on the 2016 campaign site home pages of two candidates: Marco Rubio and Hillary Clinton.

 

Marco Rubio

While it appears clean at the top, it becomes increasingly cluttered as you scroll down. What’s more, there’s not a real sense of what information is most important. Foreign policy, announcement videos, email updates and policy-related information are all given equal space in one small spot. It’s confusing and, while there is a lot of content, the lack of organization prevents the user from feeling more informed.

In fact, much of the language used on Rubio’s site is meant to evoke a sense of urgency around growing dangers. When using evocative language, image and word placement stakes become even higher.

marco1

Hillary Clinton

There’s just not much content here at all. There are endless opportunities to sign up or donate, and that’s clearly this candidate’s goal—to invigorate and energize voters to donate or volunteer. And on that alone, the copy is effective. It’s brief, energetic and one can sense the urgency and momentum Clinton is trying to inspire. But the social channels jump you off of the site and the copy is almost exclusively calls-to-action with almost nothing about policy. Even the events tab requires you to join in or sign up for the campaign. The overall lack of even high-level information on her stand on issues leaves you with the feeling that this campaign is the presumptive nominee.

 

hill1


UX Visual Design

Best practices to keep in mind:

Let’s take a look at emotion and imagery used on the home pages of the two campaign sites.

 

Marco Rubio

We see this is someone presenting themselves as a public speaker and leader. But it’s not a very dynamic photograph and the lack of crowd or other people can make this seem a little disconnected to real life. It may be a safe photo, but not an exciting one.

marco2

 

Hillary Clinton

Clinton’s team seems to have selected a very personalized image. She’s with “the people” and interacting warmly, although still maintaining a leadership persona. There are smiles, and the background is familiar without being contrived or stuffy. The emotional desire to evoke a sense of community and warmth is immediately apparent.

Screen Shot 2015-06-11 at 11.55.13 AM


UX Interactions

Best practices to keep in mind:

At this stage of the election cycle, both the campaigns are focused on signing up volunteers. So let’s look at how that process plays out for the user, as a possible volunteer in the two sties.


Marco Rubio

There’s a lot of copy here, and the multiple calls for “sign up now” or “sign me up” are redundant. The social media buttons also have quite a bit of visual real estate that fight for hierarchy with the volunteer form.

When you hit “Sign Me Up,” your success page is a donation form. It makes sense from the campaign’s point-of-view to ask for donations, but it does make us wonder if this makes the user feel squeezed.

Two things really stand out: the overly folksy copy and the bizarre donation amounts. There’s no explanation for the unusual amounts and the call for donations up to $2,700 doesn’t exactly mesh with the message of chipping in a few bucks.

marco4
Hillary Clinton

Hillary definitely has the simplest and cleanest volunteer form. There’s no extra copy, just a clear call-to-action with only key information asked for. The social buttons are there, but folded in below and muted. One big drawback, however, is that after you fill out the volunteer form there is no copy to let you know what the next steps are. You are simply thanked and not given any sort of details on how you might be contacted.

hill4
Error Pages

Error pages are often a forgotten area of useful or meaningful user interaction. Ending up on one isn’t an ideal experience, but how they’re handled can create a positive experience.

Error page best UX practices:

Marco Rubio

We want to give Rubio credit for trying to be clever with this, but the copy blames the user (probably not a great idea when you’re also asking them for money) and the overall layout is cluttered. We’re also not sure why a user would want to delve into an over 1-minute long video about Rubio’s relationship to football, meanwhile forgetting their objective of coming to the site.

marco5

Hillary Clinton

Here Clinton manages to balance things very nicely. Sure, it’s a corny joke, but it doesn’t blame the user and it allows for some fun in a pretty straight-forward site that also humanizes the candidate. It also suggests the user sign up to volunteer, giving them a next step to take.

hill6

Check out the two websites yourself to evaluate: marcorubio.com  /  hillaryclinton.com

 


Anything we can do to make things simpler and more transparent is a plus.
– Cap Watkins, Sr. Design Manager at Etsy