Skip to content
Illustrated portrait of Berker

Berker Agun

Product Design Lead · Stockholm

My portfolio is password protected, because it shows work from regulated products. 🔒

✉️ Ask me for the password
Berker Agun
All work

A game card engineers can build once

A card anatomy that separates what is rendered in code from what is artwork, so one image per game serves every swimlane, breakpoint and brand.

Brand
New Swedish casino brand
Market
Sweden
Platform
Mobile and desktop web
Role
Lead product designer: research, UX and UI

Tools: Figma

A game card for Gonzo’s Quest 2 next to a development annotation explaining which parts are code and which are design assets.

Context

The lobby is mostly game cards. They appear in swimlanes, grids, featured banners and splash screens, in several sizes and on every breakpoint. If each variant is a separate piece of artwork, every new game and every brand multiplies the work.

My role

I did the research and the UX and UI, including the card anatomy and the development annotations handed to engineering.

Process

Development annotation for a game card. Code: info bar, jackpot or badge, game title and provider. Design asset: the game thumbnail, a flattened image with a matching colour gradient.
The anatomy handed to engineering: what is code, what is a design asset.

The rules

  • Rendered in codeThe info bar, jackpot amounts and badges such as Exclusive or New, and the game title and provider.
  • Delivered as artworkThe game thumbnail only: a flattened image with a colour gradient that matches the card.
  • One source imageSquare swimlane cards are cropped from the original 16:9 artwork, with a brand-specific corner radius.
Swimlane alternatives: rows of square cards, rows of wide 16:9 cards, featured game banners and a provider row, all using the same game artwork.
Swimlane alternatives built from the same card components.

Each swimlane was specified at 1360, 1280 and 1024 pixels wide, and designed for both logged-out and logged-in lobbies, the live-casino lobby and the game splash screen.

Outcome

Figma overview: component sheet, swimlane alternatives, desktop lobby logged out and logged in, splash screens and mobile lobbies.
Components, swimlanes, desktop and mobile in one file.

The system is part of a brand that has not launched yet, so it has no production data so far.