Metric Gaming - ComeOn, Betzone, Betnation

My Bets Uplift

Redesign of the my bets section of the app to provide a more engaging and informative experience for users and to add value to the product and please our three key partners.

UX UI Product Design System Mobile Web Prototyping

My Bets Uplift

Introduction

This project was focused on redesigning the my bets section of the app to provide a more engaging and informative experience for users. The original MVP design featured a very basic list of the users bets with minimal information. This was a great opportunity to enhance the experience not just for the users, but to also add value to the product and please our three key partners that we provided this product to (ComeOn, Betzone, Betnation).

The Problem

The betslips were all over the place and there were multiple layouts depending on the type of bet which was confusing for users. The ordering of information was not optimal and the important information around stakes and returns were lost in the noise (as seen in the image).

The Opportunity

  1. Improve overall layout and visual hierarchy of each betslip
  2. Add sport related elements to give more feedback (horse silks and dog traps to begin with)
  3. Add a method to show that a bet might be part or a larger betslip rather than just singles
  4. Add the ability to cash out bets live from the betslip itself instead of a separate section of the app
  5. Show the status of the bet for both singles and multiples
  6. Add filtering for the status of bets (open, cash out, settled)
  7. Add the ability to reuse betslips to make it easier for users to place the same or similar bets again
Old betslip design

The Solution

Working through the various types of bets I was able to create a more consistent layout and hierarchy of information across the board which felt consistent if it was a single bet or part of a multiple. The information about each bet was reordered to make it flow more naturally and the odds were put inline so users were able to scan easier. Cash out, stake and return information were all placed at the bottom as a natural end to the betslip. Lots of edge cases were figured out at this point and mocked up with notes for development if needed.

Single WinAcca EWCombination MultiDouble LiveDouble WinCash Out Disabled

Settled States

WonPlacedLostVoidFull Cash OutPartial Cash OutCashed Out Profit

Hover Examples

WonPlacedLost

Cash Out

Adding the cash out button directly into my bets allowed users to cash out their bets in real time without have to navigate to a different section of the app. This was a big win for users and also for our partners as it made the cash out feature much more visible and accessible which in turn increased usage and revenue from this feature. Below are examples of a partial cash out, a full cash out and a change in cash out value during cash out.

In UI

A few examples of the new designs within the wider UI for all 3 partners showing how each were adapted in the design systems covering, colours, typography and styles.

ComeOnBetnationBetzone

Explore All Screens

It’s a figma file that you can zoom in with ⌘ Command (Mac) or Ctrl (windows) and plus and minus inside the window. Drag around to pan.