Case Study: AIGA Design Archives
Meet the project
The AIGA Design Archives is a portal for students, a vast resource for educators and a playground for graphic designers. The archival selections are colorfully eclectic, featuring maps, posters, book design, information graphics, logotypes, packaging and typography, spanning from the early 1920s to the present day. With more than 20,000 records, 50,000 images, 300 collections and a myriad of tools for browsing, the site offers endless possibilities for discovery. The first iteration of the Design Archives was created by Second Story Interactive Studios and released in 2005. In early 2009, AIGA again collaborated with Second Story to re-envision the website.
When the initial AIGA Design Archives site launched in 2005, there were approximately 2,000 records. The next time Second Story encountered the project, the site had amassed more than 20,000 records. The volume of content was a marvel, but it became evident that the overall site architecture was not suited to handle such a demanding load. In addition, much of this data was embedded in Adobe Flash technology from 2005, making it a challenge for contemporary search engines like Google to retrieve content. Also, with the proliferation of customizable applications, user expectations had changed. People expected a more personal experience, and the Design Archives only offered a fixed mode for viewing records.
Our new charge came down to a few big bullet points: address contemporary visitors' needs, make the site open to search engines and optimize performance. The goal of the former site remained the same: make the great body of American design archived by AIGA accessible to the public.
The bicoastal project team consisted of AIGA in New York and Second Story in Portland, Oregon, with the physical design archives residing at the Denver Art Museum in Colorado. The core studio team consisted of four people, split between production management, design, development and content management. Julie Beeler led the team as executive producer, and Brad Johnson led the design as creative director. The team was highly interdisciplinary, with developers that contributed to content management, designers who contributed to development ideas and producers lending ideas to design.
What designers want
Our first order of business was to poll AIGA chapter members, students, designers and educators with a basic question: What do you want from the AIGA Design Archives? The responses boiled down to a reasonable set of requests:
- Bigger images
- Better performance
- Social media
- Modal views
- Deep linking
- Better filter options
- Linkable URLs
The requests from the Second Story team were a little more demanding:
- Resizable thumbnails
- Faceted searching
- Fluid pages
- Horizontal interface
- Persistent navigation
Even though our new content load was vastly different than at the beginning of the project in 2004, the total number of assets we were working with was ultimately irrelevant—the site needed to function with 20,000 records or 250 million records. We were trying to build a perfect library—one that never ran out of room, but where nothing was out of reach.
When asked about the overall goal for the site, designer Shoam Thomas said, “Besides the obvious challenges that a design attempts to solve, it should always stay honest to the medium. The new website design of the archives should be simple because ultimately the intuitive nature of a web user is well established and expects instant gratification. By making the rich content of the site the hero and navigation familiar, the user is empowered to discover and explore. I think the new iteration will cement the AIGA Design Archives as an invaluable tool for designers.”
Our ultimate goal was to build a continuous network between records, collections and ideas. We set out to make a site “where there are no dead ends,” explained designer Kieran Lynn.
How things work
Second Story has an internal graphic chart that visually outlines our studio process. The graphic is inspired by a musical scale, with components of process annotated like notes on the scale, with concurrent phases layered like chords. While this is visually appealing, it also implies a metaphor that later became key to this project. We call the document the “process score,” and the score for this project roughly followed these phases: concepting, user experience, design development, user testing, production and QA. Each phase involved feedback and discussion with the AIGA team.
The team wanted to get as far as possible with functionality before honing in on the visual look. We didn't want to treat the aesthetics as overly precious in the initial stages, or allow it to drive the user experience. Polishing the surface and perfecting the visual design of the site was the last step in the process.
A few hurdles
After the wireframes and prototypes were approved, the team went ahead with development of a beta version and design comps. Internally, we tested the beta and it became clear we were facing some usability issues. The site was scrutinized during a Second Story design crit, wherein a single discussion of a troublesome navigation arrow lasted 45 minutes. We determined that perhaps the button was symptomatic of a larger problem. To further investigate, we conducted user testing to zero in on the problems.
It became evident that there were two major problems to address. First, our filter panel was taking up too much valuable vertical real estate, which was especially problematic considering we had established a horizontal, scroll-less paradigm. The second problem was that our filters were great tools, but too complex and layered for the average user. People were losing their paths.
At this point in our process, we were trying to fix problems as they arose, not unlike the Whack-a-Mole game at an arcade. Sometimes you have to improvise. If you think of studio process again like a musical score, this was where the composition became more modal, like Kind of Blue. It was at this stage we took a big step—neither backwards, nor forwards—but towards simplification. We halted production, took a deep breath and refocused on the goals of the project.
The team broke everything down into simple components and determined there were three main chapters to the user experience story. Shoam introduced the idea of using Post-it notes on large pieces of foam-core to represent site elements, so that we could rapidly move ideas around. One Post-it note boldly said, “simplify.”
In the end we made some big decisions about the design, subtracting some components while adding others. Our solutions were risky, considering how close to the 11th hour they were coming, but they also had the potential to elegantly solve many of our usability problems. Thus far, the solutions appear to be working gracefully, and we look forward to more comprehensive analytics in the future.
Designing for designers
Making a website for AIGA is not unlike trying to give a barber a haircut. That is to say, we knew it would be a highly scrutinized product. However, we all felt dedicated to the content, and the team felt up to the challenge.
Executive Producer Julie Beeler summed up the thoughts of the studio on this project: “What's interesting is, we're here as contemporary and interactive designers, and we're creating something for our entire peer base. Usually we're working for the general public, but here the audience is us, our peers, our mentors and our heroes. The saying 'good enough is the new great' doesn't apply here. We knew it had to be great. It was a real honor to create something for the design community. It was an honor to make something for an institution that represents excellence in design.”
Editor's note: The case study above was written at AIGA's request and coordinated by Sarah Zimmerman. Please contact the editor if you would also like to provide a case study.