This design update reorganizes the HoopAI comparison library around evidence, hierarchy, and scanning. The content contract, Sanity records, and route structure remain in place. The work changes how the website presents matchups, review themes, decisions, workflows, migration steps, frequently asked questions, and sources. It should be understood as an information-design update to the publishing surface, not as a change to the products being compared.
The hierarchy problem
The earlier pages relied on repeated hairline boxes with limited variation between sections. That treatment gave verdicts, supporting evidence, review notes, and secondary details similar visual weight. A reader could see all the information, yet the page offered too few cues about where to begin or how one section related to the next.
The redesign adopted an editorial evidence-report structure. Ruled labels, balanced display type, tabular numerals, and larger changes in section rhythm now establish order. Solid inversion moments mark major transitions, while bordered and open sections carry supporting material. The palette remains grayscale, consistent with the site's house rules, and the same hierarchy is designed to survive dark mode.
Evidence-card structure
The matchup area now has a header, separate brand rows, a visible comparison divider, and a verification footer. Review themes use clear positive and critical markers. Empty review states appear as intentional dashed cards rather than unfinished gaps. Sources receive numbers and outbound-link indicators, making the evidence trail easier to follow from the decision material.
These elements do not add claims. They label the role of existing content. A verification footer communicates status, while numbered sources help readers locate support without confusing the citation with the verdict. Related items and migration steps also received distinct structures so they no longer resemble primary evidence rows.
Making decisions easier to scan
Decision tables use a tinted HoopAI column and variant markers for conditional outcomes. Workflows sit in a separate high-contrast band, and migration steps use ordered numerals. Frequently asked questions and sources are numbered. These repeated cues let a reader move between verdict, criteria, workflow implications, and evidence without treating every card as interchangeable.
Scannability carries a responsibility: visual emphasis must reflect the content's actual status. A strong block cannot turn a conditional conclusion into a universal one. Winner markers, review themes, and evidence notes need to remain synchronized with the Sanity fields that determine them. The design supports judgment when the underlying labels stay exact.
Keeping content and presentation separate
The update left the CMS data contract and routes unchanged. Markup refinements and the rewritten comparison stylesheet own the presentation, while Sanity continues to provide the comparison content. Existing analytics attributes were preserved. That separation reduces the chance that a visual iteration silently changes tracking or editorial data.
Quality checks covered Astro validation, a production build, browser smoke routes, blocked-route behavior, sitemap rules, prohibited visual effects, overflow, contrast, and screenshots across three viewport widths in light and dark themes. The verification reflects the design problem being solved: a legible comparison surface must work at several reading widths without weakening the evidence structure.
