Trump And Clinton Showdown Gets Graphic: US Presidential Campaign Websites 2016
Featured Image: The Atlantic/Justin Metz
American presidential campaigns are vast, intricate and complex. Entire teams of communication, outreach and branding experts carefully choreograph the details. The official campaign website is the main communication and outreach portal. It reflects the expertise of the communication team and the spirit of the candidate’s message. The involvement of top design experts means the campaign website should be perfect right? Wrong!
We reviewed and tested both Hillary Clinton’s official campaign website as well as Donald Trump’s. Although there are a ton of things they get absolutely right, the negatives cannot be overlooked. After all, if they can’t build a proper website, how can we rely on them for making decisions on the nation’s behalf. Keep reading to see the good, the bad and the poorly-designed.
What Motivated This Testing Process
Donald Trump’s official campaign website crashed during the first presidential debate. Apparently, this happened because a lot of people tried to access it after Trump asked them to check it out. This isn’t surprising considering that an estimated 84 million viewers were tuned in to see the two candidates battle it out for the first time. Hillary also asked people to check out a specific feature of the website, a real-time Trump fact-checker. Her website, however handled the high user volume without any issues.
This inspired us to do a detailed review and usability analysis on both the websites to see if any major issues cropped up. First we review and compare the visual aspects, let’s get started.
PS: One thing we skipped was security analysis, if anyone wants to take the plunge and conduct penetration testing on either of these websites, be sure to read this excellent blog post by a software designer, Shu Uesugi (@chibicode), who discovered a serious security flaw in Trump’s website.
1. Look And Feel: Which Website Has Better Visual Appeal?
Clinton’s website is simple and uses a clean grid-style layout. It uses the standard color choices for a presidential campaign website, red, blue and white. However, white and blue are more dominant with red as an accent color for CTA (Call to Action) buttons.
Screenshot from Hillary Clinton’s official campaign website
Color palette of the official Clinton campaign website
There is nothing unconventional about it and it’s very easy to navigate. The easier navigation is probably a conscious choice to ensure that less-savvy internet users don’t get overwhelmed. The website makes ample use of multimedia elements on the home page. A video has the prime spot, followed by images of main campaign events. The donation option is conveniently located above the fold, clicking on this takes you to a landing page. This page looks brighter and only has two elements above the fold, a large image of Hillary and the donation options.
Let’s see what Trump’s website looks like. The first time you access Trump’s website, you are greeted with a splash page.
This page changes according to what event or issue the campaign is trying to highlight during the week. Here is this week’s page:
This is a bit unexpected and a poor design choice. It’s better to take the users to the address they typed out redirect to an alternative page. The splash page looks hastily designed because of the asymmetrical layout. The YouTube video draws attention away from the donation CTA and all that white space makes elements look quite lost. The option to ”Continue to site” is small and wedged in between the large “Paid for by Donald J. Trump for President, Inc.” message.
Once you locate the tiny option to access the actual site you came to visit, you will be directed to the homepage.
Screenshot from Donald Trump’s official campaign website
Both homepage and splash page have a similar color palette. Compared to Clinton’s website, these colors are a bit muted and dull.
Color palette of the official Trump campaign website
Overall, the website has an outdated design, and looks too conventional. There was nothing impressive about it.
2. Logo Design: Who’s Got It Better?
Branding elements play a major part in any presidential campaign. Both the sides have hired experts from branding agencies and graphic designers to help create unique identities and attract voters. The logo is one of the most important brand element and has a prominent role in promoting a clear message to supporters.
Hillary Clinton’s official logo is featured prominently on the website at the top-right corner. Michael Bierut created the highly minimalistic and retro image. It’s interesting to see the website uses the condensed version of the logo. This shows the campaign’s confidence that she is a highly recognizable individual and brand.
The Hillary 2016 campaign logo needed to be significantly different from the Hillary 2008 logo, we think the designers did a great job coming up with a logo that was different from the 2008 one and retained the campaign’s message.
Clinton 2008 logo (left) and Clinton 2016 logo (right)
Donald Trump’s website uses a more descriptive logo that shows the name of his running mate, and the campaign tagline. The design is based on the American flag and clearly shows the iconic red and white stripes. The logo uses a sans serif, all-caps font that looks bold and solid. It conveys strength and reliability.
Donald Trump’s official campaign logo
3. Multimedia And Content: Which Of The Two Nails It Better?
The Clinton campaign website has a video and many images on the homepage. The video shows short clips of speeches made by the President Barack Obama, First Lady Michelle Obama, ex-presidential hopeful, Bernie Sanders, and Democratic Senator Elizabeth Warren. Her running mate, Tim Kaine, is only seen once you scroll down, this is a major element to overlook.
The navigation menu is located at the top, which lists other sections of the website. The menu doesn’t display all the sections at a glance even though there is plenty of space. The visitor will have to click on the “More” option to see additional options such as blog, events, user account, and social media. The content is informative and useful but hard to find.
Another issue we noticed is the Briefing section does not have a prominent link in the Navigation menu or anywhere else above the fold. You have to scroll to the very end to discover the view briefing option.
This is simply dab design, considering the Briefing section has a ton of useful content such as memos, updates, videos, and factsheets.
Trump’s website has a good balance between copy and multimedia content. The sectioning of the content is a bit confusing. For example, the “MEDIA” section has an option to view official campaign ads, but the category is empty.
Instead, the ads are found in the “PRESS RELEASES” category. The organization of information has major usability issues.
4. Social Media Marketing: Who’s Winning It?
Both the candidates have a large social media presence on all major networks. All the social media accounts are very active and are updated constantly. However, this enthusiasm isn’t reflected on the official websites.
Like we pointed out above, the social sharing options on the Clinton website are hidden from view, you can access them by clicking on the “More” option on the header navigation.
This means a lot of users won’t be able to connect with the campaign’s social media feeds. This is a major web design blunder. The website footer does have social media links but the visitor will have to scroll all the way down to see them.
The Trump website also makes the same blunder. The only social media buttons are located in the footer section. There is a live Twitter feed at the end of the homepage, but only displays the last two tweets.
5. Responsiveness And Usability: Which Is Smarter?
An increasing majority is using mobile phones as primary browsing devices. Therefore, it’s essential for major websites to be responsive and mobile-friendly. Both websites have a responsive design that scales well to different screen sizes.
However, there are other aspects, such as page load speed, that we needed to check. For this, we used the trusty Google PageSpeed Insights tool. Here are the results of both the websites.
PageSpeed Insights test results of Clinton’s website
PageSpeed Insights test results of Trump’s website
The page load times are a bit slow, as reflected by the low Page Insight scores. However, both the websites are readable, interactive, and user-friendly.
We did a final check using Google’s Webmasters Mobile-Friendly Test tool. Both Clinton’s and Trump’s websites were classified as mobile-friendly. Here are the results from the test.
Clinton’s website Mobile-Friendly Test results
Trump’s website Mobile-Friendly Test results
Desktop Page-Speed Analysis
We tested out the page load times of both campaign websites using the GTmetrix tool. The Clinton website has a page load time of 16.1 seconds, which is a lot slower than the recommended time of 1.5 seconds. The most likely cause of the longer page load time is above-the-fold content that waits for several scripts to load before it can render. Trump’s website on the other hand has a page load time of 3.3 seconds.
To confirm this we ran a test with Google’s PageSpeed Insights. It indicated similar results for both websites as shown by the GTmetrix tool.
Google Page Speed Insights for Hillary Clinton’s campaign website
Google Page Speed Insights for Donald Trump’s campaign website
Page speed is definitely a problem and needs to be optimized. Websites that expect high volumes of traffic cannot afford to cut corners where speed is concerned.
Both websites have issues that made us wonder what the designers were thinking. There is no clear winner in this battle of the websites. This contest, just like the presidential race, could go either way. In our opinion, Clinton’s website is the clear winner.
What do you think? Let us know in the comments.