Course Development Handbook Site Redesign

Synopsis

The Course Development Handbook website for the University of Washington's Information School (iSchool) needed to be updated and redesigned to align with the larger iSchool website that it was a part of. The handbook website is intended to be a resource for faculty to use when developing online courses. My internship at the school required me to research how the site was used, design a new information architecture for the site and produce documentation to be given to the development team for the second phase of the project.

User Research

My research was divided into three stages. The first consisted of reviewing the old handbook website to understand what content was available and how it was structured. The second was to survey the faculty about their use of the site. The last stage consisted of looking at the site's weblog data to determine usage patterns.

Content Inventory

I did a content inventory of the current site to get a better understanding of what content is included on the site. Doing the inventory also helped me learn the structure of the site. I used excel to do this and the information shown includes: the name and URL for each page, one word descriptions of the content on the page, a list of links on each page and the page level. The page level indicates the number of clicks away from home that a page is.

Sitepath Diagram

The sitepath diagram tries to show the structure of the site visually by showing the user how the pages are linked. The pages are separated into click levels of 1-3 meaning that a page on level 3 is three clicks away from the home page. Under each page title is a description of the content contained within the page.

Faculty Survey

The survey was administered with 13 faculty members; nine of the interviews conducted in person or over the phone. The remaining surveys were taken online. The goal of the survey was to learn how the faculty went about designing online courses and what role the Course Development Handbook played in their efforts.

The survey results left me with a couple of major takeaways. The first is that faculty members were using the handbook to look for information relating to online tools and website development. The implication for this was to give me an idea of what to look for when I analyzed the weblog data at a later point. The second was that a common resource that is used by faculty when developing courses is other members of faculty. My supervisor and I brainstormed what this might mean and we came up with the idea of providing a place on the website where faculty members could discuss issues such as best practices for developing and running their online classes.

Weblog Data

The final piece of research I conducted was to analyze weblog data for the faculty handbook site going back to 2006. The main goal of this was to verify if actual faculty use of the site matched what they had answered in the surveys. It turned out that pages relating to online tools and website development were among the pages most frequently landed on. This was an expected result and helped me in designing my site hierarchy when I started working on the wireframes.

Design Features and Rationale

One of my goals for the project was to create the taxonomy in a way that matched how faculty used the site. After analyzing the data from the surveys and weblogs it was clear that faculty most often visited pages about the online tools that were available and pages with instructions on creating class websites. The old site had this information but it was difficult to find amongst the various links. For the new site, I made the global navigation fit what information they were looking for and the context in which they would look for it.

One theme that consistently appeared during my interviews was that faculty members liked to discuss with each other methods for improving the online learning experience. I came up with the idea of a Best Practices section of the site where faculty could share the methods that had worked for them in the past. This is the one interactive section of the site with faculty having the ability to post video interviews or flash demos and be able to comment on previously posted content. It also has the added benefit of helping new faculty that may be teaching remotely get themselves up to speed on the technology.

During my review of the old site I noticed that as a user clicked a couple of levels into the hierarchy, there wasn't an easy way of keeping track of their place within the site. I designed a persistent local navigation bar that appears on every page. This is intended to help a user understand where in the site they are and also let them navigate through the site more quickly than before.

Wireframes

The site wireframes were one of my final deliverables to the development team. I created wireframes for nearly every page of the site and kept them free of content but instead focused on the navigation scheme and links. There were two reasons for this. First, I used the wireframes as a lo-fi prototype for user testing and needed to represent any of the possible pages that a user might navigate to. Second, the site did not have very many interactive elements and at this stage it was more important that the users could navigate easily through the site to find what they needed.

The wireframes were first given a pilot test with my supervisor to point out any potential problems with the site concept. After making small changes my supervisor and I conducted tests with two faculty members. I played the computer and took notes while she encouraged the faculty to talk through their thought process. After these tests, we analyzed the results and decided that the Online Tools page needed to be changed. I created a new layout for the information on that page and made small changes on other pages. We then tested with two other faculty members and got a strong positive response to the changes.

Sitemap

The sitemap shows the user how the pages are linked throughout the site. Instead of showing all of the pages in a single view, it is broken up to show individual landing pages that contain a link to another part of the site. One feature feature of the sitemap is the hierarchy shown on the individual pages throughout the document. This is meant to show where on the site hierarchy a linked page belongs. Another feature to note is that some pages are shown as a stack. Using page 12 Adobe Audition as an example again, it links to page 15 Individual Instruction Pages. These are actually a set of links to the various instructions for how to use Adobe Audition. Since they all have the same interactions, they are shown as a stack to save space.