A long time ago…
Back in 2009, I examined the way in which courses could be listed and searched for at my University and developed a prototype user-interface to increase the visibility of each course we offer.
Things began as a personal project carried out in spare time – an ‘unofficial, unbidden and unapproved endeavour’ I described it back then – with the aim of creating something demonstrably useful that could be further developed.
Revisiting the basics
The design and prototyping was extensively blogged at the time, and the first prototype demo’d (to a packed tent 
) at BathCamp BarCamp 2009. You can read more about the UX design in the following posts tagged guerrilla-gardening. In 2011, development of the interface has finally begun in earnest.
Available Data
The greatest limitation at inception was available data. Course information was coming from a content-managed JSON source and provided only course title and web-page URL. It must also be understood that while there is knowledge of formal course data formats, we have none in use that combine course and marketing information. Thankfully, a separate project to manage course web-page delivery through Microsoft Sharepoint has allowed full database access to extensive course information.
New design and UX considerations
Here’s how things looked in 2009:
Scrolling the Course Listings by starting letter
The first change is that we’ll be concentrating on undergraduate courses, so no tab structure.
Secondly, we had a rather ugly switch from course title lists to a title + summary listing from the Ultraseek search API, but the more reliable data source has changed that.
The latest incarnation treats course listings as definitive course records, so when an as-you-type filter phrase is searched for with a click of the search button, the results aren’t re-presented but they’re used to augment the existing course listing with a summary of text from the live page.
Thirdly, stakeholders in the project agreed that being able to update the list the moment you type a letter means we can do away with the row of alphetic teeth that previously mirrored the Content Managed A-Z list pages (they’re days are numbered too).
One new feature on-the-cards is sorting/grouping by faculty, again afforded to us by better data. This should allow for a lightweight, low overhead means of seeing related courses, grouped by faculty and highlighted by the corporate faculty colour.
As-you-type filtering narrows the list as before, but also updates a match count and six other course counters for each displayed faculty.
Type ‘engineer’ for example and you see the bulk of courses under the Faculty of Technology, where you may find other courses related to your area of interest. Type ‘forensics’, and you see courses across Business, Technology and Science, inviting you to examine their differences.
Under the hood
The bulk of the code is still classic ASP (I know, I know). jQuery has replaced Scriptaculous/Prototype for the client-side interaction, a design choice primarily, but also a matter of support knowledge.
Basic course listings are served in an unordered list for static-page accessibility, and they’re then enhanced with JSON-based detailed course information. We’ll be popping the scrolling list to full height for compatibility with mobile devices in the short term.
Of course, the JSON formatting of detailed course information by faculty is an opportunity in itself.
We’ll be using Google Analytics, our tracker of choice for some time now to see if this makes a difference, which given the tens of page loads we’re saving ought be significant. Track Events will also be used to assess every client-side interaction with the Course Finder to inform its future development.
New advantages
It is hoped that as-and-when it goes live, faculties should be able to link directly to their own listings in the main marketing courses area, so eliminating the need for duplicated content in the CMS. An upgrade to IISÂ affords the opportunity finally get course titles in the URLs using something akin to Apache mod_rewrite.
Deployment is imminent.
