Comparison tables look like the easiest component on any product site. Rows, columns, done. Then you try to build one for medicines and discover that the data model is the hard part, not the CSS.
We work on the catalogue for a supplier of generic medicines that ships to the US, UK, Europe and Canada against a valid prescription. Many of the products are the same active ingredient sold under several generic brand names. Patients arrive knowing one name, usually the original Western brand, and need to understand what they are actually looking at. Here is what we changed along the way.
1. Lead with the generic name, not the brand
Our first draft put the brand in column one, because that is how the products were stored. Usability-wise this was backwards. A patient comparing options cares first about what the medicine is, then about who makes it.
So the first column became the active ingredient using its international non-proprietary name (INN), for example tadalafil or sildenafil. The brand moved to the second column. That small swap made the table scannable: identical ingredients group together visually even when brand names look completely unrelated.
2. Model strength as a number plus a unit
Strings like "20mg", "20 mg" and "20 MG" were all in the source data. We split strength into two fields:
{
"ingredient": "tadalafil",
"brand": "Tadacip 20",
"strength_value": 20,
"strength_unit": "mg",
"form": "tablet",
"units_per_strip": 4,
"strips_per_pack": 1
}
Numeric strength allows sorting and filtering, and it stops the table from implying that "20mg" and "20 mg" are different products. It also forced a useful question: what does the number refer to?
3. Be explicit about the salt
Many tablets contain a salt of the active ingredient, such as sildenafil citrate. On most generic packs the labelled strength normally refers to the amount of the base ingredient, not the salt. We added a short "labelled as" note in the detail view rather than cluttering the table. Showing the raw salt weight in a table would have confused people far more than it helped.
4. Pack size is two numbers, not one
Generic tablets are usually sold in blister strips. "Pack of 10" can mean one strip of ten or ten strips of one, depending on who typed it. We now store units_per_strip and strips_per_pack separately and render them as "1 strip × 4 tablets". A computed total sits next to it. It answers "how many tablets am I getting" before anyone has to ask.
5. Never let the table imply a dose
A table of strengths can accidentally read like a menu of doses. We added a single line above every comparison: the strength shown is what each unit contains, and the dose is whatever the prescriber has written. For context, tadalafil for erectile dysfunction is licensed up to 20 mg in a day and sildenafil up to 100 mg in 24 hours, so we do not list strengths above those. The table is for identifying products, not choosing treatment.
6. Avoid "equivalent to" language
It is tempting to add a column saying "same as Brand X". We dropped it. Stating the shared active ingredient and strength is factual. Claims of equivalence are a judgement for prescribers and pharmacists, and the table should not make that call for them.
7. Tables break on mobile, so plan for cards
Many readers are on phones. Below 640px, each row turns into a card. The ingredient is the card heading, the brand is a subtitle, and strength, form and pack size become a short definition list. The DOM order matches the visual order, so screen readers announce the same hierarchy sighted users see.
@media (max-width: 640px) {
.med-table thead { display: none; }
.med-table tr { display: block; margin-bottom: 1rem; }
.med-table td::before { content: attr(data-label); font-weight: 600; }
}
What we would tell another team
- Decide the canonical name first. Everything else hangs off it.
- Store numbers as numbers and units as units.
- Treat pack size as structured data, not free text.
- Keep the table descriptive; leave clinical choices to prescribers.
If you want to see how the naming problem plays out in practice, our write-up on generic Viagra brands walks through one active ingredient sold under several labels. The wider catalogue lives at rxpilltab.com.
Modelled product data where one thing has five names? Tell me how in the comments.
Top comments (0)