|
Description
|
Editor's note: AIGA engaged Second Story Interactive Studios
to redesign the online AIGA Design Archives, relaunched today. AIGA
and Second Story have collaborated on the website since it first
launched in 2005. Featuring special collections and works from
AIGA's competitions since 1924, designarchives.aiga.org is a
growing source of inspiration for designers, researchers,
educators, students and the public.
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.
|