City University Case Study - Squiz Web Experience Management Seminar

Editor's Notes

• #2: Hi, My name’s Dan. I’m the Development Manager at City University London. I manage a team of web developers and a team of application developers who together develop and support the University’s various online websites, services and applications. My background is in web development, and I’ve been in the industry in various guises for almost a decade now.
• #3: This is the marketing fluff that I have to start with. I’ll let you scan it before I move on to the stuff that you may actually be interested in.
• #4: I want to start with a brief insight into the scope of our site redesign project, and into some of the conceptual thinking that went into developing the Information Architecture for our content and data. I’ll then describe how we took the theory and put it into practice by highlighting one of the features that we build – our course finder.
• #5: The original brief seemed fairly simple – to redesign our two corporate websites. But as is often the case, the scope of the project ballooned rapidly, & what was originally intended to be a 5 month project ended up taking 15 months. Lots of very good things happened along the way, and quite a few not so good things as well. We definitely bit off more than we could chew – as you can see, we build everything from scratch, and all with fairly limited resources - & it was a mistake to undertake so much concurrent change. But it wasn’t all bad....!
• #6: 1 / 2: At the start of the project we had to battle long & hard to stop development being outsourced to an agency, which was pretty frustrating because I knew we had the ability to do it ourselves. The University now understands this (I think!) & there’s definitely a greater appreciation of our skills. 3: There’s also a new appreciation for the fact that we need to start measuring the success of web projects based on usability metrics rather than delivery dates. 3 / 4: We stripped down our external facing website from approx. 90,000 documents down to about 3,000. We audited our site content and simply got rid of many thousands of irrelevant, out-of-date docs, and have introduced some rudimentary governance to help stem the tide of new content and maintain existing content. 5: We were introduced to Agile at the start of the project, and although it took us some time to get used to it, it’s brought real benefits & we’re still using it today to plan our development cycles and to manage and prioritise our backlog of bug fixes and development requests. 6: We love Funnelback! It’s an incredibly powerful tool and although we’ve done some cool things with it we feel that we’ve barely touched the surface.
• #7: At the start of the project, the Web Team went to IWMW 2009. There was the usual mix of the useful & not-so-useful, but two talks really stuck out: The first was an awe-inspiring insight into the processes employed by BBC egg-head developers, with a focus on Domain Driven Design, which I knew very little about at that point. A rant against the state of University course finders by Paul Boag, a well-respected usability evangelist. Why were these sessions so pivotal for us?
• #8: Let’s look first at the BBC’s use of DDD. Here’s the wikiepedia definition. It’s fairly hard to get your head round. What does this mean?
• #9: DDD For us, this meant focusing on the central aspects of the University’s business like courses, academics and research, that we need to represent through the website, rather than focusing on specific content for specific URLs. It also meant m apping out the relationships between these domains, rather than a more traditional starting point of a redesign project, which would be to define the relationships between web pages by creating a sitemap.
• #10: This process got us asking what is the ‘atomic element’ of our site, i.e. the deepest, most elemental node of our online presence? Search engine: search result News site: story page Social networking sites: profile page University site: course page. For the moment, selling courses is the primary business model for most Universities, & it’s the main reason why prospective students visit our sites. You could argue that everything else is peripheral. … and if our course data is so fundamental to the success of our online presence, we need to make it as easy as possible to find.
• #11: … which brings us back to Paul Boag. His main gripe was that Universities make predetermined assumptions, probably not based on evidence, about how users want to search for and filter course information, leading to a poor user experience.
• #12: So rather than being prescriptive & making assumptions about user preferences, why not put the control in the hands of the user by employing the most appropriate search design patterns? In particular, we started thinking about: Faceted navigation Auto-suggestion / auto-completion
• #13: Auto suggestion – often called auto-completion – is so ubiquitous on the web, and desktop and mobile interfaces that I’m sure I don’t need to define it to you. We knew that if we used a free-text course search field we should get auto suggestion working.
• #14: What about faceted navigation? In order to understand faceted navigation, we first need to understand what facets are. It was actually really difficult to find a decent, concise definition, & this is the best I could come up with.
• #15: Faceted navigation is now everywhere, mostly in e-commerce and comparison sites, & has in fact become central to the search experience and success of a huge number of sites.
• #16: Why is faceted navigation so beneficial? There are four advantages that we can look at: Findability: there is quantitative evidence that faceted navigation makes content and data easier to find. Aboutness: if we look at the ebay example, you can see that the full breadth of formats, categories, conditions, and so on of the available graphic novels is immediately visible. Confidence: If you have clearly labeled, meaningful facets, users will feel more confident that they’re narrowing down search results to those that they really want. Reduced Uncertainty: Unlike free-text keyword search fields, users don’t have to content with concerns that they have used a keyword or phrase that doesn’t match the language or taxonomy terms used by the data set.
• #17: Let’s take a look. Explain interface: Clean and simple. Unambiguous keyword search field at top. Tried to make distinction between keyword search and faceted navigation obvious. Facet filters down left-side, as is industry standard. - Pagination links at bottom. Open Firebug Auto-suggest. Explain that Funnelback has native auto-suggest engine (padre-qs-core.cgi). It’s quick, & data is returned in a lightweight format (JSON). Search for ‘economics’. Show highlighting of search query in results list. Filter by ‘postgraduate’ Click on ‘Development Economics’, then back, to show how retains memory of active filters. After example, back to heatmap.
• #18: Has it worked? There are definitely some tweaks to be made, but on balance we think so. This is a heatmap of our courses index that captured user clicks during a 5 day period in early June. You can see that the facet filtering is very heavily used, as are the keyword search & pagination links. We’ve also had positive qualitative feedback in user testing sessions, & our analytics tell us that larger volumes of users are finding their way to individual course information pages.