PureLOBBY & GAME ENTRY
Lobby & game entry
PURE · LOBBY & GAME ENTRY

Kelly Peng · Product Design

Choosing a game.
Joining with clarity.

See Figma ↗
PureLOBBY & GAME ENTRY
The assignment

Design challenge / Two tasks

01 / JOIN TABLE BUTTON

Redesign the
Join table entry

Make the table easy to read at a glance.

NLH · $0.05 / $0.10MAHJ · $100 buy-in

Game + group + seats + amount

02 / TABLE TRANSITION

Design the move
into the poker table

Show what carries over, what happens
during loading, and where the player lands.

Button press → loading → arrival

Keyframes + prototype or animation

PureLOBBY & GAME ENTRY
How I approached both tasks

Two tasks. Two design responses.

01 / MAKE THE TABLE READABLE

Group the facts.
Name the action.

Compact cards with a clear Join now.
Watch remains secondary.

NLH

$0.05 / $0.10

The Clubhouse

5 of 9 seats

MAHJ

$100 buy-in

The Clubhouse

3 of 4 players
02 / MAKE THE ARRIVAL UNDERSTANDABLE

Keep the game identity
through the transition.

Show loading, then a clear ready state.

Select
Loading
Ready
PureLOBBY & GAME ENTRY
01 / Join table button

Six card and scrolling directions

A / Original reference

Compact horizontal

Saves Home height.More games need a side swipe.
B / Saved iteration

Capsule horizontal

Distinct silhouette.Tighter interior; still a side swipe.
C / Saved iteration

Tall vertical

Room for more detail.Fewer tables fit on screen.
D / Saved iteration

Capsule vertical

Follows the Home scroll.Curved ends limit usable space.
E / New comparison

Two-column grid

More tables at once.Narrow cards crowd the actions.
F / Selected

Compact rectangle

Compact rows; aligned Join.Uses more height than a shelf.
Why F + vertical scroll?

Compare games in Home’s main scroll, without switching sideways.
Compact rectangles leave consistent space for facts and actions.

PureLOBBY & GAME ENTRY
01 / Join table button

Card shape, in context

01

Capsule / horizontal

Short shelf, another swipe direction.
02

Capsule / vertical

Both games share the main scroll.
03

Rectangle / vertical

Selected: regular space for actions.
PureLOBBY & GAME ENTRY
01 / Join table button

One card. A clear way to join.

SELECTED / COMPACT VERTICAL LIST

NLH

$0.05 / $0.10

The Clubhouse

5 of 9 seats

MAHJ

$100 buy-in

The Clubhouse

3 of 4 players
Compare the facts. Join stays centered; Watch sits below.
01 / FIND THE ACTION

Visible cues reduce searching.

Weak cues took 22% longer to locate
in NN/g’s desktop study.¹

Make Join visually distinct.
02 / PREDICT THE OUTCOME

Name what the tap will do.

Baymard observed users scanning button
labels to identify the checkout path.²

Join now and Watch name different outcomes.

One primary action

A quieter Watch keeps Join prominent.

One compact shape language

Rounded rectangle, like Fold / Call / Raise.

One occupancy signal

Count + outer ring. No duplicate message.

External evidence informs the design. Validate first taps and expected outcomes with Pure players.

PureLOBBY & GAME ENTRY
02 / Table transition · NLH

NLH / From lobby to your seat

Game identity
through the transition.

The cards introduce the game.
Your seat marks the arrival.

See all six keyframes ↗

24-second prototype sequence

PureLOBBY & GAME ENTRY
02 / Table transition · NLH

NLH / Select, turn, hold

01 / Select3.1 s
Choose a game.
02 / Turn4.9 s
Cards turn. Chips fall.
03 / Hold5.6 s
The game identity holds.
Replay sequence ↗Click a frame to inspect
PureLOBBY & GAME ENTRY
02 / Table transition · NLH

NLH / Depart, take a seat, play

04 / Depart6.5 s
Each prop leaves separately.
05 / Seat7.8 s
Your avatar arrives.
06 / Ready14.36 s
A new hand is ready.
Replay sequence ↗Click a frame to inspect
PureLOBBY & GAME ENTRY
02 / Extended to Mahjong

Mahjong / From lobby to the board

Ivory tiles turn.
The board settles
into place.

See all six keyframes ↗

24-second prototype sequence

PureLOBBY & GAME ENTRY
02 / Extended to Mahjong

Mahjong / Select, turn, hold

01 / Select3.1 s
One place remains.
02 / Turn4.9 s
Solid tiles turn independently.
03 / Hold5.8 s
Ivory faces and cobalt edges.
Replay sequence ↗Click a frame to inspect
PureLOBBY & GAME ENTRY
02 / Extended to Mahjong

Mahjong / Reveal the board

04 / Dissolve6.7 s
The introduction fades.
05 / Place8.2 s
The lower layer settles.
06 / Ready10.0 s
The full board is ready.
Replay sequence ↗Click a frame to inspect
PureLOBBY & GAME ENTRY
Extension / Watch

Watch / Observe before taking a seat

01 / Flop0.7 s
Three public cards.
02 / Turn17.7 s
The fourth card arrives.
03 / River29.7 s
Five cards, the same center.
Click a frame to inspect
PureLOBBY & GAME ENTRY
Product validation

Validation / One check for each task

01 / JOIN TABLE BUTTON

Can players read
and choose the table?

Identify game, group, seats and amount.
Explain Join versus Watch.

Compare comprehension and mistaken taps.
02 / TABLE TRANSITION

Can players follow
the arrival?

Recognize the destination during loading.
Know when the game is ready.

Test slow loading and reduced motion.

Proposed tests. No player outcomes measured yet.

Open Figma ↗