It impressed me.
There was a clear message, fresh branding, and easy donation calls-to-action.
The competing candidates’ websites felt more like brochures. Something ported over from a tri-fold format. Something to be stacked on lobby coffee-tables.
Stale photography accompanied small text, cluttered layouts and difficult menus.
GOP Front-Runners Teardowns
Hot off the the first presidential caucus in Iowa, I thought I’d share these four teardowns of the GOP front-runners.
Disclaimer: I’m not a UX designer. I build things on the internet for a living and have an interest in usability and design. That said, I spend most of my days writing code. These sites are for regular folks, though. You don’t have to be a subject-matter expert to have an opinion on something that’s built with you in mind.
Round One: “Hero” Section
What the hell is a “Hero” section? In short, it’s a code word for the “top bit” of a website. Nowadays, that usually means some big imagery and big call-to-action. It’s there to say, “Hey user, this is what the site is about. Enjoy!”
Ben Carson
Press enter or click to view image in full size
Pro: Carson’s homepage starts off pretty strong. His hero module has some clear branding with a good photo of the candidate, and there’s a very clickable button on the left half. It’s clearly the most important call-to-action and displayed prominently. Bonus points!
Con: Although the CTA is obvious, the clarifying text below it is not. I thought it was a link before hovering over it to discover it was just text. I assume it’s meant to clarify what clicking the button will do, but it really doesn’t… What happens when I find my polling place? School me Carson!
Press enter or click to view image in full size
Pro: The logo is alright. Patriotic colors, check. Candidate’s name, check. Easy to read, check. The only exception is that bottom line, “Heal, Inspire, Revive.” I get that it’s a play on his medical background but it starts to feel cluttered at three lines.
Press enter or click to view image in full size
Con: The menu is cluttered. Why are there “Store” and “Support Ben” buttons? It’s hard to see why either are highlighted outside the normal menu links. I’d much rather see them inline with their cohorts and minimized visually so I can focus on what’s important here, that big old blue button on the left.
Press enter or click to view image in full size
Con: There’s search link in Carson’s menu. I’d expect a search bar to appear in the header if I clicked it, but no, I’m taken to a search page, which has the search form. That’s an usual design choice and one that really discourages searching.
Ted Cruz
Press enter or click to view image in full size
Pro: Nice photo. Bonus points for the preacher vibe.
Pro: There’s a clean menu. Its bright, vibrant colors make things easy to read.
Press enter or click to view image in full size
Press enter or click to view image in full size
Con: The white text over a photo of a crowd is pretty difficult to read as your eye moves right towards the middle of the screen.
Pro: I like the fun language of “I’m In” on the CTA button. Yeah, I’m hip!
Donald Trump
Press enter or click to view image in full size
Pro: Tonight’s the night of the Iowa caucus, so it’s pretty neat the have a link to the results at the top!
Press enter or click to view image in full size
Con: Donald Trump’s homepage has a hero image that doesn’t fit on my 13" Macbook. That sucks. There’s no visible call-to-action.
Con: The gradient background in the header and in the logo feel like they’re from 2002. Same with the tiny font and all-caps used in the menu.
Marco Rubio
Press enter or click to view image in full size
Pro: Colorful, and clear. I can find the menu pretty easily, and there’s a big form in the middle telling me it’s important.
Pro: Social sign up is easy! Posting politics to Facebook is always fun!
Press enter or click to view image in full size
Con: The menu has a very unusual layout. Logo in the middle, links split to the left and right makes it hard to scan and find what I want.
Con: They couldn’t have grabbed a better photo of him? He looks like a mannequin in a store window. Dead eyes.
Con: The large form is easy to find, but the placeholder text is way too small. Maybe it’s just how I was raised, but big forms should have big text, I reckon.
Round 2: Middle Bits
The candidate’s websites vary wildly after the hero section, so I’m lumping every thing between the hero and the footer into this section. Keep reading to find out why…
Ben Carson
Press enter or click to view image in full size
Pro: News section is very readable. At a 17.6px (rems are used in the CSS), it’s pretty painless to scan the text. There’s good hierarchy between title, date and excerpt. The links look like links. Thumbs up.
Press enter or click to view image in full size
Con: This whole section seems like a waste of real-estate. This is the first module under the hero. As a political lay-person, I’d like to learn more about the candidate, and his stance on the issues. What sets them apart from the rest?
Press enter or click to view image in full size
Con: #AskBen seems like a pretty standard campaign a “Social Guru” would dream up, but why doesn’t that link open up a tweet? I could take a guess that his target demo might not have Twitter? Fair enough, but why isn’t Twitter an option? Clicking the “#AskBen” button loads a gnarly contact form, which is gross (see below).
Press enter or click to view image in full size
Under the “News,” Carson’s website has a social campaign and a quote…
Press enter or click to view image in full size
Press enter or click to view image in full size
Pro: “We Stand with Ben” is an opportunity to get involved. One of the few semi-clear CTA’s on the homepage.
Pro: The blockquote looks nice. I’m unsure of the brown color the quote icon introduces, but it’s very easy to read and clearly related to the page.
Con: Clicking “Upload” loads a completely separate website, with it’s own design and branding. It would have been great if I could upload my photo right from the homepage.
Press enter or click to view image in full size
Ted Cruz
Below Cruz’s hero section, there’s featured videos, and more ways to get involved…
Press enter or click to view image in full size
Pro: Well, well, well, we have a lot of content right below the hero. That can be helpful to users who want to learn about the candidate.
Con(?): There’s a sticky nav. I know I said I liked the menu, but I’m not sure if having it anchored to the top is all that great.
Press enter or click to view image in full size
Press enter or click to view image in full size
Con: The sidebar social widget overlaps the page’s content on my 13" Mac. That’s not fun.
This is a really long homepage, so I’m going to skip ahead…
Press enter or click to view image in full size
Pro: Cruz has a large “event” callout 75% of the way down the page. This seems like a good use of space, since events are pretty crucial to the campaign trail.
Con: Too bad the content here is super hard to read. White text on a white image, what could go wrong!?
Press enter or click to view image in full size
Con: The headline starts with “Next Event.” This seems like an odd choice of copy. What is the event? Knowing that it is a “Watch Party” is much more important than knowing that it’s the next event, why not put a big inviting title there?
Donald Trump
Press enter or click to view image in full size
Pro: There are a couple good old-fashioned CTA’s just below the fold.
Con: The text before these CTA’s is pretty uninspiring. What does “Join Us” mean? A newsletter, mailing list, volunteer?
Con: Now there’s three buttons clumped up together. It’d be great to have a headline to separate the sections of content.
Pro: The news items have some good hierarchy.
Con: Nothing in the news item looks clickable. Can I click the entire tile? The headline? If I click “The Washington Post,” will that take me somewhere else?
Con: The headlines are so small? The stars do nothing for me. So now we have stars on the buttons and on the headlines, where’s next! Need to be patriotic? Just put a bird, I mean star, on it.
Marco Rubio
Press enter or click to view image in full size
Pro: Scroll down a little bit, and you’re in a never-ending grid of content blocks. Content is good, right?
Con: The colors look a little random. I thought we were going for the classic red, white and blue here?
Pro: I like having videos close to the top.
Con: If you keep scrolling, you’ll notice the content just never stops… Without much hierarchy, colorful blocks of content just keep rolling into view as you scroll, and scroll, and scroll…
Press enter or click to view image in full size
Press enter or click to view image in full size
Press enter or click to view image in full size
Press enter or click to view image in full size
Con: It never ends. Extra bonus con!
Round 3: Footer
A webpage wouldn’t be complete without a footer. It’s a great place to store important link that have no home. If a user is looking at the footer you can assume they haven;t found what they’re looking for yet. This an opportunity to provide other stuff, like contact info, or social media info.
Ben Carson
Press enter or click to view image in full size
Pro: Footer social icons are nice, I guess.
Con: The logo in the footer just loads the homepage… While it’s fairly standard that logos return the user to the homepage, this is not the logo I saw in the header, this is a hashtag image. Since it’s inconsistent and a hashtag, why the hell wouldn’t it take me to Twitter?
Con: That attribution, while may be legally binding, is super strange. Why not just hide that in tiny text? 1. Who cares? 2. It looks like a button with that border and rounded corners.
Press enter or click to view image in full size
Ted Cruz
Press enter or click to view image in full size
Pro: I like the big clear buttons for the donation. Makes them attractive targets for clicks.
Con: “Paid for by…” looks like a button but it’s not. Why?
Donald Trump
Press enter or click to view image in full size
Pro: Trump’s footer has some pretty good content. I like the latest tweets during the campaign. Knowing when the tweet was written (4hr) is a nice touch.
Pro: Trump’s the only candidate who’s footer displays a phone number. this could be a great way for less-technical users to get involved.
Pro: I like the big clear buttons for the donation. Makes them attractive targets for clicks.
Press enter or click to view image in full size
Con: Now we’ve mashed up the weird headline-stars with a Twitter icon. Ugh.
Con: The alternating red colors in the band are confusing as links. Are those buttons?
Con: “Paid for by…” looks like a button but it’s not. Why?
And The Winner Is…
Press enter or click to view image in full size
Ted Cruz
6 Pros, 6 Cons
With an even score, Cruz is our winner here. His home page manages to supply some useful information while not offending usability too much and getting too flashy.
The Runners Up
Press enter or click to view image in full size
Ben Carson
6 Pros, 8 Cons
While having just as many Pros as Cruz, Carson’s “Middle Bit” really anchored his score down and out of the top spot.
Press enter or click to view image in full size
Marco Rubio
4 Pros, 8 Cons
Rubio’s home page can’t get past a never-ending masonry grid of random content.
Press enter or click to view image in full size
Donald Trump
6 Pros, 8 Cons
Trump’s home page has its moments, but ultimately the negatives outweigh the positives.
Conclusion
So there we have it! Ted Cruz rides his home page to victory in Iowa. I’ll be doing the Democratic candidates as a follow up to this article, so follow me here on Medium so you’ll see the it. Also, click the heart icon below if you’d like other people to read this!
By the way, these teardowns are just my opinion, and not that of my employer.