Adobe Education

Adobe Web Tech Table of Contents:

Lessons revised for CS2

Lessons revised for CS

Original lessons

Student working on a computer

Unit 2: Planning a Web Project, Part 1

Lesson 2.4: Information Design

!	Lesson Goal: Gather information for your site's content and begin your site's design document.

Information design is the first phase of the Web design process. This phase requires a great deal of involvement with the customer. It is essential that the Web team obtains the answers to certain questions before proceeding with the development of a new Web site or the revision of an existing one.

In this lesson, you will review the critical questions involved in the information design stage of Web development and begin the creation of the Web site design document which, as the name suggests, documents the design process.

Information Architecture

Information design, also known as information architecture (IA), is the first phase of the Web design process (see Figure 2.4-1). According to John Shiple (2000) in his Information Architecture Tutorial (http://hotwired.lycos.com/webmonkey/98/28/index0a.html), information architecture is:

... the blueprint of the site upon which all other aspects are built - form, function, metaphor, navigation and interface, interaction, and visual design. Initiating the IA process is the first thing you should do when designing a site.

Three phases of Web site design: information design phase highlighted

Figure 2.4-1: Three Phases of Web Site Design:
Information Design Phase Highlighted

Following is a list of the major tasks that should be completed during the information design phase as well as some sample questions related to each task:

Define the site's goals.
- Who should be involved in defining the goals? Who are the decision-makers?
- What is the purpose of the organization itself?
- What are the site's short-term goals? long-term goals?
- If the clients already have a Web site, what issues are they concerned about based on their previous experience?
- Why do the clients want to create the Web site?
- What is the scope of the Web site?
Define the site's intended audience(s).
- How old is the intended audience?
- What does the intended audience already know about the subject?
- Is there more than one intended audience? If so, what different audiences do you anticipate for the site?
- What are the needs and goals for each intended audience?
- What are some typical user scenarios?
- What other sites make up the site's competition? What features, content, and functionality do those sites offer?
Determine the site's content.
- What are all the pieces of content the site needs to fulfill its mission? to accommodate its scope? to stand up to its competition?
- What types of functionality are required?
- How should the various pieces of content be organized or grouped?

The questions above and their answers are ultimately integrated into a "design document" that is used by the Web team to document and plan the development of the Web site. The design document is also for the Web clients to confirm that their needs and concerns are being addressed. Before continuing our discussion of the design document, let's take a look at the transcript of an interview between Web designer and client.

Transcript of Gage Vintage Guitars Interview

Assume you are the Web designer and Gage Vintage Guitars is your client. Below is a transcript of the interview held with your client.

Define the site's goals.

Who should be involved in defining the goals? Who are the decision-makers?

We (Fred and Barney Gage, brothers) are the owners of Gage Vintage Guitars, so we are the key decision-makers.

What is the purpose of the organization itself?

Gage Vintage Guitars exists to buy and sell good quality used guitars. At any one time, we have up to 700 guitars in stock. We also do repairs, offer guitar lessons, and host occasional concerts in the store.

What are the site's short-term goals? long-term goals?

The site's short-term goal is to create a positive Web presence which provides information about our various services, particularly highlighting the guitars currently in stock, our concerts, and our lessons. We want the site to work for both previous and new customers, in hopes of increasing both awareness of the store and, of course, sales. The site should create a friendly atmosphere that invites both local folks who want to come to the store and hang out and distant folks or collectors who need to do their browsing via the Web. Long-term goals include expanding to include tips and tricks, regular articles about guitar playing and guitar repair, interviews with musicians, etc.

If the clients already have a Web site, what issues are they concerned about based on their previous experience?

Not applicable.

Why do the clients want to create the Web site?

We feel that, in order to stay competitive and increase customer awareness beyond the strictly local level, we have to have a Web presence.

What is the scope of the Web site?

Phase One will include basic information about the store and our services (including lessons and concerts), especially featuring guitars currently in stock, organized by category (electric or acoustic), then by maker and model number. Phase Two will include expanding the site to include interviews and various articles.
Define the site's intended audience(s).

How old is the intended audience?

Gage Vintage Guitars attracts players of all ages, from teenagers to seniors.

What does the intended audience already know about the subject?

This varies from person to person. Some people are looking for a particular model of a particular maker's guitar. Others just want a really good, used guitar, but have no particular knowledge or preference regarding makers or models. The site will need to serve both types equally well.

Is there more than one intended audience? If so, what different audiences do you anticipate for the site?

As mentioned previously, the audience will vary according to age and knowledge about particular guitars. The site will need to appeal to all groups, and be usable for all groups, regardless of their age or knowledge. I guess we should consider also that the concert-attending audience may be different from the guitar-buying audience.

What are the needs and goals for each intended audience?

The greatest need or goal is for the site to make it easy for the visitor to find what he or she is looking for, with several ways to find it.

What are some typical user scenarios?

Scenario 1: Joe Jones, famous blues guitar player, is looking for a particular model Gibson guitar produced between 1959 and 1963. Can he quickly find out whether Gage has one in stock?

Scenario 2: Jill Jamison, a collector, just wants to browse by category. She's not really looking to buy, but might if she sees something really interesting.

Scenario 3: Jimmy Johnson wants an old electric guitar to start up a garage band. His main criteria is that it looks classic and has a solid body, but he has no particular maker or model in mind. Can he zero in on vintage solid body electrics easily?

Scenario 4: Jane Jacobs wants a small-body acoustic guitar with a big sound. She'd like it to have a spruce top and rosewood sides and back. Will she be able to search for guitars like this, even though she has no particular make or model in mind?

Scenario 5: Jason Jasmine doesn't even play guitar, but he wants to check the site to find out if there are any concerts coming up that he'd like to attend.

What other sites make up the site's competition? What features, content, and functionality do those sites offer?

There are dozens of guitar stores with Web sites in Gage's home state alone. They vary from having just a home page with the store's address, phone number, and logo on it to complex sites with pictures of the instruments and elaborate search engines to help customers find specific instruments.
Determine the site's content.

What are all the pieces of content the site needs to fulfill its mission? to accommodate its scope? to stand up to its competition?

Concentrating on just Phase One for now, the main content will include the Gage logo, the store address and phone number, directions, etc.; history of the store and owners; a list of our services; the types of lessons we offer and the instructors we have on staff; our upcoming concert dates; and, most importantly, photos and descriptions of guitars in stock. We'll need to keep it current and have an easy way to upload new items as they come in and eliminate items as they are sold.

What types of functionality are required?

Either a really good search engine or a really clear "drill-down" organizational system is critical in order to facilitate both specific searches and casual browsing. Or both?

How should the various pieces of content be organized or grouped?

Guitars in stock should be classified according to whether they are electric or acoustic. Next, they should be classified according to maker, then model number, then year built. We'll need to include a physical description of each guitar as well (e.g., color, woods used, size, etc.).

Web Team Client Interview

Now that you've seen a sample list of questions that need answering during the information design phase, as well as a sample interview between Web designer and client, it's time for your Web team to conduct your own interview. Keep in mind that you'll need fairly complete answers in order to create a design document for the client to sign off on later in the process.

It's
time!

2.4.1: Web Team Assignment

Each Web team will be the Web design team for another Web team, who acts as the first team's client or customer. In each case, the client team continues with the Web site idea brainstormed in Web Team Assignment 2.1.4:

Working within your assigned Web team, conduct an interview with your client Web team. Your goal is to get clear and complete answers to the questions listed previously in regards to the clients' proposed Web site, in preparation for actually creating that site for them. Feel free to add questions as necessary.
After an appropriate time period, teams should switch roles, i.e., the client team becomes the Web designer team who interviews the other team regarding their proposed Web site.

Introduction to the Design Document

All the information gathered thus far is used to begin creating an overall design document. Every Web project should include the creation of a design document as well as a corresponding design document sign-off sheet. These two items are used to document, confirm, and communicate the direction and flow of the project, as well as to protect you, the designer, from wasting time creating a site that doesn't meet client requirements or expectations.

Design Document

The format to use for any design document you create for this class is based on John Shiple's Information Architecture Tutorial (http://hotwired.lycos.com/webmonkey/design/site_building/tutorials/tutorial1.html):

Web Site Design Document for: (fill in your client's name here)

Site Goals
User Experience
1. Audience Definition
2. Scenarios
3. Competitive Analysis Summary
4. Appendix A: Competitive Analysis
Site Content
1. Content Grouping and Labeling
2. Functional Requirements
3. Appendix B: Content Inventory
Site Structure
1. Site Structure Listing (or Summary)
2. Architectural Blueprints
3. Global and Local Navigation Systems
4. Appendix C: Site Structure Listing (optional)
Visual Design
1. Layout Grids
2. Design Sketches
3. Page Mock-ups
4. Web-based Prototype

Design Document Sign-off Sheet

Creation of a design document sign-off sheet can be as simple as adding a line for the client's signature and date of signature under a summary paragraph for each of the five major sections of the design document, e.g.:

Design Document Sign-off Sheet for: (fill in your client's name here)

Site Goals
- [Insert summary paragraph]
- ______________________________
  Signee's name and date
User Experience
- [Insert summary paragraph]
- ______________________________
  Signee's name and date
Site Content
- [Insert summary paragraph]
- ______________________________
  Signee's name and date
Site Structure
- [Insert summary paragraph]
- ______________________________
  Signee's name and date
Visual Design
- [Insert summary paragraph]
- ______________________________
  Signee's name and date

[NOTE: Signee should initial the major stages within each design phase as they are completed and approved.]

Additional Resources

For detailed information about the first three sections of a design document, visit John Shiple's Information Architecture Tutorial and read Lessons 1 through 3.
For another perspective on determining a site's purpose and audience, read The Web Style Guide's Planning section (http://www.webstyleguide.com/process/plan.html).

Now that you've seen the skeleton of a design document and a design document sign-off sheet, let's take a look at some partially completed examples of these documents, based on the Gage Vintage Guitars interview transcript.

Design Document for Gage Vintage Guitars

Below you will find a partially completed design document and a partially completed design document sign-off sheet for your client, Gage Vintage Guitars. In the next assignment, you will fill in the blank areas of the first three sections of the design document (i.e., Site Goals, User Experience, and Site Content). These sections of the design document should be based on the Gage Vintage Guitars interview.

Gage Design Document

Site Topic: Gage Vintage Guitars

Site Goals
The owners' stated goals for this site include:
- Create a positive and friendly Web presence for Gage Vintage Guitars.
- Provide information about guitars in stock.
- (Add a third goal from the interview here.)
- (Add a fourth goal from the interview here.)
- (Add a fifth goal from the interview here.)
- Eventually, provide information about tips and tricks, articles related to guitars, etc.
User Experience
1. Audience Definition
  The audience for this site is very diverse. (Complete this paragraph by adding explanations and details based on the Gage interview.)
2. Scenarios
  (Insert the typical user scenarios provided by the owners in the Gage interview here.)
3. Competitive Analysis Summary
  (Summarize the owners' comments about other guitar store Web sites here. If time permits, visit two or three guitar store Web sites yourself to add to the list of features and functionality of the competition's sites.)
4. Appendix A: Competitive Analysis (Omit this section for now.)
Site Content
1. Content Grouping and Labeling
  - Information regarding the store: Gage logo, address, phone number, fax number, e-mail contact, directions to store, services, history, owners, policies, etc.
  - Upcoming concert dates
  - Types of guitar lessons and instructors on staff
  - Guitars in stock, each with a photo
    - Acoustic guitars, organized by:
      - Maker (e.g., Martin, Gibson, etc.) and model name and/or number
      - Type (e.g., steel-string, classical, flamenco, etc.)
      - Size (e.g., jumbo, dreadnought, concert, etc.)
      - Age (year built)
      - Physical characteristics (e.g., woods used, color, etc.)
    - Electric guitars, organized by:
      - Maker (e.g., Fender, Gibson, etc.) and model name and/or number
      - Type (e.g., solid-body, hollow-body, etc.)
      - Pickups (e.g., number and type, etc.)
      - Age (year built)
      - Physical characteristics (e.g., woods used, color, etc.)
2. Functional Requirements
  (Summarize the owners' comments about what functionality their site will require here.)
3. Appendix B: Content Inventory
  (Based on the sections above, compile a list of all the content you will need the owners to provide to you and insert it here.)
Site Structure (This section will be completed later.)
1. Site Structure Listing (or Summary)
2. Architectural Blueprints
3. Global and Local Navigation Systems
4. Appendix C: Site Structure Listing (optional)
Visual Design (This section will be completed later.)
1. Layout Grids
2. Design Sketches
3. Page Mock-ups
4. Web-based Prototype

Gage Design Document Sign-off Sheet

Site Topic: Gage Vintage Guitars

Site Goals
- (Insert summary paragraph based on info in design document)
- ______________________________
  Signee's name and date
User Experience
- (Insert summary paragraph based on info in design document)
- ______________________________
  Signee's name and date
Site Content
- (Insert summary paragraph based on info in design document)
- ______________________________
  Signee's name and date
Site Structure (This section will be completed later.)
- [Insert summary paragraph]
- ______________________________
  Signee's name and date
Visual Design (This section will be completed later.)
- [Insert summary paragraph]
- ______________________________
  Signee's name and date

It's
time!

2.4.2: Individual Assignment

Using the partially completed design document above as your starting point, complete the first three sections of a design document (i.e., Site Goals, User Experience, and Site Content) for the Gage Vintage Guitars Web site.

These sections of the design document should be based on the Gage interview transcript.
Use any word processor or text editor to create the document. For now, concentrate on the content, not the appearance. Later, you will use InDesign to create a professional-looking design document.

2.4.3: Individual Assignment

Using the partially completed design document sign-off sheet above as your starting point, complete the first three sections of a sign-off sheet for Gage Vintage Guitars.

These sections of the sign-off sheet should be based on the information in your Gage design document, completed in Assignment 2.4.2.
As in the previous assignment, use any word processor or text editor to create the document.

Web Team Design Document

Now that you've each had some experience creating a design document for Gage Vintage Guitars, it's time for your Web team to work on the content for your Web team client's design document and corresponding sign-off sheet. Remember, these two items are used to document, confirm, and communicate the direction and flow of the project, as well as to protect you, the designer, from wasting time creating a site that doesn't meet client requirements or expectations. Your goal is to distill the information gathered from the interview and other sources into an organized, clearly worded document that your client feels good about signing off on.

It's
time!

2.4.4: Web Team Assignment

Working within your assigned Web team, complete the first three sections of a design document (i.e., Site Goals, User Experience, and Site Content) for the Web site you are creating for your Web team's client.

These sections of the design document should be based on the interview you did with your clients for Web Team Assignment 2.4.1 and follow the design document format provided previously.
You can use any text editor or word processor; later, you will use InDesign to create a professional-looking design document. For now, concentrate on the content of your document.

2.4.5: Web Team Assignment

Once Web Team Assignment 2.4.4 is completed:

Each Web design team should meet with its client team and go over the first three sections of the design document.
Any changes, additions, clarifications, etc. should be noted by the Web design team in order to revise the document accordingly.
Each Web design team should revise the first three sections of the design document, based on the agreements reached during the meeting with the client team.

2.4.6: Web Team Assignment

Once Web Team Assignment 2.4.5 is completed:

Using the revised design document as a foundation, each Web design team should create a corresponding sign-off sheet for the client team. Use the sign-off sheet format provided previously. Use any text editor or word processor for now. Only the first three sections should be completed at this point.
After creating the sign-off sheet, each Web design team should meet briefly with its client team in order to obtain signatures for the first three sections of the sign-off sheet.