Presidential Design p2

by Jin, 09-06-08 // 9 comments

In my previous article, I analyzed Barack Obama’s campaign site, and talked about how well it’s designed. My original plan was to include a brief comparison to senator John McCain’s site. Due to the length of the article, and fairness to Mr. McCain, I think it’s only appropriate if I give his campaign site an unbiased review as I did for Mr. Obama.

I humbly suggest you to visit both presidential candidates’ web sites first, to form your own opinions before reading this article.

www.johnmccain.com
www.barackobama.com

Mccain's site

Visual

When I visited McCain’s site a few months back, it had a different design. Seeing the new site, I have to say it’s an improvement over the older design. In comparison, the new design is more modern, better laid out and more organized. However, what bothered me about the old site still exists in new site.

Mccain site

As soon as I arrived at the new homepage, I was very distracted by the different colored icons, buttons and banners. Not only was the color scheme distracting, but their styles were also inconsistent. The page as a whole looks very busy. It almost feels like several designers with different skill levels worked on parts of the page individually, without communication, and then slapped their piece together last minute for the final finish.

Let’s start with the things I do like:

top nav

The top navigation is pure css/text based. It’s probably the cleanest, most up-to-date looking element on this entire page. It’s a big improvement over the previous image-based buttons.

news event section

The News and Events sections are also fairly clean and easy to read. I like the big type used for the header text, they divide the sections well. Normally, I like photo thumbnails on the front page to serve as fresh content, but in this case I feel the photo section only adds more noise to an already busy page.

I’m afraid that’s all I liked about the front page, at least from an aesthetic point of view. Now, onto the rest:

buttons

The year is 2008, and yet these buttons look like they’re from a Photoshop tutorial exercise in 1999, done poorly. Not only is the glossy effect sub par, but also the glow, glare, and padding of the text are inconsistent. You can find different types of buttons throughout the site.

Icons

When it comes to putting icons on a site, my philosophy is to evaluate the need for using icons first. If icons are to be used, then they better look like they’re from the same high quality set. Mix and match icons not only add noise to the site, but also scream unprofessional work.

stock photos

I’d imagine both campaign teams have access to a huge collection of professional portrait shots of their candidates. I’m a bit surprised by the stark difference in choices here. As I said in the previous article, Obama and Biden’s photos look polished, appropriately post processed to convey the presidential look. Whoever Photoshoped Sarah Palin in clearly did not bother with any touch-ups at all. A simple tone mapping could’ve made the photo more professional. McCain’s web site header reminds me more of a local TV station’s, than potential world leaders.

I am not too crazy about the pose either. It’s possible McCain’s team wants to portray their candidates as more approachable, therefore the eye level shot instead of a low angle shot. This is not my complaint. My complaint is that both them of look hunchbacked.

Lastly, I’m surprised McCain’s site also uses blue as the main color. I expected red. Red is being used for the Republican candidate throughout this whole campaign. I admit, red is a tricky color to use, especially for a theme color. When used properly, it energizes and motivates. When used without much design thought, the site can burn with a bloody mess. I assume the designer went with a safer route.

Layout

The challenge in designing site layout is to consider both the front page, and the rest of the site. The front page typically serves as an introduction page, with a different type of content than the other pages. The McCain site’s overall layout is a pretty standard two column like Obama’s. However, I don’t see why all the pages under “Coalitions” launch in a new window, with a totally different layout. There are many sub pages that have different layout too. It’s OK to have different layout for some sections, since there are many sites within the site on a huge project like this. However, due to inconsistency in design execution, these inner pages look like they’re just dragged from somewhere else.

The site looks like it’s aimed for a minimal 1024width screen, however when I resize my browser to 1024×768, I see a horizontal scroll bar.

Unlike the Obama site, McCain’s site has a search feature. See if you can find it.

Technology

The site is a lot more up-to-date than the previous version in terms of deploying current web widgets. From the Ajax photo gallery viewer, to blogging and video streaming. At one point I saw a section that had a social networking side bar similar to that on Obama’s website. However, it was deeply buried somewhere on the site I could not find it again.

Usability

At this point I can’t say I’m qualified to give a fair review on usability, since I went to just about every page on the site. Overall, the site is pretty straight forward. The navigations are clear. However, Site Map section needs to be updated to reflect the whole site. A well designed site should be consistent throughout. Users shouldn’t have to relearn interface, layout after having visited the first few pages. As mentioned earlier, the layout and graphical elements on this site are not consistent, which takes the users longer to adapt to the site.

On some pages, even the textual content is confusing.

press release

Why is “Press Releases” header appearing twice? This is true for the other sections under “News & Media.”

When I disabled javascript and css on McCain’s and Obama’s site, both did fairly well degrading. However, I noticed on McCain’s site, the “Volunteer HQ” section on the right sidebar disappears with javascript turned off.

Conclusion

Despite negative critiques, I give McCain’s campaign team credit for the effort of continuing to improve their website.

older design

It’s always interesting to see how a site’s design evolves over time, especially when it’s for the better. Senator McCain’s latest site IMHO is an improvement. However, it’s also disappointing to see after several redesigns the campaign design team still doesn’t get it.

So what is “it?” If the site provides the functionalities and information, isn’t that enough? McCain’s site is a workable site, a decent one even. However, it fails to brand senator McCain as a candidate, as a republican. The website does not reflect of who he is at all.

When we design a web site for a client, we’re essentially helping him/her to sell something. Whether it’s a product, or a service, in McCain’s case: selling him to the American public as the next President. This is why branding is important, and Obama’s web design team totally nailed it. There are many things to consider when it comes to marketing a candidate, here are a few I can think of:

McCain’s campaign team does a good job of marketing him on TV, radio and print media. But when it comes to his web site, it’s just not up to standard, especially compared to Obama’s. The web is one of the most powerful mediums for marketing today, an equal amount of effort should be put into it. What made Obama’s site a success, is not just because of pretty graphics alone. His design team understands branding, and possesses superior design skill. It’s all about the whole package.

9 comments

also feel free to contact me on twitter or via email
Chris Moran 09-06-08

Nice writing style. Looking forward to reading more from you.

Chris Moran

Jin 09-06-08

Thank you Chris.

Lina 09-06-08

Great review. I think you were pretty fair and well voiced in your opinion. I agree that as a whole McCain’s website is not up to par with Obama but it’s understandable that McCain’s campaign caters more to TV, radio, and print as that is what the whole of America seems more comfortable with engaging in. Having worked in digital media, the web is a powerful mean of communication but it’s also the hardest to control, manage, and break through for Americans ingrained in the usage of medium that they have grown up with. It’s not to say that those who do back up McCain are hermits stuck in the 70s but they are more conservative and to embrace a new medium does take time. Why waste money on a medium that seems unlikely to help push a campaign? I’m sure it’ll change but overall, I think McCain does have many great campaigns…it’s just a bit unfinished….or not as well thought out…or it feels very scattered and disjointed…just enough to cover up what needs patches without finding the root of the problem.

Bryan Chain 09-06-08

i think McCains site reflects him as a candidate, old and out of date, dying quickly, unattractive.

Jin 09-06-08

Lina said “It’s not to say that those who do back up McCain are hermits stuck in the 70s but they are more conservative and to embrace a new medium does take time. Why waste money on a medium that seems unlikely to help push a campaign?”

Thanks for your comments Lina. The way I see it, McCain’s supporters will vote for him no matter what, even if he didn’t have a web site. The same is true for Obama’s too.

The ad campaign has the most impact on swing voters, or people who are typically apolitical. Stereotypically speaking, they tend to be younger. Obama’s site is more effective selling to this demographic.

Senator McCain is often attacked by his opponents as old and out of touch, that’s why I think it’s even more crucial for his site to reflect him as a candidate who’s with the current trend, and adaptive to change.

And lastly, the outcome of his site may not be a budget issue. IMHO, It takes the same amount of money to create a bad site as a good one. It comes down to the creative direction and focus.

Dmitry 09-15-08

Regarding the hunchbacked look of McCain and Pail: I think they were shot slightly from above than at eye level — probably with the direct intention of making them look approachable as you’ve said and more like people who will serve you, instead of the other way round. In contrast, Obama and Biden are shot from below, elevating them above you so you know who’s boss.

I think the shot from low angle is the right one in this context. You want to ‘look up’ to the president because he/she is a leader. They need to have an image of power so that they can give you confidence in their abilities.

Overall I think McCains site looks very unpolished and incoherent — you have all sorts of typography, icons and colors jumping around the place. Obama’s site is orderly, clean, has a better layout and also features more polished imagery.

I think the quality of the site depends on the lead designer. You need someone with good taste and real skill in charge, who is committed to deliver a good product and doesn’t let others destroy the vision that he/she sets out. You need to keep the basic style and feel on track and focused, otherwise your design will be killed by committee — too many cooks spoil the broth.

Jin 09-15-08

I agree Dmitry. Design by committee often kills a good final product, because everyone involved wants to have a say. And typically person on top of the command chain wins.

This is why a creative director, or lead designer is important as you said. Someone who not only knows the trade, but also knows how to sell the design direction and executes it to the fullest.

Thank you for your thoughts.

Ian 10-12-08

Its nice to see something combining two interests of mine, politics and web design.

I have to say, you’re exactly right with all the points raised in here. Personally, I think in terms of web design, Obama is superior, and the same can be said with his politics.

The McCain camp needs to catch up, and fast, election day is closing in, it won’t give the best of impressions for voters.

Jin 10-12-08

Thanks for the comment Ian.

It will be interesting to see what type of web arsenal candidates uses in 2012.