UX UI

Responsive Dashboard Design to Increase Unibet Conversions

2019
During employment at
Unibet Dashboard Design

introduction

Kindred’s affiliate Unibet needed a solution that would bring more converting traffic to their website during the Cheltenham festival event. Together with the ANCHOVY team, we came up with the idea to construct a website that gives punters effective betting tips based on real data while being easily shareable due to its utility.

goals

Maximise the number of bets and sign-ups to Unibet during the Cheltenham festival.

tasks

Research, Sketching, Prototyping, Wireframing, Design, Illustration.

programs

Sketch, InVision, Photoshop, Illustrator, After Effects.

Table of Contents

Homepage design of the Cheltenham Festival Dashboard for Unibet

Starting points

Past Cheltenham Festival winners fit into a very specific set of trends. My mission was to capitalise on this by displaying these trends and utalising them to show the favourites to win this race.

This was topped off by a special offer exclusive to the Cheltenham Festival that was only shown once the favourite horse to win a race was uncovered.

Mapping out the user flow

The first step was creating the user flow. This is the path taken by the user on the website to complete a task; to convert, in our situation. Squares show pages, triangles user actions, and circles the final completed outcome.

User flow design showing the user behaviour flow

Creating the wireframes

Next up I created the wireframes. Having a basic structure early in the development process allows us to easily make any changes before moving into the design phase.

Based off of the user flow, I started off by mapping out the content together with the on-page functionality to meet the user’s needs.

1. Homepage

Homepage wireframe design showing the construction of the page

The aim here was to explain what the dashboard was about and provide a clear way forward.

In order to achieve this, I decided to have the main CTA directing the user straight to the closest upcoming race, as well as giving the user the option to easily swap between races through the top menu.

2. Trends page

Trends page wireframe design showing the construction of the page

The trends page was the main focus of the project. The relationship between the list of horses taking part in the race and their related trends had to be clearly communicated.

I decided to go with a side menu so that all user interactions and information would be in one place, whilst giving the list of horses most of the screen space so that it wouldn’t look too cluttered. This layout ties in well with the dashboard vibe I wanted to go for.

3. Trends results page

Trends results page wireframe design showing the construction of the page

As different trends are continuously being selected, horses that do not fit the requirements are greyed out until only a single horse (that fits within all previous trends) remains.

4. Conversion page

Conversion page wireframe design showing the construction of the page

The conversion page is the final step in the user journey. The primary action of this page has the aim to drive conversions and get the user to place a bet on the favourite horse by showing a Cheltenham exclusive offer to Unibet.

Mobile responsive design

One of the most complex yet interesting phases was the responsive translation of the pages. The challenge at hand was to smoothly guide the user through the different trends while keeping a clear overview of the remaining horses, as well as keeping interaction paths clear in order to make sure that the user is never confused as to what they have to do.

Wireflow

Wireflow constructed with the final designs showing the mobile screen flow the user follows in the dashboard

This wireflow, constructed with the final designs, shows the mobile screen flow the user follows. Once the flow is completed by selecting all of the available trends, the result is the favourite horse to win the race.

Collection page build-up

Collection page build-up showing how the collection page is constructed

The collection page is constructed with a scrollable section that can accommodate a large number of horses at the same time. All interactions are easily accessible through the header and bottom CTA bar that are fixed to the browser window.

Jockey and horse representation

A total of 122 jockey and horse illustrations had to be designed for four races. Due to the strict regulatory framework the gaming industry operates in, it was challenging to create illustrations that are immediately recognisable to the public while at the same time following the regulations.

Collection of jockey and horse illustrations displaying the Cheltenham Festival racing horses and jockeys

I decided to hone in on the horse’s head instead of their entire bodies because their heads are generally the most recognisable part of the body. I created a universal template for the shape of the head and added colour based on skin tone and iconic skin patterns. These were then combined with circular shields displaying the jockey’s jersey.

How they work in real-time

Representation of how the filtering of the horses and jockey takes place

Once a trend is selected, the horses that do not fit the requirements are marked red. When the user continues to select another trend, the horses change to a greyed out colour making them not one of the favourite horses in the race.

Home page hero image

The process of the home page hero image edit from start to finish

The original image was provided by Kindred. I used Photoshop to edit the image to match the theme and mood I wanted to achieve. Besides heavily darkening the image, I added a lot of extra dust and sputtering dirt to make the image look more dramatic and action heavy.

Demo animation video

I exported all individual elements from the design and used those to make a short animation video in After Effects. This helped the developers at NIU to get a better understanding of the interactions and transititions we wanted to go for.

Final words

This dashboard has achieved great results during the Unibet Champion Hurdle, Champion Chase, Stayers Hurdle and Cheltenham Gold Cup. It offered an intuitive way for horse racing fans to have a clear overview of participating horses, winner trends and favourite horses estimated to win the races. The entire project was wireframed, designed, developed and launched within a tight 4-week timeframe.

Showcase

Mobile iPhone mock-up of the dashboards' collection page
Tablet mock-up of the dashboards' final results page
Desktop mock-up of the dashboards' homepage
iPhone mock-up of the dashboards' betting trigger page
Collection of iPhone mock-ups showing the dashboards' final designs
Like what you see?
Lets start improving your business.
Get in contact

Pet & Co.

Branding

Creating a brand identity and finding a suitable company name for a one-of-a-kind pet shop.

View project
X