Facebook Bingo Lotto Spinner
About LottoRace
LottoRace is an online Bingo Lotto Game for Facebook where users bet with real money. 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 gaming machines in casino resorts across Mexico.
About the project
Based on company requirements, I was tasked to 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 player 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 light would spin around the spinner with layers of sound, indicating the different states to the user, keeping him informed when to act.
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 a sphere and the whole process had to be visible to the user. 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 user can freely select online. The ball had to support dynamic text, full scaling & different color shades.
Research & Iteration Process
I started sketching up several ideas and after consulting with the senior management and development team about the implication its implementation within the game 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 the developers. in building the spinner.
Game State Indicators
To indicate the player what was happening in real time, I came up with an idea to add visual clues like spinning strobe lights that spin very fast around the tube and which changes colors depending on the different game state. 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.
Customizable Balls
Added customizable light refracting 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.
Final Result
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.
