Junior Heinrichs — Product Design

01 · Design system · 2026

Four AI tools, two UI stacks, one family

Product · design system and shared platform shell for a martech’s internal AI tools

Users · creative, media and ops teams at brands and agencies — and the engineers building the tools

My role · current role, production lead: direction, tokens, components, accessibility, pilots

Four internal tools — creative approval, campaign planning, an ads builder and a compliance checker — had each grown its own look and components, on two different front-end stacks. The job was one system that both stacks could adopt without a rewrite, and that would hold up when the platform is sold white-label to partner agencies. (Names and data are replaced; the work is under NDA.)

Rules I couldn’t change

Two stacks stay: two tools on Mantine 7, two on Tailwind with daisyUI. The system had to sit above both.
Creative pieces must be judged as they’ll actually be seen — the interface can’t distort the artwork.
Partner agencies put their own logo and accent on top, so no brand colour can carry meaning by itself.
Accessibility is a hard bar for the CTO, not a nice-to-have.

Decisions

One semantic token layer (W3C DTCG: 277 primitives → 63 semantic → 74 component tokens) mapped into both stacks.
12-step neutral and accent ramps generated in OKLCH, light and dark from the same source; a single cyan accent reserved for decisions (approve, publish).
Light as the default, dark always available: dark backgrounds skew how a creative is perceived (simultaneous contrast), data is read for long sessions, and screens end up in meetings and PDFs. Proposed with this reasoning and confirmed with leadership.
One platform shell — top bar, tool switcher, same signed-in user — so moving between tools stops feeling like changing products.

Proof, not promises

All 178 colour pairs pass WCAG 2.2 AA in both modes, across four surface levels; mobile section 254/254.
Colour-blindness simulated (protanopia, deuteranopia, tritanopia) and status colours retuned until critical pairs stay distinguishable — measured in ΔE before and after.
Keyboard and ARIA behaviour specified per component; 24px minimum target.
Piloted on 8 real screens (4 tools × light/dark) on the shared shell before asking any team to migrate.

Shared platform shell on a creative review screen, light and dark — The shared shell on the creative-review screen — light and dark from the same tokens.

OKLCH colour ramps for light and dark — 12-step OKLCH ramps for light and dark, plus the white-label accent rule.

Components in light and dark — Components side by side in both modes: variants × states, inputs, validation.

Contrast matrix and colour-blindness simulation — Accessibility measured: contrast matrix per surface, colour-blindness ΔE before → after tuning.

White-label example — White-label: same frame, a partner’s logo and accent, both modes.

Same team, the delivery side: a dashboard leadership actually reads

Leadership wanted “the answer on screen”, not raw boards. I designed and built a live production dashboard on top of the team’s GitHub board: 8 views grouped for four audiences — executives, leadership, product owners and the team — each published as its own build. Requests can be made by conversation and land as properly filled issues; the sprint view shows not just the completion rate but the signals that explain it.

Production overview dashboard — Production overview — what shipped, what’s being built, per tool, with 10-week trends.

Sprint review view — Sprint review — completion breakdown and the signals behind it.

02 · Own product · multi-tenant SaaS · 2026

One car in, a whole sales channel out

Product · Volna Connect — stock, AI inbox, publisher and storefront in one workspace

Users · small car dealers and their salespeople

My role · founder: product, UX/UI, visual design, build

Small dealers run their business across a website, Instagram, WhatsApp and a spreadsheet of leads that never talk to each other. Volna Connect turns one action — registering a car — into a public page, a draft post and a lead source, with an AI agent answering buyers from live stock. The design problem: give a small team leverage without ever letting the machine speak or publish for them unchecked.

Rules I couldn’t change

Instagram won’t accept a post without media, and Meta only grants permissions to app roles while an app is in development.
A post only counts as published once Meta returns a post ID.
Each dealer’s data is isolated; tokens are stored encrypted.
Discounts and trade-in valuations are the salesperson’s call, never the AI’s.

Decisions

Posts generated from a car always start as drafts and move through idea → review → approved → scheduled → published, with a person approving.
The AI agent hands over to a salesperson on request — and pauses itself when the salesperson replies from their own phone.
A car without a photo simply can’t be published, instead of failing later on Instagram.
The Meta screen shows what was requested and what was actually granted, so nobody debugs a silent permission.

Trade-offs

One black-and-white “glass” visual language across the back office, so the dealer’s own photos carry the colour.
A simulator that runs the same AI engine as the live agent but sends nothing — slower to build, but dealers trust what they’ve tested.
The public site only ever renders published items; there’s an automated test that drafts can’t leak.

Dealer overview: stock, leads, messages, pipeline — Overview — stock value, new leads, unread messages, pipeline and the featured car, at a glance.

AI attendant conversation and settings — AI attendant — answers from live stock, then hands the buyer to a salesperson.

Publisher workflow board — Publisher — every post goes from idea to published with a human approval step.

Car page on mobile — Public car page on a phone, with a sticky price bar.

Catalog: add a car once — Catalog — add a car once; it becomes a public page and a ready-to-approve post.

1 action

registering a car feeds the website, Instagram and the lead pipeline.

~US$0.0015

measured AI cost per complete buyer conversation — small enough for a small dealer.

Human in the loop

nothing is published or promised to a buyer without a person in control.

03 · B2B SaaS · 2026

Showing a manager where quality is lost

Product · multi-tenant platform that grades support conversations with AI

Users · customer-service managers and admins

My role · product definition, flows, UI, build

A customer-service software company had hundreds of conversations a day and only one way to judge quality: a manager reading a sample and going with their gut. The AI could grade every conversation — the design problem was turning hundreds of scores into a decision a manager can make in a minute.

Rules I couldn’t change

Each client defines its own criteria and weights — the product can’t impose a quality standard.
Support, finance and sales have different response-time targets (SLA), mapped by queue.
Clients are isolated tenants; an admin can “view as client” but data never crosses over.

Decisions

Led with a “target vs. actual” view: the weight the manager configured against what was delivered.
Added “Where the gap is” — each criterion as a bar, sorted by the biggest loss, so the first thing read is the first thing to fix.
Split attention: low-scoring conversations from the last 24h on one side, five-star ones on the other — coaching and recognition in the same glance.
Before the AI grades anyone, it writes back “what I understood” about the client’s rules in plain language — trust starts with the manager checking the AI, not the other way round.

Trade-offs

Fewer charts, more ranked lists: managers act on “who and what”, not on curves.
PDF and CSV export kept simple — the dashboard is the product, reports are for the meeting.

Quality dashboard with AI feedback and configured vs delivered radar — Dashboard — volume, quality, satisfaction and SLA up top; an AI summary of the operation; configured vs. delivered per criterion.

Gap per criterion — “Where the gap is” — what each criterion should add to the score vs. what it actually adds.

real conversations graded across 8 agents in production, on live data — not a mock-up.

Per client

criteria, weights and SLAs configured by each tenant and fed straight into the grading.

1 screen

from “how are we doing?” to “who needs coaching, on what” — no reading conversations one by one.

04 · Internal tool · 2026

Benefits that HR stopped recalculating by hand

Product · HR platform, 19 screens, desktop + mobile

Users · HR team and ~70 employees across 4 companies

My role · discovery, flows, UI, build and testing — solo, with the HR lead

The group paid for an off-the-shelf HR platform that had already hit its employee cap — and still ran half the process in spreadsheets. Every month someone cross-checked absences, vacations and holidays by hand to work out each person’s meal and transport benefits, for four companies with different rules.

Rules I couldn’t change

Meal and transport benefits follow the working calendar: absences, vacation days and regional holidays all change the amount.
Holidays depend on where each employee works, not on the company.
HR must be able to override a value — but every override needs a reason someone can audit later.
Employee data is personal data: the public careers page could never touch the HR database.

Decisions

Kept the HR team’s own mental model: company totals first, per-employee calculation one tab away, configuration behind a third.
One explicit action — “Recalculate (pull absences + vacations)” — instead of silent background changes, so HR knows when numbers moved.
Exceptions live on their own screen with a mandatory justification, and every person has a day-by-day breakdown to answer “why is mine lower?”.
Careers portal built as a separate public surface with no database exposure.

Trade-offs

Rebuilt instead of upgrading the plan: the SaaS was at its employee cap and the real pain — benefits — still lived in spreadsheets anyway.
Every screen works on a phone too — HR’s dense tables are designed for desktop, but nothing breaks when an employee opens it on mobile.
Replaced a paid behavioural assessment with an in-house one (96 adjectives, 24 balanced blocks) — more work up front, no per-test cost.

Benefits screen: monthly totals by company with recalculate action — Benefits — monthly totals per company, one explicit recalculation from real absences and vacations.

Turnover dashboard — Turnover — the formula is on screen, so leadership trusts the number.

To the cent

Meal benefits matched the real month across all four companies when we replayed it through the engine.

19 screens

Replaced the paid SaaS plus the spreadsheets — employees, incidents, vacation, reviews, payslips, hiring.

Daily checks

Every route is exercised end to end and screenshotted each morning; regressions get caught before HR sees them.

05 · Customer-facing · 2026

Wholesale buying without leaking a single price

Product · B2B area inside a live e-commerce store

Users · pet shops and distributors buying with a company ID

My role · flow, UI, rules and build

A pet-health manufacturer sold direct to consumers and wanted retailers to buy in the same store, at their own price tier, without a sales rep in the middle. The hard part wasn’t the screens — it was making sure a business price could never reach a consumer, and that the order matched what the ERP would invoice.

Rules I couldn’t change

Only registered companies (valid company ID) can see wholesale prices.
Two tiers — retailer by default, distributor only when an admin approves.
The ERP is the source of truth for every price; orders are invoiced to the company.
Consumer coupons never stack with wholesale prices.

Decisions

Sign-up looks up the company ID in the public registry and pre-fills legal name and status — less typing, fewer fake accounts.
Everyone starts as retailer and can buy immediately; upgrading is an admin decision, not a form.
The server decides which price a person sees; wholesale responses are never cached at the edge.

Trade-offs

Checkout re-checks every line against the ERP — a little slower, but an order can’t go out at a stale price.
If the ERP doesn’t answer, B2B checkout stops with a clear message instead of guessing; consumer checkout keeps working.

Also

More work

emCall redesign

Intelligence Factory · US healthcare AI · 2025

Redesign of a digital-health product used by clinics and patients — journeys, flows and high-fidelity UI — plus pages for clinical care-pathway schemas and care-plan generation, built in Webflow and optimised for mobile.

Brand & visual identity

15+ years of agency work

Before product, I ran branding studios: identities, editorial and campaign systems for companies in finance, law, health and retail. Selected work on Behance.

Client approval tool

Creative agency · 2026

Replaced a third-party plugin: clients review images, PDFs, copy and live sites from a link on their phone, pin comments and approve; the team resolves and assigns in one queue.