A premium product on a page that says otherwise
You have a lab-tested, patent-pending product and you are selling it on a page that looks like it costs less than it does. That gap is not a matter of taste. It is the sum of a lot of small decisions, and almost all of them are measurable.
This page is about what a first-time visitor takes in before they read a single word of your copy, and what it quietly tells them about what you are worth.
you can buy
the homepage
headline face
from a phone
the first screen
Before the measurements, one point about the opening frame. The lead image on your bundle product page is a narrow vertical strip of album covers. It does not tell a first-time visitor what the object is, how big it is, or what it does. Your product’s whole argument is protection, and the first thing a buyer sees is decoration.
Mobile is 69% of your traffic and it adds to cart at 2.5%, against 8.0% on desktop. Part of that gap is mechanical, and this is the part.
Measured on your bundle product page at iPhone dimensions, 390 by 844 points:
Your price sits below the fold. Your buy button sits more than one and a half screens down. A visitor has to scroll past a full screen of nothing before they learn what it costs, and past another before they can act.
What fills that space is a square product gallery at full width, then a product title at 30px that wraps onto three lines. Neither is doing enough work to earn the room it takes.
And before any of it, this is the actual first screen on a phone:
The discount popup covers the product photograph completely. Someone who clicked an ad to see your case is asked for their email address before they are shown the thing they came for. The popup is also visibly not yours: different typeface, white panel, and a default browser-blue underlined link at the bottom. It is a stock template sitting on top of your brand at the exact moment you are trying to establish one.
One caution on the numbers above. The 2.5% against 8.0% split comes from 19 lifetime orders, which is a small sample, so treat the size of that gap as a strong hint rather than a settled fact. The fold measurements are not sample-dependent. They are simply where the elements sit.
You want the product positioned as premium. The first screen makes the opposite case twice.
The hero subheading reads: the world's first lab-tested string protection case. Prevents corrosion and absorbs sweat. From $59.99 (was $79.99). The struck-through price is the fourth thing a visitor reads. Then the popup offers a further 10% off.
That is two discounts before the product has been explained. Premium products do not open with what they used to cost. The anchor invites the reader to decide $79.99 was never real, which makes $59.99 the ceiling rather than the deal.
That one sentence is also carrying four jobs at once: the category claim, the benefit, the price, and the discount. It is the most-read line on your site and it is the least focused.
Two small errors sit in it as well. The apostrophe in "world's" is an acute accent rather than an apostrophe, and there is a missing space in "sweat-From $59.99". Individually trivial. On the first line of a premium product page, they are the kind of thing a careful buyer notices without being able to say why the page felt off.
This is what you were reacting to when you said the placement is bad. It is not one bad decision, it is the absence of a set of rules. Every measurement below was taken on your homepage at a standard 1440px desktop.
| What we measured | Found | What it should be |
|---|---|---|
| Left edges where content starts | 9 different | One, occasionally two |
| Content column widths | 10 different | Two or three |
| Heading sizes | 7 different | A scale, four or five steps |
| Heading weights | Effectively 1 | Two or three, doing real work |
| Non-grey colours | 3, none matching | One accent, used consistently |
| Button treatments | 3 different | One primary, one secondary |
Content on your homepage begins at nine different distances from the left edge, from 40px to 790px. Two sections sitting directly next to each other start at 340px and 40px. Nothing lines up with anything above or below it, and the eye notices that long before the brain can name it.
Every heading on the page is bold at effectively the same weight, so the only thing separating a major heading from a minor one is size. The sizes themselves run 86, 40, 36, 24, 18, 15 and 14 pixels, which is not a scale so much as an accumulation. Two headings doing the same job appear at 40px in one section and 24px in another.
On colour, the page uses three non-grey values and no two agree. Your brand orange #ef5806 appears in the shipping bar. A different gold, #d98612, is used for the hero subheading. And #0000ee, the browser's default blue for an unstyled link, appears in the popup. A fourth turns up in your three feature icons, where one carries a green tick and the other two are orange, drawn at noticeably different line weights.
Buttons behave the same way. Your hero call to action is a white pill, fully rounded, 64px tall. The section buttons below it are dark grey rectangles with square corners, 47px tall. The download button under the lab video is a third thing again, a white rectangle. Across the whole homepage only two rounded corners exist at all, and both belong to that one hero button, which makes it read as an exception rather than a style.
One colour pairing is worth separating from the rest, because it is a standards question rather than a taste one. The white text on the orange shipping bar sits at a contrast ratio of 3.46 to 1. The accessibility threshold for text that size is 4.5 to 1. It is the one element that appears on every page of your site, and it is the only text on the homepage that fails the check.
This is the single strongest cheap signal on the site, and it is one setting.
Your body text is set in Open Sans Condensed. Your headings are set in Open Sans.
Condensed is a display face. It is drawn narrow so that headlines, labels and captions fit into tight spaces. It is not drawn for reading, and at paragraph sizes it reads as cramped and generic. It is currently doing the reading job in 96 places on your homepage, while the face designed for that job is being used for headings instead. Swapping them back is close to free and would do more for how the site feels than any other single change on this page.
Two related things. Arial is leaking through on a handful of elements, so the typography is not even consistent with itself. And your longest paragraph runs 920px wide at 16px, which is roughly 115 characters to a line against a comfortable maximum near 75. Long lines make readers lose their place, and they make a page feel unconsidered.
You said the images are bad. They are, and the reason is specific: several of them are unedited phone files that were never prepared for the web.
| File | Dimensions | Weight | What it is |
|---|---|---|---|
| The_Product.jpg | 3024×4032 | 1.5 MB | An unedited iPhone camera file, portrait, 1.5 MB |
| Stand_show.heic | 1800×1200 | 271 KB | A raw iPhone format, never converted |
| Your logo | 190×65 | — | Served at exactly its display size |
| Three feature icons | 119×119 | — | Served at exactly their display size |
The last two rows matter more than they look. Every modern phone and laptop has a screen roughly twice as dense as those files assume, so your logo and your icons are soft on essentially every device a customer will use. The mark at the top of your site, the one element that has to look deliberate, is slightly blurred everywhere.
Beyond the files themselves, three composition problems repeat:
- Product shots sit on pure black, on a page that is not pure black, so each one shows a visible rectangle
- The hero overlaps the case and a guitar at an angle that makes the product hard to read as an object
- The gallery mixes three treatments in its first three frames: a product on grey, a white marketing graphic, a dark marketing graphic
- Several shots are dark enough that the product is barely separable from the background
- Show the case on a guitar, in use, at a size a reader can judge
- Show it off the guitar, alone, so the object itself is legible
- Hold one lighting and one background treatment across every frame
- Keep marketing graphics out of the first three gallery positions
One thing that is invisible on the page but not to a search engine: 24 of the 63 images on your bundle product page carry no alternative text. That is the short description a screen reader announces and a crawler reads in place of the picture. On a page whose argument is largely visual, a quarter of that argument is unreadable to anything that cannot see.
No amount of typography or layout work compensates for this. A premium product photographed on a kitchen table reads as a kitchen-table product, and this is the part of the list that cannot be fixed in code.
Three honest limits, so you can weigh the rest properly.
We did not watch a single customer. Every finding here is measured from the rendered page: positions, sizes, colours, file dimensions. That is reliable for saying what is true of the page, and it is not the same as evidence about what a buyer does. Where we have used your behavioural numbers, they come from your own analytics and are flagged.
We cannot size the return. Nobody can honestly tell you what moving the buy button above the fold is worth in revenue on a base of 19 orders. What we can say is that the change is cheap, the current position is unusual, and the direction is not in doubt.
We have not seen your unit cost. Everything above argues for competing on positioning rather than price, but without your cost on the $59.99 case we cannot show you what that is worth in margin. That single figure would sharpen this whole page, and it is the one number we still need from you.
- Change the lead product image. The opening frame of your highest-intent page shows decoration rather than the product. Whatever else happens to the gallery, the first frame should show the case doing its job.
- Get the price and the buy button onto the first screen on mobile. Sixty-nine per cent of your visitors are being asked to scroll one and a half screens before they can act. This is the highest-value change on the list.
- Decide whether the popup belongs on the product page at all. Covering the product with a discount request, on the page where someone arrived ready to look at the product, is the worst place it could fire. On the homepage it is defensible. Here it is not.
- Stop leading with the old price. If the product is premium, the first screen has to behave like it. Remove the struck-through anchor from the hero and let the lab testing carry the argument, because that is the thing no competitor can copy.
- Put the two typefaces back the right way round, and settle on one grid. Between them these are the bulk of the cheapness, and neither requires new design work. They require decisions being applied consistently.
- Reshoot the product properly. This is the only item on the list that costs real money and real time. It is also the one that changes the impression most, and it is the one you cannot skip if the goal is premium.
The through-line is that almost nothing here is a matter of opinion. The store does not look cheap because of one ugly choice. It looks cheap because a hundred small decisions were each made on their own, and a premium impression is precisely what you get when they are all made together.