A long road into the game, walked one obvious step at a time.

Atrium is an online role-play game for mobile in the spirit of GTA, made for a Russian-speaking audience: a fictional American state, a city to live in, jobs, money and a casino. My part was the way in and one of the reasons to stay: the launcher and sign-in, character creation, and a gambling card mini-game played inside the open world.

Game UI
Mobile
Onboarding

Role: UI/UX designer: entry flow and mini-game
Client: Atrium · online role-play game
Platform: Game · Mobile
Tools: Figma

Sign-in: the character on the left, one field and one button on the right, and the forgotten password tucked into a hint instead of a second form.

Challenges

Before a player sets foot in the city, the game asks a lot: sign-up with a password and a passcode, log-in, account recovery by phone, email, Telegram or VK, a confirmation code, an authenticator code, a referral nickname, then gender, race, skin and clothes. Each step is reasonable on its own; together they read as a questionnaire standing between a player and the game they came for. The job was to make a long road feel like a series of single, obvious moves.

Landscape phone screens, in Russian first
Eleven steps of sign-in, security and character creation before the first minute of play
A mini-game with bets, three difficulties and a cash-out, inside the open world
A dark mood set by the genre: condensed capitals and very little colour

The player: came to play a GTA-style city, not to fill in forms. Every screen that looks like paperwork is a reason to leave.
The security: still needs a password, a passcode, recovery and two-factor codes, because the account holds in-game money.
The casino: has to be tempting enough to play and honest about the risk: one wrong guess loses the whole bet.

Sign-up in the second version: a password and a six-cell passcode on the right, and the password rules moved into a hint beside the character, so the form itself stays two fields long.

The first version, in Russian: sign-up and log-in shared one form column under tabs, with the character dimmed into the backdrop. The second version split the forms apart and brought the character forward.

Solutions

One screen, one action

Every step of the way in is built as one screen with one action: the character on the left, the field and the button on the right. The password requirements and account recovery are tucked into a hint under an icon: out of the way for those who do not need them, not lost for those who do. The first version put sign-up and log-in on tabs over a form-heavy column; the second split them into single-purpose screens.

Trade-offMore screens and more taps in total. Each tap is obvious, though, and the character on every step keeps the game in view the whole way.

The character is always in the frame

Gender, race, skin and clothes are four steps, and each has its own way of choosing: two large tiles for gender, a map of regions for race, arrows with the neighbours visible for skin, categories with previews for clothes. One thing is shared: the character is always in the frame and changes at once, without a separate preview screen.

Trade-offFour different pickers are four patterns to learn. Each is matched to its choice: two options want tiles, dozens want browsing.

A casino built around two numbers

The card mini-game is a gamble: place a bet, pick a difficulty that sets the size of the field, find pairs and watch the pot grow with the streak, which can be cashed out at any moment. The interface is built around two numbers, pairs guessed and the possible win; everything else is pushed to the edges. The card backs carry the project logo and the faces carry fruit, each pair in its own colour, so a match reads before the name does.

Trade-offThe bet and the difficulty controls get quieter at the edges. During a round they are not what the player needs; the two numbers that decide whether to stop are.

The risk explained before it is taken

A five-slide tutorial covers how to play, how to start, how difficulty changes the field and the multipliers, how winning works and what losing means. It says plainly that a wrong guess loses the whole bet and that the pot resets unless it is cashed out first.

Trade-offFive slides ask for patience before a mini-game. Where a wrong move costs in-game money, clarity about the rules comes first.

States and motion, not just screens

Fields, code inputs and buttons carry their states in components, errors, hover and disabled included. The mini-game covers every outcome: the easy, medium and maximum fields, a loss, a win and a grand win with a cash-out timer. The card flip was animated in Figma to show how a round actually feels.

Trade-offDrawing every state and animating the flip cost about as much as the screens themselves. It is also why the hand-off needed no second round of questions about what happens when a player is wrong.

The card component: the back with the project logo, its hover state, and six fruit faces, each pair in its own colour so a match reads before the name.

The flip and the payout, animated in Figma to show how a round feels rather than only how it looks: hover, reveal, a matched pair and the +200 that follows.