How to Make a Comparison Graphic That Looks Fair

A mobile dog groomer I know posted a comparison graphic last spring. Left column: "The salon." Right column: "Us." The salon column listed cages, 3-hour wait, stressed dog, $85. Her column listed no cage, 45 minutes, calm dog, $70. It got eleven likes and one comment from a competitor's owner that I won't repeat here.

She reposted a version two weeks later. Same information, mostly. Left column header changed from "The salon" to "Drop-off grooming." The word cages became kennel wait between steps. And she added one row where the salon won: walk-ins available. That version got 340 saves and booked out her Saturday for a month.

The comparison graphic didn't get better because the design got prettier. It got better because it stopped looking rigged. That's the whole skill, and almost nobody teaches it, so here's how the layout actually works.

Why most comparison graphics fail before anyone reads them

People read a two-column layout the way they read a courtroom. The instant they see one side with six green checkmarks and the other side with six red X's, they know who drew it. The graphic stops being information and becomes an ad — and it gets processed with the skepticism ads earn.

You can watch this happen in the visual weight. On the losing side: smaller text, grey, faded, maybe a strikethrough. On the winning side: bigger, bolder, a colored panel behind it. Every single one of those choices is a thumb on the scale, and readers feel all of them at once even if they couldn't name one.

The fix is counterintuitive. Make the two columns visually identical, and let the content do the arguing. Same width. Same font size. Same row heights. Same panel treatment. When both sides get equal design respect, the reader believes the rows. When one side is styled as the loser, they believe nothing.

The one-asymmetry rule

You are allowed exactly one visual cue that says "this is my side." One.

Pick from:

• A single accent color on your column's header bar
• A thin border around your column
• Your logo at the bottom of your column only

That's it. Not all three. The moment you stack asymmetries — colored header plus border plus bigger text plus a "BEST VALUE" badge — you've built a sales page, not a comparison, and the reader downgrades every claim in it.

This is the same principle behind hierarchy generally: contrast only works when it's scarce. I wrote about that in more depth in design principles for non-designers, and it applies here more brutally than anywhere, because a comparison is the one format where the reader is actively looking for the trick.

Build the rows before you build the design

Open a note. Write the rows as a plain list first, in the order a customer actually decides in — not the order that flatters you.

For the groomer, the honest decision order was: price, how long it takes, does my dog get caged, do I have to drive. She'd originally led with "no cages," because that was her favorite fact. Customers led with price.

Then the part that makes the whole thing work: give the other side at least one win. A comparison where you take 4–0 reads as fiction. A comparison where you take 4–1 reads as an honest person who knows their own trade-offs — and it makes the four wins land harder, because now the reader trusts the scoring.

Four to six rows. Under four looks thin. Over six and each row shrinks past readable on a phone.

Keep every cell to three words or fewer. "45 min" not "typically around 45 minutes depending on coat length." The comparison graphic is a scoreboard, not a paragraph.

The layout, specifically

Here's the structure that holds up at thumbnail size:

1. Headline across the top, full width — the question being decided, not your brand name. "Mobile grooming vs. drop-off" beats "Why choose PawsGo."
2. Two column headers, side by side, equal size. Name the category, not the enemy. "Drop-off grooming" — never a competitor's actual business name unless you want a phone call from their lawyer.
3. Four to six rows, each spanning both columns, with a hairline divider between them. The dividers matter more than you'd think: they lock the eye into reading across, which is the comparison. Without them people read down one column and never compare anything.
4. A row label on the left if you have room — price, time, cages, travel. Three columns (label / them / you) is clearer than two, and it's how people expect to read a table.
5. Your CTA at the very bottom, full width, outside both columns. Never inside your column — that's a fifth asymmetry.

On the checkmarks: use ✓ and ✗ on both sides, not ✓ on yours and blank on theirs. A blank cell reads as "they didn't answer," which feels sneaky. An explicit ✗ reads as a measurement.

Building one in Ridvay Studio

Type this into Ridvay Studio:

A 1080x1350 Instagram comparison graphic titled "Mobile grooming vs. drop-off grooming" with two equal columns headed "Drop-off" and "Mobile", five rows comparing price, time, cages, travel and walk-ins, dark navy background, one column accented in blue, checkmarks and crosses

What comes back is not a flat picture you'd have to regenerate to change. It's an editable design — the headline is a text layer, each column header is its own layer, every row is a real shape with a real fill, and the checkmarks are text you can retype. Click any of it and change it.

Then make these four edits, which map straight onto the advice above:

1. Kill the extra asymmetries. Select your column's panel and check whether it's also got a border and a bolder font on top of the accent color. Drop it back to accent color only — one lever.
2. Add the row where you lose. Duplicate the last row, retype the label to "Walk-ins", and flip the checkmarks so the other column wins that one. This single edit does more for credibility than any styling change.
3. Match the row heights. Drag them so every row is the same height. Uneven rows quietly imply some comparisons count more than others.
4. Shorten every cell to three words. Click into each one and cut. The layout was already fine; the copy is what was breaking it.

Once the layout works, hit resize to get a 1080×1920 story version — the two-column structure survives the taller crop as long as your rows are short, which is another reason to cut the copy. And if you've saved a brand kit, apply it so the accent color is your blue rather than the default, across every comparison you ever post.

Make your comparison graphic in Ridvay Studio →

The naming trap

The fastest way to make a comparison graphic backfire is to name a competitor. Not because it's illegal — because it changes what your post is about. The moment "Bark & Bath" appears in your left column, your post is about Bark & Bath. People screenshot it. Someone tags them. The comments become a referendum on whether you're being fair, and nobody is discussing your 45-minute turnaround anymore.

Compare against the category or the old way: "Drop-off grooming," "The DIY route," "Hiring an agency," "Doing it in spreadsheets." You get the same contrast, keep the moral high ground, and — quietly — you become the answer to a much bigger search than one competitor's name.

The same logic applies to before/after posts, which are really just comparison graphics with a time axis instead of a column axis; there's a full breakdown of that format here if that's closer to what you're building.

What to check before you post

Shrink it to thumbnail size and look at it for one second. You should be able to tell: what's being compared, and which side is which. If either is unclear at that size, your column headers are too small — they're the second-most important text on the graphic and people size them like footnotes.

Then read the rows out loud as sentences. "Price: eighty-five dollars versus seventy dollars." If any row doesn't work as a spoken sentence, the cells aren't parallel — one says a number and the other says a feeling, and that's where comparisons go mushy.

The groomer's second version worked because it could survive both tests. It also gave away one row. That's not a weakness in the design. That's the design.

Ready to build yours? Open Studio with this comparison prompt and swap the rows for your own — you'll have an editable version in under a minute.