TestFirst Website

TestFirst is a QA platform — agentic automation, AI evaluations, manual testing, test management. The product itself has its own case study. This one is about its website.

In October I redesigned almost all of it: the landing page, twice; the 1QA service page, three times; a 1DEV page that did not exist before; five feature pages; pricing; FAQ, What's New and Contact; and the two emails a new account receives.

There was no Figma file. The copy came from a written brief, and every page was designed in the browser — I directed an AI agent, read what it built at real screen sizes, and sent it back until it was right.

I wrote none of the code. I set the direction, looked at what came back, and said what was wrong with it.

That is a different job from drawing a screen. There is no mockup to approve — only the built page, at whatever width you happen to be reading it. So the notes get specific and physical. The pencil should be above the tape, not behind it. The turntable should turn a few rounds fast and then stop. These buttons, I don't like, try something new.

Most of them came back as options rather than an answer. Choosing between three running versions is a better decision than choosing between three static frames.

The site had been leaning on supplied images for its diagrams. Blown up on a wide screen they were blurry, so I asked for the pictures to be drawn in code instead — built by the browser rather than saved as a picture file. They stay sharp at any size, and the words inside them are real text, so they resize with the rest of the page.

Every picture is drawn at the same angle, so a scene can be built from parts that already exist rather than drawn from scratch each time. The agent robot and the TestFirst processor turn up across the homepage and the feature pages, redrawn at each scene's own scale.

One rule holds it together: isometric for a page's opening picture, flat for the pictures inside its sections. Isometric in a section did not sit right, so it does not go there.

Three accent colours, taken from the product's own colour set: teal for the brand, blue and violet for information and for what is new. Everything else is neutral.

The rule lives in the file the colours live in — use them sparingly and with meaning, a category or a state, never decoration and never a per-item rainbow. No amber, pink, orange or green. The semantic success green is not an accent either; it can mark something done, like a tick, and nothing more.

One exception survives. 1QA's coral-to-purple belongs to 1QA alone and only on a light ground: the purple end measures 1.5:1 on the dark cards, so those use teal instead.

Other people's logos came out too. A test framework gets a plain code-file icon, and the Jira card says "Jira · SHOP-482" in words, so it still tells you whose issue it is. Those marks belong to their owners.

The homepage is full of animation, and animation nobody can see still costs the reader's battery.

Measured on the built page, it was doing the same work wherever you stood on it — 13 to 20 per cent of the processor, with nothing moving in sight. Loops left running out of view.

So every section now marks itself when it leaves the screen, and the stylesheet holds every animation inside it. Standing at Test Management, where nothing moves, the page does nothing at all. Nothing looks different in view.

Reduced motion is not a fallback here, it is a designed state: every scene names the single frame it rests on, the one where its story is told.

Test Management walks through its tabs as you scroll. The section pins, scrolling steps through one tab at a time, and only then does the page move on.

The restraint is the design. One tab per gesture, however hard you fling it. Picking a tab by hand jumps the page to that tab's stretch of the scroll, so the two never disagree. And it only ever steers your own wheel and swipes — the keyboard, the scrollbar, find-in-page and the browser restoring your position all pass straight through.

Below 960 pixels, or with reduced motion, it is a plain set of tabs. A scroll trick you cannot escape is not a feature.

The 1QA hero took eleven passes in a single ticket. A portrait, then an armoured engineer, then the illustration cut out of its ground, then an animated figure, then no figure at all; a light gridded ground, a dark ground, full-screen height, light again. The page was then rebuilt twice more on other foundations.

Its "All included." badge got the same treatment — a highlighter band, a tick on a glossy disc, an info-blue pill — and was then deleted outright, because the body already listed the work.

The pricing cards ran the same way: five directions sat side by side before one of them shipped.

In code a dead end costs a commit, and going back is exact rather than approximate. That changes how freely you are willing to try something.

A good share of the work was removal.

The hero had a second line — "Start with what you have and grow from there." I cut it and moved the thought down to the card where it actually belonged. The automation engine card carried a sentence explaining self-healing; its picture ends on exactly that beat, so the words were saying it twice.

One figure read "4x" over a module name and nothing else. Four times what? It reads "4x Faster, Manual Execution" now.

Some edits were about being accurate rather than shorter. AI Memory learns journeys and tests, not bug patterns. Test Scope hands work to the web agent alone, because there are no iOS or Android agents yet. And "One-Man" became "One-Person" across the whole site.

A new account gets two emails, and both needed an illustration that survives an email client.

GIF, then — not Lottie, not SVG. Cut to 520 by 200 pixels so the email still fits one screen. Rendered at fifty frames a second, every move eased, only the changed pixels stored per frame.

The drawing follows the same rule as the site: one weight of dark ink outline, flat fills, no gradients, and violet as the only colour. A waving hand for the sign-up confirmation, a party popper for the welcome. About 400 KB each, which is what the format costs.

Designing in the browser gave me real type, real reflow, a performance number I could measure instead of guess, and reverts that are exact.

What it cost was having something to review. There was no file to open and comment on, so review happened on the deployed page and in commit threads. That is quick for one person and harder for a team.

Some of the constraints were not mine to change. The base stylesheet comes from an outside studio, and updating it wipes the folder, so local fixes go back in by hand. The shared component library has no bold weight — semibold is as strong as it gets, which quietly caps how much emphasis any headline can carry.

I would work this way again. But the method only holds while the person directing it can tell, on sight, that something is wrong.