Great question! Looking at your screenshot — a dark mobile leaderboard table with colorful initial badges, truncated names, Win%, Pts, and a "Form" column using green/red/orange dots with a score delta — here are some targeted suggestions:
Form Column (biggest win):
W3 or +3 — instead of 5 individual colored circles. One number communicates trend faster than parsing 5 dots.Space savings:
4. Drop the avatar badges — the initials + colored borders are eating ~50px per row. On mobile, rank number (#1, #2) is more useful and takes less space.
5. Combine Win% and Form — they communicate similar info. Show one or the other, with the second available on tap/expand.
6. Use a condensed row layout — reduce vertical padding between rows so more entries are visible without scrolling.
Quick-scan hierarchy: 7. Bold only the Pts column — right now everything competes for attention. Make name and win% lighter weight so points pop.
Want me to implement any of these? I'd recommend starting with replacing the form dots with a compact form indicator and tightening the row layout — that alone would dramatically improve readability.
Now let me build the mockup. My best idea combines several improvements: replace form dots with a compact sparkline-style mini bar, drop the colorful avatar badges in favor of rank numbers, and tighten the overall layout for faster scanning.
Now let me create the leaderboard components and page:
Here's what I built and the key design decisions:
Rank number replaces avatar badges -- a simple #1, #2... takes ~20px vs ~50px for the colored circle, and communicates standing more directly than initials.
Form dots become a mini stacked bar -- a single 64px-wide bar shows win/draw/loss ratio as green/gray/muted segments. It reads as one shape instead of five competing colored dots, dramatically reducing visual noise. The point delta (+13, -13) sits next to it only when non-zero.
Two-line row layout -- the name sits on top with win% and the form bar underneath it, letting the points column stand alone on the right with bold weight. This creates a clear visual hierarchy: scan names on the left, scores on the right, and only glance at the detail row if you want form context. Every row is tighter vertically, fitting more players on screen.
You can send messages while the preview loads