Introduction:
SportNation offers a full online sports wagering and iGaming product to customers in the UK and Ireland. Their biggest markets are football and horse racing.
I was responsible for designing and prototyping a brand-new horse racing page. Throughout the entire process, I collaborated with the project manager, head of design and software developers.
The Research:
Sportnation.bet is using a betting platform provided by SBTech however, it proved many times to be not very reliable. As a part of a process of taking more control of our front end, I discussed with the project manager and head of design how can we improve the user’s experience on the website.
We decided to start redesigning and creating our own front end for horse racing. It was a good place to start, as it was our second biggest sport, and due to the layout, there were significant improvements that we could make to provide customers with easier access to markets.
Workshop findings
Off the back of the meeting, the conclusions were that the designs should be let by:
- Immediacy: what can I bet on the next 3 races, mobile event scroller, highlighting the times of the next races that will be starting.
- Marketing: The ability to show Main events/highlights, specials, and visual representation in the race’s layout for extra place/offer races
- Trading: The ability to show derivative markets easily (match bets, place only etc)
New structure/layout for the horse racing branch
The problem we had was that key events were hidden behind tabs. Although we didn’t currently have International racing on site, it was an intention in the future, and whilst the events were hidden behind a tab, they weren’t particularly accessible. The same issue could be said for “Tomorrow” and “Future” racing hidden behind their respective tabs.
With that in mind, we wanted to change the layout so that the categories are all on 1 page, in sections, that the user could scroll through.
Inspiration
We looked for good examples of what we were trying to achieve. Competitors Bet365.com and Marathonbet had features that we thought would benefit and improve the page and we decided to take inspiration from them.
The Design Process:
First I started with creating the wireframe. I based it on the layout of the website. I tidied up the data in the blocks and put them together in order on one page.
I Used 3 colours to define the status of the race: green for incoming, yellow for active and red for finished.
During the development process, the Sportnation brand was being redesigned and the colour palette was changed, hence why the first design had a dark scheme.
The Results:
I worked with the team of in-house software developers and the project manager to make the page ready.
You can see the final product here: Sportnation Horse Racing page
