iGaming Platform

Sportsbook and casino for mobile and desktop

A real-money sportsbook and casino for players on mobile and desktop. It needed to feel secure and work well on a phone, and keep the excitement of playing in balance with responsible gaming.

Company: Monotech Solutions Ltd.
My role: Product designer
Platform: Mobile and desktop

Mobile deposit form and desktop wallet with a grid of payment methods, both showing a minimum-deposit error, beside button and icon-button component boards — Deposit on mobile and in the desktop wallet. An amount below the minimum gets flagged right under the field.

Overview

There's a sportsbook, live betting, a casino and a live casino. Players deposit and withdraw in the wallet, and their account shows transactions, bet slips, bonuses and cashback.

The challenge

Deposits go through a long list of payment methods (UPI, PhonePe, Paytm, IMPS, Google Pay, e-wallets, bank transfer and crypto), and every method has its own minimum and maximum. The deposit notes are in English and in Hindi.

Then there are the bet types. A live bet or a Bet Builder bet doesn't follow the same steps as a single bet.

Security mattered too. Under the mobile deposit form there's a note about the end-to-end secured gateway and a Get Support link, and the desktop wallet has a Turn On 2FA button.

My role

I did UX research and mobile product design, mapped the flows and worked out the design system architecture.

I built the design system on Atomic Design. The boards beside the deposit screens show the layers. Atoms come first, then a master component, then variants for states like hover, error and disabled.

The work

Transaction history and betting flows, plus type and buttons from the design system.

Two linked mobile transaction screens, one with year and month filters above a date-grouped list of bets, the other with the month dropdown open

Transaction history

Players filter by year and month, and the list underneath is grouped by date. The amount is the boldest thing in each row, with the date, time and a colored Approved or Cancelled status on the right.

Tap the month and the dropdown opens, with the selected one highlighted and marked.

Two boards of UX flows for four bet types, covering the single bet, the single/multiple/system bet, the live bet and the Bet Builder

Betting flows

I mapped one flow for single bets and another for single, multiple and system bets, plus one each for live bets and the Bet Builder. They all read left to right. Gray diamonds are decisions, and a dashed line means the path goes back to an earlier step.

The single bet flow opens with short definitions of a betting market and a sporting event.

Design system boards with heading styles h1 to h6 and body styles in four weights, overlapped by primary, secondary, tertiary and white buttons

Type scale and buttons

Every text style lists its size and line height in px and rem, on a 14px base. Body text has four weights at each size.

Besides the filled primary, outlined secondary and text-only tertiary buttons, there's a white one. Each comes in four sizes with its states, disabled and error included, and an icon on either side of the label.

Next project