Concept · 2025
Cisco Match Report
A dark, data-forward match report that turns rounds, player performance, and tactical patterns into a readable story.
- Role
- UX/UI Design
- Year
- 2025
- Stack
- Figma, Data visualisation
A match report that reads like a story
After a game, competitive players want to know why they won or lost, not just the score. I designed a CS:GO match report that reads like a story: the result first, then the rounds, then the details that explain them.
The first screen answers the question every player has, which is whether I played well, using four numbers set against the player’s own average. Everything after it exists to explain those numbers, and I ordered it from the broad shape of the match down to habits like spray control.
How it should feel
Focused and competitive, like a team room after a match. A dark canvas so the data glows, neon accents only where something matters, and enough calm in the layout that a dense report never feels noisy.
Colour is a language here, not a style. Green means better than average, red means worse, and blue and yellow are the two sides of the match. Because nothing else on the page uses those colours, a glance at the screen already says whether it went well.
Up close
The details that explain it
Combat score, weapons, spray patterns and impact metrics each get their own zone, so players can go exactly as deep as they want. Below the header, every card follows the same rule: a number set large, a small arrow with a percentage change in green or red, and the comparison in grey, such as vs avg: 12. The combat score bars add a track from 0 to 100 with a marker at the player’s average, so a value can be read against it without knowing the scale. Spray patterns are shown as white traces on black, because the shape is the information, and the weapon names above them keep the three traces from being confused. Each metric under Game Intelligence carries one sentence saying what it measures, so jargon never blocks a newcomer.
See the full pageThe whole design, top to bottom, in full quality.
Looking back
Dense data does not need to feel dense. A clear reading order did more here than any chart type. It is a concept with sample data, so the numbers are illustrative. With more time I would test whether the five tabs under the key stats are the right way to split a report, since a player might want the replay map before the scoreboard.