Building Ladbrokes

Home / Building Ladbrokes

The Requirement

Ladbroke is a betting and gaming company with a global online platform.

My main task was to help migrate legacy and aging platforms to a new platform, build and standardise high fidelity front-end design in Sketch library and create functional prototypes through multiple iterations, based on customer insights.

Sub-Projects Worked On
  • Insufficient Funds
  • Longform
  • 100 to 1
  • Responsible Gambling

 

Role
Senior Product Designer

Platform
App and Drupal

Project Management
Agile Scrum Methodology

Tools
Google Analytics, Adobe Analytics, Sketch, Invision, Adobe Suite

Wireframe

Website
https://www.ladbrokes.com.au/

Gathering Insights

There are several ways to gather insights and these were the following I have utilised for the initial discovery:
  1. Customer Journey – Step in the shoes of our customers and go through the process to understand what customers are experiencing.
  2. In-house User Testing – Conducting a user testing session with customers.
  3. External UX insights –  Understand the pros and cons of their findings. 
‍
My research encompassed:
  • Understanding the user goals and needs
  • Uncovering website pain points with the existing user journey
  • Determining the success of the tasks measured

Interview sessions, customer journey discovery, page analytics and survey were conducted and we discovered the following:

  • New punters to horse racing were not familiar with the abbreviations that was presented on the website
  • Users felt intimidated and were overwhelmed by the information

Prototyping the Solution

Based on the above problems identified, I worked towards addressing these website pains by coming up with potential solutions:
  • Establishing clearer visual form hierarchy by grouping related fields
  • Created a Glossary page for users to find the full description of any abbreviations
  • Introduce subtle visuals to enhance the experience
  • Standardisation styling and UI
Several Iterations were enhanced through user testing with new staff as this was a total new experience.    After testing and refining the Iterations, we built the full Prototype and engaged an external UX research company for testing. Normally, two iterations of refining the prototypes are completed before handing over to the developers.    
Wireframe – Longform Iteration 3
Wireframe – 100 to 1 Iteration 1 vs 3
Wireframe – Insufficient Funds

Development

All prototypes were validated by the business analyst (BA). I would work closely with the development team to get the design up on staging environment. 

As a team we worked cohesively on the designs as per high fidelity prototype including pixel perfect and functionality. Occasionally I would take on the role of a front end developer and do front end coding css.

If time permits, I would conduct user testing sessions to validate the designs. Several iterations would have to be completed due to changes.

Once we did a final round of checking and given approval by the BA, the page would go live. 

Outcome

Design standards were set for the company after collaboration with the design team using Sketch. Created libraries for wireframe and prototyping hi fidelity mockups in all platforms.