Sign-in, character creation and a casino mini-game for a mobile RP
A long road into the game, walked one obvious step at a time.
- Role
- UX/UI designer: entry flow and mini-game
- Client
- Atrium · online role-play game
- Scope
- Sign-in, Character creation, Card mini-game
Results
- 11steps of sign-in, security and character creation, each built as one screen with one action
- 2 numbersrun every round of the mini-game: pairs guessed and the possible win, with everything else pushed to the edges
Atrium is an online role-play game for mobile in the spirit of GTA, made for a Russian-speaking audience. I designed the launcher and sign-in, character creation, and a casino card mini-game played inside the open world. Each of the eleven mandatory steps became one screen with one action, and the casino states its risk before the first bet.
Introduction
A long, mandatory road between installing the game and playing it.
Before a player sets foot in the city, the game asks for a password and a passcode, recovery options, confirmation codes and a referral nickname, then gender, race, skin and clothes. Together the steps read as a questionnaire. The job was to make a long road feel like a series of single, obvious moves.
Sign-in
Tabs gave way to one action per screen.
The first version put sign-up and log-in on tabs over a form-heavy column. The second split them: the character on the left, one field and one button on the right, password rules and recovery tucked into a hint. More taps in total, but each one is obvious.
Character
The character is always in the frame.
Gender gets two large tiles, skin presets flip with arrows with the neighbours visible, clothes update on the character as each piece is picked. Four pickers matched to their choices, one shared rule: the character changes at once, with no separate preview screen.
Mini-game
Two numbers run the round, the risk comes first.
Bet, pick a difficulty, find pairs, watch the pot grow, cash out at any moment. The screen is built around pairs guessed and the possible win, and a five-slide tutorial says plainly that a wrong guess loses the whole bet. The flip and the payout are animated in Figma to show how a round feels.
States
Every outcome got its own state before hand-off.
Fields, code inputs and buttons are components with errors, hover and disabled states. The mini-game covers the easy, medium and maximum fields, a loss, a win and a grand win with a cash-out timer, so the hand-off needed no second round of questions.
Outcome
Outcome
A long, mandatory way in reads as a sequence of single moves with the character always in view, and the casino states its risk before the first bet.
What I learned
- A long mandatory road is survivable if every screen asks for one thing. Eleven steps did not need shortening, they needed splitting.
- Keeping the character in view through sign-up turns paperwork into getting ready to play: the same eleven screens with a different feeling.
- Where a wrong bet costs real in-game money, stating the risk before the first move is not friction. It is the reason anyone places a second bet.
