Haydock Park is one of the UK’s premier horse racing venues located between Manchester and Liverpool in the North West of England. Steeped in history and prestige it attracts large crowds all year round. Much more than just a horse racing venue it plays host to a wealth of conferences, events & music concerts.
Having worked with Haydock Park delivering its offline marketing materials for a number of years, Access was selected to develop its new website. A website that would reflect its position as one of the regions premier venues, increase visitor participation and repeat visits, and ultimately increase conversion and drive ticket sales.
In this article we describe how we approached the project following the initial brief.
- The design and usability
- The technical build, using Acquia Drupal
- Overview of user based functionality
- Launch, results & feedback so far
The Brief
To create a web presence that would position Haydock Park as one of the UK’s finest racecourses and a leading venue for conferences, weddings, parties and other non-racing events. To increase ticket sales through the online portal and bookings through their phone and website points of contact. To create a website that stands out from the competition and is dynamic with live, user based features, reflecting the brand’s modern and sophisticated position.
Our Approach, Solutions and Technology
The Overall Design & Drupal Theming
Having spent a great deal of time and analysis on user based features and a new sitemap, we were able to create an information architecture centred set of wireframes which helped focus the design around functionality, something [in my humble opinion] doesn’t happen enough. So instead of designing ‘around the gaps and assumptions’ we had a really clear idea of what we were actually going to deliver and what importance they were to receive on the page. We also had a thorough grasp of the site’s main users; what they liked, were looking for and hoping to leave with. This helped us keep a clear focus on making the site as usable as possible.
Wireframes were developed for the main sections and landing pages. These were invaluable in the planning process and communication functionality to the client without being distracted by the design as is often the case if the creative is started too early.
Racing Home Page Wireframe
We were keen to design a dynamic, modern feeling website that reflected the young and contemporary visitors to the park and to move away from the traditional greens and over used cliches that other racecourses seemed to focus on.
To tie in with Haydock Park’s existing branding we wanted to use the type-face used elsewhere in their advertising and on-site banners. To do this we used Typekit and it’s exciting, cutting edge web font technologies. A real opportunity to make this site stand out and step away from the very limited websafe collection of fonts.
The impressive looking designs were colourful, clear and very well received by both the client and visitor alike; importantly they complemented and worked with the features. Due to the detailed planning and wireframing, large scale alterations became incremental tweaks. Testing the website with tasks given to a selection of users helped us address any final oversights.
Defining Main User Based Sections
Much of our research pointed to three main user groups, this helped us focus on the main audiences and build a purpose driven and usable site directed specifically at these profiles and the features they would be looking for.
Main User Defined Sections
The Techy Stuff
With a wealth of experience building Drupal based websites, our digital team were excited by the opportunities and features this site could offer. This high profile project offered us the chance to take our first tentative steps in contributing back to the Drupal Community- something we have been keen to do and will keenly pursue in the future; having benefited from it for so long. Our first contributed module proved to be an exciting moment for us (more about this below).
Having a very user focused approach to web design and development, this was an opportunity to realign, rather than just redesign. So the first action was to conduct a thorough user analysis and profiling which we could use to help construct levels of importance of potential site features, site structure and a logical information architecture. Keen to push the boundaries of design, technology & delivery, much of our research and analysis provided us with some very interesting site features, observations and content direction. Here is a compilation of some of these features and the technical issues they posed.
Acquia Drupal and Installed Modules
As an Acquia Partner, our natural starting point for the development phase was to install the latest version of the Acquia Drupal 6. The hand picked collection of the most commonly used modules (like CCK, Views etc) put together in to one package is an excellent springboard when starting a project. The package also contains the modules needed to connect the site to the Acquia Network monitoring service and with Acquia Search (a remote Apache Solr implementation).
We built on the modules provided by Acquia Drupal by installing the following contrib modules (amongst others):
- Context – to define the key sections of the site
- Custom Breadcrumbs and Menu Trails – to provide active trials and bread crumbing for the sections and associated nodes
- Beautytips – to provide simple Javascript tooltips
- Image – to provide image galleries with albums
- Taxonomy Image – to add icons to certain taxonomy tags
- CKEditor and IMCE – our favourite rich text editor and image/file manager
- Insert View – to embed views in to pages and blocks without the PHP snippets
- Nodewords and Page Titles – to fine-tune the meta data for SEO purposes
Functionality & User Features
Social Media Feeds and Potential Interaction, plus Mobile Support
Haydock Park already have a well established Social Media presence, particularly on Facebook and Twitter, something it seemed that visitors of the park embraced wholeheartedly. Given this information we realised a great opportunity to converge these live social feeds onto the website, giving the home page a new role as a one stop dashboard for the latest user driven information. We then also realised the opportunities that mobile phone support could offer. This was an opportunity for racegoers actually in the stands or at an event to receive live, up to the minute feeds from the site.
Latest Tweets Feed
SMS/email Registration
Given that many visitors would be using mobile technology to peruse information or contribute to the website, we realised that, along with an email newsletter sign up we could offer an SMS registration. Users could simply enter their mobile numbers (and nothing more) to subscribe to free text alerts, letting them know of special offers and up to the minute information. A great opportunity to connect directly with users and reciprocate their use of the website.
Integrating the initial SMS sign up using txtlocal’s service was a new challenge for our development team and resulted in a new Drupal module being built, meaning other Drupal users will benefit from some of our hard work. Amarjit from our development team here sums up a little of the required work:
“TXT Local provided examples to us that enabled us to send SMS to our users while adding them to our database instantly. However, it was up-to us to work out how this process would work with usability and security in mind. We created a flowchart that shows exactly what the user would need to do; to subscribe and unsubscribe from the service. From this, we built a prototype consisting of HTML forms and a PHP backend. Developing this prototype allowed us to recognise vulnerabilities, such as the CSRF attack (Cross-site Scripting Request Forgery) and invalid mobile numbers being entered. We then proceeded to add validation for phone numbers and error message handling, that made it easier for the end-user to understand (opposed to the standard tech-gibberish API’s are known for). We tested the workflow with real live examples, using internal and external bodies until we were happy with the end product”.
-Our First Contributed Drupal Module!
Knowing we would be using TXT Local’s services again, we needed a way for this prototype to be portable and easy to setup. Thus, we created the first TXT Local module for Drupal using the prototype we built beforehand. This means for future projects we would simply have to install the module, configure some basic settings and then theme the block.
Register For Updates
Going Report
The Going Report is important to anyone involved in horse racing and betting or simply for those going to the races for the day. It offers an insight into how the course is being affected by the weather and ground conditions. Haydock Park’s current going report is hosted by on the third-party website Turftrax (http://www.turftrax.co.uk/) which means anyone interested is led away in a pop-up window. In order to embed the report on the Haydock Park website, we obtained an XML feed from Turftrax and then used Javascript and PHP to format the report in a block. In much the same way we also supply a weather forecast of the local area alongside the Going Report. These are dynamically loaded by Javascript to avoid being cached by Drupal when the performance settings are turned on.
Watch The Racing Online
User research suggested a real need to provide a section where users could watch the highlights of the Haydock racing online. Technically this was relatively straightforward; with a feed being supplied from an external source. It took some sleek css styling to deliver the video in a skin suitable for the new design. This kind of valued and useful content we hoped would give the user even more reasons to revisit the site.
Interactive Course Guide
Analysis of first time visitors, suggested the need for an overall course guide to show everything a visitor may need during a raceday or event, from stand entrances to food and drink facilities. This was an important feature of the printed raceday programmes and an opportunity to highlight some of the parks many impressive features.
Built in Flash and using some impressive 3D photomontages, XML driven and Search Engine friendly, the feature not only looked and worked well, it was easily updatable and flexible for future expansion. For those mobile users (many without Flash) a PDF alternative is available. One technical issue we faced was how to create 3D visuals big enough to be able to zoom in and explore, but balancing that with file size and efficiency of the user’s internet connection. A solution was achieved with a 3000 pixel wide render that was then compressed in Photoshop, brought into Flash an compressed again; any features that required special detail had vector overlays inserted over the top in Flash. Amazingly this 3000px wide swf file exported to an impressively low 400kb without compromising the quality or sharpness of the image.
Facilities & Floorplans Guide
Providing a usable and insightful guide for those visitors looking not just for Racing facilities, but for information on Conferences & Events we created an expandable 3D floorplan guide, offering a detailed look at internal facilities and giving them the opportunity to enquire directly, look at photos of the facilities and to find out floorplan dimensions and sizes. These interactive Flash built elements we knew could give the site an edge and keep the content functional and dynamic.
Conference & Event Planner
For users looking for a facility to hold a conference or event, but not wanting to look through every room individually, we developed a handy planner whereby the user could quickly enter their criteria: layout style (boardroom, theatre etc) and number of guests. We used the Views Filtergroup module (http://drupal.org/project/views_filtergroup) to allow us to offer this two-step view filter which queries values stored across a range of CCK fields in the node. The results then generated would be in order of suitability and would give them a very useful overview of suitable results with icons to indicate what additional features each facility held (Wi-Fi, TV, Bar etc).
This dynamic feature also acted as a perfect fallback alternative for those visitors who didn’t have Flash who intended to use the Facility & Floorplan guide.
Conference & Event Planner
Quick Navigation
Building such a large, feature driven site and knowing how confusing incrementally built information architecture can become. We wanted to offer users an easy option of a simple drop down ‘quick navigation’ system that could link them to any part of the site at any time, from anywhere. With this additional route of navigation we hoped to make the site easier to use and it’s structure more transparent.
Quick Navigation
Usable for The Administrator as well as The Front End
Having focused so hard on making the site very usable to the end visitor we also needed to guarantee ease of use for the editors of the content; whether that be adding images to the photo gallery, writing a blog article, changing a spotlight feature or any of the other content types available to add, edit or delete. Having trained clients before in Drupal CMS management we had a good understanding of what roles and permission settings to allow for different users. Using the Zen Theme as a starting base for our own theme to be built upon meant we had some very consistent and usable css styling to the admin pages, which helped us a great deal; leaving us time to tweak anything the client had difficulty with after the training session(s). You can often judge how successful the training has been and how usable the admin pages are by the number of calls for help or return training visits. So far there have been very few calls of this type and just the one training session! In the meantime the site continues to grow and flourish organically.
Cross Browser testing
Having designed and developed the website with plenty of JQuery, Flash, transparent PNGs etc meant that the process of cross platform/browser testing was very important and much needed to ensure a consistent delivery to all users. Fall backs had to be in place if users were on mobile devices, or were viewing the site on older browsers (yes – even the ubiquitous IE6 which required it’s own stylesheet as usual).
With so many browsers, devices and platforms now available we were determined that as few users would be missed out as possible.
Usability, Accessibility & Final Checks
A collection of simple, but effective checklists were called upon before the site was launched to ensure nothing was missed off from our Accessibility and Usability guidelines. A good example of one alteration that would be missed by most users, but hugely beneficial to someone with a screen reader is the fact that we managed to push all the links and code from the ‘Quick Navigation’ to the bottom of the page despite the appearance to the user of them being at the top. Had the code remained at the top the screen reader would have had to sift through every link before even getting to the main content and header.
These checks always bring up important issues that may not appear on the surface and without checking could easily be overlooked.
The Launch, Results and Feedback so far
The site was launched at the start of September in time for the new flat racing season and had an immediate impact with a large increase in enquiries through the site and by phone. It’s still early days, so getting a more broad, average statistic on the increase is not possible yet. However, a comparison of this month’s traffic to that of the same time last year reveals a 60% increase. A stat that speaks volumes and that we’re very proud of.
