I recently restructured the information architecture (IA) for the University of Pittsburgh’s Department of Anthropology using some methodology ideas I got from the Design Eye for the Idea Guy outline on designeye.org.

Typically, I’m not involved with developing the IA for Pitt, my focus being on creating XHTML, CSS, and Flash. I sometimes contribute to the process, and I have created navigation structures and IA for other jobs, and will be doing so for Yum Yum Web. But I don’t have a solid process.

Given that, I thought it would be good to follow some established methodology, which is why I turned to the Design Eye outline for guidance. Under Information Architecture, they list:

• Page Description Diagram (PDD)
• Content Map
• Wireframe

For reasons I can’t quite remember, I skipped the PDD and instead created a use case diagram (bubbles and spokes illustration) with pen and paper that showed how users might get to the different pages. It helped give me a good picture of how the content was amassed. With lots of spokes shooting off the graduate bubble, it became clear that graduate students are the most important audience (I confirmed this with the client later).

Previously, I might have just created an outline of the information in a word document. But I think when you create an outline of your architecture, you end up with something very linear (a list, really), and it becomes difficult to imagine relationships between the content that are not linear.

After the use case was created and I accounted for all of the content, I created a pretty content map that looked very similar to the Design Eye content map example. I then used pen and paper again to write out what content would be on each of the main section pages. This paper layout was similar to the Design Eye wireframe, except I left design out of it. What I ended up with was something that combined a PDD with a paper wireframe.

In case you don’t know what a PDD is, it’s simply a text document that describes the content and features on a page listed in columns from highest priority to lowest priority. Here’s an example (PDF).

Instead of laying out my PDD like the example, I scribbled the content and features into a rectangle that represented a Web page, making the higher priority content more prominent and the lower priority content smaller and off to the side. This allowed me to create a paper wireframe without actually thinking too much about the design. It was more of a guide for the designer, who could figure out from the wireframes how to lay out and style the content.

This worked well, especially when meeting with the client. I showed the client the use case diagram, then the content map, which I created in Photoshop. Then I moved on to the paper content wireframes. The client seemed impressed with the amount of thought and effort that went into this initial step toward creating the site. We were able to talk about the goals and importance of the content without being distracted by a design (that will happen later). And I think seeing the content like this helped us talk about abstract design ideas for the site that I was able to communicate to the designer later.

The design mockups are currently underway. So far they all look really good, both from a graphic design and user interface standpoint; and I believe will really impress the client. We’re still trying to set up a meeting for the client to review the designs. But when the site launches, I’ll post before and after shots.

While I didn’t follow the Design Eye outline exactly, it provided a good starting point. Since developing this IA, I have done more research into PDDs and would like to incorporate that approach into my next IA adventure. Until then…