← Kata

2026 · AI startup, Germany

AI QA agent for testing
websites and apps

Role
Product designer
Timeline
Feb — Aug 2026
Scope
Brand, website, 3D graphics, product UX/UI, frontend development
Team
Two technical founders + me

01 — Context

A working product
that needed design

Agentiqa is an AI agent that tests websites and apps the way a real user would: paste a link, the agent clicks through the interface, finds bugs and brings back proof — screenshots, video and steps to reproduce.

Before I joined
  • Main features were already working
  • Built by two technical founders, no designer
  • No consistent visual style
  • Hard to understand for new users
My challenge

Make the product easier to use, create a consistent visual style, and help prepare it for launch.

02 — Scope

One designer
for everything

The team wanted to stay small, so everything visual went through me — from the first logo sketch to pull requests on the website.

  1. 01Logo & brandbookThe base for everything else
  2. 02WebsiteVisual style, design system, animation
  3. 033D graphics systemBlog, banners, community
  4. 04Product UX/UI60+ screens, flows, research
  5. 05Vibe codingShipping site updates myself

03 — Brand

The Agentiqa Logo

The main logo, its variations, and examples of how it’s used across the product.

Primary Agentiqa logoPrimary lockup
Agentiqa alternate switch lockupAlternate lockup
Standalone horizontal switch markSwitch mark
Standalone tilted markTilted mark
Looking, happy and sleepy expressionsExpressions
Agentiqa Agentiqa desktop app icon
Desktop app icon
Agentiqa faviconagentiqa
←↻agentiqa.io
Favicon & tab

04 — Website

Agentiqa Website

I designed the website’s visual style, graphics and animations, and built a design system for it — desktop and mobile. Once the basic site was live, I kept shipping content updates myself with vibe coding, straight to GitHub.

agentiqa.io
Agentiqa desktop website with animated backgrounds
Agentiqa mobile website with animated backgrounds
Vibe coding

From idea to pull request

  1. Idea
  2. Figma
  3. Code
  4. PR
Pricing page: Community, Pro and Team plans
Pricing
Start screen: enter a URL to start testing
Start with a link

Design system

One dark, quiet foundation for the website: a compact token set, mono labels for actions and components that cover every state — from hover to error.

  • 10components
  • 60+states
01Spacing & radius
  • XXXS4
  • SM12
  • XS · Padding S16
  • S24
  • M32
  • Vertical 240
  • Margin M100
Radius S8
Radius M40
Blur20
02ButtonsClick one to see loading
PrimarySecondaryGhostText
Default
Hover Start testing Start testing Download Start testing
Loading
Disabled
03Inputs
Default
Text
Caption
Focus
TitleText
Caption
Typing
TitleText
Caption
Filled
Date10.01.2026
Caption
Disabled
TitleText
Caption
Error
TitleText
Enter a valid URL
Multiline · counter Up to 100 characters
Title 100/100It is a long established fact that a reader will be distracted by the readable content of a page.
Character limit reached
04Navigation
Agentiqa EN How it worksPricingDownloadBlog Download Start testing
EN Start testing
Language menu
  • English
  • Deutsch
  • Русский
Nav link
How it worksHow it works
Tag Web + app testing
Progress

05 — 3D graphics system

Brushed metal,
glass and a green glow

I built a 3D graphics system for Agentiqa and adapted it for the blog and communication. One set of materials and light — so anyone on the team could ask for a new cover or banner and it would still look like Agentiqa.

Binoculars Dog tags with eyes Start testing button with metal cursor Folders with glass cubes Pointer badge Start testing card Four-pointed star

Blog covers

Guide · 7 min

What is Visual AI Testing? How AI agents find bugs by looking at your app

Essay · 5 min

Building is cheap. Shipping broken is expensive.

Product · 3 min

Agentiqa Web: available from any browser

Metal logo badge with cursor
Hiring · 5 min

Your first QA hire:
a practical guide

How-to · 5 min

How to test localhost with AI — without writing test code

Community & social

06 — Product design

My main focus:
the product

Research

Interviewed users and analysed their feedback to find where people got lost.

Flows

Designed user flows and interfaces for the whole product — web, desktop and CI.

Iterate

Tested different solutions with users and the founders, and improved the design.

Design review board with comments pinned to the product screens
Design review

UX problems found in interviews were pinned right on the screens — “unclear what happens after the click”, “let users hide the video and keep reading” — and fixed screen by screen.

A full UX/UI redesign

I redesigned the product screen by screen: clearer structure, simpler main flows, one consistent interface.

1 / 3
Before: an empty screen with keyboard shortcuts only

Hey! What are we testing?

|Describe what you’d like to test… ↑

Before: an empty screen with keyboard shortcuts. After: one question and one field — the first step is obvious.

Before: a plain list of agent actions
After: a live video of the agent testing the website, with a timeline of steps
Before: dense test results

Test result:

⚠ Needs attention

Critical failures — a 500 server error and 404 broken links make the “One Window” services unusable.

Review possible issues

1. Broken link: “How to write an application online” leads to 404High

Users can’t open the instructions page from the One Window section.
✕ Dismiss✓ Confirm

2. Server error: “Online application” returns 500Medium

The page fails to load, blocking users from submitting an application.
✕ Dismiss✓ Confirm

What was just tested

1. Smoke: Discovery9 steps

Save

2. Home page6 steps

Save

Before: everything at once. After: a verdict first, then issues to confirm or dismiss, then what was tested — ready to save as a plan.

Result

From a working engineer-built tool to a product with one voice — brand, website, graphics and 60+ screens, ready for launch.