Web Usability Testing of Current and Prospective Students
This week we are conducting Web usability testing on the new site design with current and prospective students. We had two people from BarkleyREI on campus on Tuesday to test the new site with current students and we are testing prospective students at BarkleyREI’s headquarters in Pittsburgh throughout the week.
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.
Level Page Design Comps
Since the approval of the new home page design, we’ve been working with BarkleyREI on designs for lower level page templates. You will see several recognizable design elements that are being carried over from the new college home page design — the color palette, the blue page background gradient, header and global navigation, and the super footer.
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.
New Home Page Design Concept
After more than a month of work, multiple design concepts and revisions, and input from prospective students and many staff and administrators from across the college, we are pleased to unveil the new Saint Anselm College home page design.
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.
Home Page Wireframe, Site Map, and Content Outline
Over the course of last month and half we’ve been hard at work on several fronts with the redesign project. First, we worked with BarkleyREI to finalize the information architecture (aka site map) for the college site. We also completed the site content outline, which is a more comprehensive outline of the site’s higher level pages with detailed notes.
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.