Skip to main content
UI Coach Logo
Back to challenges
Intermediate

Multi-Game Card Table

Design a card-game lobby that helps players choose a ruleset, join a fair match, and learn unfamiliar controls.

Mobile, Tablet

The brief

Understand the problem

Background

A single app may host many card games, but each has different player counts, table rules, turn structures, and skill levels. A crowded catalog can make joining a suitable game harder than playing it.

User context

Ibrahim usually plays Hearts but wants to try Euchre with a friend. He needs a concise rules introduction and a low-pressure table for new players.

Product problem

Players need a consistent shell across games without flattening the rules and controls that make each game understandable.

Objective

Create the game discovery, table setup, learning, and first-round experience for a multi-game card app.

What to design

Define the experience

Required experience

  • Browse games by player count, duration, and familiarity
  • Invite a friend or join a public table
  • Review table-specific rules before joining
  • Learn controls during the first round without blocking experienced players

Screens and states

  • Game library
  • Game detail
  • Table setup
  • Rules primer
  • Active table

Core user flow

Follow the critical path

  1. 01

    Ibrahim selects Euchre and marks himself as new

  2. 02

    He invites a friend and fills remaining seats with matched players

  3. 03

    The group reviews house rules

  4. 04

    Contextual guidance explains his available move on the first turn

Product rules

Requirements and constraints

Requirements

  • Keep global navigation consistent across different games
  • Make stakes, rules, and expected duration visible before joining
  • Distinguish ranked, casual, private, and tutorial tables
  • Support reconnecting to an interrupted game

Constraints

  • The initial release supports three games
  • Cards must remain legible on a small phone
  • Randomness and match outcomes must be auditable

Reality check

States worth considering

A player disconnects
An invitee joins after the table fills
A move is invalid
The game ends in a tie

Finish line

What to deliver

  • Five mobile or tablet screens including one active-game state
  • A shared navigation model that can scale to additional games

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Color palette
#A9A4CE
#05623B
#1F1109
#79829C
#6CBCB4
Font pairing
SacramentoMontserrat Light

Sacramento & Montserrat Light

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations