- Game Collections (games)
- Tabbed Component (games)
- Live Lobby Launcher (live games)
- Media Banners (promotions)
- Jackpots (games)
Until this point in time, our casino lobbies had only one thumbnail size for all games. This is different from, in particular, providers of streaming media such as Netflix, Hulu, Amazon Prime and so on, who offer a large variety of modular layouts. They’re always changing them as well, testing, reiterating and seeing what works best for their users.
We wanted to be able to offer our commercial department the same level of flexibility, with a huge variety of possible layouts, formats and properties in the form of a customisable modular lobby.
This would be a large project, particularly from the tech side. With 9 brands on the OBG platform, and many more markets under each brand, it was important to get this right. Plus the lobby represents the company’s key product offering, this is how players navigate our library to find the games they love.
- Allow marketing more control over game selection
- Upsell lobby space configurations to game providers (larger tiles, unique collections, prominent within layout) which increases overall revenue
- Reach players using targeted game categories
- Differentiate experience better between other brands and white labels
- Showcase big new releases
- Much needed UI / UX lobby overhaul
- Game offering page (lobby) more visually interesting
- Easier to browse according to preference (eg. collections)
- Simple to continue playing where left off
- Better informed of new game releases and features
To kick this project off, we’d need to collect all the elements from our existing sites, and create an asset dump. From here we would be able to get an overview of all the elements we’d need to create to build out our component library. (I will mention at this point that our lead product designer Mark was steering this project, and defined the base thumbnail library.)
We would need to consider that we have 3 lobby types: Casino Games, Jackpot Games, and Live Casino Games. Plus, within Live Casino there are different games such as roulette or blackjack that require their own designs because their data type differs.
From this library we could start looking at incorporating the library elements into modular components.
Our lobbies would need five modules types in total. Within each module, multiple properties can be set to alter the appearance, content and layout for each.
Because the modules would make up the lobbies for both the desktop and mobile products, we’d need variety of thumbnail sizes and shapes. We went with 12 sizes in total, made up from portrait, landscape and square.
After the new individual elements had been created in our Figma library, they were incorporated into the game tiles. Each tile was built in such a way that properties could be selected according to preference with the flick of a switch. This meant we could build a custom lobby prototypes super quickly.
- Format
- Heading
- Number of rows
- Game title
- Ribbon
- Ribbon format
- Provider
- Jackpot data
- Roulette data
- Live icon
- Min / max bet
- Default
- Hover A – over thumbnail (desktop only)
- Hover B – over button (desktop only)
- Hover C – over text
The responsive behaviour of the modules would also need to be defined. In this case we chose to define the following:
- Game tiles to maintain same size and aspect ratio
- Overflow to right with scrolling row
From here we prototyped the scrolling action to get a feel for the experience.
Because our product is multi-brand, we needed to be able to quickly prototype, reskin and deliver lobbies for all brands. Our core team was busy rebuilding our design system and implementing Figma Tokens. The plugin would allow us to define brand specific properties such as colour, fonts, border radius and so on, and switch between brands, applying them to our modular components.
While it’s a clever plugin, it posed some issues. As you scale up, it becomes incredibly slow, and it’s buggy. We found the best way to keep it working properly was to make the components less complex – too many layers of the onion skin and it will start to struggle.
Having said that, it does what no other plugin could really do at this point, and it became an invaluable tool for managing design systems that span across multiple brands.
Our Figma components were being implemented just before I left the company. It appears the majority of our new components have yet to be pushed to the live sites. However it will eventually be a game changer for Betsson Group.