Donald Trump, your website UX makes me sad

Disclaimer: This is a (satirical) look at the website of a candidate for the position of President of the United States from an experiential standpoint. This analysis is not meant to side with either party or be used as a political tool.

Oh, the website of Donald Trump… where do we begin? A few weeks ago @nicholastenhue did a light heuristic evaluation of Hillary Clinton’s campaign site, and I threw my hat in the ring to take on The Donald's website. 

Lets get started, shall we?

Cheers

In order to evaluate the usability of the site, we'll work through a light analysis of some major focus areas that should be part of every UI/UX web site project:

  1. Performance (Speed, load time, page weight, etc.)
  2. Device Compatibility (Responsiveness)
  3. Interface Design (UI) and the User Experience (UX)

Performance

For those that don’t know, performance optimization is a major factor in a digital experience. Even though site speed and performance have always been considerable factors in the projects I’ve been involved with, I have to admit it was usually a matter of “get the images small & the code as fast and efficient as possible”. In reality, we should aim for strategic guidelines in place for all departments involved to adhere to. I was introduced to the concept of Performance Budgeting earlier this year by Dan Mall, Founder/Design Director at SuperFriendly. He credits Tim Kadlec with a lot of his exposure to using performance budgets as a frame of reference for site strategy, and wrote a great article about it. Mark Perkins also has a quick write up about Performance Budgeting too. I highly recommend taking a look at the info!

There are many ways to slice the performance cake, but for our purposes here we are going to keep it high level and look at:

  • Page Speed
  • YSlow score
  • Load Time
  • Page Size
  • Total Requests (of the home page)

Drum roll please!

Trump website D and E grade performance

Oof! Thats not great, lets see how Hillary compares:

trump hillary comparison

Hey Hillary, did you know that your campaign website has better performance metrics than Donald Trump's?

hillary head shake

Okay, well it does! How does that make you feel?

hillary happy

Hey Donald, how does that make you feel?

unhappy donald trump

Well I don't know about a sad day for the whole United States, but certainly a sad day for your website, Mr Trump. However fear not, there are some easy fixes to get you back up to speed!

Performance Recommendations

Leverage browser caching

Page load times can be significantly improved by asking visitors to save and reuse the files included in your website.

Defer parsing of JavaScript

In order to load a page, the browser must parse the contents of all <script> tags, which adds additional time to the page load. At https://www.donaldjtrump.com/ almost 4MB of JavaScript is loaded on the home page.

By minimizing the amount of JavaScript needed to render the page, and deferring parsing of unneeded JavaScript until it needs to be executed, you can reduce the initial load time of your page.

Minimize icon/graphic footprint

Currently each social medial icon and the stars are separate png files. While they aren’t large files size-wise, they do require individual calls to the server to populate the images. Updating to SVG, icon fonts, or even collapsing into a single sprite file would help with page performance and reduce the calls of the page.

Moving on!


Device Compatibility

At a minimum, “responsive” cross device compatibility should be mandatory for any digital property in 2016. For optimized site performance and user experience, you can use a tailored approach, serving up the same site content in different ways that make the most sense for the device experience, or a customized approach, creating a dedicated device experience. The decision should really be made based on goals of the project, budget, cost/benefit of the dev/design effort, and target audience (younger demographics tend to skew away from desktop).

Lets take a look at how The Donald’s site stacks up:

donald trump website responsive design

Ok, we’re burning daylight here, so lets get to it (remember we are looking at compatibility only):

  1. Laptop (+ small screen desktop): Working alright
  2. Desktop (large screen): Oh my Gosh! Pence, where’d you go??! Donald I can barely see you (but the hair looks GREAT)!
  3. Tablet landscape: looking ok
  4. Tablet Portrait: hmm, I love white space, but this just isn’t working
  5. Mobile Portrait: working all right
Overall reaction to the responsive design on Donald Trump's site

Overall reaction to the responsive design on Donald Trump's site

Well, 3 outta 5 ain't bad… heck if Trump was playing baseball he’d be batting .600 and be having the greatest hitting season ever… but he ain’t playing baseball and these are easy fixes people, come on!

Device Compatibility Recommendations

Please use CSS Media Queries...

please use css media queries

@media queries are an efficient and effective way to use a single page template and create multiple breakpoints to better adapt content and imagery to different device dimensions. USE THEM!

Using media queries, you can easily increase the height of the hero for screen sizes above 1400px width (also don’t use fixed pixels when you can use percentages or em/rem measurements), and fix the awkward white space on the tablet portrait by adding appropriate padding to an inner div of the join-trump-w div @media below 768px (and for the love of all that is right use percentages for spacing).


Interface Design and Experience Design

Donald Trump Website

Overall, I’d says its…fine. 

Kind of like the Fast and the Furious Tokyo Drift. There were some parts where you go “huh…that was kinda okay”, but no Paul Walker (RIP), no Vin Diesel? C’mon!

robin hood whatever

Taking the page as a whole there is some visual balance, appropriate and expected color/imagery use…but I mean…C’MON!!! this is a candidate for the PRESIDENT of the United States of America’s website, a touchpoint that will reach FAR more people than campaign stops and fundraiser dinners…

…it just doesn’t seem like there was a ton of strategy-love given to the property.

Ok lets dig in deeper:

rapid fire round on trump site

Navigation

donald trump website navigation
  • Pretty tight spacing on the logo (even tighter on mobile and tablet)
  • Visually, the primary/secondary navigation is fine but I wonder about the strategy. For a candidate who hasn’t necessarily run on his platform, I would think getting the issues more front and center and kicking media to the secondary nav would be the way to go.
  • Clear CTA… your money.
give me money now
trump mobile nav

Also, all the nav on mobile is buried under a hamburger menu, so it would be interesting to see the metrics on navigation use/ page views on mobile… especially with the lack of in-page/text navigation anywhere else on the page.

Hero

donald trump hero image
  • Well, right off the bat the spacing on the supporting copy is driving me nuts…center that stuff vertically man (or woman)!
  • Hierarchy of Action is clear:
  1. Your Money
  2. Your Money
  3. I’ll Tell You About Stuff
  • That is so one sided and pretty bland engagement overall… kindaexclusive, not inclusive…kinda egocentric… “Contribute, I am Your Voice, Be the First to know”…. not much of an experience strategy though…
  • Overall the layout is fine.

Let's Go 'Below the Fold'

donald trump site below the fold

Wait, what just happened?! Is this the same site? Is that a paper texture background?

Trump, 1999 Steve Jobs called and he wants his Skeuomorphism back, am I right? ;-)

Hello?

… is this thing on?

QuestLove gets it

QuestLove gets it

That was a heck of a visual barrier above and below “the fold’. One could even call it… a wall…

It might keep the White Walkers out, but it is definitely keeping this site from achieving any visual cohesiveness.

It might keep the White Walkers out, but it is definitely keeping this site from achieving any visual cohesiveness.

okay, okay, calm down everyone!…

Anyway…when there is that much of a visual disconnect between modules on a website, it is really disruptive to the overall experience.

UX Tip - One great way to avoid this is to take a modular approach to the design/dev workflow. By creating a design system that is built on components you can identify thematic disconnects early in the process and make adjustments before investing too heavily in development.

Let us continue…

below the fold trump website

Ok, I can’t really dive too deep here; news feed, press release feed, twitter feed, and embedded videos… It’s just… there. 

Zero engagement, no calls to action, no audience segmentation, no ways to get involved, no platform/issue comparisons.

I mean for all intents and purposes this is a two horse race, where every engagement opportunity should be firing on all cylinders. This is just another ‘wall’ of content…

laugh at bad pun

…ok, I’ll stop. I promise!

In all sincerity, there are a lot of missed opportunities here.

Anyway, lets take a look at the conversion funnels…

Newsletter Sign Up Funnel

Sign up trump site

It is best practices to use placeholder text with a form label to maintain a sense of place and context.

Ok, lets sign up just to see whats happens.

donate sign up

Wait, what??! (I can’t believe I’m saying that again) All I wanted to do was to be the first to know... and now you want my money, again, still!?

Ok, this is is kind of a dark pattern/bait and switch, same thing as Hillary’s site, nav removed, isolated landing page…

For Shame!

shame on you nun

But lets keep going anyway!

donald trump inline messaging

Field validation is actually ok…at least the icons should differentiate enough for color blind accessibility.

Again place holder text needs a form field for best functionality…helps to avoid abandonment…

Omaze.com does a GREAT job integrating place holder text, field label, and validation state. Notice the seamless placeholder text/ form label/ form validation experience.

Omaze.com does a GREAT job integrating place holder text, field label, and validation state. Notice the seamless placeholder text/ form label/ form validation experience.

Donation Funnel

donald donation funnel

I chose $10… but if you go through the ‘Contribute’ button, or don’t specify a contribution amount, the system defaults you to $150 donation! Sneaky Sneaky!

donation dark pattern
donation dark patterns

Again, dark pattern, all navigation removed… this can work for a landing page where traffic is coming from paid advertising, but NOT from another place on the site you are already on!

Nice enough picture, but wait…what is that text above the donation amount selector?….a movement?! There hasn’t been any talk of a movement before this conversion funnel… 

How can it be a movement when the user isn’t invited to be involved in anything except donating and being the first to know?

hashtag awkward
validation screen donation flow

Same commentary as before, field validations are fine, but no field labels. This is on a desktop, so I can’t say how the mobile donation process flows... that is a topic for another post.

Takeaways

  • The site strategy definitely has room for improvement, as does the UI.
  • I would recommend strategy, strategy, strategy… as a candidate, what can you, Mr. Trump do to help your audience achieve their goals; that should be your engagement message, and Hillary’s message too for that matter!

One positive remark...

donald trump photo page

I did actually like the gallery page, which really is a photo journal of the campaign trail. That is something that is unique, candid, and invites the user in. Unfortunately, it’s only been updated a few times since mid-July… Oh well ¯\_(ツ)_/¯

FOR SHAME

If you haven't already, remember to check out The UX Blog's review of Hillary Clinton's website.


Kevin Russell

Kevin Russell has been a "designer" since the 1st grade and has worked as a designer for over 15 years since. Currently, he is Director of UX at Experience Design Works, a user experience strategy and product design consultancy based in San Diego, California.