Work / Design

Rebuilding bineret.com

Card fill 18% → 70%, internal links 40 → 207, and 0 accessibility failures across six views — in two days, on a live production site.

The site you are reading. Rebuilt from under the hero down, measured at every step, and the numbers below were taken off the screen rather than estimated.

Client

Bineret — our own marketplace and studio

Industry

AI marketplace

Duration

Five rounds across two days

Team

One engineer

Year

2026

Open the live site Every figure below can be checked against it.

The state it was in

The page below the hero was three designs stacked on top of each other. A 723×276 department tile held two words; a rail of exactly four cards always cut the third in half; a row of value pillars floated between two panels with no heading. Underneath the layout were three faults that no amount of adjusting could reach: the glass was compositing against an opaque sheet painted over its own canvas, the page was rendering seventeen distinct font sizes, and nineteen of its icons were Unicode characters drawn from six different blocks — several of which do not exist in the default font on most Windows and Android installs, so the site was rendering a different icon set per operating system and had no way to know.

Decisions, and what each one cost

Every one of these closed off something else. The trade-off is stated next to the decision, because a list of choices with no costs attached is a list of features.

1. 1

   Write the style contract before the CSS

   Eleven rules — three radii, one spacing scale, one type scale, one grid ladder — fixed in a comment at the top of the stylesheet before a single rule was written, and no section allowed an exception.

   The trade-off Some blocks would have looked better with a value between the steps. They do not get one, because the version of this page that let each component choose was the version that had to be rebuilt.

2. 2

   Clear glass, not frosted

   Twenty-one backdrop-filtered panes over a gradient canvas froze the renderer outright — the tab stopped answering a screenshot request for thirty seconds. Reduced to two large panels it tore frames and then froze again. The blur was removed and the material rebuilt out of a coloured canvas, a translucent fill, a directional sheen and a three-part rim.

   The trade-off The panels are not frosted, so text on them is not separated from the page by a blur. It is separated by fill density instead, which had to be measured against contrast rather than chosen by eye.

3. 3

   Tile the canvas instead of stretching it

   Ten soft colour fields spanning a 6,000px document are almost flat inside any one viewport, which is the only place anybody sees them — and a flat backdrop is the one thing glass cannot survive. The fields were pinned to a 1,500px band and repeated, so the colour moves within a screen and the raster cost stays bounded.

   The trade-off The pattern recurs every 1,500px. On a very long page a careful reader could find the repeat.

4. 4

   Publish the price list

   Nine package tiers and twelve services, each with a starting figure, on the page rather than behind a contact form.

   The trade-off The research is explicit that the evidence for showing prices versus "contact us" is not settled. This is recorded as the first thing to A/B test, not as a certainty, and the measure is qualified scoping calls rather than lead volume.

5. 5

   Link all sixty categories from the home page

   The shop has no listings, but the taxonomy holds 283 real terms, sixty of them one level under the ten departments. Every one is an archive URL that resolves, and the home page was linking to ten.

   The trade-off It added 836px to the page. On phones the groups collapse, which cost a second interaction to reach any of them.

What changed, measured

Before on the left, after on the right. Nothing here is a percentage of an unnamed baseline.

Built with

• WordPress
• PHP 8.3
• Easy Digital Downloads
• hand-written CSS
• vanilla JS