Overview

LottoRace is a Facebook Bingo Lotto Game where users bet with real money and win cash prizes. Enjoyed by more than one million users on Facebook and with more than one billion virtual bet placed online, the app is available for download on both Google Play and Apple Store. It was also extended to Casino gaming machines across all over Mexico.

1M

1 Million Players

1B

1 Billion active bets placed online

My design reached an estimated audience of 1 Million LottoRace Players on Facebook and with 1 Billion active bets placed online.

My Role

Creative Director

Team: Nerve Gaming Agile Team

Software: Figma, Photoshop, Adobe Animate, Illustrator

About the project

Based on company requirements, I was assigned as the Creative Director to lead, create & design a spinner which would be the main visual component of the game.The idea was to build an active transparent spinner which would draw numbers selected and bet by the players one by one and matched to select a winner. The balls then had to go roll back spinning randomly until the next time they were sorted out. A spinning flash of colored strobe light would spin fast around the spinner with layers of sound, indicating the different states to the users, keeping them informed when to bet, they should also have the full capabilities of customizing the game based on holiday events with themed colors and balls.

Sketches and ideas

Desktop version of the spinner

The Problem

One of the concept retained from several briefing with the development team was to have the balls delay for some time before being re-injected inside the sphere and the whole process had to be visible to the users. The balls spins randomly at high speed with no numbers shown inside and then get blown out to match with the existing player numbers. The spinner also had to be fully customizable with different colors and balls that the users can freely select online. The balls had to support dynamic text, full scaling & different color shades based on holiday themes.

The betting screen, where players can select their numbers and betting options available to play.

The estimated prize pool is shown below.

Research and Iteration Process

I started sketching up several ideas and after consulting with the senior management and development team about the implication and its implementation within the gaming framework, I came up with a concept of transparent spheres and tubes. The idea was to have lotto balls spinning inside a sphere and injected through a transparent glass tube one by one showing the matched numbers selected by the player. I also devised a trigger/switch that would stop the bouncing ball in its track for a determined amount of time before being re-injected inside the glass tube. I created the tube and inner glass ball with layers of light refraction within Photoshop and animated a prototype of the whole process in Figma and worked with the developers to script the timing for the animation and motion path. Provided all the visual asset components and assisted/directed the developers in building the spinner based on my creative vision.

Multiple glass layered textures designed in Photoshop merged and combined to form a sphere with user- customizable functionalities.

Design Highlights

Used glass refracting materials in Photoshop to design multiple layers that when superposed on each one would create a 3D sphere where users would see through. Devised a funnel type of opening for the balls to travel through at high speed, add switches at the bottom to retain the balls with time delays and designed a stand to hold the sphere which would have the company branding applied to it.

Game States Indicators

To indicate the player what was happening in real time, I came up with an idea to add visual clues like a spinning strobe light that would spin very fast around the tube and changes colors depending on the different game states. Red is when the game has already started, the player can't do anything, Blue is when the game is about to start and Green is when the game is starting. Once the player was used with the colored states, it was easy for them to know what was actually happening in real time within the game.

Customizable Balls

Added customizable light refracted balls to the spinner so that users can select and choose the favorite balls to be injected within the spinner. Some of the balls were themed based on events such as Halloween, Valentine and Christmas etc.

Customizable Balls with 3D specular highlights and gradients designed in Figma

Glass Textured Switches

Initial blueprint for the animation sequences. I designed from scratch this prototype and animated in Adobe Animate, then showed it to the team members for mutual alignment and direction to follow for building the spinner. Worked closely with developers to get the switch that retains the ball timed perfectly with the sorting balls. Designed with a glass texture, the switched at the bottom of the sphere closes and open after a time delay to retain or allow the balls to circulate.

Motion Path and Animations

Conceived , visualized and animated all motion in Adobe Animate and Figma, then sent all visual key components for development team to integrate, implement and deploy on LottoRace environment.

Translated to different platforms such as Tablets and Mobile phones with complete customer customisation such as colors and themes

Final Results

A sleek and visually beautiful interactive spinner that is addictive to watch and always keep the player updated about the current status of the game and the numbers being sorted out as well as being fully customizable with different colors and playing balls. The game was an instant hit on Facebook with many players registering the first day. Boosted the company's revenue and brand positioning online by 83%.