DEV Community

Daniel Pertu
Daniel Pertu

Posted on

A pill that is not a link is a fact with nowhere to go, so we deleted 1,475 lines of them

One commit last week: 51 files, 541 insertions, 1,475 deletions. What it removed was a UI habit, and the interesting part is the rule we used to decide what stayed.

The habit

Every page had accumulated a row of pills. Under the hero on a test-format page:

63 practice tests · 40 providers · 10 free to try · 60 to 90 seconds a question · Calculator usually allowed

Each one in its own rounded-full border px-3 py-1 text-xs wrapper. The same chips appeared on the hub cards one level up. Provider pages had small bordered pills beside card headings for durations, sectors and a "Verified September 2026" stamp. Every interview and assessment centre guide had a chip row too.

They look like information architecture. They are mostly the opposite. Five facts in a row with no sentence around them means a reader has to infer the relationship between them, and the relationships here were "all of these happen to be true about this page". The reading cost is not zero and the payoff is a bar of grey ovals.

The rule that decided what stayed

A pill that is a link goes somewhere. A pill that is a fact does not.

Load cogniprep.app/tests/numerical-reasoning and you will still find rounded, bordered pills near the bottom: SHL, Aon / cut-e, Saville Assessment, Korn Ferry / Talent Q, and so on. Those are provider links, and the pill shape is doing a job, which is to say "these are a set of tappable destinations, pick one". Now look at the hero, where the five-fact row used to be. Gone, and the two facts worth keeping are in the opening paragraph as prose.

The same test sorted the rest of the site:

  • Status markers stayed. "Practised here", "Not simulated", coverage labels, "Coming soon", "Unlocked". These vary per item, which means the badge carries the difference between two cards rather than decorating both. Those are also the uses where the badge's colour means something.
  • Unique facts stayed, as text. On provider hub pages the durations and sectors beside a card heading were real information, specific to that card. They are now plain muted text-xs. The information survived, the pill styling did not.
  • Counts and quick facts went. If it is a number about the page as a whole, write a sentence or do not write it.

Delete the prop, not the usages

The guide chips are the part I would do the same way again. The row was not twelve copies of the same markup, it was a chips prop on components/guides/GuideShell.tsx, which every interview and assessment centre guide renders through. Twelve pages passed an array.

The temptation is to pass an empty array, or chips={undefined}, and move on. We deleted the prop from the shell's interface. Twelve pages lost seven or eight lines each and the shell lost thirteen, and the typecheck now rejects the chip row coming back by accident in a page somebody copy-pastes from a six-month-old sibling. A style decision that lives only in reviewers' heads is a style decision with a half-life. A deleted prop is enforced by the compiler.

Related: the homepage had a block titled "Know the format but not the provider?" whose body was TEST_TYPES.map() rendered as rounded-full border links. Those were links, so by the rule above they could have stayed. They went anyway, because every one of those destinations is already in the site navigation and the footer, and a third copy on the homepage was the pill row's cousin: visually busy, zero new information. "Is it a link" decides whether the shape is justified, not whether the block should exist.

The 775-line demo

The same commit deleted components/landing/MasterFeedbackDemo.tsx. It was a client component, dynamically imported with a 600px-tall loading skeleton, that animated through three phases: an intro, a "generating" phase, and a report. It was the last section before the testimonials.

The file's second declaration was this:

// Mock master feedback data
const mockMasterFeedback = {
  overallScore: 68,
  totalSessions: 12,
  strengths: [
    'Consistent performance across multiple game types',
    'Strong pattern recognition and spatial awareness',
    // ...
Enter fullscreen mode Exit fullscreen mode

Four invented strengths, three invented weaknesses, four invented recommendations, and a generating animation that was a timer. None of those sentences came from the thing that writes sentences in the product. They were written by hand, for the landing page, in the voice of a feature.

Our real generated feedback goes through an audit of every claim it makes: whether a number supports the adjective attached to it, whether a quantifier is earned, whether a metric gate was actually passed. I wrote about that in Our app writes sentences about your numbers, so we audited every claim it makes. A landing page animation that fabricates the output of that system is not a demo of it, and the gap is invisible to the only people who matter, who have not seen the real thing yet. The honest options are to show real output or to show none. We took the second one, which also took a lazily-loaded chunk off the homepage.

What the deletion exposed

Removing a badge row from the top of a provider page leaves a gap, and gaps make ordering decisions visible. On cogniprep.app/games/eei the first two headings are now "Free Tests" and "Premium Tests". Before the commit, the page opened with an explanatory block and the grid of practice tests sat below the battery finder and the job-title tables. A visitor who arrived wanting to practise had to scroll past an essay.

Nobody intended that order. It happened because each new explanatory section was appended to the top of the file over several months, and a chip row at the top made the page look like it had a summary even when the primary action was three screens down. Take the decoration away and the question "what is this page for" answers itself.

See it

Three pages, three states of the rule. cogniprep.app/tests is hub cards with no chips. cogniprep.app/tests/numerical-reasoning keeps the pills that are links and lost the ones that were facts. cogniprep.app/games/eei opens with the tests. Try the same question on your own UI: for each badge on screen, where does tapping it take me, and if the answer is nowhere, what is the sentence it should have been?

Top comments (0)