Happy Cog redesigns AIGA

If you develop green technologies, you dream of selling your idea to Al Gore. If you run a design agency, you fantasize about winning AIGA as a client. Originally founded as the American Institute of Graphic Arts, AIGA sets the agenda for design as a profession, an art, and a political and cultural phenomenon. In the world of design, at least in the U.S., there is nothing higher.

When AIGA approached Happy Cog to redesign their site, we figured we had no chance at all. With nothing to lose, we spoke bluntly.

We told them they had fifteen years of great content that nobody could find. We suggested that an emerging class of designers who needed what AIGA had to offer did not know AIGA and could not connect with its web presence. The site could do more, and had to do more, to reach these users. We said AIGA’s site above all others should make brilliant use of typography. It should be a joy to read—and it was not.

I reckoned AIGA would hire a more obviously design-focused shop. “Designy design” agencies is how I think of such places, and I mean no disrespect by it. AIGA would, I figured, shrug off our fairly harsh words and choose someone more agreeable. Instead, they hired us.

Months of intense collaboration later, Happy Cog’s redesign of AIGA has launched. We junked the old structure, flattened the hierarchy, and surfaced the content. We gave the site’s years of brilliant writing by the likes of Ellen Lupton and Steven Heller an appropriately readable home—one that demonstrates what web typography can achieve.

And to make the site as inspirational as it is educational, we introduced a second narrative to the user experience: dynamically chosen selections from AIGA’s design archives visually intrude at the top of every page, inviting designers to dive into the archives whenever they seek refreshment.

AIGA’s Ric Grefé, Denise Wood, Liz Danzico, and Kelly McLaughlin guided us throughout the process. They are brilliant collaborators. Chicago’s Thirdwave created the robust and sophisticated back-end architecture required to support our detailed and unusual design requirements.

Thousands of pages of old content, none of it semantically marked up, and none of it structured to match our new requirements, have been fairly seamlessly integrated into the new design. Naturally there are still some bugs (not to mention validation hiccups) to work out. AIGA, Thirdwave, and Happy Cog will be working to patch these little bumps in the days ahead.

I creative directed the project, but its quality is purely due to the incredible team that worked on it:

More information is available at Happy Cog and on Jason’s and Dan’s sites. Better still, just dive into the new AIGA.org.

[tags]aiga, design, redesigns, webdesign, happycog[/tags]

81 thoughts on “Happy Cog redesigns AIGA

  1. Oh, delightful! Just browsing to the front page one can see a huge difference. It’s all *opened-up*, with delectable content just begging to be explored.

    Yet it still looks like AIGA and, moreover, like an arbiter of good taste. Well done!

  2. Love everything except that hideous blue plaid at the top.

    You probably won’t see it on your next visit. The top of the page is an extreme closeup of an award-winning design from the AIGA Archives. Click it and you will be taken directly to the detail page that introduces that particular design piece.

    Roughly thirty pieces are currently in rotation. Each time you visit the site, one of those thirty-odd pieces is dynamically chosen at random, and that’s what you see at the top of the page.

    The dynamically chosen image follows you throughout your visit; on your next visit to the site, you’ll see something entirely different (at least, the law of averages strongly suggests that you’ll see something different each time).

    The pool of images will change from time to time. The current crop was selected by AIGA’s Liz Danzico, following guidelines Happy Cog created for the selection process.

  3. It seems like a lot of patting on one’s back is going on. The new AIGA design indeed looks like something that came out of Happy Cog, but just a tad bit inferior than previous jobs. What’s up with the logo on that box on the left top corner anyways? Is that my browser or was that done on purpose. Anyways, I am quite certain that whatever flaws one may find on their web-site, it’s most likely because of the client, because Happy Cog has proved over and over that they are better than that.

  4. Honestly, congratulations on the contract, but the site is not as good as I expected: Apart from the fact that I don’t like websites who throw acronyms at me without explaining what they mean, there are no answers to the questions “What is this?” and “What can I do here?” whatsoever! Neither above the fold nor below it. (I’m from Germany so bear with me if I don’t know AIGA.)

    Maybe you should hire Steve Krug or some other usability expert who would point that out earlier in the design process. It’s a pity that even studios like Happy Cog make such fundamental mistakes.

    (visited in Firefox 2.0.0.1/Linux, no JS.)

  5. I take it you guys aren’t responsible for the Flashturbation design archives. What’s that about? If there’s any reasonable amount of text in the description field it’s almost impossible to scroll down and read it.

    Other than that, great work!

  6. [T]here are no answers to the questions “What is this?” and “What can I do here?” whatsoever! … Maybe you should hire Steve Krug or some other usability expert who would point that out earlier in the design process

    We don’t need Steve to tell us that. The information was there through all wireframe iterations and comps and in the templates we delivered. It seems to have fallen out accidentally during the final days of production. We’ll let AIGA know.

  7. As with ALA, too much area is devoted to navigation for my taste, but the overall look is terrific.

    The way the top graphics change around the site is such a great way to showcase beautiful graphics and get one excited about design. A welcome redesign of AIGA; thanks for bringing their articles to new light.

  8. Pingback: Silverie
  9. It seems like a lot of patting on one’s back is going on.

    Next time I announce the launch of a client project, I’ll try to take a more negative tone toward our work.

    What’s up with the logo on that box on the left top corner anyways? Is that my browser or was that done on purpose.

    You see a logo in your browser?

    I take it you guys aren’t responsible for the Flashturbation design archives.

    No, we’re only guilty of texturbation.

  10. Congratulations! However, my first impression was – woah, lot’s of navigation and information taking place here, where do I go first (in “browsing” mode – haven’t tried “search” mode yet). But that isn’t a problem of “what is this” or “what can I do here”, I take it that the majority of visitors will know what to do when they visit the site… and for those interested in the “what is” the “About” item is center top – can’t miss it. Excellent to accomodate the head space for and thereby feature work from the archives in that way. I also like the self-confident, straight-forward logo position. Details: why the choice of Interstate for the main nav, why not a serif as in the logo or the foot image? What lead to the light-grey page background? Coincidentally, the AGD (Alliance of German Designers, german equivalent to AIGA) website uses a similar background combination of grey page and white content areas.

  11. “It seems like a lot of patting on one’s back is going on.”

    High-profile bloggers patting backs! Impossible.

    And Jeffrey, did you do any tests to see if people who don’t know AIGA have any clue what the website is about at a quick glance?

  12. Charles asked:

    Jeffrey, did you do any tests to see if people who don’t know AIGA have any clue what the website is about at a quick glance?

    Key aspects of the site were tested. AIGA believes in and supports usability testing. Indeed, AIGA’s Liz Danzico led a card-sorting exercise (in which we also participated) to test the assumptions underlying our initial IA recommendations. As a result of those user tests, our architect Tanya Rabourn considerably revised the site structure.

    But we didn’t test on the need for a “What is AIGA” statement at the top of the page. We also didn’t test whether a logo was needed. It’s an established best practice to include such statements. The temporary removal of that statement is not our doing.

    Refer to my earlier comment. A “What is AIGA” statement appears at the top of the right-hand column in our templates and will be restored soon.

  13. Philip asked:

    Details: why the choice of Interstate for the main nav, why not a serif as in the logo or the foot image?

    Interstate is part of AIGA’s existing identity.

    What lead to the light-grey page background?

    The background color evolved from an earlier design that was extremely restrained (almost Swiss) and classic. The “archival intrusion” idea was born in a separate design direction that used wilder background colors which we proposed to dynamically derive from whatever image appeared at the top.

    When the two design directions (restrained/classical and inspirational/intrusive) were mashed together, the background moved to these muted light greys and whites. Directional design mash-ups usually fail, but in this case they produced something better than either of the originals. This is largely because Jason Santa Maria led the design. He is not only very talented, he also never shirks a challenge.

  14. I let my membership expire years ago – I felt they were out of touch in the web world. Damn great job, I’m happy to get back to actually trying to use that site for learning, refrence, and professional ideals.

  15. The design is very well done for such an information rich site. Too bad the development isn’t even a tenth as good as your design. That “professional services firm” (their words) you linked is an embarrassment to web developers everywhere.

  16. How do you make a login form from a non-secure page submit securely?

    Seems like you’re throwing people’s passwords around in plain text–and if you’re using the MD5 on the client-side trick, you’re still susceptible to man in the middle attacks.

    I bring this up, not to slight Happy Cog or AIGA, I bring this up because we’ve already publicly had this discussion and companies like Yahoo went to secure sign-in pages instead of login on every page. When HC and AIGA bring this insecure method back into the spotlight, I now have to argue with clients and explain that you guys just made a bad decision–which pits ME against YOU, and since you’re famously good at this stuff–makes it harder for those of us that don’t want to implement RAGINGLY insecure applications.

  17. we’ve already publicly had this discussion and companies like Yahoo went to secure sign-in pages instead of login on every page. When HC and AIGA bring this insecure method back into the spotlight, I now have to argue with clients and explain that you guys just made a bad decision–which pits ME against YOU, and since you’re famously good at this stuff–makes it harder for those of us that don’t want to implement RAGINGLY insecure applications.

    @xpr, perhaps you could help me catch up by providing some URLs? I haven’t been part of this discussion and don’t know what you’re talking about. (I do know that Yahoo’s log-in methods recently changed, but I know that as a user of Yahoo sites, not as a participant in a conversation.)

    Also, please bear in mind that Happy Cog didn’t develop this site. Front-end templates is where we stopped—and it’s where we most often do stop these days.

    Still, even when we’re not doing back-end development, the more we know about issues of security and identity, the better we can design the front end. So please share some knowledge here. Thanks.

  18. Wow. Some of the comments got about as ugly here as they did on Jason’s site.

    Kudos on the site and for handling the criticism with the grace, wit, and professionalism that we expect from you Mr. Zeldman.

  19. What the home page makes up in structure and design all the other sites (the 2nd level if you want) are missing. Or to put into a picture: While the home page is a bouquet of flowers the other sites are just the green.

  20. From what I could tell in my early scan of the revised site, it is a vast improvement. I have been stymied using the site for years and, like Brady Frey above, look forward to discovering what is actually in there.
    It’s telling that the site appears to have been getting hammered so hard I haven’t been able to get in for the last hour. Seems they need to beef up the back end to keep up with the front.

  21. In the end, all I can say is thank you.

    Because I’ve had instructors shy away from even mentioning the AIGA when they know the resources available could be helpful.

  22. KMB said:

    What the home page makes up in structure and design all the other sites (the 2nd level if you want) are missing. Or to put into a picture: While the home page is a bouquet of flowers the other sites are just the green.

    Voice gives you an idea of the way we actually designed landing pages. Our designs for these pages were fairly rich and layered. You see more of the richness on third-level pages (like Voice) than on second-level pages at present. This may be because the site just relaunched. There may not be enough properly formatted brand-new content to make the landing pages look as rich today as they will in a few months. I say we cut AIGA a break … and come back and see how nice the landing pages look in a few months.

  23. NICE! How refreshing. I am certainly grateful to AIGA for selecting the Cog crew for the renewed website. When the flagship professional organization embraces smart website design solutions, it helps boost everyone everyone in the same area of practice. Thank you!!

    Jeffrey – I would love to hear some of the thoughts behind the dual-layer horizontal navigation at the top. I find that an interesting solution and challenging to my own instincts. Share with us some of the thought behind the multi-layered presentation?

    Again – huge thanks for improving our AIGA experience and providing us with a fantastic example to educate our peers in the business.

  24. The only thing I find unfortunate here is the perpetuation of the myth that a client needs to make a choice between what JZ calls “Designy design” and whatever the other choice might be best termed — let’s call it “non-Designy design” for the sake of this response. The implication is that “Designy design” is impractical, poorly organized, too inflexible, too full of style. I’d submit this attitude is the cornerstone of the philosophical conflict between web professionals and print professionals — and if it could have been overcome anywhere, one would hope it would happen at an evolving AIGA.

    “Designy design” vs. non-Designy design is not the problem. The problem is bad design vs. good design, and both good and bad come in designy and non-designy flavors. You don’t have to sacrifice “Designy-ness” to be good, as many of the world’s leading design professionals (in other discplines) demonstrate with project after project both highly functional and inspiringly creative. I realize this is a lot to hope for, but isn’t this where truly leading design needs to be?

  25. Really nice. Congrats. Jeffrey, can you answer a burning question my coworker and I have been pondering? Why no feed info in the ? More and more, I’ve been noticing designers that I respect leaving <link rel=”stylesheet” /> out of their pages. Was this an isolated design decision, an emerging practice? What gives?

  26. “Designy design” vs. non-Designy design is not the problem. The problem is bad design vs. good design, and both good and bad come in designy and non-designy flavors. You don’t have to sacrifice “Designy-ness” to be good, as many of the world’s leading design professionals (in other discplines) demonstrate with project after project both highly functional and inspiringly creative.

    I actually think our design output qua design can stand up to just about anybody’s. I think what we do is good design. And it’s fair to infer that AIGA thinks so, too, or they wouldn’t have hired us and approved our work.

    When I say “designyy design,” I’m thinking of certain kinds of highly stylized, self-aware work. Work that wins awards because it is very good, but also because other designers like it. It’s design as guitar solo rather than as piano accompaniment. Design with loud flourishes. Design that calls attention to itself—and is so brilliantly executed that it gets away with it. It is the only kind of design some designers admire.

    I’m not talking about overwrought self-indulgent junk—the kind of thing people with a 3-D program and too much time on their hands stroke themselves over. I’m talking about good design—a different kind of good design than the good design I think we do.

    Does that help?

  27. eddie sutton said:

    Jeffrey – I would love to hear some of the thoughts behind the dual-layer horizontal navigation at the top. I find that an interesting solution and challenging to my own instincts. Share with us some of the thought behind the multi-layered presentation?

    It was Jason’s idea; it came out of discussions we were having about positioning.

    AIGA is a multi-layered organization and the site would have to be many things, but what should the first impression and primary take-away be? Should the site primarily be a source of creative inspiration? Should it be perceived as a repository of professional tips and resources? Was it a magazine like A List Apart? Or the reassuring (if somewhat aloof) voice of a demanding and somewhat erudite profession?

    We researched how members and non-members felt about AIGA: the positives and the not-so-positives. We strategized how to strengthen existing connections while encouraging new ones. In all that thinking, the underlying premise was always that a site should feel primarily like one sort of thing or another.

    And then, as often happens when you are studying a problem, we thought, what if we throw out our underlying assumption? We are always complaining that all clients want to have everything both ways. Maybe this site, because of its unique place in the design community, actually could have it both ways.

    That’s the kind of talk we were talking. And then Jason essentially ripped the top off a conventional execution in order bring the idea of inspiration to the surface of the site.

  28. Does that help?”

    Not sure. Perhaps we have a chance to discuss the topic at length sometime over a coffee or beer. One would think “other designers liking it” — while a damning description for a lot of other work, is ironically a critical measure of success for an AIGA project.

  29. Joe said on March 3rd:

    Really nice. Congrats. Jeffrey, can you answer a burning question my coworker and I have been pondering? Why no feed info in the ? More and more, I’ve been noticing designers that I respect leaving <link rel="stylesheet" /> out of their pages.

    Joe, I think you mean, why does the head at aiga.org omit the following information?

    <link rel="alternate" type="application/rss+xml" title="AIGA News Feed" href="http://www.aiga.org/syndication/events/aiga.rss" />

    The answer is, it’s an oversight.

    We’re not trying to start a trend of obscuring RSS feeds. ;) It’s just a communication problem between vendors, and will get worked out.

  30. Hanan Cohen said:

    HELP! The homepage is filled with tabs from AdBlock! (http://www.aiga.org/common/scripts/interstate.swf)

    It appears you’ve told a plug-in to block all SWF content on the assumption that all SWF content is an ad. As much SWF content is not advertising, this is not an advisable web browsing strategy.

    The AIGA site uses sIFR to present some navigational elements in Interstate, a typeface many users don’t own; if Flash is not present, or if JavaScript is turned off, the user sees normal (CSS-styled) text instead. Text is formatted in accessible, semantic markup, so a user accessing the site via a low-grade web phone (or a screen reader) gets all the content. It’s progressive enhancement that works.

    Except for people who install an ad-blocking plug-in that mistakes all SWF content for ads.

    If you can adjust the preference setting to not block all SWF content, do that. Or, if you can tell the plug-in to not block SWF content on this one site, do that. If you can’t do any of those things, consider disabling the plug-in, or avoiding sites that use sIFR.

  31. Still, even when we’re not doing back-end development, the more we know about issues of security and identity, the better we can design the front end. So please share some knowledge here. Thanks.

    I believe he is referring to the non ssl login so the passwords would be sent as plain text in the clear vs ssl encrypted. I’m not sure if it matters for a site like AIGA myself though.

    I know it may not be in the majority opinion but stylistically I have a hard time differentiating the last couple sites from one another. Thats a good and bad thing I suppose depending on perspective. The design and flow of AIGA doesn’t sit well with me from a purely aesthetic sense, but to each their own. Organizationally its an improvement over what it was definitely.

  32. The new design from Happy Cog is straight-forward and user-friendly. I would recognize this as their work (or work inspired by Happy Cog) from a mile away.

    No need to beat around the bush about the outstanding architecture put out by HC but I am always left with a desire for more from them.

    One aspect of Happy Cog’s designs I love and try to emulate is the ease of finding information. It all breaks out into easily manageable chunks for quick scanning but sometimes seems to falter when it comes to design that speaks to individuals.

    The sites they design can seem to be overly reliant on clean semantic code. It reeks of planning the structure rather than design that inspires one to design with more gusto.

    That being said, I do love the work done on the redesign. I can definitely fall in love with the code rather than the design.

    Great job! Thanks for the years of inspiration!

  33. I believe he is referring to the non ssl login so the passwords would be sent as plain text in the clear vs ssl encrypted.

    Yes. I was hoping he’d come back and share URLs of pages that briefly and clearly articulate why this long accepted treatment of login and password information is a problem, just how serious a problem it is, and what experts in the area recommend doing instead.

    I don’t mind a person responding to a six-month-long design project by sputtering wetly about a minute technical aspect of it that wasn’t our doing. But I would expect that person to come back and educate me and this page’s readers if he is serious about helping this community better serve its users. To rant and then stomp out of the room forever is bad manners and worse evangelism.

    I know it may not be in the majority opinion but stylistically I have a hard time differentiating the last couple sites from one another.

    Well, common goals, filtered through limited web means, may produce works that have some commonalities. The Happy Cog redesign and the AIGA redesign, if those are the ones you mean, share certain goals such as inviting you to linger and read the content. (Most of our sites—even a web app like Ma.gnolia—have that goal.) This typically means biggish type, not small; generous leading and margins; a slightly wider measure than normal; and a nigh-universal typeface that is designed for legibility, such as Georgia or Verdana.

    It also often means strong but not extreme contrast (you will see this on A List Apart as well) and a warm color palette to psychologically invite viewers to linger (as seen on Happy Cog and Ma.gnolia, for instance).

    Each design we do comes out of the brand and the site’s goals, but some things (legible type, whitespace, leading) are part of our tool kit on every job. We are not going to create a purple site with green 9 pt Arial any time soon. :D

  34. The new design is very successful. Since my earlier post I’ve been visiting the site whenever I can and discovered I need at least a quarter hour or so since I keep discovering articles of merit. I’ve been a member off and on for 15 years but had no idea this stuff was available.
    I suspect when my membership renewal comes up it will be a little more palatable.
    And isn’t that what a association site is supposed to do?

  35. Yes. I was hoping he’d come back and share URLs of pages that briefly and clearly articulate why this long accepted treatment of login and password information is a problem, just how serious a problem it is, and what experts in the area recommend doing instead.

    I don’t mind a person responding to a six-month-long design project by sputtering wetly about a minute technical aspect of it that wasn’t our doing. But I would expect that person to come back and educate me and this page’s readers if he is serious about helping this community better serve its users. To rant and then stomp out of the room forever is bad manners and worse evangelism.

    Like I said though, it falls down to the content you are protecting. I’m not sure if AIGA warrants SSL but at the same time you could do something similar to yahoo relatively cheaply (depending on your host as low as $5-20/month) and provide an https offset to the login with a link similar to ‘login securely’ or whatever but by default you log in using http.

    As far as articles why its approriate, its always appropriate depending on your feelings on your content you are putting behind authorization. I wouldn’t need Secunia or Securityfocus etc to tell me that. The reality is non ssl login sends the password as plain text in the request and is simple for anyone intercepting the stream to obtain. Another reality is the average user tends to condense their passwords into only a handful across multiple sites… so providing a secure log-in is also indirectly polite to their internet security to possibly their banking website.

    Required? Like I said, I contend its based on the owner of the content and their feelings about said content. Courteous? extremely imho.

  36. Great work. I feel like this new site takes the AIGA in a direction it needs to go. It has a more timely, relevant feel. More like a periodical and less like a static membership site. I find myself actually taking the time to read AIGA articles–even now, several days after launch.

  37. I have total respect for you guys at Happy Cog, but seriously, the actual design looks dreadful to me. How many typefaces??? What a mish mash of typographical chaos!

  38. A note of praise from the client. Jeffrey, Jason and the Happy Cog team accomplished much of what AIGA needed to meet its own vision of what AIGA should be. We believe AIGA should be a means of provoking thoughtful discussion of design issues, inspire designers and others by highlighting great and effective design and design processes, and offer a deep resource for those with practical questions about the practice of design. All of this requires AIGA, and its website, to become a vessel for the mind, spirit and work of the design profession. It should not compete with them.

    Happy Cog opened up the site so that its content became much more accessible and did it with a visual attitude that felt, to us, open and inclusive. Some have been critical that the site itself is not a more splendid design artifact. This was not our intention. Our brief was to make it an inviting lens through which visitors discover our members’ and others’ examples of great design. Intentionally, we approached this as an information architecture challenge. The design of the site is not a marketing tool for AIGA, the content is. The staff’s design sensibility does not define AIGA or the profession, our members’ does. This is why AIGA does not have a designer on staff—too easily associations begin to think they define the profession, instead of being simply a means of helping the profession express itself in a collective vision.

    Similarly the design of the site and its templates have been created with an eye toward the scores of authors/designers who will populate it, as we draw from our volunteer members to take on the role of creating content, substantive and visual, for various segments of the site.

    For us, the site redesign is a blazing success in achieving the objectives we set for it. AIGA does not seek to be authoritative by virtue of its selection of its own designers; it seeks to be authoritative on profession practices, yet open and inclusive in representing the best that the profession can achieve.

    Thank you, Happy Cog.

  39. It’s a great site design and all…although, I may be a bit fussy, but I think there’s a detractive ‘quality’ in the AIGA black and white logo itself. The black square that encloses the white typeface surrounds this type in all but one place – the First A. This ‘A’ touches the edge of the browser window, and is the very first thing I noticed!

    I know this is a site redesign, not logo redesign, but I’m a perfectionist…

  40. And Jeffrey, did you do any tests to see if people who don’t know AIGA have any clue what the website is about at a quick glance?

Comments are closed.