Powerful search with instant results

26 September 2018

This is an old post, so may include broken links and/or out-of-date information

James on stage at Leeds Town Hall, as part of Spektrix Conference 2018

Today I was part of a panel discussion at the Spektrix conference. During the session, web agencies spoke about the challenges of communicating an organisation’s offer online, and the tools and approaches they take to give users the best online experience.

I talked about our work with Midlands Arts Centre – aka MAC – an organisation we’ve been working in partnership with for the past five years.

The exterior of Midlands Arts Centre, Cannon Hill Park, Birmingham

Supercool + MAC

MAC is one of the UK’s largest arts centres, offering a huge programme of music, comedy, theatre, film, visual arts and various creative courses throughout the year:

  • 1m+ visitors
  • employs over 1,000 independent artists
  • nearly 400 performances
  • over 900 films
  • more than 1,300 creative courses

MAC's website was our first Spektrix integration, and it’s fair to say they’re one of the most complex organisations we work with – both in terms of their programme and their website's various integrations.

When we started work with them in 2013, our focus for the site was improving core user goals in order to increase transactions. This worked well; there was a 70% increase in online booking within the first 12 months.

We’ve continued to work with the team at MAC over the years, most recently on their re-brand and re-development of the website. (MAC case study.)

One of the key features of the new site is the course search functionality – the mighty ‘Course finder’.

Old course search

Previously, we'd offered course information in two formats:

  • Courses were integrated into the main What’s On calendar listings. Whilst this was okay, it wasn't ideal. The same course could include multiple classes over many weeks but, once the first class was over, the calendar listings weren't relevant to anyone (but possibly that course’s participants if they needed to check a date). So, course instances were cluttering the calendar for everyone else.
  • We used a funnel-like structure for filtering; beginning with people choosing their age bracket, then course term, and ‘level’, which then led through various sub- and sub-sub-categories. This worked fine for anyone who knew what they were looking for, but it wasn’t great for browsing.

The problem with both of these setups – they force the user to make decisions in a specific order; an order that’s not especially natural.

New and improved ‘Course finder’

For the new website, our goal was to improve the user experience by creating the digital equivalent of leafing through a – really well-designed – prospectus.

We wanted to make the experience quicker and more intuitive, while accommodating different types of users; people who know exactly what they’re searching for, and those just wanting to browse.

The solution:
A powerful and flexible search feature that provides relevant results – fast.

A combination of keyword search and filtering is now the primary way to browse courses. Using search as a core part of the user experience has several key benefits:

  • The user is in control – to navigate content on their terms
  • It's very scalable – particularly useful as an already complex data-set grows
  • There’s less emphasis on trying to design the Perfect Content Structure For Every User*
  • It's great for the ever-growing number of mobile users who’re already more likely to use search as key navigation

*this does not exist

We also know that offering a search function is more likely to result in conversions. According to Econsultancy findings, conversion rates for online retailers can nearly double – from an average 2.77% to 4.63% – when people who use on-site search find what they're looking for.

MAC's old search stats pointed to a similar increase. But whilst it's important to offer site search to users, we also need to ensure that it works well for the search terms people actually use. A great exercise is to regularly review what people are searching for on your site, then search for this yourself and see what results are being returned. You may get some unexpected results!

Conversion rates for online retailers can nearly double when people who use on-site search find what they're looking for.


Designing and building the ‘Course finder’

Looking back at the two user interactions – people who know exactly what they’re looking for and people who want to browse – offering both keyword search and filtering means we can cater really well for the vast majority users.

We thought carefully about the default state of this search.

More than half of the top ten searches on the site are for course ‘type’ (e.g. Yoga, Pottery, Animation) – so before even searching for anything, the user is presented with a grid of course types. These are simply pre-selects of the ‘Choose a subject’ dropdown above.

Screengrab of Midland Arts Centre's online 'course finder'

It's important to present the right number of filters and options compared to the size your data-set. For example, having 5 filters but only 30 courses means that as soon as you use more than one filter, you're likely to end up with ‘no results’. And that is much more frustrating to users than being presented with lots of results.

With the new course finder, not only are we presenting the optimal number of filters – but we actively remove options that are rendered 'unselectable' by what users have filtered by so far. This makes it even less likely that users will get ‘no results’.

The keyword search is predictive, so begins to offer results almost as soon as you start typing, which saves the user time. Yes, only a split second but as we’ll come on to, the smallest time saving can make a big difference to conversion rates.

Based on user feedback via MAC and data on how people used the old course search, we refined what filters appear; though there may be tweaks to make once users start to interact with it, it’s certainly a very good start.

(It's worth remembering that you can't serve every single person perfectly – so it’s better to serve 80% of users brilliantly, than everyone having an ‘okay’ experience at best. This can involve making tough decisions on what to prioritise, but it's worth it.)

We’ve also added a couple of nifty features to help the MAC team, and website users:

  1. Keywords and filters are constantly updating the page URL. This allows filtered pages to be shared or saved. So for example, the team at MAC can link from a visual arts exhibition page directly to a set of courses filtered to painting, for example. And users can bookmark a particular set of results, based on their choice of keywords/filters.
  2. We point Google to the search result pages within MAC’s website. This allows users to jump directly into search results page when they type the MAC domain into their browser. (This is a simple case of adding a meta tag – ask your digital agency about it.)

“A one second slowdown in page load could cost Amazon $1.6 billion in sales each year”

source: Amazon


We know that speed and performance directly impact site conversions, so building a speedy search was really important.

Google returns results in less than a second – searching “courses at MAC” took three quarters of a second, or 750 milliseconds. We’re returning any search filter on the MAC course finder within an average of 5ms, which not only beats Google for speed but is literally faster than the blink of an eye.

The tech

The secret is making use of existing technology, rather than trying to build our own powerful search from scratch. We use Algolia, a cloud based search product. It is a paid-for service, but has a very generous free tier available to not-for-profits, like MAC.

Algolia sits separately from Spektrix and the website's content management system, so we run logic that updates on-sale status, availability, past events and courses. All of this happens without adding load to either the website or Spektrix – which is great when we're managing large on-sales.

The results

The result is a search and filter that responds instantly. It’s this live response that changes how users interact with the search; ultimately encouraging exploration and allowing people to search and browse in a way that suits them.

Handy take aways:

  • Consider your website’s search functionality. Don’t take it for granted, and think about how search can help support your goals – and those of your users.
  • Test your search. Make sure you’re providing relevant results, and curated landing pages for the top keyword searches on your website.
  • Design for the 80%. A brilliant experience for most people is better than everyone’s experience being just ‘okay’.
  • Prioritise speed. Milliseconds make the difference between an engaged user and an Exit Page statistic.
  • Make the most of existing technology. Don’t build what you don’t have to! Focus your resources on solving other challenges, and refining your audience's online experience.

If you want to find out more about the project, feel free to get in touch.

Related Posts