The Anatomy of a Discovery Card: What Viewers See in Seconds

A discovery card is a small thing. It is a rectangle with a picture, a name, a line of words and perhaps a label. On a browsing page there may be dozens, each competing for a glance. Yet for most visitors, that rectangle is the entire first impression of your product. If it fails, nothing else you built is seen.

This article takes a card apart, piece by piece, and explains what each part contributes and how to get it right.

The card as a promise

Think of the card as a promise made in under two seconds: "This is what you will find if you click." Everything on it should support that promise and nothing should contradict it.

A card has to work in three settings: on a large screen in a grid, on a phone in a vertical feed and as a preview when someone shares your link. The parts are the same, but the space is different, so each part has to survive being small.

Part one: the image

What it does. The image draws the eye and conveys the feel. In a gallery-style layout it is the largest element, and it is the first thing a visitor sees.

What makes it good.

• A clear subject. One thing in focus. A product in use, a result, a recognisable interface.
• Context. Show it where it would live: a phone in a hand, a dashboard with plausible data, a product on a table.
• Strong composition. Space around the subject, no clutter.
• Appropriate crop. Cards often crop images, so keep the important part near the centre.
• Quality. Sharp, well lit, free of compression artefacts.

What to avoid. Generic stock photographs, screenshots dense with tiny text, images that only make sense with a caption and extreme aspect ratios. Google's image guidance recommends avoiding generic images and extreme aspect ratios for the main image of a page.

Product Hunt's guidance on thumbnails and galleries, for what it is worth, stresses a recognisable first frame and planning your gallery thoughtfully. Whatever platform you use, check the upload specification so nothing is cropped unexpectedly.

Part two: the alternative text

Every meaningful image should carry a short text description. This is for people using screen readers and for any situation where the picture does not load. Google's image guidance recommends alt text that is meaningful and contextual, not stuffed with keywords. Its example is "Dalmatian puppy playing fetch" in preference to something generic.

For a card, write what the image shows in one short phrase: "Phone showing a seed-sowing calendar with coloured bars". Do not begin with "image of". If the image is purely decorative, an empty description is acceptable.

Google also suggests using descriptive file names, such as seed-calendar-app.jpg rather than IMG00023.JPG. It costs nothing and helps organise your own files.

Part three: the name

What it does. Identifies the product and sets expectations.

What makes it good. Easy to read, easy to spell, easy to say. If the name is invented, the tagline has to carry more weight. If the name is descriptive, it does some of the work itself.

Checks. Spell it exactly the same way everywhere. Mind capital letters and spacing. Make sure it is not confusable with a better-known brand.

Part four: the one-line description

What it does. Turns an image and a name into a meaning. The picture suggests, the line confirms.

What makes it good. Plain words, a concrete benefit and no hype. Product Hunt's tagline advice, for example, asks for a straightforward line, without exaggeration, up to sixty characters. Our article on one-line pitches has formulas and examples.

A test. Cover the image and read the name and line. Do they stand alone? Now cover the line. Does the image still suggest the right thing? They should reinforce one another.

Part five: the category

What it does. Places the product in a context so the visitor can decide quickly whether it is relevant.

What makes it good. Specific and accurate. A good category chip saves the visitor a decision. A wrong one wastes their time.

Part six: small cues

Depending on the platform, cards may carry additional cues: a date, a "new" marker, a count of comments, a badge for a verified listing or an award. These are signals about freshness, activity and trust.

If you have a say, make sure any cue you control is accurate. A "new" label on a product from two years ago erodes confidence. Our site separates paid placement, community signals and verification, and labels each of them clearly.

What the card looks like when shared

The same assets frequently power link previews on social platforms and in messaging apps. The Open Graph protocol, published at ogp.me, defines four required properties for a page to be represented in this way: a title, a type, an image and a canonical URL. The image property is what gives a shared link its picture.

Practically, this means your card image and your share image should be a matched pair. If the card image works at small size, make a slightly larger version for the preview and test it by pasting your link into a private chat. A good card and a good preview feel like the same product.

Designing for the card, not around it

Many founders design a full-page hero image and then discover how it looks cropped to a card. A better order is to design the card first.

1. Start with the smallest version. Sketch the card at its real size.
2. Choose the single subject. What do you want visitors to see?
3. Compose the larger image around it.
4. Check the crop at several sizes.
5. Check the contrast in both light and dark settings if your platform offers them.

Accessibility and speed

Cards often load many images at once, so keep files reasonably small. Google's guidance notes that images significantly affect page load times, so use modern formats and sensible compression. Check that text over images has enough contrast, and that nothing depends on colour alone.

A fast, accessible card is better for everyone, including the person on a slow connection who might otherwise never see you.

Common card mistakes

• A logo on a plain background. It tells the visitor nothing about what the product does.
• A screenshot of a settings page. Show the part where value appears.
• Text-heavy images. Unreadable at card size.
• A name with no description. The viewer must click to understand.
• A description with no name. The viewer cannot remember you.
• Inconsistent facts. Different names or descriptions on the card and in the page.
• A "coming soon" with nothing to see. Give a reason to click.

An exercise: the five-second test

Show your card to five people who do not know the product for five seconds each. Take it away. Ask: "What was that? Who is it for? Would you click?" Write down the answers in their words. If three or more say something close to your intention, the card is working. If they differ, the differences tell you what to change.

Repeat after each revision. Two or three rounds usually make a large improvement.

How this site displays cards

Entries in our launch calendar are shown as cards, and the same information appears on your product's own page. The submit page starts your entry, and you edit those details from your account. A launch entry is currently $5. The categories page shows how cards are grouped, and the about-founders page says who is behind Seen Here First.

Cards in different layouts

The same card often appears in several arrangements, and each puts different pressure on the parts.

A large gallery grid gives the image room and makes it the star. Weak images are exposed here, since there is nothing else to look at.

A compact list shrinks the image to a small thumbnail and promotes the name and line. In this layout, a clear subject and a crisp description matter most.

A vertical mobile feed shows one card at a time with a fast scroll. The first line of text is what gets read, so lead with the point.

A featured slot may enlarge the card and add extra text. If you have a longer description available, make sure its first sentence stands alone.

A related-products strip at the bottom of another page places your card among others. The name and image must be distinctive enough to stand out without the surrounding context.

Check your card in each of these views if the platform lets you, or imagine them. A card that survives all five is robust.

Writing the card from the page, or the page from the card?

Two sensible workflows exist. In the first, you write the full page, then distil the card. This produces cards that are accurate but sometimes flat. In the second, you design the card first, then expand it into the page. This produces cards that are punchy and a page that stays consistent with them. Many founders find the second easier, because the card forces you to choose what matters. If you have already written a long page, try the second method as an exercise: write a card from scratch without looking, and compare. Whatever differs is the difference between what you think your product is and what you actually wrote.

The takeaway

A card is where your product meets a stranger. One clear image, one honest line, one correct category, nothing misleading. Make those four things right and you have given every visitor a fair chance to say yes.