FotMob UI design & app screens

How FotMob handles extreme information density

A live match screen has to show the score, the clock, goalscorers, cards, substitutions, and often a shot map — all at once, updating in real time. FotMob's answer is aggressive layering: the score header stays pinned and minimal (two crests, two numbers, the minute), while everything else lives in swipeable tabs beneath it. Facts, stats, lineup, table, and H2H each get a full pane instead of fighting for one screen.

The lesson for designers building any data-heavy product: FotMob never shrinks type to fit more in. Body text and stat figures hold a consistent, readable size, and density comes from tight vertical rhythm and ruthless grouping rather than smaller fonts. Compare its player-rating chips — a two-digit number in a small colored rounded square — with how most dashboards would render the same data as a table column.

The momentum graph and other glanceable visualizations

FotMob's signature visualization is the match momentum graph: a mirrored bar chart along a timeline, with each team's attacking pressure rendered as bars growing up or down from a center axis, goals annotated directly on the timeline. It compresses ninety minutes of narrative into a shape you can read in under a second — a strong reference for anyone designing session summaries or activity timelines.

Player ratings use a color-graded scale (muted red through green to a highlighted blue for exceptional performances) applied consistently everywhere a rating appears: lineups, match stats, player pages. That consistency is the pattern worth stealing — one encoding, learned once, reused across every surface.

Navigation: follow-first, not browse-first

The home feed is built around what you follow — your teams' fixtures and news float to the top, and the bottom tab bar (Matches, News, Leagues, Following, Profile) keeps live scores one tap away from anywhere. Onboarding front-loads a single question, which teams do you support, because every screen after that is personalized by the answer.

Notice how the Matches tab handles a firehose of concurrent games: matches are grouped by league in collapsible sections, with the user's followed leagues pinned first. It's a good study in letting users curate a global dataset without a settings screen.

Frequently asked questions