--- title: "Live Score UI Design for Huge Audiences | Utkarsh Panwar" description: "Live score UI design lessons from Sportskeeda's NFL and IPL pages for 20M+ monthly users: scan speed, region-aware data density and advertiser flows." url: https://www.utkarshdesign.com/guides/designing-live-score-pages author: Utkarsh Dhairya Panwar updated: 2026-10-08 --- # How to design live score pages Guide · 6 min read · By [Utkarsh Dhairya Panwar](https://www.utkarshdesign.com/about) · Updated 8 Oct 2026 ![Sportskeeda IPL 2026 page on a tablet: a countdown hero with players and the trophy, match schedule cards, IPL 2026 Tracker stats and Latest News](https://www.utkarshdesign.com/images/srkJMFgyQ1Z09mOGDhDYFgQlss.webp) **A live score page is read in glances, so design for scan speed: score and match state first, tables ordered by what people compare, and a layout that updates in place. For a global audience, set data density by region, as I did for Sportskeeda's 20M+ monthly users.** ## The work behind this In 2023 I spent four months as a UX design intern at Sportskeeda, working on the NFL and IPL live-score pages. Between them those pages served 20M+ users a month, and the audiences barely overlapped: American football fans in the US, cricket fans following the IPL, and plenty of people who knew one sport and not the other. I worked on three things: how much data each audience saw by default (region-aware data density), restructuring tables and page menus so people could scan faster, and advertiser landing flows for US sports brands. ## A live page is read in glances Nobody reads a live score page top to bottom. People open it during a break, at work, or with the match on another screen, and they want to know the score and what's happening now within a couple of seconds. Then they leave and come back a few minutes later. So the job of the visual hierarchy is to make the current state findable without reading. Everything else on the page (stats, tables, previews, articles) is for the minority who stay, and none of it should push the score down. - Score and match state at the top, in the same place every visit. - A short line on what just happened, for people checking in mid-game. - Detail below, grouped so the reader can jump to the part they care about. - Updates that change numbers in place instead of shifting the layout around them. ## Two sports, two reading patterns Working on the NFL and IPL pages side by side convinced me there's no generic live score template, because each sport has its own units and rhythm. Cricket fans track overs, run rates and who's batting. NFL fans think in quarters, downs and drives. ![Sportskeeda NFL Standings 2025 page on a laptop, with AFC East and AFC West tables showing W, L, PCT, PF, PA and streak columns](https://www.utkarshdesign.com/images/xMthpiTltRMvC6udhBLlpKe1B0.webp) _The NFL standings use NFL columns: wins, losses, PCT, points for and against, streak._ The tables show the difference most clearly. NFL standings rank by record, so wins, losses and PCT sit next to the team name, with points for, points against and streak further right. A cricket points table ranks by points, and net run rate breaks ties, so those two belong side by side. Same component underneath, different column order on top. If the page doesn't follow how fans of that sport already talk, it feels foreign to the people who visit most. ## Region-aware data density The hardest decision was how much to show. Power users wanted every stat. Readers in regions where a sport had less following needed a simpler view. Any one fixed density would have overwhelmed the newer readers or bored the experts. So density became region-aware. Where the audience was newer to the sport, the page opened on a simpler default view, and power users could still get full depth. The data and the page stayed the same; only the starting point changed. In practice a lighter default means fewer columns and rows up front, with the full table one tap away, rather than a separate, cut-down page. If you design for a global audience, ask whether your one density was a real decision or an accident. Traffic by region usually tells you how familiar each audience is with the content, and that should shape the default. ## Tables and menus built for scan speed Most of the information on a sports page lives in tables: standings, scorecards, player stats. Restructuring those tables and the page menus reduced cognitive load and improved scan speed for 20M+ monthly users. - Order columns by what people compare most, whatever order the feed sends them in. - Make team names and the main numbers visually stronger than secondary stats. - Avoid making people scroll sideways on mobile for the columns they need most. - Keep menu labels in fan language, and keep the live match one tap from anywhere on the page. I'd run these checks on any real-time data page, sports or not. The full set of table rules (column order, row height, sticky headers) is in my guide to data table design. ## Advertisers are users too A free sports site at this scale runs on advertising, so the people buying ads are part of the product. I designed advertiser landing flows that clarified each advertisement format, so a brand knew what it was buying. Campaign click-through rate rose 10% across US sports brands. Any two-sided product has this second user. Making things clear for the side that pays is product work too. - **20M+** Monthly users across NFL and IPL pages - **10%** Higher campaign CTR for US sports brands > Utkarsh brings creativity, dedication, and professionalism. He turned complex requirements into intuitive, valuable designs for our team. > (Rehan Danish, Product Designer, Sportskeeda) [Sportskeeda NFL pages (live)](https://www.sportskeeda.com/nfl): Scores, standings and schedules, built to be read between plays. If you're building a real-time product and want a designer who has worked at this scale, you can hire me directly. ## Questions people ask ### What matters most in live score UI design? Scan speed. The score and match state should be findable in a glance, in the same place every visit, and live updates should change numbers in place without moving the layout. ### What is region-aware data density? Giving audiences who are less familiar with the content a simpler default view, and power users full depth, on the same page. At Sportskeeda it let the NFL and IPL pages work for very different audiences. ### Can one design system cover different sports? Underneath, yes. Tables, score cards and tabs can be shared, but the page structure on top should follow each sport's own units and rhythm. ### How do you stop a live page jumping around when scores update? Reserve fixed space for anything that changes, update numbers in place, and never insert new content above what the reader is looking at. Animate the changed number briefly so people notice it without the layout moving. ## Sources 1. [How Users Read on the Web](https://www.nngroup.com/articles/how-users-read-on-the-web/), Nielsen Norman Group 2. [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls), web.dev 3. [NFL Tiebreaking Procedures](https://www.nfl.com/standings/tie-breaking-procedures), NFL ## Working on this? Tell me what you're building and where it's stuck: [book a 30-minute call](https://cal.com/utkarsh-design/30min), email [work@utkarshdesign.com](mailto:work@utkarshdesign.com) or [send a brief](https://www.utkarshdesign.com/contact). ## Related - [Hire a product designer: freelance, contract or full-time](https://www.utkarshdesign.com/hire) - [Data table UX design](https://www.utkarshdesign.com/guides/data-table-design) - [SaaS dashboard design for managers and contributors](https://www.utkarshdesign.com/guides/saas-dashboard-design) - [Sports website design for live, high-traffic pages](https://www.utkarshdesign.com/for/sports-and-media) --- Utkarsh Dhairya Panwar, Founding Product Designer and Design Engineer (IIT Roorkee; Founding Designer at CodeAnt AI, YC W24). Email: work@utkarshdesign.com · Book a call: https://cal.com/utkarsh-design/30min · Hire: https://www.utkarshdesign.com/hire · About: https://www.utkarshdesign.com/llms.txt