Design engineering for an AI career platform

A career-guidance platform for the German-speaking market. An AI advisor holds a conversation with the user, diagnoses their skill profile, and ends with a concrete next step: a retraining course that closes the gap, or jobs they are already qualified for.

My part is the whole interface: product decisions, the design system, and the front end, which I build and ship myself. The project is under NDA, so there are no screens here.

My role: Design Engineer, UX/UI and front end
Period: Since July 2026, ongoing
Stack: Next.js, React, TypeScript, Tailwind, Base UI, next-intl, Motion
Tools: Claude Code, Claude in Chrome, GitHub, Vercel, Figma

Overview

The product is freemium. The diagnostic and the full result are free. A paid tier adds the application tooling on top: CV designs, cover letters, an apply-by-email helper.

The team is four people: the client, a backend developer, a business analyst, and me. The business model and the backend plan were already settled. What I got was a generated prototype. 103 files, about 30,000 lines, 21 screens that looked roughly right. Underneath they shared almost nothing. Buttons and inputs were redefined from page to page, the stylesheet held no design tokens, and nobody had counted the accessibility failures.

Nothing here goes through a handover. I decide how a screen should work and then build it, so design questions get settled in the code. The backend belongs to the developer, so my side runs on mock data.

The audience

German users are sceptical of AI, and their main worry is what happens to their personal data. Reassuring copy does nothing for that. Trust has to come from what the product visibly does.

The audience is a broad professional one, and people arrive while deciding what to do next in their career. So the interface has to be readable at first sight: no jargon, no assumed familiarity with tools like this, and a calm register throughout. Here, legible type, generous touch targets and plain wording carry a competitive advantage of their own.

Outcome

8→4navigation sections. A chaotic structure became a simple one the planned mobile app can reuse

36→84ad-hoc components became a design system, so a new page is faster to build and quick to adapt

AAcontrast, type size, keyboard and focus handling, covered across the product

0→1the business now has a product, and one it can scale

What changed

Readable to more people. Body text failed AA contrast in 191 places, and nobody had measured the rest. Fixed in one token, with a 16px floor in form fields so the phone stops zooming. Evidence: a dated WCAG 2.1 AA baseline, open findings tracked against it
A structure you can hold in your head. Settings, pricing and signing out moved into a menu, and the results view folded into the dashboard. Evidence: the navigation definitions, then and now
No handoff, so nothing is lost in one. Design and build sit in one pair of hands, so there is no spec for the code to drift from, and a decision runs the same day. Evidence: 58 commits in four weeks

What it was built to change

Conversion into the paid tier. Free users were told CV adaptation existed but never saw it work. Now the first adaptation of each posting is free and the repeat is paid
Fewer destructive mistakes. Signing out and deleting an account were one click each. Both now ask first, and deletion asks the user to type the word

The project is still in development.