
Portfolio Design System
The portfolio you’re on now, designed system-first in Figma, then hand-built by me.
Sports bettors arrive at Covers’ review pages willing to scroll and reading selectively. The redesign reduces the above-the-fold (ATF) around that finding, designing for intent over real-estate.
Section 01
Covers is North America's go to source for sports betting information. With more than 25 years of experience and roughly 20 million visits a year from bettors who arrive to research, evaluate, and make decisions on sports betting.
The project was a redesign of the above-the-fold (ATF) on the partner review pages. The existing ATF tried to give users everything at once in order to help the User make a quick decision without having them scroll down the page. The intent was useful, but the result was a crowded first impression where primary, secondary, and tertiary content all competed for attention.
I led the research synthesis, explored the ATF directions, refined the UI direction, and prepared the handoff details for engineering. The initial hypothesis was straightforward: if the ATF carries more, conversion rises. The research pointed in a different direction.
Findings indicate that these pages are bringing in mostly “DIY Bettors”. Bettors who took time to do their own research and evaluation. If they came here, they have some medium-high level of interest.
Section 02
The Users arrive from organic searches, or internal sportsbook toplist cards. By the time someone lands on a review page, their intention is clearly set to a medium-to-high level, as they've opted into taking the time to investigate the sportsbook to see if they should decide on signing up with them.
The analysis covered 8 sportsbooks: 4 established books (Bet365, BetFanatics, FanDuel, Caesars) and 4 newer ones (theScore, PrimeSports, Betr, Kalshi).
Hotjar heatmaps alone read as scroll fatigue, but combined with mouse movement and mobile tap data, the picture flipped. Users were actively reading the content. Mouse paths zoned in on banking options, FAQs, and state availability deeper down the page, while mobile taps clustered around specific data points rather than scrolling through indifferently. Users were engaged, but selective.
For industry references, I looked at established sites like Legal Sport Report, Casino.org, and Sports Betting Dime to see how they compared to our review pages. I then took a look at outside the sports betting industry, as I made a connection between the way Users review sportsbooks with the way they review products.
The references all showed that we don't need to overload the ATF with too much data, plus a clear pattern emerged: Product → Data → CTA. Everything pointed away from more and towards less.
Users arriving on the review pages have a high intent to learn about the sportsbooks, therefore, limiting the heavy lifting of the page to the ATF limits conversion.
Section 03
With user-intent locked in, exploration moved through 2 design passes. The 10% pass tested directional layouts, then the 50% pass would narrow those into 2 variations.
There were 3 directions that explored the spectrum from familiar to closer alignment with the newer design system that was being implemented at the time.
Direction A: Familiar card style. Same spirit as the current design. Page meta below the card. Strong visual hierarchy. Clean, organized, low-risk.
Direction B: Ranking-card aligned. Borrows the newer commercial page pattern from the bonus pages. Page meta pushed below the most important data points. Card-style retained, but data-led.
Direction C: Hybrid. A mid-point exploration combining the card-style chrome of A with the data-led ordering of B.
I now moved onto 2 variations refined from the 10% directions. The structural decision driving both was the data-point hierarchy, making explicit what belongs in the ATF, what gets supporting weight, and what moves out:
Primary: Logo, rating, bonus text, primary CTA, promo code.
Secondary: Payout speed, country availability, and banking options (deposits + withdrawals).
Tertiary: H1, review author, jumplinks, and rating breakdown.
Section 04
The final ATF is intentionally reduced. Users had already demonstrated willingness to scroll, overloading the fold wouldn't increase conversion, it would weaken the value of the information and create a poor first impression. The primary CTA has more clarity when the ATF carries less, not more.
The reduced ATF includes logo, rating, primary promotion with CTA, supported by a short review summary, up to 4 key data points, and banking options as a footer within the ATF. Patterns from the newer commercial page system carry through, aligning these review pages with the rest of Covers' commercial surfaces.
The review breakdown, originally kept in the ATF to reinforce the overall rating, was relocated to the first section after the ATF. Its visual weight competed with elements that more directly support the primary CTA, and since users scroll the page anyway, placing it in the ATF didn't meaningfully increase conversion.
Max ATF data points: Maximum of 4, prioritized in this order: Availability, Avg. Payout Speed, iOS App Store Rating, Android Play Store Rating. If either app rating is unavailable, fill from the next data point but keep to a max of 4.
"Top Feature" treatment: Used for geo locations where bonuses cannot be shown (e.g. Ontario), keeping the ATF promotion slot useful instead of empty.
Review summary typography: Body 14px, footer 12px, same sizes across desktop and mobile, since the section is meant to give a quick synopsis at a glance.
Persistent offer CTA is required: Desktop floats to the right of the viewport; mobile floats at the bottom. The persistent conversion path was a recurring signal in the references and is now a required pattern for this page family.
Section 05
The thesis was simple in the end: less, not more. The comparison below makes the shift legible at a glance. Drag, hover, or use your arrow keys to move between the live ATF and the redesign.
The data points narrow, the page meta finds its place, and the primary CTA gets the room it needed all along.
Section 06
The instinct walking in was the obvious one, ATF needs to do more. The data taught the opposite. With users already willing to scroll, the most useful move was to take pressure off the fold and let the rest of the page do its job.
Triangulating signals was decisive. Heatmaps alone read as scroll fatigue. Mouse movements and tap data, layered on top, reframed it as engaged, selective reading. Either signal in isolation would have been misleading; the engaged-but-selective read only emerged from the combined view. Recordings confirmed the pattern.
The durable lesson is the framing: design for intent (what the user is here to do) over real-estate optimization (cramming the visible viewport). It applies well beyond review pages.
The design is complete and currently in Covers' engineering backlog awaiting capacity. When it ships, three hypotheses are queued for validation:

The portfolio you’re on now, designed system-first in Figma, then hand-built by me.