WebMonkey Information Architecture Plan

(Use as template for the Design Document)

Site Goals
1. Define the Primary Purpose
2. Set the Time Frame
  1. Short term goals
  2. Long term goals
3. State the Intended Audience(s)
Define the User Experience
1. Step 1: Define the Audience
  1. Categorize if necessary
  2. Rank importance of each audience
  3. Create audience list
  4. Distribute to client, have client define each audience’s needs and goals
    1. Compile, create list
  5. Distribute to client, have client rank the needs and goals for each audience
    1. Compile, create list
2. Step 2: Create Scenarios
  1. Scenarios are stories about the user’s interaction with the site
  2. 3 to 6 scenarios are usually enough, but sometimes more are needed
  3. Create a character for that user, and give him a name, a background, and a task to accomplish on the site. Use a task from your list of audience needs and goals. Then write a story about how the character uses the site to complete the given task. Scenarios will be important later on, when you are defining the content and functional requirements of the site.
  4. Be creative!
  5. Write the scenarios down
3. Step 3: Competitive Analysis
  1. Make a list of your competition
  2. List what they have that you don’t or don’t plan to have.
  3. List what they have.
    1. Take notes, do screen captures
    2. Use a grid like this:
  4. Evaluate your own site
  5. Compile a report on each site
  6. Make a schedule with a time frame for reviewing the competitive analysis
4. Step 4: Design Document: Audience, Scenarios, and Competitive Analysis
  1. Compile the design document
    1. Audience and Scenarios go in the chapter
    2. Summary of Competitive Analysis goes in the chapter
    3. Place the Competitive Analysis in an Appendix
  2. Publish for client to see
Site Content
1. Step 1: Gather Content and Functions
  1. Answer these questions
    1. What pieces of content does the site need?
    2. What sorts of functionality will be required?
  2. Compile list of content and functionality
  3. Reach consensus on how this will be grouped and labeled
2. Step 2: Identify Content and Functional Requirements
  1. Make two lists
    1. Content Elements
      - static
        
        Copyright notices, privacy statements, and membership rules are examples of static content
      - dynamic, functional, and transactional
        
        Member logon pages, signup pages for email newsletters, and other pages involving forms or transactions
    2. Function Requirements
      - Member logon pages, signup pages for email newsletters, and other pages involving forms or transactions should be included on your list of functional requirements
  2. Get suggestions for the list from the client
  3. This is called a “Content Inventory”
  4. Integrate proper content with proper functionality
  5. Evaluate your capability to provide these items
  6. Rank the importance of each item
3. Step 3: Group and Label Content
  1. Do it yourself
    1. Organize content into groups
    2. Label groups descriptively, but avoid being verbose
  2. Get each client decision maker to do so as well.
  3. Decide on final groupings and names.
  4. This is the structure and names of the site’s sections.
  5. Revise the content inventory if necessary at this point
Site Structure
1. Step 1: Metaphor Exploration: Only an Exercise
  1. Kinds of Metaphors
    1. Organizational metaphors
      - Organizational metaphors rely on the existing structure of a group, system, or organization.
      - What is the typical user interface for this kind of product?
      - What is the structure of the store?
        
        E.g., the parts of a grocery store or supermarket floor
    2. Functional metaphors
      - Functional metaphors relate tasks you can do on the site with tasks you can do in another environment.
    3. Visual metaphors
      - Visual metaphors are based on common graphic elements familiar to most people in our culture.
  2. Steps
    1. Gather people
    2. Brainstorm
    3. Review and Evaluate Each Metaphor
    4. Try to connect parts of each metaphor to the site content elements
    5. Choose one metaphor/mixed metaphor for the site or a part of the site
2. Step 2: Set it in Stone
  1. Create a “Site Structure Listing”
    1. This is a text-based outline of the site’s structure and content
  2. Create an “Architectural Blueprint” or “Site Structure Chart”
    1. This is a graphical outline of the site’s structure and content, for visual learners.
    2. Make a Legend
      - Defines how on- and off-site links, page components, pages, and groups of pages are represented in the blueprints. You might want to distinguish among parts of the site that perform a function or transaction, parts of the site that are generated dynamically, and pages merely comprised of text.
    3. Consider several levels of magnification
      - If your site is large, you may have to make several architectural blueprints, starting with a generalized overview of the site and working toward diagrams with a finer and finer grain.
3. Step 3: Define Navigation
  1. Questions:
    1. How will users use the site?
    2. How will they get from one place to another?
    3. How do you prevent them from getting lost?
  2. Global navigation system
    1. Appears on every page
    2. Has 5-7 elements
    3. Based on the primary categories of the site structure
    4. Use organization logo or theme element for link back to home page
  3. Local navigation system
    1. Options
      - List of topics
      - Menu of choices
      - A few items related to the current page
      - Hierarchy with present section expanded
  4. Document both systems
4. Step 4: Design Document
  1. Create a new chapter in the Design Document titled “Site Structure”
    1. Write a summary of the driving rationale for the site.
    2. Add the “Site Structure Listing”
      - If necessary, abbreviate and include the full listing as an appendix
    3. Add “Architectural Blueprint(s)”
    4. Document the Global and Local Navigation Systems
  2. Publish for client approval
Visual Design
1. One main purpose: Provide users with a sense of place--their location within the site
2. Step 1: Layout Grids
  1. Purpose: Define the way that site structure and organization will display on the page level.
  2. Make space for:
    1. Page content
    2. Global and local navigation
      - Include page title
    3. Other relevant sidebar information which is not part of site structure
    4. Organization’s brand or logo
    5. Header Graphic
    6. Advertising and sponsorship deals
    7. Footer
      - Copyright, legal details, dates, etc.
  3. Example:
  4. The Process of Creation
    1. General Process
      - Look at site structure and content, make list of all possible page types
      - Decide on 2-3 generic page types
      - Use these as the templates for all pages
    2. Specific Process
      - Sketch Pad or Graphics program
      - Create a rectangle to represent the whole page
      - Block out the elements of your page design
        
        Start with page content
        
        It is most important
        
        How much space does it require?
        
        Where on the page?
        
        Elements
        
        Branding
        
        Informs users they are still on the site
        
        Advertising and sponsorship
        
        Ad Banner?
        
        468 X 60
        
        At top?
        
        Under Title?
        
        Sponsorship
        
        How should it be integrated?
        
        Part of graphics headers?
        
        Small logo at page bottom?
        
        Navigation
        
        Must be prominent
        
        Global must remain consistent
        
        Local may be inconsistent globally, relatively consistent locally
      - Try multiple styles, recognize that revision will be necessary
3. Step 2: Design Sketches and Page Mock-ups
  1. Design Sketches
    1. Purpose: Establish a general look and feel.
    2. Content: Prototype graphical, textual, and other content elements
  2. Page Mock-Ups
    1. Purpose: Integrate Design Sketches and Layout Grids
    2. Content: Sample whole-page presentations
    3. Methods:
      - Build in a graphics program
        
        Paste elements over the layout grid elements
      - Build in HTML
        
        Use pieces of the design sketches as the graphics
    4. Get client approval
4. Step 3: Construct Web-Based Prototypes
5. Step 4: Design Document
  1. Add Chapter: Visual Design
    1. Layout Grids (including diagrams)
    2. Design Sketches
    3. Pictures of Page Mock-Ups
    4. Snapshots of Web-Based Prototypes
Construct Site Using Design Document As A Guide