Planning Your Website

For existing websites, do a content inventory of the existing site.

1. Complete the various columns for each page on the existing website.
2. If you have a lot of pages (will depend on size of website), you might want to create separate tabs for each section.

Determine the following:

1. Who is the target audience?
2. Why they are coming to the site?
3. What are their goals?
4. What tasks they are performing?

User Interviews will help you determine how typical site visitors use your existing site. Examples of typical site visitors might include:

1. Internal Staff (from each unit)
2. External Staff (outside of your department, but closely affiliated)
3. Current Employees (outside of your department, still on campus, but not closely affiliated)
4. Other (new or prospective; visitors not affiliated with the campus; visitors from other campuses)

Interview Questions

Questions for site visitors can include:

• How do you typically visit the website? (desktop or laptop, mobile, tablet, browser, operating system)
• How often do you visit the website?
• Why do you visit the website?
• What tasks do you perform when you are on the site?
• Which task do you perform most often?
• Which task is most important to you?
• What aspects of the website are particularly frustrating?
• What aspects of the website do you find particularly helpful?
• If you could change one thing on the website, what would it be?
• Is there one thing on the website that you can't live without?

If you need to figure out who your typical website visitors will be, you may want to write out personas to better understand your users. For each persona, you should at least indicate:

• Title (and any other background information you want to capture)
• Technical Level (Beginner, Intermediate, Advanced)
• Familiarity with subject
• How often the user visits your website
• Primary Task
• Secondary Task
• Tertiary Task
• Any known pain points

In some cases, more detailed personas may be helpful. Visit Fluid Personas to see examples of detailed personas.

You may want to create a task list of the top tasks for each visitor/persona (change the Personas listed in the template based on your website).

For existing websites, if you are tracking statistics (e.g., Google Analytics), look at those stats and compare your most visited pages with the existing content inventory.

Create a rough content outline for the proposed website.

You may want to start by doing this as a quick outline in a Google or Word document. The rough outline doesn't need to get too detailed. It's primarily to help you think through the information architecture and then get feedback from the content owners to make sure everyone's on the same page.

Once everyone agrees with the rough content outline, you can flesh out a more detailed content outline.

Complete the information in each column of the attached outline, and feel free to add your own columns if you want to keep track of other information.

A sitemap is a flowchart that visualizes the site structure. You can create a flowchart (site map) using a tool such as Visio or Balsamiq Mockups.

As a general rule, each flowchart page should be limited to three levels of structure:

• Grandparent: Home Page
• Parent: Primary Pages
• Child: Secondary Pages

You may want to create wireframes, mockups, or prototypes for your website.

Wireframes are non-designed page layouts that are the basis for visual design and HTML production. Here are a few examples for creating wireframes/mockups/prototypes:

• Paper: General ideas sketched out on paper.
• Visio: Simple wireframe using basic shapes (rectangles, circles) to represent content, navigation and basic functionality.
• Balsamiq Mockups: Easy-to-use rapid wireframing tool.
• Photoshop: Detailed, pixel-accurate wireframe with naming, labeling and placeholder content.

Visio Wireframe

1. Create a new Visio file based on the Basic Diagram Template.
2. Drag and drop basic shapes (rectangles, circles) to represent content, navigation and basic functionality.
3. Layout the shapes using the "Shape" Menu and "Size and Position" Panel.
4. Create child pages based on the parent page.
5. Hyper-Link the pages together as necessary.

Balsamiq Mockups Wireframe

1. Create a new mockup (“New Blank Mockup”).
2. Drag and drop items from menu (Layout, Containers, Forms, etc.)
3. Create child pages based on the parent page.
4. Hyper-Link the pages together as necessary.

• Web Writing Tips (PDF)
• Don't Make Me Think (book - link to Amazon) - "a common sense approach to web usability"

Review external websites and identify best practices. Look at other websites in higher education as well as in your functional area in general (consider other public institutions, e.g., government or municipal sites).

For each site, evaluate the following:

• Overall Experience: Was the general experience favorable? Would you return?
• Information Design: Was the information structured in a logical manner?
• Visual Design: Was the site visually appealing?
• Usability: Was it easy to complete the actual tasks? (Compare with your existing task list identified above)
• Unique Approach: Any unique ideas/functionality that you may want to consider using?
• Naming: What names are they using for their page titles, headings, and content? Are those common names that your visitors would recognize?

The following templates can be used for the External Review process:

• External Review Evaluation Form (list of external sites to evaluate and use for comparison)
• Top 5 External Websites (the top sites you would recommend for consideration in redesigning your website)
• Final Report (recommendations for task implementations, as determined by external review)

The Usability Testing document features an outline of the Usability Testing process, including methodology, test script, task list, final report, etc.

Once you have your redesigned site in development, some usability testing will be helpful in order to determine if your new site organization and content makes sense to site visitors. As with User Interviews, you may want to hold usability testing sessions with a set of typical site visitors, such as:

1. Internal Staff (from each unit)
2. External Staff (outside of your department, but closely affiliated)
3. Current Employees (outside of your department, still on campus, but not closely affiliated)
4. Other (new or perspective; visitors not affiliated with the campus; visitors from other campuses)

Task List, Observation Form, and Survey

• Create a list of tasks that you would like site visitors to be able to accomplish when visiting your redesigned site. These tasks might include finding certain pages and/or information, filling out forms, etc.
• When performing Usability Testing, the Observation Form can be useful for taking notes (time to took for the visitor to complete a task, task descriptions, and other notes).
• After the Usability Testing session is over, the Post-Session Survey can be filled out by participants in order to provide additional useful feedback.