UI/UX · Product design
A football predictions app for iOS and Android: AI predictions, live scores and a monthly prediction league. Five tabs, one component kit, designed to be read in a second on a phone held in one hand.
Stefan PopovićCreative designer · Popzify
Role
Product design — UX and UI
Platform
iOS and Android
Status
In review on the App Store and Google Play
Also
Web platform live in four languages
Context
Correct Score Pro began as a web platform and a Telegram community of over 7,000 members, publishing predictions and odds every day. The app had to carry that daily habit onto a phone: open it, see what is on today, read one prediction, make a pick. It is used in the evening, mostly one-handed, often in a dark room with a bright screen — so the interface is dark by default, and the one saturated colour in it is reserved for what the user is meant to touch.
01 / 05
Everything above the fold answers “what is worth looking at today”. The hero carries the date and what the day holds; the three tiles are product proof rather than decoration. Directly under them the date strip and the filter chips let the user re-scope the feed without leaving the screen, and a live ticker runs between the filters and the list so the page keeps moving while it is being read.
02 / 05
Matches group by competition, each group collapsible with a count and a favourite star, so a user who follows two leagues experiences a two-league app. Every card carries the same furniture in the same order: status pill, kick-off, venue, the 1/X/2 row, one primary action. Nothing on the card competes with that action.
03 / 05
A monthly competition with points, a leaderboard and prizes, carrying the sponsor inside the card rather than stuck on top of it. The pick control is a stepper on each side instead of a text field: two taps set a scoreline, there is nothing to type and nothing to validate. The lock countdown sits in the same card as the decision, and the saved pick stays visible next to the button that changes it.
04 / 05
Three segments with live counts. The outcome row is the same 1/X/2 triple used for odds in the feed, here in its result state: the winning outcome outlined in green, the other two stepped back. Reusing the control instead of drawing a result table means a user already knows how to read it the first time they see it.
05 / 05
Grouped rows on the same card and divider used across the app. There are only two row types in the whole screen — a toggle and a disclosure — so every future setting has an obvious home and the screen cannot drift. Section labels sit outside the card, which keeps the groups readable without adding a single line.
The product also runs on the web at correctscore.pro. The desktop build is not the phone stretched: the same parts are re-laid for the space there is. The date strip grows from six days to a fortnight, the match stack becomes a three-column grid, and a top bar carries the navigation the tab bar carries on the phone. What stays identical is the card, the status pill, the accent rules and the reading order inside every card.
The same hierarchy as the phone home screen — proof tiles, date strip, filters, then the feed. With the width available the feed becomes a three-column grid and the strip shows a fortnight instead of a week, so a desktop user plans further ahead without reaching for a second control.
An editorial layer that only exists where there is room to read it. Match of the day takes a wide card with its own image area; the rest of the day's analyses sit underneath and filter by league.
The depth the phone card links out to: form over the last seven, head-to-head, venue and the players who are unavailable. On the phone this is a destination; here it is the page itself.
Where the width earns itself. Four prediction tiles each with its vote split, then standings and an expected-goals table side by side — a comparison the phone would have to turn into a scroll nobody finishes.
The app is built from a small set of parts rather than five designed screens. What repeats is a card, a section header, a status pill, a row with a trailing control, a 1/X/2 triple and a fixed tab bar.
Odds in the feed, a result on favourites, a pick in the league. Only the state changes — the geometry, the spacing and the reading order stay put.
The same order everywhere: competition, status, teams, time and place, the triple, the action. A new context fills the same slots instead of inventing a layout.
Fixed and translucent, so content keeps running underneath and the user never loses the sense that the list continues below.
Orange is reserved for what can be touched or what is currently selected. Green is reserved for live and for a won outcome. Nothing decorative uses either.
The app is not styled screen by screen. Colour, type, spacing and radius live in one token file that the whole product reads from, and the rules for using them are written next to the values. Below is that file, rendered — the same values now also exist as a Figma library so a team can work from them.
Open the Figma library — foundations, components and the user flow ↗
Each step up is lighter and reads as closer to the viewer. Never skip a step for emphasis — the ladder is what tells the eye how the screen is layered. The neutrals carry a blue cast rather than being pure grey: pure grey on OLED reads flat, and the cool cast makes the orange feel warmer by contrast.
primary and secondary both clear WCAG AA on surface/raised. tertiary is AA for large text only. quaternary is decorative — placeholders and disabled states, never information the user actually needs.
500 is the brand. The ramp exists so hover, pressed and disabled states are picked from a related family rather than eyeballed per component. Orange is the only saturated colour on most screens.
Live deliberately differs from the danger red even though both are red: one is a status, the other an alert, and reusing a single red trains users to ignore the alert. Home, draw and away have fixed colours so the 1/X/2 columns read the same on every screen.
Sora carries headings and figures; Inter is the workhorse, drawn for screen UI at small sizes. The number styles use tabular figures so odds and scores stay aligned in a column and do not jitter when they tick live.
Spacing runs on a 4pt grid — every margin, padding and gap is one of ten steps. Radii are a fixed set, and the card radius is constant across every card in the app, which is a large part of why the UI reads as one system.
The league is designed around one path: open, narrow the day, enter the league, set a scoreline, save it, and come back before it locks. The flow is documented step by step in the Figma file — each step naming what the user does and what the interface owes them back, because the second half is where the decisions sit. The one branch is the deadline: before it the pick is editable, after it the card settles to read-only and the pick becomes a record. Nothing disappears, because removing it would make the user doubt it was ever saved.
The league is adjacent to real-money betting, so “free to play · no purchase · no stake” sits on the card itself, with the rules one tap away from the same place — not in a footer nobody opens.
Upcoming, live, finished and locked are visible states on the same card. The design had to work when the data is still coming, not only when the screenshot is pretty.
The sponsor has a defined place inside the league card. It is part of the composition, which means it can be changed or removed without the card falling apart.
One campaign or an ongoing feed — tell me what you publish and how often, and you get a plan and a price within 24 hours.