City University Case Study - Squiz Web Experience Management Seminar
Upcoming SlideShare
Loading in...5

City University Case Study - Squiz Web Experience Management Seminar



Daniel Jackson, Web Development Manager at City University gave a talk on their recent web project to rebuild their two main websites and intranet. Daniel included details on the challenges, ...

Daniel Jackson, Web Development Manager at City University gave a talk on their recent web project to rebuild their two main websites and intranet. Daniel included details on the challenges, objectives and outcome of the project - including a showcase of their intuitive course finder powered by Funnelback Search.



Total Views
Views on SlideShare
Embed Views



5 Embeds 250 187 60 1 1 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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.
  • 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.
  • 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.
  • 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....!
  • 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.
  • 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?
  • 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?
  • 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.
  • 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.
  • … 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.
  • 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
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.

City University Case Study - Squiz Web Experience Management Seminar City University Case Study - Squiz Web Experience Management Seminar Presentation Transcript

  • Squiz Seminar: Challenges & Solutions for Web Experience Management Dan Jackson Development Manager
  • About City
    • City University London is an international University committed to academic excellence with a focus on business and the professions.
    • The University is in the top 5% of world universities according to the times Higher Education World University Rankings 2010 . 
    • City is ranked 10 th in the UK both for graduate employability according to The Times Good University Guide 2011 and graduate starting salaries according to The Sunday Times University Guide 2011.
    • City attracts over 22,000 students from around 160 countries.
  • The next half an hour
    • About City’s site redesign project.
    • How we modelled our website.
    • Putting theory into practice.
  • Our ‘website redesign’ project
    • Two new corporate websites ( , ) and a new intranet for staff and students ( ).
    • New CMS, new search engine, new servers, new network, new content, new IA, new design, new features and functionality, new project methodology, new code control & deployment processes, new content approval workflows, new business processes, etc. etc.
  • The Benefits
    • Raised profile of our development teams.
    • Greater appreciation of our in-house talents.
    • Focus on usability.
    • Massive content cull.
    • Introduction of web content governance.
    • Agile.
    • Some great new tech!
  • A Story
  • Domain Driven Design
    • “ Domain-driven design (DDD)  is an approach to developing software for complex needs by deeply connecting the implementation to an evolving model of the core business concepts.”
  • Domain Driven Design
    • The design of our website should directly reflect the areas of knowledge or activities (‘ domains ’) of our University.
  • Domain Driven Design
    • What is our ‘atomic element’? It has to be The Course
  • Why university course finders suck
    • “ ...course finders are typically slow and page based. The user is forced to navigate a series of link intensive and text heavy pages, before finding information on a single course. There is no ability to compare courses, filter results or receive course suggestions. Instead the course finder is treated like any other page of textual content on the site.”
    • Paul Boag,
  • So how can we build a course finder that doesn’t suck (as badly)?
            • Make it more akin to a single screen web application than a series of link-heavy pages.
            • Focus on usability and search design patterns, notably auto-suggestion and faceted navigation .
  • Why Auto-Suggestion works
        • Continual feedback helps rapid narrowing of results.
        • Reduces the number of keystrokes, allowing for faster user input.
  • Facets
    • “ Facets are categories that describe the properties of an object or collection of objects. ”
    Wine Courses Region Subject Grape Award Level Colour School Price Department Rating
  • Why faceted navigation works
    • Findability : Users can’t sign up to courses that they can’t find, and faceted navigation has been shown to improve findability.
    • “ Aboutness” : Facets show the overall semantic make-up of a collection. They convey the breadth and type of a results list, for instance.
    • Confidence : Faceted navigation increases information scent.
    • Reduced Uncertainty : Users don’t have to specify precise queries.
    • Source:
  • Thank You Questions?