Plog: Links, Articles, & Editorial by Perry Garvin

Site designed by Perry Garvin Studio

Whitney Website Redesign

Whitney Museum of American Art whitney.org website redesignThe Whitney Museum of American Art has needed a new website for years.  Information was increasingly hard to find, navigation was inconsistent, and the site’s design was of variable quality.  Some sections were outstanding but many more areas were confusing and poorly laid out.  Overall, the site struggled to clearly present the museum’s wide range of programs.  It also wasn’t suited to showcasing multimedia and integrating with social media services like Facebook, YouTube, and Twitter which are increasingly driving museum visits.

Fixing all this required a redesign and after a long incubation the Whitney has relaunched their new site.

They enter a highly innovative field.  The past three years have seen growing recognition among museum management that mission is enhanced by a robust online program.  The Indianapolis Museum of Art, Brooklyn Museum, Walker, MoMA, and SFMOMA have upgraded their sites to enterprise-level content management systems delivering gigabytes of audio, video, and text to millions of viewers annually.  As museums have increased their digital output and come to recognize that “audience” includes a vast online public, directors are coming to realize that an intuitive, attractive website is a worthwhile, mission-critical investment.

2008 saw many museums of the Whitney’s caliber relaunch their websites including the Hammer Museum, Guggenheim, MoMA, SFMOMA, and Museum of Art and Design.  These organizations produced polished, professional sites to serve as content delivery platforms for a swiftly expanding online audience hungry for museum content.  It’s against this backdrop that the museum community has been eagerly awaiting the Whitney’s entry into the field.

It’s a shock, then, that the new Whitney website not only fails to improve upon its old website but actually ends up being worse.  Visual confusion, counterintuitive navigation, and illogical organization put it on par with its predecessor but setting it a step backwards is an absence of a compelling design that knits the site together into a coherent whole.  The lack of color, proper division of page elements, and clear information hierarchy leaves the viewer with pages where content floats without clear order or priority.  Perhaps more dispiriting is how generic the site feels.  It’s lifeless.  More a wireframe suitable for preliminary development than a digital platform to project Whitney mission and programs.

If this was a lesser organization such a website would be a shame.  But for the Whitney it’s a liability.  In a highly competitive culture industry, the Whitney needs to continue to assert itself as the dynamic, relevant, and high-quality organization it is.  When its website declares the opposite – that it’s pedestrian, unsophisticated, and banal – the brand takes a beating and its reputation is called into question.

Breaking It Down

12 RSS feeds are available for fine-grained subscription to specific site content and 9 iCal feeds allow for users to keep tabs on the museum’s date-based programs.  A “Your Collection” feature allows users to select and save images, video, and web pages from the site.  Internet art projects will be integrated into the site which – while at first blush appearing little more than gimmickry – will likely be worthwhile given the Whitney’s strong track record of supporting digital art through its ARTPORT.

The site features a completely new design and re-ordered information architecture.  And this is where the site’s problems begin to appear.  7 main categories on the old site have ballooned to 17 main categories on the new site.  Redesigns usually reduce and simplify than expand and complicate.  The new site obfuscates a clear visual flow of hierarchical information.  Little is grounded by bordering, shading, or sectioning (the common methods in web design).  Instead, content blocks float in white space without adhering to a consistent grid.  And within that white space, text leading is used to differentiate sections but that type is of inconsistent style and positioning across the site.

I counted over 12 different link styles:  blue underline, bold black, bold grey, bold blue, bordered black, green background, light blue background, yellow background, grey background, white text on black background, white text on red background, bold black with grey underline, and orange.  It’s such an overwhelming array, it suggests that anything could be a link – a paralyzing position to put a user in.

Since the site is designed exclusively with text and that text is styled in no consistent way, the site’s color palette is hard to define but if pressed I’d say it’s black, white, and forest green.  When I think of the Whitney I think of slate grey – the color of the building.  A proper design should build off of this color and incorporate complementary hues that draw connections between the website and the museum location.

Navigation Problems

The main vertical navigation bar breaks basic user interface design rules over and over again.  First, its 17 top-level options need to be reduced.  Even the old Whitney nav bar was better than the new one.

Whitney Museum of American Art whitney.org new and old nav bar

The priority of information within the bar is also questionable.  Is “Support” and “Membership” – the first two links – more important to a visitor than “Visitor Information” or “Exhibitions?”  Certainly not.  Is “Support” and “Membership” of greater importance to the museum than its exhibitions and events?  I hope not.  The “About” section features fascinating information about the organization’s past and promising future but isn’t even a link on the nav bar.  It’s sunk to the bottom of every page, relegated to what is effectively a website’s graveyard.  Is the museum’s history that irrelevant?  I doubt it, but it’s sending a disconcerting message.  Social media platforms like Facebook and Twitter that increasingly drive word-of-mouth traffic are hidden in the “Feeds and Email Notifications” section.  They’re doing great things on these sites and should elevate them to the top-level or at least group them in a logical category.

The navigation bar violates the most fundamental rule of user interface design: persistence.  Instead of remaining in the same place when you click a top-level link, that link is pulled out and elevated to the top of the list.

Before clicking:

Whitney Museum of American Art whitney.org navigation bar

After clicking “Exhibitions”:

Whitney Museum of American Art whitney.org navigation bar

When you click into certain sections – “Education,” for example – links that were once in the nav bar disappear (“For Kids / For Teens”).

Whitney Museum of American Art whitney.org navigation bar

Sections two-levels deep make the higher-level parents disappear.

Whitney Museum of American Art - whitney.org - Nav Bar

Inconsistency like this is considered unsound by professional web designers because it breaks the convention of a persistent navigation bar where high-level content sections stay put no matter what.  A nav bar with sections that move or even disappear makes a site feel unpredictable, leading to visitor exasperation.

Other oddities include subsection links that because of their green color appear visually to be of higher priority than their desaturated parent and horizontal navigation links within a vertical link structure.  “Film / Performance” are actually two separate sections masquerading as one.  When you click “Film” it’s pulled to the top leaving “Performance” behind even though it’s on the same line.

Visual Design

Visually, the site’s elements are adrift as if they’ve been casually dropped onto the page.  The lack of a uniform grid and an absence of grounding makes viewing page content difficult because everything appears of nearly equal importance.

Let’s look at the “Exhibitions” page:

Whitney Museum of American Art whitney.org exhibitions page

The top “Your Collection” strip should be sectioned off from the rest of the site content because it’s part of the website and does not specifically refer to the page.  The Whitney logo should be flush with the vertical nav bar’s left margin.  The nav bar should be drawn up to match the horizontal alignment of the page title.  Images should be equally sized and in horizontal alignment with one another.  The border around “more info” should be removed to indicate its lesser importance in the order of title and date.

Problems like these abound on nearly every page but a redesigned template could pretty easily fix them.

A harder fix is the “Education” section where a collection of ambiguous phrases in orange lettering appear on the top of that section’s landing page.

Whitney Museum of American Art - whitney.org - Education

It’s unclear what one is supposed to do here or how one should choose where to click.  “Curiosity” may be an option they provide but “Confusion” is really what I’m thinking.  I don’t know where I’m going to go or what I’m going to get when I click one of these links (I assume they are links – but perhaps I shouldn’t since they aren’t underlined – another convention disregarded).  When I do finally decide that I’m “playful” I am presented with a page but no indication through a bread crumb or a nav bar entry where I am.  The navigation system here completely breaks down and a user is adrift in a sea of links without reference or bearing.

“Your Collection” vs. “The Collection”

The “Your Collection” feature allows users to collect pages, images, and video from across the site and store it in a personal user account for future access.  This would have been innovative had MoMA not already introduced an identical feature more elegantly implemented on its own site months ago.  I’m skeptical of the utility of such a tool.  I think a more effective approach is to design a site that enables visitors to easily export site content to whatever content aggregation service they’ve adopted (Delicious, Evernote, Facebook, Tumblr, bookmarking, etc.).  I suppose these “collections” features are supposed to increase site stickiness but I think they probably just go unused.

“Your Collection” is not to be confused with “The Collection” which is a growing online database of the museum’s permanent holdings and is the new website’s highlight.  Images are impressively sized, and navigation – though rudimentary – is at least functional.  This section holds great promise.

In Conclusion

I’m not sure what went wrong here.  How could a museum as first-rate as the Whitney have produced a site so inferior?  Linked by Air – the development company the museum hired – should shoulder much of the responsibility.  Apparently the backend is robust and well designed for the staff but this must not come at an expense to the end user.  The failure to successfully integrate a strong back end and an elegant front end throws the firm’s credibility into serious doubt.  I would also venture to guess that the museum had no dedicated project manager familiar with the web to help guide the museum through the thicket of options.  There may also not have been the will to redirect a project going down the wrong path.

I have great confidence in the Whitney.  The staff is enthusiastic and recent hires indicate an institutional understanding of the importance of the web.  Although this particular site is stillborn, I’m certain that with a new developer and a strong project manager the Whitney will retool their site into something they – and the museum community – can be proud of.

Update 11/13/09: In the interest of full disclosure, I’m the Digital Projects Manager at the New Museum of Contemporary Art.

  • Doron

    Very good review, the site is awful. its surprising how bad it is.

  • Kat

    I couldn’t agree more!! How did this happen?? It’s so self-consciously hipster in aesthetic, it’s almost an Onion parody of how some kids from Yale (Linked by Air) who live in Brooklyn wd design a site.

    My question is WHY DID THE CURATORS APPROVE THIS RED HOT MESS????

  • Kat

    To follow up:

    Just clicked deeper into the nav and my head almost exploded. That is some crazy-bad IA.

    The night view + green nav + yellow underline = web design disastre

  • R.H.

    Disappointed with the site as well. My first reaction was “Why the dark green? Is that their new brand color? Seemed arbitrary.
    Wonder if there was an earlier incarnation in the redesign process that looked better… would be curious if this was designed by committee, or just poorly executed? They should hire you as a consultant! :)

  • Lisa T.

    Agree w PG that consultants should shoulder a lot of responsibility, but one has to wonder how this got green lit in the first place? It’s a museum: You would think they could spot bad (maybe TERRIBLE) design when it’s staring them in the face!

  • justin

    Did you notice how the background turns from a white to black gradient to a black to white gradient at night? It messes with the visuals and link confusion even more. But of course, an art museum is the place I always turn for updates on the transit of the sun.

  • http://www.perrygarvin.net Perry Garvin

    The white type on black background (what happens at night) is another UI no-no. Study after study has shown that inverted type is harder to read and less remembered. I like the idea of the project where the website is “interrupted” at sunrise and sunset by orbs of light floating over content. The problem is that it will probably distress the majority of site visitors who aren’t so web savvy and might think something is broken. Before they start implementing art projects they need to start addressing the basic problems.

  • Gina B.

    I think you’ve done a really good job highlighting the shortcomings of this site. The only point to which I would object is the need for a project manager to save the day. I’m a senior web designer/developer in advertising and it is pretty standard and, sadly, tolerated that project managers have little to no knowledge of web technology. Instead, what this project lacks most glaringly is an information architect as well as a designer/art director with a solid understanding of user interface design, typography, and color theory for the web. The design’s lack of aesthetic, incoherence, and inconsistencies strike me as laziness rather than revolution. The “design” company’s own site is a shitstorm in its own right (an endless scroll of news dating to the year 2000?) and suggests to me a classic case of a competent developer with simply no sense (or care?) of style.

  • L.R.

    Should the firm should shoulder most of the responsibility? After all, if the process was as collaborative as the Whitney claims it was, then the primary responsibility for this project’s failure lies with the institution. And I do think that this site’s shortcomings provoke some serious questions about the Whitney’s legitimacy as a contemporary art museum. This glaring inability to grasp the basics about technology and the Web makes me wonder how they can claim any kind of authority when it comes to evaluating contemporary art and culture. An embarrassment for the museum community.

  • http://able-archer.net Daniel

    The Whitney site is not very good, and you point out many reasons why. I do think it’s quite a bit better than the New Museum’s site, though. As their Digital Projects Manager, how responsible are/were you for the latter?

  • Katie

    One very positive note that you did not cover. The Whitney’s new site has dynamic content — audio guides, videos with artists, conservation case studies, rich exhibition archives. Where is this on the New Museum’s rather stale site?

  • Francessa

    Hi Katie:

    I don’t think the New Museum’s site is stale at all. In fact, they have been doing great things with digital art and technology since the 90s (via mark tribe’s work w rhizome etc.); most people in the arts community will acknowledge this much. Also, the site has a ton of great multimedia (photos, audio, video): You should really check it out.

    http://www.newmuseum.org/exhibitions/417/urs_fischermarguerite_de_ponty
    See where it says “audio,” “video” etc.

    I don’t understand why people are taking his critique so personally. Perry made some very valid points, and I think it’s a compliment to the Whitney that people only expect first-rate work from them. I’m sure the firm at the helm did not mean to screw up, but the fact remains that this project is an unmitigated disaster from an IA/UX perspective (see Edward Tufte if you don’t believe me..), and I’m not sure it really works from a visual design perspective (but that’s more subjective). To resort to a cliche, you have to know the rules before you break them.

    I for one am happy to see web criticism coming into its own. I thought this was a very well-written piece, and I hope more people approach website critiques with this level of attention and expertise!

    Francessca

  • Andrew

    Previous work by Linked by Air:

    http://so-il.org/
    http://maryping.com/
    http://art.yale.edu/

    This is avant CSS and graphic design, mostly. Nothing to suggest the discipline to handle a project of this scale, which should have been instantly recognized during the RFP process. It reflects horribly on the museum, not the kids they hired.

  • http://able-archer.net Daniel

    Francessa, the New Museum has long had a rich involvement with digital media, but its site is a separate matter. I am by no means an IA/UX expert, and what I know about the New Museum’s site and its shortcomings all come from its use as a case example in a graduate-level IA/UX class I took over a year ago (the only such class I took). Unfortunately, it was used as a “bad” example and our final assignment was to suggest remedies for its shortcomings. It seems many of those shortcomings have been remedied in the meantime, but many have not. I would start first with the use of Flash. I don’t know how a site that aspires to any level of accessibly could justify having Flash at the top level of navigation. Perry has proved himself to be an astute and thoughtful critic and a great designer, so I wonder how such things slip by on the New Museum site.

  • UI Robot

    Funny, I thought this post was about the Whitney’s new website, not Perry Garvin and the New Museum website.

    Anyway, back on topic. I thought Perry’s critique and comments were spot on for the most part, he breaks things down well. Gina B., Francessa, and Andrew provided some additional insight too, thanks for the good read.

    I’ve been writing this with the Whitney website in another tab and that throbbing favicon really makes me want to close the tab. It’s almost symbolic of how I feel about the site. The design actually detracts me from the website and the “look what we did” features don’t make up for the overall user experience. The website may be full of great content, but if it is difficult to use and hard to look at, I don’t want to be there. It’s as simple as that.

  • http://www.google.com MS

    The real question is not ‘is this organized well’ nor ‘does this follow the rules of user interface design as Edward Tufte defines it’ but rather, does the Whitney.org homepage convey the mission of the institution? And the lack of a clear answer to what the Museum’s mission is, across all of the Whitney’s written and visual materials, is the real source of the problem.

    “New” in “New Museum” is pretty obvious, and so is “Modern” in MoMA. Even the abbreviation of MoMA communicates that institution’s values. “New York City Ballet” has its constituent group and its offering in its name. But what is “American Art”?

  • http://www.vincentroman.com/blog/ Vincent Roman

    Perry -

    Excellent post and I am glad to see that others hold the same opinion as me and have taken to lengthy discussion of the topic as have I. You can find my review of the new whitney.org here:

    http://www.vincentroman.com/blog/a-review-of-the-new-whitney-website/

    Much of which mirrors what you are saying.

    To respond to MS, I think that the mission of the museum is important and whether or not the site conveys that is important also, but at the same time, they have a commitment to site and museum visitors to make the experience as accessible and as easy as possible to use. We are not in a game here to figure out how hard we can make it for users to find what they need on the site. This is about common sense and a clean approach to inviting those who are already interest in what you offer, in.

    Whether you think the site is cool or not doesn’t belie the fact that there are both legal and unwritten obligations in design sites, and if you aren’t going to follow them you might as well pack up shop now.

    Thanks again Perry and to all those wading in on this conversation.

  • Pingback: Another Take on the New Whitney Website | Plog

  • http://www.el-tercer-brazo.com/ Steffen Boddeker

    Thanks Perry for this thoughtful breakdown. A very relevant discussion not only in light of the Whitney site, but many other museum sites in the process (or need) of redesign.

    I am especially interested in your comments about the My Collection section, and share your inkling that these features probably don’t get too much repeat use in the long run. It would be interesting to understand more about this aspect. Many are fairly recent additions to museum sites, but I wonder if anyone has shared info on user behavior in these log-in sections.

  • http://www.vincentroman.com Vincent Roman

    Steffen, have you actually tried to sign up and use the my collection feature on the site? I did, and I can tell you some of it makes NO sense. The collection is really a library of bookmarked pages, as you cant actually add images to the ‘collection’ and as a result when you go to the ‘slideshow’ element of My Collection, it kind of makes a joke out of the process of watching the collection. There are plenty of other flaws i could point out, but those I think are for review No 2 :)

  • http://www.el-tercer-brazo.com/ Steffen Boddeker

    Vincent – yes, I did sign up to try it. This tool is not well developed for any collection over 5 objects, and one of the biggest draw-backs in my view is not being able to create notes associated with specific elements. Placing these at the bottom of an endless page is a little like putting a post-it on my desk.
    My question here was if Perry or anyone reading knows of any quantitative info on the long-term use of such register-and-collect tools beyond the Whitney. I wonder how much repeat use even more sophisticated ones like MoMA’s get.

  • http://www.vincentroman.com Vincent Roman

    Steffen, I am in the same boat as you. The form for signing up was a little bloated and hould really have required nothing more than a username and pass. As you suggest beyond 5 links and 1 pages of collected items the thing is unusable. There is no collection specific search/filter which would easily fix that problem. Another thing I hated was that there was no obvious limit on the caption text and it was merely truncated without warning.

    Regarding the dataset which you were talking about, all I see is code for Google Analytics. I doubt they are using anything else like Omniture for more detailed analysis of user journeys etc. Who knows how much they have thought about sch things. The notion that they haven’t thought at all about it irks me.

    By way of example, if you go to the old Calder artist page it 404s, ie. PAGE NOT FOUND. This is dumb, because it is not like the content has changed. Google and other services advise webmasters to use 301 redirects to advice spiders that the content ha permanently moved and to garner the new address so that indexes can be updated quickly and traffic not lost. Given that on top of this the design of the 404 page s awful hardly helps. Compounding this, from what I can see is that they have NO sitemap.xml file telling the spiders where to find the most up-to-date library of links on the site.

    Anyhow, back to the long term use of such tools, unless they are all using the same services its harder to compare like for like, and i doubt anyone would necessarily openly talk about such stats, well perhaps the IMA would. The only way to make sch things as sticking as possible is to make the functionality as simple and as effective as possible to use and to make it relevant to the everyday lives of its users. In terms of prior art, Digg, Delicious and even functionality such as Last.fm’s library and song kicks resources tracker. Forcing people to use one site though is a mistake and embracing many of these Web 2.0 services, as suggested by Nina Simon, is definitely the way to go, people don;t need more places to go, they need better service int he place they use already.

    Anyhow, I can’t stay on topic so will hush for now :)

  • http://www.hollistercreative.com/ Terry: Hollister Design

    I enjoyed your “step by step” assessment of what was going on with the Whitney’s website and how you chose to address it. Inconsistencies in type, visual design and navigation really impact the user; every site should act to improve their user experience by improving consistency.

  • Pingback: Website Updates & Handling a Negative Response

  • bullet

    New Whitney website is quite beautiful visually and easy to navigate then any other museum websites out there.

  • pixel8te

    FWIW, colleagues who know the firm’s principals say they are well-liked and affable, and have chosen to not criticize the site on these grounds. I do think civility has its place when critiquing work, and I agree with the above commenter who said this reflects worse on the org’s decision makers than the firm. That being said, anybody who looks at the site’s source code would have a hard time arguing that this site was well constructed. No doubt, unreasonable client demands and timelines (mainstays of any web project ;-)) are partially to blame, but still…

  • http://doctordada.com/ Jonathan Cooper

    Interesting reading. There are some aspects of the new Whitney site that I quite like, but I agree: menus where individual items leave their position in the stack and scoot up to the top is disorienting, and odd. As is the pseudo-tag-cloud on the Education page. Vincent Roman ridicules the “My Collection” feature and the way you can add PAGES to it and watch it as a slideshow, but I like it. Definitely a site to watch.

  • http://www.vincentroman.com Vincent Roman

    Jonathan, thanks for the comment and glad you generally agree. I ridicule the collection feature because, although I like it, its execution is weak. More time, effort, and proper thought to make it a coherent element within the Whitney site and I would be the first wont to give it awards!

  • Gemma

    i’m surprised that the whitney hasn’t implement amy post-launch fixes or addressed the blogosphere’s critiques of the site. this stonewalling attitude seems to undermine the very spirit of the website and its mission to engage with the art and museum community in a meaningful or relevant way.

    on a positive note, i just caught a glimpse of the metropolitan museum of art’s new website–beautiful work.

  • http://culturesystem.org MikeM

    So often, people think a Web site needs to be pretty (this isn’t) and full of multimedia and interactivity without understanding that you first need to make a ton of information as easily absorbable and accessible as possible.

  • http://www.vincentroman.com Vincent Roman

    Mike, I don’t think anyone is even advocating something pretty. Merely usable, functional, and properly instituted would be nice!

  • http://kelvin.com Kelvin

    This review is terrible. It assumes a lot of things that could only be known if you were in a conversation with the institution. For instance, the comment regarding Support & Membership. I wouldn’t be surprised if these are 2 of the most important things to the museum considering this is what really allows a museum to operate and museums are really struggling these days. Things like Exhibitions are absolutely important but more often than not people visiting the site are seeking info on Exhibitions so they already have their radar on for those words and could easily find them.

    Second, this site functions more as a tool than most museum sites. Page structures are different for what appear to be logical reasons. For instance, Education sections feature tag clouds prominently which brig popular terms to the forefront. Most sections of the site are housing different forms of content and there is no reason to fit the entire site into one structure. A single structure has become less necessary especially if you consider that the Whitney facebook page is as much an extension of this site as the Research section of the site and it has its own Facebook structure.

    The colors may not be the most attractive but I can’t help but notice the bold green calendars when I land on a page. I think that’s a great thing.

    As far as deviating from grids … I think that’s such an old conversation and too tied to the print world. I would look at this as a series of building blocks as opposed to a restrictive grid. I could go on …

  • molly

    As a professional fundraiser, and one who has worked at several museums, I can attest to the need for the support/membership pieces to be front and center on a museum website. Regardless of exhibitions and collections being the primary focus of a Museum, the only way to sustain an institution is through philanthropic support and memberships. For everything else to exist, this has to be the first priority. Whether or not much revenue is generated through the website, it is imperative for the Museum to place a constant emphasis on its need for support and it makes that the top priority with the placement of those links.

    I have a feeling their development department had to work hard for that.

    Where the rest of it is concerned, I find it to feel “unfriendly” and slightly intimidating. I don’t need a hug from a website, but this one comes off a bit gruff.

  • http://don'thaveone danny dugan

    Interesting piece. I wonder if anyone’s seen the recent UK Victoria and Albert Museum website – it appears they just redesigned theirs vam.ac.uk and I was thiking of the whitney when i saw their new site – which looks pretty enough but is atrocious to navigate around and find things. It’s almost like it was designed by robots or something. And weirdly there are NO LINKS anywhere in the text. WTF?

  • http://doctordada.com Jonathan Cooper

    Danny, what about the V&A’s Getting here page? Plenty of links there.
    I don’t find the navigation hard, although I can’t understand why some menus are “mega” (eg What’s on in the V&A?) and others are just a simple link (eg Learning).

  • http://uggsonsale7231.webnode.fr/uggs/ uggs

    I’m certainly glad will probably be visitor on this sodding website, appreciate your sharing this rare info!