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?
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:
- Performance (Speed, load time, page weight, etc.)
- Device Compatibility (Responsiveness)
- Interface Design (UI) and the User Experience (UX)
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!
Oof! Thats not great, lets see how Hillary compares:
Hey Hillary, did you know that your campaign website has better performance metrics than Donald Trump's?
Okay, well it does! How does that make you feel?
Hey Donald, how does that make you feel?
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!
Leverage browser caching
Page load times can be significantly improved by asking visitors to save and reuse the files included in your website.
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.
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:
Ok, we’re burning daylight here, so lets get to it (remember we are looking at compatibility only):
- Laptop (+ small screen desktop): Working alright
- Desktop (large screen): Oh my Gosh! Pence, where’d you go??! Donald I can barely see you (but the hair looks GREAT)!
- Tablet landscape: looking ok
- Tablet Portrait: hmm, I love white space, but this just isn’t working
- Mobile Portrait: working all right
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...
@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
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!
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:
- 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.
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.
- 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:
- Your Money
- Your Money
- 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'
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? ;-)
… is this thing on?
That was a heck of a visual barrier above and below “the fold’. One could even call it… a wall…
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…
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…
…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
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.
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…
But lets keep going anyway!
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…
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!
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?
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.
- 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...
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 ¯\_(ツ)_/¯
If you haven't already, remember to check out The UX Blog's review of Hillary Clinton's website.
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.