Web Information Architecture Deliverables and Diagrams

Originally published December 2002

Examples of Wireframes, Site Maps, Story boards, Use Cases, Paper Prototypes

In my work as a web designer and IA I have come across many inconsistencies in the way Information Architects and other Web professionals refer to Web information architecture deliverables and diagrams. In speaking with various Web design groups I have heard multiple terms for the same deliverables. Web information architecture is a relatively new field which has yet to develop a consistent and universal set of deliverables, and terminology to refer to those deliverables. I also haven’t come across a central repository of IA deliverable and diagram documentation. This document is an attempt to fill that void.

What is Information Architecture?

Information architecture is the foundation open which websites are built. You can think of it as the blue prints for a website. It defines a website’s structure, hierarchy, and navigation.

What are deliverables? What are the most effective deliverables? The answer depends on the situation, audience, budget, time constraints, skill set of your team, and various other factors. Learning how to create these deliverables is the easy part. Gaining an understanding of when to use them, and in what format, is the tricky part.

Part 2 – How to use Information Architecture Deliverables

The following are the most widely used IA deliverables. However, there are additional deliverables which some consider to be the responsibility of the IA, while others would assign them to perhaps a PM or designer. The most widely used name for the deliverable is listed with additional synonyms also displayed. Some Web information architecture examples and samples are linked to.

Web Information Architecture Examples

1. Content Inventory (aka Content Survey, Audit)

A content inventory is intended to provide a consolidated snapshot of all the major sections, pages, and content on a Web site. This would include text, graphics, and multimedia. Some even go as far as to break content down into individual pieces or paragraphs of content. Sometimes a content inventory is performed on content that is not yet part of a Web site. This would be helpful for an organization that is collecting content to be placed on a new Web site. Card sorting would be helpful for organizing content in this situation.

Here a a couple examples of Web content invent roy variations.

  • Survey - A high level review of a site’s main sections and pages. It enables you to develop an understanding of the general site scope and major chunks of content.
  • Detailed Audit - this is a comprehensive inventory of every page on a site. This inventory will list every page’s filename, title, URL, and possibly its file type and a description. It’s also helpful to assign a unique page ID that will correspond to the pages location on the Site Map.
  • Content Map – This simply entails laying out the site content in a graphical format. I haven’t seen this used widely, and I’m not sure how much use it would serve. If you’re performing a content inventory on a current site, then an effective site map might nullify the need for a content map.

Sample content inventory (pdf)

Read more about content inventories for the Web

2. User Profile (aka Personas)

A user profile or persona is a realistic (but likely fictional) example of a target audience member. The profile commonly takes the form of a one page piece that lists the user’s name, occupation, education, demographic characteristics, computer/web experience, and site goals or likely tasks. A stock photography picture is usually used to give a face to the profile.

These profiles can be extremely useful in keeping the web team focused on the user’s needs. These may not be necessary for usability experts, designers, or information architects, all of whom should have a firm grasp of user-centric design. But they can be beneficial for project managers, programmers, and clients. When making decisions it’s helpful to be able to say “John B. really would have trouble with this,” or “Adding this link here would really make life easier for Sharon.” User profiles also help to reinforce the importance of an Information Architect. It is a deliverable that documents the establishment of target audiences, a process that might have taken a considerable amount of effort and research.

Read more about user profiles for the Web

3. Use Case (aka User Scenario, Task Analysis, User Flow)

Use cases are narratives that describe how a user might use a system or site. A use case illustrates a sequence of events that an actor (external agent) might go through in order to accomplish their goal. A use case is similar to a process flow.

  • Essential Use Case – Narratives that remain relatively independent of a specific technology or implementation.
  • Real Use Case – Narratives that incorporate the current technology and/or site design. This is basically the same thing as a Process Flow.

Sample use case (pdf)

Read more about use cases for the Web

4. Sitemap (aka Site Map, Site Hierarchy Map, Site Diagram, Blueprint, Web Map)

Site maps are one of the most critical and widely used web information architecture tools (along with wireframes). They show the overall structure and hierarchy of a Web site. They can be used as the first step in laying out the web information architecture of a site, and will provide the framework upon which to base site navigation. When I set out to understand the IA of a current site, or design an IA for a new site, I start by sketching out a ruff site map. Site maps can be constructed in a wide variety of formats, but the general structure and principles remain relatively consistent.

Sample Site Map (pdf)

Read more about Web sitemaps

6. Wireframes (aka Wire Frame, Page Architecture, Low Fidelity Mock-Up, Page Schematic)

Information Architecture Wireframes (combined with Site Maps) are the bread and butter tools of information architects. They are useful for conveying the general page structure and content requirements for individual pages.

Wireframes need to achieve a happy medium between being too precise and too loose. What I mean by this is that a wireframe that is too precise or detailed may leave little creative room for the designer. A wireframe that is too loosely defined can easily be misinterpreted by designers and developers. The format used should be dependent upon the audience.

Using detailed wireframes will frequently flush out new requirements and questions that nobody has thought about yet. They also help to keep a paper trail of functional and design decisions that are made. I sometimes use wireframes to get people thinking and generate requirements. Wireframes will sometimes end up evolving into the default requirements document for a Web site.

Sample Wireframes (pdf)
Sample Wireframes 2 (pdf)
Sample Wireframes 3 (pdf)
Read more about Web wireframes

7. Paper Prototype (aka Low Fidelity Prototype)

Paper prototyping involves using screen shots and/or hand sketched page diagrams to quickly elicit user feedback and identify interface IA problems. Using a paper prototype involves conducting a usability test using a low fidelity prototype. These prototypes can be created electronically using programs such as MS Word, Excel, Visio, or various WYSIWYG editors. However, in many cases paper prototypes are nothing more than loosely hand-sketched designs. The quicker these paper prototypes can be created, the greater the benefit. Paper prototypes shouldn’t incorporate specific design elements such as color, style, fonts, detailed graphics, etc.

You may be hesitant to present something that might resemble a 6th graders art project to a client. However, with a bit of education the client will be appreciative of the time and money you are saving them.

8. Story Board (aka Storyboard)

It’s debatable whether a storyboards are anything different than a set of wireframes, but they can tend to illustrate more of a process than a wireframe does. However in many cases IAs add usage and process notes to wireframes. I have also see storyboards (or something resembling them) referred to as Blueprint, Schematic, Grey Model, Interaction, Interaction Wireframe, IA Requirements Document, Design Document

Story boards typically combine information from process flows, site maps, and other IA deliverables. They can be used to illustrate a single screen or a whole system or site. They usually offer screen shots or some type of graphical representation of the screens, combined with a narrative description. Storyboards help to document the functionality of the site and describe how users will potential use the interface. These deliverables can be used by programmers, project managers, upper management, and clients to ensure that everyone is on the same page. Storyboards often turn into the initial requirements documents that programmers begin coding from. These deliverables provide an excellent chance to get client buy in and sign-off on the proposed function laity and IA of a site. Story boards can be similar to a detailed wireframe, and there is a lot of crossover between the two.

Sample Story Board 1
Sample Story Board 2
Sample Story Board 3 (pdf)
Sample Story Board 4 (pdf)
Sample Story Board 5 (pdf)

9. Style Guide

Style guides are used to document baseline design requirements for a site. They usually define font classes and a wide range of various design conventions to be followed. This deliverable would generally be considered the responsibility of a designer, but in some instances the Information Architect may be covering multiple roles (as is the case with me). HTML Wire frames are a good solution to solve multiple needs; deliverables for clients or management, and functional templates to start programming from.

Sample Style Guide (pdf)

Read more about Web style guides

Using Web Information Architecture Diagrams

In part 2 we take a look at the factors that influence using information architecture deliverables. Which provides more information on using Wireframes, Site Maps, Story boards, Use Cases, Paper Prototypes, User Profiles, and Site Maps and other web information architecture examples.

Follow Discussion

42 Responses to “Web Information Architecture Deliverables and Diagrams”

  1. Sunja

    While looking for some guidelines on developing wireframes for web applications, I realised that the three PDF files available at this site are really useful. Please accept my congratulations for a great help. Thanks.

  2. Chris.R.

    I am looking for some direction. I am a former marketing professional that has been out of the Web business for several years, even so, I have stayed somewhat in touch with developments. Now I’m thinking about getting back into the field, I would like to learn about UX, wireframes and so forth. Where would I find education/training in this area? Any advice you could offer would be a great.

  3. Adam Lewko

    This is a great list. Well done!

  4. Ivy Clark

    Nicely summmed up. :)

    IA is not really a new field today (but I guess it was very young when you first wrote this article in 2002?), as it has been around for more than 10 years now. Prior to the birth of IA, there was Instructional Design (ID) which still exists in the education and training arena; and the process is very similar.

    Good list for newbies and anyone who wants to understand IA better. Thanks.

  5. Glen

    Ivy – agreed. IA is not a new field at this point. Although compared to general Web design and even usability, IA really started getting appropriate attention somewhat late in the game. For years when I was talking to client or managers about IA, it was like I was speaking Greek at first. It really was an afterthought for many. Now we are seeing government RFPs come out specifically talking about information architecture requirements and processes. We never saw this 2 or 3 years ago. So finally the world (Fed. Govt.) has caught on.

    Also good point on Instructional Design (ISD) – it’s still a critical piece to all the e-Learning work my group does. I think of IA and ISD working hand-in-hand. The IA defines the overall structure and navigation within our LMS, and the ISD structures the e-learning course at a more granular level.

  6. Buster Grandolfo

    wow what a read! this was excellent, thanks for posting this.

  7. david

    What a awesome blog!Kudos!

  8. Nichole Trobare

    This is SO helpful. I often get overwhelmed when planning and this is laid out very well. Great article!

  9. birding binoculars

    Me & my fellow classmates use your blogs as our reference materials. We look out for more interesting posts from your end about the this kind of topic . Even the future updates about this topic would be of great help.

  10. Biondi

    This is very helpful and easy to read. Thanks a lot.

  11. Eric Robbins

    Excellent site. I’m curious as to what has changed from 2002 when the site was originally published to 2010, e.g., the addition of personas seems to be more recent.

  12. Free Wiring Diagram

    Wow.. nice post! I realy like it!

  13. Free Wiring Diagram

    Hello there.. very nice and useful writing, I think you really know about this problem. thanks for your posting about this, it help me a lot.

  14. Free Wiring Diagram

    Hello man, Your articles are so special, i bookmark yours website to visit any weak thanks man for this kind of information! Bejhoo Kedodoran

  15. joomla

    I recently came across your web-site and have been reading along. I thought I would leave my first comment. I dont know what to say except that I have enjoyed reading.

  16. Wordpress


    I also recently, in fact an hour ago and have also enjoyed the reading. Give yourself a fav icon!!!

  17. orlando web design company

    One of the hottest topics these days in Information Architecture circles is documentation. This is probably partly because the IA’s role is so ill defined.

  18. Wooden Photo Frames

    Excellent blog! Thanks

  19. JPW

    Great, but what happened to ordered list item number 5? . . .

  20. Poster

    Well I just discovered this site on Google for the first time today. I really think your site is good with excellent articles. Many thanks for the good read. Will add to my Bookmarks.

  21. 3 red lights fix

    Hi, I actually have been following your blog site for a while and just wanted to congratulate you regarding the quality of your articles. awesome work

  22. katalog

    Might be essentially the most awesome publish I read all day :)

  23. Richard

    I love it so so much..
    it helps me to prepare for my final exam ..
    as my exam is open book :)

  24. lovely

    Excellent blog! Thanks

  25. Concrete Molds

    ,” I am very thankful to this topic because it really gives great information ,:`

  26. Ajoy

    I i was researching on SRS and Use cases/wireframes when i got this link. its great in its content and understanding was so easy.
    thanks i will look forward to have this as reference in my practical need..hope i have opportunity to apply these in my future endeavors…

  27. wendy

    I am new comer of IA in China.It’s really helpful.Thank you!

  28. Adrian Murphy

    It’s great that you’ve talked through the deliverables and that will add value to some.

    However, to be fair, it should be understood that the examples provided fall well short of what
    is expected of a professional usability / information architecture resource.

    I know for sure that my IA delivery packs are extremely comprehensive.

    IA does also need to follow a formal approach and not enough is said about this. The standard
    business analyst approach fairs well with the following deliverables: As-Is (snapshot of what we
    have to day, heuristic evaluation), To-Be (what we are looking to do), Gap Analysis (the difference between As-Is and
    To-Be), Business Requirements (what does the business functionally want and what are the priorities), Non-functional requirements (what other requirements are there e.g. training, business process change), Design documentation (User Design Documentation) etc …

  29. Aaron Rikower

    Nice compilation, thanks!

    I wrote a short article about the relationship between the IA and the sitemap, where I compare it to the Genotype-Phenotype relationship.

    I argue the concepts should NOT be used interchangeably, even though many do.

    Hope you enjoy it:

  30. steve aoki

    I was looking for this piece, appreciate it.

  31. my knowledge base

    I recently came across your web site and have been reading along. I thought I would leave my very first comment. Nice article! I will keep visiting this website very frequently

  32. music education

    I believe this internet site has some very superb information for everyone : D.

  33. allvar

    Hey! I simply would like to give a huge thumbs upward with this good tips you’ve in this article on it post. I will be coming back to your sites for even more soon.


  1. Useful Links « Prasad Khasnis  
  2. User Experience Gold Treasure « one97interface  
  3. Web Information Architecture Deliverables and Diagrams : FatPurple | UXWeb.info  
  4. Web Information Architecture Deliverables and Diagrams : FatPurple | UXWeb.info  
  5. Information architecture deliverables | Multimedia Design and Authoring  
  6. IA deliverables « MAXSTUDIOTECH  
  7. Web Information Architecture Deliverables and Diagrams : FatPurple « complexweb  
  8. Web Project Deliverables « digitaldweller  
  9. Information architecture deliverables » Interactive Media Design and Prototyping  

Leave a Reply