Design

Is UX the new handsome?

by

on

View all posts

Editor’s note: The views and opinions expressed in this article are those of the author and do not reflect the view of InVision.

On September 26th, 1960, John F. Kennedy and Richard Nixon stepped on stage for the first ever Presidential debate to be broadcast on national TV. 

By 1960, 88% of American households had TVs, with only a small number of Americans still relying on radio as their main channel of communication. That night it was estimated that some 74 million people tuned in to watch the now historic debate.

“What happened after the 2 candidates took the stage is a familiar tale. Nixon, pale and underweight from a recent hospitalization, appeared sickly and sweaty, while Kennedy appeared calm and confident. As the story goes, those who listened to the debate on the radio thought Nixon had won… Those that watched the debate on TV thought Kennedy was the clear winner. Many say Kennedy won the election that night.” 

via Time, How the Nixon-Kennedy debate changed the world

As history is told, Kennedy won the election that night because of how young, healthy, and handsome he appeared on screen next to Nixon.

Campaigning today

Nowadays candidates have so much more to worry about. 

Not only do they have to worry about their image on screen (now up to 4K resolution), they also have to think about how they represent themselves on social media, how they connect with voters through campaign-based applications, and how their person is generally assimilated into technology. 

“This year’s campaign will be the most connected in history.”

And they’re expected to do all of this on top of figuring out how to keep citizen journalists like myself at bay so they don’t destroy the campaign’s hard work with the freedom of press that comes with the internet.

Could UX be the new handsome? 

What is the campaign experience?

The campaign experience used to be candidates speaking to the public in person, on the radio, and, since the Kennedy/Nixon debate, on TV. But in between appearances they had a chance to relax.

Today, candidates have to be connected every second of the day. There is no time off.

Hillary has nearly 6 million likes on Facebook, 9 million followers on Twitter, and just over 2 million followers on Instagram. Donald has over 10 million on Facebook, 11 million on Twitter, and 2 million on Instagram.

If today’s candidates are not putting the media out there, you’d better believe someone will do it for them—whether they like it or not.

That’s a lot of risk to manage.

The Hillary Clinton experience

Hillary’s campaign is pretty tech-savvy this year. But while her campaign is very connected, the connections aren’t always meaningful.

HillaryClinton.com

Hillary’s site is beautiful. It has a modern look and feel, the interactions are fairly minimalistic, and it’s built to be responsive. The only downfalls come in the form of forced interactions and interactions built to make the site feel trendy.

hillary-site-1

The good

Hillary’s site has a ton of amazing things going on for it. For one, it’s organized in a way that doesn’t take much effort to understand. The text is chunky and easy to read. The visuals match the content it represents. There’s a filter for everything you could possibly need. And there are videos for almost everything on the site if you don’t feel like reading.

There are so many things I could list off that I enjoy about Hillary’s site, but here are a few things I specifically love:

1. It’s built to tell a story
If you actually read through the content on Hillary’s site, her team has built the site to tell a story. The content strategy is incredible.

Most pages intro with a big, bold headline, a quick statement to summarize the page at a very high level, and an image to assist with understanding. The text is black on a white background, instead of on top of a photo, which makes reading incredibly accessible.

“Hillary’s website is built to tell a story.”
hillary-site-2

It then will give you a big, bold quote to summarize her position and (typically) a video to watch in case you don’t feel like reading. 

hillary-site-3

After a strong intro, you get into the meat of the page, which is put into listicle form to make it quick and easy to read.

hillary-site-4

I’m sure her critics will tell you she’s trying to hide the truth by making everything into short lists, but that’s not true. 

What’s really happening is that her team is trying to give people the information they need in a digestible manner and then they supply the audience with links to dive deeper if they want more.

hillary-site-5

If you follow these links into The Briefing, you’ll dive into an incredibly comprehensive overview of Hillary’s plans and how she’ll get things done. 

hillary-site-6

The reason this isn’t all up front is because most people just want enough information to be informed. The content within The Briefing is much more than most people would ever care to read and would more than likely cause them to leave the site because it’s so overwhelming. 

It definitely takes some digging to discover, but that’s brilliant content strategy by Team Hillary.

2. It’s built with mobile-first best practices
This sounds like a duh, but you’d be shocked how many sites are still lacking mobile responsive best practices.

The main navigation is minimal and what’s most important is out in the open, not hidden behind a hamburger menu. Everything else you could need, but that isn’t quite as important, is tucked away to reduce the cognitive load.

On top of that, the content is digestible, contextual navigation is located at the bottom to make it easier for people using their thumbs (notice the filters at the bottom at the end of the GIF), and load speeds are lightning fast.

This is incredibly important considering the audience Hillary is trying to reach—modern, tech-savvy young people who hope for a better future and are probably trying to learn about each candidate from their phones.

3. It’s built to empower voters
While most sites give you all the information you would ever need to learn, most of them don’t do it in a meaningful way.

Hillary wants to make education more affordable and reduce student debt. But how’s she going to do it? 

Well, her team could write about her policies and hope you’re good at math/legal practices, or her team could make a tool that does all that work for you so you can actually understand. And that’s exactly what they did.

Her team built a calculator to give us a simple output regarding how Hillary’s policies will affect us. The simplicity makes her policies transparent and accessible, which is something most political campaigns lack.

hillary-site-7

Try the calculator for yourself here.

The bad

As much as I love the site, there are a handful of things I really hate.

1. The welcome mat
When you first land on Hillary’s page you have to agree to some statement that gets forced upon you. Users can close it out, but that just proves it didn’t need to be there in the first place.

hillary-site-8

This content should be embedded somewhere in the site or completely removed. This only benefits Hillary and her campaign team, who get data on what statements people agree with. Her team is not benefitting their audience by doing this. 

“Don’t block users from getting to where they want to be.”

Sure, it probably is meant to cause some psychological priming, but blocking users from getting to where they want to be is not the way to do it.

2. Meaningless interactions
I also have a beef with the interactions on this page comparing Hillary and Trump’s economic plans.

hillary-site-bad

What is the purpose in hiding information behind a sliding door? To show off your tech team’s talent? To create a big aha moment? I don’t get it.

These types of interactions lead to a loss of content consumption because people don’t know how to interact with it. And if someone can’t figure out how to do what they want in less than a second or 2, they’ll just move on without reading the content you spent hours building.

Just because you can do something on the web doesn’t mean you should.

Other touch points

Hillary also has a text messaging alert service and a mobile application. If I had to remove anything from this campaign, it would be the mobile app.

Hillary 2016 App

Hillary’s app seems to be more about entertainment than anything. It’s clearly an attempt to gamify the election process, but it’s not really adding much value to her campaign.

“Hillary’s mobile app doesn’t add much value to her campaign.”

The good

There wasn’t a lot I liked about the app, but there is one little thing I noticed that I think is brilliant: The limited-time-only challenges.

hillary-app-1

In general, the app lacks a lot but this is one part that they nailed.

The bad

The onboarding leaves much to be desired. I understand data helps drive the campaign forward, but it doesn’t help the person using the app.

First they collect your email, either through manual entry or by connecting your Facebook account.

hillary-app-2

Then they try to sneak in collecting your phone number to say that it’ll make it easier for you to pull your friends into the app. But you still don’t know why or if you even need your friends.

hillary-app-3

If you want people’s data, give them a reason to want to give it to you first.

Once you get in, it’s basically a swipeable panorama of an illustrated room that is said to be your personal HQ. 

The only motivation to do any of the challenges is if you want to trick out your HQ—otherwise you’ll probably only use/share the app if you’re an incredibly passionate Hillary voter.

For an in-depth review of her application, check out this detailed review.

Hillary’s text alert service

The service will send you text alerts about important news and events happening around you that pertain to the Clinton campaign. It’s pretty cool that they can tell where you are (I received one pertaining to Nebraska while I was visiting home, and then the rest have been for California, where I live), but overall I’m not super enthused by it.

hillary-text-1

The info is helpful, but it would be great if I could text back. Especially considering the frequency at which they ping you. It’s usually limited to one per day, but I’ve gotten multiples in a day lately.

hillary-text-2

The service is a good idea and has merit, but could be so much better. If I could text her campaign and dig into what I want, that would be a game changer.

Unfortunately, this service is one way and built only to allow Hillary’s team to contact you when they want.

The Donald Trump experience

Trump’s campaign is connected, but the connections aren’t built to inform—they’re built to collect data and donations. His campaign also lacks many design best practices.

DonaldJTrump.com

Donald’s site is a good reflection of his campaign. It’s light on content and built to collect data and donations.

The good

I have few good things to say about this experience:

1. It drives the audience to register to vote
There are no complaints on this point. In order for Trump to win, people need to vote. And they can’t vote unless they’re registered to vote.

trump-site-1

Making registration accessible (and a priority on the site) is a brilliant move. I’m really happy to see this and think it’s probably one of the best things his site has going on.

“Making registration accessible on Trump’s site is a brilliant move.”

2. It’s lightning quick and mobile responsive
The site is mostly text. It has a page full of videos and there are several images throughout the site, but it’s not built with a heavy payload for the browser. This means load times are minimal.

trump-site-2

The site isn’t anything flashy or anything that will win awards, but it is incredibly accessible. You could have an AOL dial-up modem and this thing would probably still load fast enough to meet Google’s PageSpeed tests.

Is this the best approach to grab millennials looking for lots of visual content to quickly scan through and engage with? No. But they aren’t Trump’s target audience.

3. It’s built to achieve a goal
The best part about Trump’s site is that it’s built with purpose. You might not enjoy it from a modern web perspective, but it’s doing exactly what the team wants it to do—promote Trump, collect campaign donations, and pull your data to keep you in the loop.

It’s easy to hear feedback from everyone around you and build to meet what everyone wants. But then you end up with a mess that no one wants. You have to respect a team that has a strategy and sticks to it regardless of what people outside of the target audience think or want.

“The best part about Trump’s site is that it’s built with purpose.”

The bad

Trump’s site is extremely goal-driven. The goal? To collect your data and your money.

1. Its navigation lacks descriptive language
I really love the “Register to Vote” button. It’s a great idea. But the rest is broken, in my opinion.

trump-site-1

The language of “Positions” versus “Issues” is confusing. Aren’t those the same thing?

On Trump’s site, “Positions” will take you to a high-level, longform writeup of his plan. The “Issues” link will take you to video snippets of those same plans that you found under “Positions.” The weird part is there are actually more videos to watch than positions to read about, but “Issues” is deprioritized.

My question: Why aren’t they combined? A summary video to complement the longform writeup would make the page much more enjoyable, and it’d eliminate having 2 links about, essentially, the same thing.

Also: Where is “States” supposed to take you to? Is there a specific message for each state? Shouldn’t a candidate’s message and platforms be consistent across states?

And “Positions” sounds like a section I’d go to in order to find a job working for Trump, or at least on his campaign.

2. Its navigation deprioritizes the most important links
Why are “Issues,” “Schedule,” and “About” buried in a secondary nav? 

trump-site-3

Based on hierarchy and design indicators, the most important things are that you’re registered to vote, you give them your data, and you donate to the campaign. 

“Get Involved” asks for you to sign up for a newsletter. “Shop” directs money to the campaign. “Contribute” lets you donate. Not far below the masthead you’ll see another space to donate, and below that, a CTA to join the text alert system (i.e. grab more data).

And if you take a look at it on mobile, you’ll see that’s exactly what they want out of you. 

trump-site-4

Side note: Why isn’t the “Register to Vote” at the bottom on mobile? If getting people to register were a priority, the team should put the button right by the user’s thumb so that it’s so easy to click they could accidentally press it. 

3. It’s built to be read longform
Most people skim and/or skip over big, chunky paragraphs, just hitting subheaders and standout bullet points/quotes.

trump-site-5

The text on Trump’s site is on the small side for web standards, and it’s thin. The content is written in big, chunky paragraphs and there are no subheaders to break up the blocks. There also are no visuals to assist in the story being told. This makes reading difficult.

trump-site-6

If I wrote this way, it would be so that you didn’t want to read what I was writing. 

I’m not sure if this is intentional or just poor design. There’s probably a good chance that it’s built this way to make you not want to read. But even if it is just poor design by his team, it’s definitely a pain point.

Side note: I also find it funny that all of the headers on his site are full caps lock. This method gives the reader a sense that they’re being yelled at and also makes it harder to read.

trump-site-7

Other touch points

Trump, like Hillary, also has a mobile app and a text alert system. However, unlike Hillary, I think Trump’s team nailed the mobile app—at least in terms of meeting his campaign strategy.

America First app

The America First app is pretty well thought out. It gamifies the political trail and gets people to do the work for Trump by enabling them to do it in a simple and engaging way.

The good

Hillary’s app is more of a Sims meets Tamagotchi type of gamification. It’s built in hopes that passionate supporters will want to build and grow an office, keep digital plants alive, and share with their friends. Trump’s is gamified in a way that makes it seem beneficial to you.

Trump’s is better because it plays to his claim to fame: The Apprentice.

trump-app-1

Not only can you rise up the ranks by working for Trump for free, you can also see how you compare to the rest of the people using the app.

trump-app-2

Trump’s team nailed this app. It’s a brilliant gamification strategy.

The bad

The design is generally poor, but it aligns well with his site: It’s text-heavy, it lacks imagery and hierarchy, and it deprioritizes readability.

trump-app-3

The readability of the site is only slightly better than Reddit.

Another pain point, similar to Hillary, is the onboarding. The difference is that Trump’s is even longer. 

trump-app-onboard

Instead of just collecting your email, Trump wants to collect: name, email, about me, phone number, Zip code, whether you’re registered to vote, gender, age range, and full home address (in that order) before you begin.

While this is a poor strategy when it comes to user experience, his team is, again, sticking to strategy very well.

For a deeper look into Trump’s America First app, check out this post from Adweek.

Trump’s text alert service

From what I’ve seen while using it, Trump’s text alert system is also built to collect data and donations.

trump-text-1

I was actually pretty interested to watch this video, thought it might be something exclusive to those who signed up for the text service. Turns out it was another one of Trump’s quick, “I’m the best, you should vote for the best” videos and a CTA to donate money.

trump-text-2

And then within 3 hours of joining I received 2 new pings from the Trump campaign asking for money again. This time, $100 even. 

trump-text-3

I wanted to text “STOP” after the last one but decided to keep going. Since then I’ve been getting 2–3 pings from Trump and his team every day, asking for money.

What I would do

While sites and apps are scalable, they’re also static. 

Even with the best sites you have to dig and really explore to get anything meaningful out of it. Trust me. I did it all to write this piece.

Going to a website or interacting with an app is not the same as if you could communicate with each candidate individually. 

Imagine if you could scale each candidate and their personality so that every voter had the opportunity to chat with them one-on-one. All it would take is creating a chatbot with some AI or NLP behind it to enable a conversation. 

While this probably sounds crazy futuristic, it’s not that hard. And these candidates have the money to make it happen.

But since they won’t, I created a simple version to let you experience what that could be like.

Meet The People’s Eagle

Is this bot built to replace CNN, Fox News, or any other professional publication? No.

Will it break down every detail of every opinion in real time and fact check like NPR or other fact checker sites? No.

But will it let you ask what you’re curious about and get a short but meaningful answer with articles to dig deeper if you want to? Yes.

I made this to make interacting with and participating in the election fun and effortless instead of bureaucratic and cumbersome. The templated experience you get by following the buttons should work well, but just be warned that the chat AI is still infantile.

peoples-eagle

The People’s Eagle was created to inspire educated democracy by making learning about and participating in this year’s election fun and effortless.

Commands you should be aware of:

  1. “What is [Hillary’s or Trump’s] plan for [topic]?” >> other variations work but along these lines helps.
  2. “Am I registered?” or “How do I register?” >> If you’re not registered or not sure, it can help you out.
  3. “What can you do?”
  4. “Who should I vote for?”
  5. “Why should I vote?”
  6. “Main Menu” or “Help” >> if you get lost
  7. “Check this out!” >> if you have breaking news or information about a topic that needs to be covered

**There are also some Easter eggs in there… see if you can find them!**

Just remember, it’s still a baby bot so it won’t know everything yet. And it’s mostly built to discuss each candidate’s platforms, not their scandals or trending buzz. But as you and the rest of the world chat with it, it will learn those things. Not immediately, but it will.

Press “Get Started” at the bottom of the screen.

Press “Send Message” and type “Hello.”

The only time you’ll be able to legally hunt an American bald eagle.

The only time you’ll be able to legally hunt an American bald eagle.

Who will win 2016?

I’m incredibly excited to see how everything turns out on November 8th and to see if the experience each candidate has crafted will make any difference!

Who is winning right now, based on their campaign experience? I’d have to go with Hillary. 

Similar to her campaign, her touch points have a couple of pain points related to trying to be more modern than she really is, but, overall, the experience is awesome and you can tell she knows her stuff.

Trump’s isn’t terrible, but a lot of it seems to be about driving revenue to himself, marketing himself (not his platforms or campaign), and entertaining people.

Ultimately, the only thing that matters is the final vote count on November 8th, 2016. So make sure you get out and vote this November! Only then will we know if any of this makes a difference.

Join the conversation

Who do you think has a better digital experience, Hillary Clinton or Donald Trump? Tell us on Twitter: @InVisionApp.

More posts like this
Author

Joe Toscano
Experience designer for R/GA's Google team in San Francisco, CA. Joe plans to change the world with a smile, design and some code. If you want to keep up with what he's doing outside of InVision, follow him on Twitter or Medium!

Join over 2 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 2 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 2 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 2 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 2 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.