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

Group: Degen Poker Originals. Seats: 3/6, using the brief’s example data.
Mahjong motion and Watch are extensions. Original brief ↗

PureLOBBY & GAME ENTRY
How I approached both tasks

Two tasks. Two design responses.

01 / MAKE THE TABLE READABLE

Show the group.
Make Join explicit.

The supplied button shows seats and stakes.
Group name and action label are missing.

NLH

$0.05 / $0.10

Degen Poker Originals

3 of 6 seats

MAHJ

$100 buy-in

Degen Poker Originals

3 of 6 seats
02 / MAKE THE ARRIVAL UNDERSTANDABLE

Keep context.
Show the arrival.

Carry game, group and stakes into loading.
End on your seat, then deal the hand.

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

Degen Poker Originals

3 of 6 seats

MAHJ

$100 buy-in

Degen Poker Originals

3 of 6 seats
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

Join now matches the hero. Watch stays secondary.

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

Press. Load.
Arrive seated.

Game, group and stakes stay visible.
Cards and chips bridge the change.

See all six keyframes ↗

24-second demo; automatic seating is assumed.
Production should wait for table-ready and offer retry on failure.

PureLOBBY & GAME ENTRY
02 / Table transition · NLH

NLH / Press, turn, hold

01 / Press3.35 s
Join responds to the tap.
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 confirms the seat.
06 / Ready14.36 s
Cards arrive after seating.
Replay sequence ↗Click a frame to inspect
PureLOBBY & GAME ENTRY
Extension / Mahjong motion

Mahjong / From lobby to the board

Ivory tiles turn.
The board settles
into place.

See all six keyframes ↗

Optional motion extension · 24-second demo.
Illustrative board; gameplay and multiplayer rules are unvalidated.

PureLOBBY & GAME ENTRY
Extension / Mahjong motion

Mahjong / Press, turn, hold

01 / Press3.35 s
Scroll, then Join responds.
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
Extension / Mahjong motion

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

Assumptions & next tests

01 / JOIN TABLE BUTTON

Can players read
and choose the table?

Assume seat counts are current.
Compare the original and redesign.

Check four facts, first taps and Join / Watch.
02 / TABLE TRANSITION

Can players follow
the arrival?

Assume Join can assign an available seat.
Test slow / failed loading and reduced motion.

Check destination, arrival and recovery.

Confirm seat assignment and buy-in rules with the team.
These are proposed tests; no player outcomes have been measured.

Open Figma ↗