Before I get into it, I suppose I should explain what usability testing is and why we are doing it (and why it is really important). Web usability guru Jakob Nielsen describes usability testing as “a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease-of-use during the design process.”

The aim of our usability testing is to evaluate the new Web site design and information architecture with end users. Up until this point we’ve followed industry best practices in developing our site strategy, the site’s information architecture, and in designing the user interface for the site. So each step of the way we’ve made numerous assumptions and usability testing allows use to get direct input on how real users of the site think and respond to the design, content, and how we’ve organized the site. Does the site meet it’s intended purposes, what is its ease of use (in particular sections or as a whole), are users in each group able to complete expected site tasks, are we seeing any trends from one user test to the next.

We are testing 5-6 people in each user group (or audience) for a total of 10-12 user tests. This is more than enough of a sample size to begin to see trends, something that Jakob Nielson discusses on his site in an article entitled “Why You Only Need to Test with 5 Users.”

How User Testing Works
The actual usability testing is done using Morae usability testing software. All candidates are pre-screened against certain criteria before scheduled for testing and then screened again by the test administrator just prior to their assigned testing session. Since this is human testing, all participants must sign a consent form before the test begins since the entire session is videotaped and all screen movements are captured. Test participants are compensated for their time. A observer, who is located in an adjacent room, takes notes during each test session. Test subjects are asked their general impressions of the new site and if they are familiar with the current site, their feelings on that as well. Test participants are then asked to complete a series of tasks, these are tasks that people in a given audience group should be able to complete easily. For example, for prospective students, we might ask them where would they go to request information, apply, schedule a campus visit, find a list of majors, etc. Surprisingly, you can begin seeing trends as early as the first 2-3 tests.

After all the user tests are completed for both groups, a highlights reel and final report is produced. The data gathered during this process then allows us to make changes to the site that address any shortcomings.

Based on the preliminary current student test results (from what I observed), the new site tested very well. The general impressions of the site we very favorable and in most cases, not what current students would have expected from Saint Anselm College. It will be interesting to see the results of prospective student testing and how that compares. Surprisingly, the current Saint Anselm College site tested very well with its current design and organization of information, with a few known trouble areas (or complaints), both of which we are addressing during this redesign project, specifically, a more robust campus calendar and search engine.

I’ll report back on this blog on the final results for both the prospective and current student groups.

What About Faculty, Staff, and Alumni User Testing?
At this time, we are not planning to conduct user testing for faculty, staff, and alumni. Some of this has to do with available budget and time in our project schedule – usability testing is expensive and very time consuming. We’ve chosen to test two important audiences this go around – prospective and current students.

Alumni have their own Web site, AlumNet, which will only be reskinned with the new design template (the navigation will not change). The faculty and staff audience, since they are a smaller audience and an internal constituency, can always be “trained” on how to use the new Web site if need be, something we aren’t afforded with prospective students. If a prospective student can’t easily find how to apply, visit campus, or request information, there are real consequences for this and an impact on the college’s bottom line given our heavy reliance on tuition.

Please keep in mind that the photos used in these design comps are only placeholders as is the Latin text used for filler. Also, we’ve overfilled the right sidebar to show multiple options available for displaying column call outs.

At this stage, BarkleyREI presented us with two unique design approaches for the level page templates. One design saw the color red introduced to the color palette (the same red used on the current site). After seeking feedback from several offices, we decided that the introduction of red to the color palette was a sharp departure from the color palette used for the new home page. So we have stayed with a mostly blue color palette in the level page designs.

Other Design Options We Considered

• Page Photo
  Have the photo at the top of the page extend just across the main content area (single column) or also across the right sidebar (two column). We chose to display a wider photo. The page tracked better with a wider photo.
• Navigation
  We chose to go with navigation presented in a larger font with a subtle divider between each page name. The other option we considered featured navigation in a smaller font and in a more boxy style.
• Right Sidebar
  Present the right sidebar in a more boxy style separated from the main content area or go with the blue to white gradient we ultimately chose.

Tour of the Level Page Designs

Header
The header, which includes the college logo, global navigation, and search engine are carried over from the home page design.

Department Name
This will be text generated. Initially we had some concerns about how longer department names would list in this area, since the font size for this area was quite large. So we asked BarkleyREI to play with the font size and also try some larger site names in this section as can be seen in the second design comp “Institutes, Centers, and the Arts.” We are satisfied that this area can handle short and longer department names.

Department Site Navigation and Page Titles
We opted for a larger font size for department navigation. We really like this. It presents and reads much better and should make getting around the site easier. With that said, the new site will allow navigation to extend down into the site five levels, which is a real plus. Our current Web site extends to five levels deep, but the navigation moves to the right sidebar and can be confusing. We addressed this shortcoming with the new site.

You’ll also see that we are using breadcrumb navigation in the new site (above the main content area). This will also allow for an additional means of navigating lower sections of the site.

Presented just below the breadcrumb trail within the blue bar is the page name. For added flexibility, the page name can differ from the name used within the site navigation. This is a real plus.

Large Photo
Each lower level site will have the ability to display a large two column photo (or to not display the photo). This photo will include a space for a caption as well. We’ve also asked BarkleyREI to provide us with a second option where we can display a static photo with caption and 3-4 thumbnails that will allow site visitors to click through multiple photos at the top of some department pages.

Middle (Main) Column
As noted above, each page name will be presented in white over the blue bar that extends from the main column over the right sidebar.

Also within the main column you will see a department news section and an events section. Each department site will have the ability to bring in college news and events within their sites. We will be developing a site-wide keyword taxonomy or categories for all site content that will permit the site-wide sharing of content. Gone will be days of having to enter content multiple times in multiple places – this will hold true to department news items and events. RSS feeds will also be displayed within the news and event areas.

Right Sidebar
Faces of Saint Anselm is a multimedia feature. When visitors click on the “Faces” call out, a Flash overlay presentation (aka lightbox effect) will open over the page and visitors can view profiles of students, faculty, and alumni. The profiles will be presented similar to how the stories are on the new home page – text and multiple photos or text and a video.

Videos and photos will also open up as an overlay and a Flash video player or photo gallery will be presented.

Super Footer
The super footer will be carried over from the home page and used site-wide. Included within the super footer is the “My Links” area, which will allow frequent site visitors to display their own custom links that they access often.

What’s Coming Next

• Several more page comps will be generated for additional lower pages and site features, including the Flash video player and photo gallery overlays.
• Usability Testing – we will be preparing to host BarkleyREI on campus in late October to conduct two days of on-site usability testing. We will be testing the site designs with prospective students, current students, and faculty/staff.
• Evaluation of the Active Data Exchange calendar, the new calendar application we will most likely implement in the new site. You can see an example this calendar in action on the NC State Web site.
• Purchase of a Google Mini Search Appliance – this will provide site visitors with a more robust search experience.
• Discuss and select site hosting – do we host at the college or with an external hosting provider?
• Ingeniux CMS training – I will be attending a week-long developers training in Seattle in mid-October
• Content writing, content writing, and more content writing… not to mention site photography and video production
• Finalizing site migration plan (from our current site to our new site)
• Lots of other big stuff and little stuff, which we won’t bore you with…

Until next time…

During this stage in the project, BarkleyREI presented us with four distinct home page concepts for review. Each concept featured a Flash multimedia area at the center of the home page focused on telling stories using video, photo/audio slide shows, and photo galleries. Based on the feedback we gathered during the initial review of the four design concepts, we narrowed our choice to a single design, what we are calling “The Wall” concept. We then made changes to the design’s final color palette, the number of stories presented, interactive elements, font sizes, logo treatment, etc.

“The Wall” Concept – An Overview

Site Navigation
The new home page design features three levels of navigation – (1) global navigation (Admission, Academics, Campus Life, Institutes, Centers, & the Arts, and Athletics; (2) secondary navigation consisting of audience landing pages; and (3) tertiary navigation, which in the design is located under the “Resources” drop-down menu.

Multimedia Area
The multimedia wall will be driven by Flash with stories stored and managed in XML. When the home page first loads, visitors will be presented with a large horizontal campus image – an image that provides a sense of place to site visitors. The single, large campus image will be randomly chosen on page load from a directory of 25-30 stored images. As the page loads, The Wall will be populated with the multimedia stories. We chose this route to avoid the dreaded loading… loading… loading… messages, which can often be seen in some Flash designs. Our main goal is to not annoy frequent home page visitors with an over the top Flash element, but to have the loading of the multimedia be subtle and load quietly in the background. As the page loads, multiple stories will load within The Wall area. Home page visitors can also be more selective and choose to only show stories relevant to the keyword filters shown on the page. In this case, we are using the keywords Do. Lead. Solve. Achieve., but the final keywords selected for this area will be different.

When you mouse over an image in The Wall, it will be highlighted and a headline will be shown. When you click on a story, an overlay box will open on top of the home page (important note: this will function differently than a pop-up window). Once the overlay box is opened, the box will present content featuring a video player and text, an audio/photo slide show and text, or photo gallery and text. Each box will also feature a “Dig Deeper” link area sending visitors deeper within the Saint Anselm College Web site. In the end, visitors can spend most of their time perusing the content within The Wall without ever having to leave the home page.

News, Events, Virtual Tour, and Featured Content
Directly below The Wall, visitors will be presented with news headlines, event listings, and a link to the new virtual tour or a featured college video. Both the news and events areas will utilize “slider” or “accordion” functionality. Featured news headlines or events will be open on page load and other headlines or events can be viewed by clicking the “+ View” link next to each listing. By clicking the “View All,” visitors will be taken to the new event calendar or the college news page.

Super Footer
The footer on most Web pages is underutilized real estate. So in the new site design you will see an expanded footer featuring much more information than the college’s address and phone number. The super footer will include lists of important links for prospective students (Quick List) and the campus community (On Campus). It will also include a customizable “My Links” area where where visitors can choose their own frequently accessed links to display in this area (set using a cookie). This will be useful to visitors who use the same computer all the time for accessing the college Web site. Lastly, the super footer will also feature links to social media sites where the college has a presence, including Facebook, Twitter, Flickr, and YouTube.

How We Got Here
To get to this point, we built upon the work that had been done during the previous information architecture, content outline, and wireframe stages (read this blog post for background) and these stages were informed by what we learned during on-site discovery and strategy. During each stage we’ve sought feedback from key staff and administrators. When it all comes together, a redesign project is really a series of building blocks with each new layer built upon the previous layer. And as is the case with any successful building project, you must start with a strong foundation before you build your main structure.

Kudos
We are very grateful for the work of BarkleyREI, our Web vendor. They have been a great partner to work with and we feel their home page design and the emphasis on telling stories really captures the essence of Saint Anselm College. We also owe a debt of gratitude to the many people who provided feedback on the home page designs.

Next Steps
We are currently reviewing wireframes for our level page templates (the pages listed in our primary and secondary navigation). We’re reviewing technical development plans, including discussions with our new CMS vendor Ingeniux, and have a finished content tracker for tracking the production of all new content as listed in our content outline, among many other things. We’ve also spent time recently revisiting the project budget and schedule, and planning for future project deliverables.

Lastly, we completed work on the home page wireframe, a visual representation of the home page we finish before we begin any design work. The wireframe defines what will go on the home page, including primary, secondary, and tertiary navigation, footer, call outs, search box, news and calendar listings, and multimedia features. Over the course of this work we sought and received input from several offices and have appreciated their feedback.

Overcoming Silos
Early on in our redesign project when we were selecting a Web firm, we received feedback from several companies that our Web site information architecture was strong, but was very siloed. We spend a lot of time on our current Web site directing visitors to one department or another for Web information. The thing to keep in mind is that our Web visitors should not have to learn our organizational structure to find information about us. With this in mind, we spent a lot of time developing the site’s information architecture to have it be more topic based and building stronger landing pages for the site’s target audiences – current students, parents and families, alumni, businesses and community, and faculty and staff.

It’s important to note that the primary audience for the college Web site is prospective students, an external audience that is least familiar with the college’s organizational structure and an audience where topic-based navigation is a better approach.

Next Steps
With the home page wireframe, content outline, and site map now complete, we now move on to the next project priorities:

• Home page design concepts - BarkleyREI will present us with four design concepts for review
• Lower level wireframes – defining what will be included on all landing pages and major sites linked off the college home page
• Content migration tracker – a spreadsheet tracking all content that will be migrated from the current site to the new site
• Site application inventory - an inventory of all scripts, applications, and forms that will carry over to the new site and require development or template skinning
• Ingeniux application handling - Determine which applications and functionality will be handled within the Ingeniux CMS and those that will require custom development.

We also recently installed a new CMS export tool on our Web server that will allow us to easily export all current CMS content as plain text in a directory structure. Pages in the new CMS will be coded to XHTML Transitional, so much of the formating on our current site will be stripped out to remain complaint with the new document type.