Design View | Articles and opinion on design professionalism, technique and culture by Andy Rutledge

White House Redux

April 24, 2006

It is widely believed that The United States of America is the most powerful nation on the face of the earth (meaning different things depending on who's saying it). The world moves, in some measure, to the beat of its economic drum and worldwide policies are shaped to some degree by its concerns and motivations. So “The White House = Power” is not an obtuse statement to make.

UPDATE: Since this article was written, the White House website has been redesigned [Feb. 2007]. So the specifics expressed in this article regarding the “current” site must be taken in context, relevant to the design depicted in the screenshots below.

Even so, one could never be made to understand this idea by looking at The White House website because The White House website looks like a podunk, backwater town’s newsblog.

(In answer to the questions of some, no, I did not land the White House redesign gig. This is just an exercise to address some design mistakes on the current site. Enjoy. And by the way, this is not a "real" redesign effort. I typically require 25 to 40 hours of discovery and design crunching in order to present a design. For this one I took all of 1 hour to mull things over, so try and ignore the result beyond addressing the issues cited in the critique. I repeat, this is just an exercise.)

* * *

With this design examination and redesign suggestion, I have a premise. As I’m not privy to The White House’s aims and purpose for their website, I’ll have to make some arbitrary assumptions to work from. In a real redesign effort, I’d have to conduct an exhaustive discovery process and amass a comprehensive collection of relevant, contextual information in order to do a credible job. In this case, however, I’ll have to imagine that I’ve done that and now understand the following aims and purposes for this site:

But wait!” you say. “How then can this exercise be anything but a fantasy if there’s no real information on which to base decisions?” Well, the fact is that this site has a host of design problems – real design problems that I’ll examine and suggest remedies for. Also, there’s that business of the website for a seat of world power conveying very little in the way of gravitas.

So as with previous Redux articles, my purpose here is to cite specific design mistakes, describe why they’re mistakes and suggest fundamentally sound remedies to them. And, again, I’m talking about visual interface design issues and how they affect usability, theme and overall message. Surely, if ever there were a website that needed to convey a strong, consistent message, it’s this one.

White House.gov

Here’s the current main page for the website:

The White House main page

In a word: uninspiring. Right off the bat, in addition to the overall blandness of the page, there are a host of design issues that tear at the visual utility of the page.

Header and Navigation

proximity issues

The entire header area is crowded and ugly. Yes, ugly counts, especially when you’re talking about typography. First, the logo and the main navigation have serious proximity issues. The logo should be allowed to “breathe,” not be crowded by the navigation. The too-close nav element detracts from and robs gravity from the logo.

Navigation

Next, look at that navigation at the top. To begin with, it doesn’t even really look like navigation. It’s the same font as the logo (a mistake) and the font is difficult to read, especially at higher screen resolutions. Note also that the configuration of the email updates and search function is a bit confusing.

And to top it all off, the overall look and feel of the page header area – the area that sets the tone for the page - is anything but compelling. For a site like this one, I’d say that’s a mistake.

Main Content Area

There are some overall issues and specific issues concerning the main content area that should be addressed. Overall, the entire content area is rather flat and featureless. There are some efforts made toward defining an information hierarchy, but the result is not very successful.

The de-emphasizing of the left side navigation helps to provide emphasis for the main news items in the middle, as does the news item headlines (in blue). But the addition of the cheaply presented photo and cheesy imagery on the right hand column makes the whole page look trite and amateurish.

disassociated imagery

Furthermore, the entire page lacks any cohesiveness for, among other reasons, the fact that there’s no consistent use of any graphic style or form motif. Icons and button-like elements are all over the map: straight edges, round corners, slanted lines, inconsistent coloring. What even is that icon beside the links at the bottom of the primary news stories? It’s all pretty meaningless and chaotic.

The “box-o-features” over on the right hand column is simply a disaster. The first thing that I notice is how trite the box border around this element seems. The grab-bag of imagery for these features really junks up the page. It looks like a bunch of advertisements one would find on the NY Post’s site.

really bad headings

To top it all off (literally) the section headers for these features are very badly done. Aside from their own individual issues (as referenced in the graphic above), they add to the overall chaos and inconsistency of this entire page.

The bottom line is that this page’s design fails to communicate anything except inconsistency and blandness. While it should be engaging, it’s boring instead. While it should be intuitive and affordable, it’s confusing instead. Oh, and the code and construction of the page is utter crap (to use developer lingo).

A Redesign Suggestion
White House Redux

View a full-size image >>

See it coded up >>   (a bit of fun by Daniel Ritzenthaler)

The overall look and feel is kept quite conservative. The few softer edges and textures in the page structure are there to offer a slightly more approachable feel to the page and, therefore, the administration. Red, white and blue colors figure prominently in the design for obvious reasons.

With this quick and dirty redesign suggestion, I’ve tried to be a bit more economical with the space. Instead of several news stories, I’ve placed one featured news story in the most prominent position. Those who have come here for news can follow the “more news” link or one of the many news links below for more.

The logo is supported by a positive looking image of The White House. The presence of blue skies, green grass and a spring fresh look beside the featured news item helps the administration in its effort to put a positive spin on the news of the day or moment. This is, after all, The White House’s own site.

The site is large, and so the secondary links below the primary news section are placed prominently, all grouped in one block rather than extending down the entire side of the page. The regular features of the site (on the left and at the bottom) are now made a bit more visually palatable and some good news eye candy is added in the form of a couple of photo essay introductions (bottom main section). Gone is the hodge podge of silly imagery in favor of a more conservative and professional look.

Conclusion

I think that this design suggestion brings a better focus to the content and a more positive and worthy look and feel to the main page of the web site that represents the most powerful seat of government on the planet. Yes, this was hastily done and lacks some certain details. The point of this exercise, however, was to correct some glaring mistakes and deficiencies in the current page design and layout. Try not to read too much into the look and feel of this effort, but dwell more on the elimination of needless inconsistencies and the introduction of perhaps a better information architecture.

In any event, I hope that my country’s administration website gets a facelift sometime in the near future (oh, and a code revamping, because …damn!). Perhaps the real test for any who care to comment on this effort will be to see if they can stay on topic and leave politics out of it. Something tells me that may prove to be too difficult a test.

Archives

Archive

Practice