Andy Cetnarskyj

Senior UX designer

Horse Racing Part 1

Part 1: Redesign of the horse racing section, starting with the meetings page

In a nutshell...

William Hill is a household name – not just in the UK, but across the betting world. They’ve transitioned to the world of online gambling very successfully, with horse-racing accounting for around £1.4billion of turnover in 2017 alone (and it’s very much part of their history).

But in today’s highly competitive – and lucrative – world of online betting, William Hill can take for nothing for granted. So when their then Director of Sportsbook (i.e. Head of Betting) challenged the online product team to deliver the ‘best horse racing experience on the market’, he meant it.

It called for smart user-centred design. It called for a presence to combat the promiscuity of punters with an average of two or three accounts across different bookmakers.

And it called for a willingness to knuckle down to get the job and that’s what I did…

Gather Insights

The first stage of the process was to gather customer and business insights.

Customer Insights were gathered through reviewing comments left in our customer feedback tool, conducting a members survey and looking at the feedback that our support team received.

For business insights, we asked our racing trading team to send us their frustrations.

TL: Radar Diagram, TR: Grouping, BL: Affinity Clustering, BR: Complexity Matrix

Stakeholder Workshop

Getting stakeholders and Hippo's in a room for a few hours is not an easy task. For this project, we gathered stakeholders into a session.

Using techniques from Pete and I's Lumina Institue training we conducted the workshop in a few hours.

Whats on Your Radar - We blocked out the key business goals for this project.

Affinity Clustering - Using the gathered insights above we broke the group into teams and asked them to group the insights into clusters, and put these clusters in importance of primary, secondary and tertiary importance.

Buy A Feature - We asked the two HIPPO's in the workshop to use gold and silver stickers to call out what their priorities were.

Complexity Matrix - Finally we took the output of the above steps and created a matrix that set out the product owners roadmap of work for the project.

Persona Information

Meetings Page - Research & Personas

The first page that we had to tackle was the meetings page. We set out to improve two KPI's:

NPS through improved nav
increase in T/O via regions outside UK and USA

Starting with web analytics we identified the top user goals of the page and again gathered insights into gaps in the page functionality.

The product team wanted to make sure the new page could support the ability to continually provide the appropriate racing over the 23 hour period in a number of countries. This led us to consider a rolling electronic program guide (EPG) of data.

We worked with our intelligence team to identify the personas of our users and it was clear that our older customers should be the focus of our work, being worth 4 times as much as the younger profile.

Examples of Race card Wireframes

Example of testing tools and reporting

User Testing

We put a number of wireframes, for both mobile and desktop, through remote user testing using What Users Do.

The wireframes performed well, as stripped back visuals with only links highlighted in colour. It only took two rounds of testing to get the results that we were looking for.

The next step was to move the wireframes through to UI.

Desktop screen versions

When tests fail

Moving the designs onwards, I worked with the UI designers to integrate our pattern library and create a more polished UI. We took this high-resolution design back through to further tests in What Users Do.

The high-resolution mockups didn't test as well at all.

Users struggled with large amounts of content, conflicting colour combinations and clashing logic in the pattern library.

The biggest sticking point was the display of race times in the carousel in a scannable, efficient layout.

In the end, it took three rounds of tests to get a design to the point that we were confident would meet all the user needs.

15

Concepts

34

Usability Tests

5

Iterations

Build A Racecard Screenshots

Build A Racecard

A key feature of our racing page is the ability for the user to select races from multiple meetings and countries and build their own racecard.

The feature on our previous pages was poorly implemented and this was a chance to improve it.

User testing told us that users wanted a clear CTA to trigger the function and that the counter of selections to be clearer.

I worked with the UI designer to tidy this up and prepared a Framer JS prototype to demonstrate to the development team.

View Framer Prototype

The Outcome

This project is still in development and due to be released this year so unfortunately there is no big numbers to post yet but watch this space