Portrait von Jacqueline Isabelle Klein

Ich bin Jackie undUser Resea ist voll mein Ding.

Durch meinen Hintergrund im Game Development beschäftige ich mich intensiv mit Motivation, Nutzerverhalten und Entscheidungsprozessen. Dieses Wissen nutze ich heute, um nutzerzentrierte digitale Produkte und High-Fidelity-Prototypen zu konzipieren und umzusetzen. Auf dieser datenbasierten Grundlage entstehen Anwendungen, die Menschen gerne und langfristig verwenden.

0+

Jahre Erfahrung als Freelancerin

0+

Jahre Erfahrung als Entwicklerin

0+

Jahre Erfahrung als Designerin

0+

Jahr aktives Ehrenamt bei German UPA

Meine Arbeitsweise verbindet Human Centered Design (HCD) mit Atomic Design

Stell dir vor, dein Produkt bleibt über Jahre skalierbar: Jede Erkenntnis aus User Research und Datenanalyse lässt sich per Frontend-Entwicklung sofort umsetzen. Klingt utopisch? Nicht, wenn man nach HCD arbeitet und auf Atomic Design zurückgreift.

User Research

Frühzeitig erkennen, was sich bei Nutzenden verändert, bevor Kunden ausbleiben oder Umsätze sinken. Am wertvollsten ist dabei der direkte Kontakt: Beobachtung, Umfragen, Usability-Tests. Ergänzt um Metriken, die Muster und Abbruchpunkte sichtbar machen, bevor unnötige Kosten entstehen.

UX-Design

Ideen werden mit Claude in Minuten sichtbar und testbar, direkt im Code statt in separaten Tools. Ein verworfener Prototyp kostet Stunden, ein verworfenes Feature Wochen. Aus jedem fertigen Ergebnis leite ich sofort das nächste Ziel und die nächste Hypothese ab.

Frontend-Entwicklung

Interfaces in einzelne Bausteine denken – nach dem Prinzip von Atomic Design (Brad Frost) wirkt sich eine Anpassung an einer Komponente im ganzen Produkt aus, Inkonsistenzen bleiben so die Ausnahme. Umgesetzt mit React, Node.js und Tailwind CSS, ergänzt um PostHog für Metriken von Anfang an.

Der wirtschaftliche Aspekt hinter UX-Design

Es gibt Studien mit Durchschnittswerten dazu, die geben aber nur eine grobe Richtung vor. Wie hoch die tatsächliche Ersparnis ausfällt, hängt stark vom einzelnen Unternehmen ab – eine feste Prozentzahl möchte ich deshalb ungern versprechen. UX-Design wirkt vor allem als Risikominimierung, die konkrete Einsparung bleibt dabei immer unternehmensspezifisch.

Beispiel 1: Implementierung eines Gamification-Features

Ein Unternehmen will ein Gamification-Feature einbauen. Bevor Entwicklung und Design dafür mehrere tausend Euro investieren, lohnt sich zuerst eine User Research: Besteht überhaupt Interesse? Wie würde das Feature tatsächlich genutzt? Anhand der Antworten lässt sich validieren, ob sich die Investition lohnt, oder ob das Projekt besser gestoppt wird, bevor die Kosten entstehen. Oft ergeben sich aus genau dieser Research neue, relevantere Ansatzpunkte für echten Mehrwert.

Ein weiterer, oft unterschätzter Effekt liegt in der Entwicklung selbst: Arbeitet sie nach einer bereits mit den Stakeholdern abgestimmten Designvorgabe, beschleunigt das die Umsetzung spürbar. Konzeptionelle Fragen sind zu diesem Zeitpunkt bereits geklärt, wodurch während der Entwicklung deutlich weniger Rückfragen und Abstimmungsrunden nötig sind.

Beispiel 2: UI-Redesign ohne tatsächlichen Nutzungsbedarf

Das erlebe ich auch in meiner eigenen Laufbahn regelmäßig: Ich werde für ein UI-Redesign beauftragt und untersuche zuerst, wie die Oberfläche tatsächlich genutzt wird. Dabei stellt sich mehrfach heraus, dass das Redesign gar nicht der Kern des Problems war. Die Oberfläche wurde kaum genutzt, stattdessen gab es einen eingespielten Workaround, den eine strukturelle Anpassung oder ein neues Feature deutlich wirksamer gelöst hätte als ein neuer Anstrich.

Genau das ist der eigentliche Wert: UX-Design verhindert Fehlinvestitionen, beschleunigt die Umsetzung und macht gleichzeitig sichtbar, wo tatsächlich Potenzial liegt – das lässt sich nicht in eine einzelne Jahreszahl pressen.

Ich fange nicht mit einem Relaunch an, sondern mit der Frage, wo der größte Schmerzpunkt sitzt und wo sich das am schnellsten beheben lässt. Beides zusammen ergibt die Reihenfolge, nicht der Schmerzpunkt allein – ein Problem, das drei Sprints Vorlaufzeit braucht, bringt kurzfristig nichts, auch wenn es das größte ist.

Ist absehbar, dass die Anwendung langfristig auf ein skalierbares System umgestellt wird, verknüpfe ich Fixes mit dem Aufbau von Atomic Design: Jedes Feature oder jeder Pull Request bringt eine wiederverwendbare Komponente mit, statt eine Einzellösung. Kleine Schritte nach der 1%-Methode, die sich langfristig zu echter Skalierbarkeit summieren, ohne dass ein einzelner Schritt den laufenden Betrieb gefährdet.

Diese Strategie hat aber eine Grenze, die ich offen benenne: Irgendwann behebt man nur noch Symptome. Wenn ein UI-Element immer wieder angepasst werden muss, ist oft nicht die Komponente das Problem, sondern eine strukturelle Frage dahinter – etwa ob das Nutzerproblem, das ursprünglich gelöst wurde, überhaupt noch existiert. Diesen Punkt zu erkennen und dann für eine tiefere Ursachenanalyse zu argumentieren, statt endlos weiterzuflicken, gehört genauso zur Aufgabe wie das Flicken selbst.

Der größte Risikofaktor sind Sicherheitslücken, die unentdeckt bleiben. Wer nicht versteht, was die KI im Backend tatsächlich umsetzt, kann nicht erkennen, wo eine Schwachstelle entsteht.

Der zweite Risikofaktor ist strukturell: Wird Code größtenteils inline statt in Komponenten geschrieben, wächst das Inkonsistenz-Risiko mit jeder neuen Seite. Das schlägt sich später doppelt in Kosten nieder – einmal für die eigentliche Behebung, einmal für das Review davor. Bevor überhaupt etwas optimiert werden kann, muss der gesamte generierte Code erst gesichtet und eingeordnet werden: Was lässt sich auslagern, was überhaupt vereinfachen?

Der dritte Punkt wird oft unterschätzt: wie schnell ungenutzte Features entstehen.

Beispiel: Ungenutzte Features im eigenen Portfolio

Ich beobachte das an meinem eigenen Portfolio – eine Idee lässt sich mit KI-Unterstützung so schnell umsetzen, dass ich sie einfach baue, statt vorher zu validieren, ob sie überhaupt gebraucht wird. Über PostHog sehe ich anschließend häufig, dass genau das nicht der Fall ist.

Ein Feature, das kaum genutzt wird, verursacht ähnliche laufende Wartungskosten wie eines, das der Großteil der Nutzer:innen verwendet – Updates, Bugfixes, Testaufwand. Wird das nicht regelmäßig geprüft, sammeln sich über die Zeit Funktionen an, die mehr kosten als sie an Mehrwert bringen. Ungenutzte Features konsequent wieder zu entfernen hält die Anwendung schlank und spart genau diese Folgekosten.

Arbeite ich als UX-Designerin direkt im Code statt nur in Figma zu prototypen, entsteht dabei bereits ein eigenes Designsystem im Frontend – kein zusätzlicher Übersetzungsschritt von Prototyp zu Produktivcode nötig. Das macht mich spürbar schneller unterwegs als ein Team, das erst in Figma iteriert und die Umsetzung danach separat beauftragt.

Der zweite Punkt betrifft die generierte Codequalität selbst. Tools wie Figma Make oder Lovable schreiben Styling in meiner Erfahrung meist inline direkt in die Komponente, statt es in wiederverwendbare Bausteine auszulagern. Das bläht den Code auf und bringt mit wachsendem Projekt zunehmend Inkonsistenzen mit sich – jede neue Seite bekommt im Zweifel ihre eigene, leicht abweichende Variante desselben Elements.

Beispiel: Nachträgliches Aufräumen generierten Codes

Genau das habe ich selbst erlebt: Innerhalb dieser Tools ist es mir nicht gelungen, die KI zum Auslagern in Komponenten zu bewegen. Erst mit Claude Code direkt in meiner Entwicklungsumgebung konnte ich bestehenden, inline geschriebenen Code sauber in ein Designsystem überführen, mit entsprechendem Zeitaufwand für die Nacharbeit.

Baseline-Programmierkenntnisse sind dabei die Voraussetzung, nicht optional: Nur wer erkennt, wann Code unübersichtlich oder schlecht strukturiert wird, kann eine KI gezielt und ressourcensparend in die richtige Richtung lenken. Dazu kommt: Ich verstehe direkt die Technik, mit der ein Entwicklungsteam tatsächlich arbeitet, egal ob React oder ein anderes Framework, statt auf den einen Stack festgelegt zu sein, den ein bestimmtes KI-Tool erzeugt.

Ja, und zwar ohne dass man dafür erst alles umbauen muss. Der Umstieg passiert schrittweise: Mit jedem neuen Feature oder Pull Request entsteht eine wiederverwendbare, atomare Komponente statt einer Einzellösung – wahlweise mehrere auf einmal oder eine nach der anderen, je nach Kapazität. Nach der 1%-Methode wächst das System mit jedem Release ein Stück weiter, ohne dass ein einzelner Schritt den laufenden Betrieb gefährdet.

Der Unterschied zur Budget-Frage oben: Dort ging es darum, WAS zuerst behoben wird, wenn das Budget knapp ist. Hier geht es um reine Machbarkeit – die Antwort ist unabhängig vom Budget dieselbe, weil sich Atomic Design in praktisch jedes bestehende Projekt einbauen lässt, sobald ohnehin neue Features entstehen.

Mehrere, die sich gegenseitig verstärken. Entwickler:innen arbeiten in einem konsistenten System spürbar motivierter, was sich direkt auf die Geschwindigkeit neuer Features auswirkt. Änderungen an einer Komponente ziehen sich automatisch durch die ganze Anwendung, statt an jeder Stelle einzeln nachgezogen werden zu müssen.

Der Effekt verstärkt sich noch mit KI-Unterstützung wie Claude: Kennt die KI das Regelwerk eines atomaren Designsystems, hält sie sich beim Generieren neuer Komponenten daran, Ergebnisse bleiben konsistent statt bei jedem Prompt neu erfunden. Ohne dieses Regelwerk arbeitet die KI zwar trotzdem, aber unstrukturierter, und braucht entsprechend mehr manuelle Nacharbeit.

Beispiel: Mehrfache Strukturänderungen im eigenen Portfolio

Mein eigenes Portfolio zeigt das am deutlichsten: Es hat sich in den letzten Tagen mehrfach grundlegend verändert, teils bis in die Struktur hinein, weil ich schnell auf Feedback oder auf Erkenntnisse aus PostHog reagieren musste – etwa wenn eine Bewerbung wegen eines bestimmten Abschnitts nicht gut lief oder ein Feature kaum genutzt wurde. Ohne Atomic Design hätte ich diese Änderungen nicht in der verfügbaren Zeit umsetzen können, selbst mit Claude als Unterstützung nicht.

Eine Einschränkung gehört aber dazu: KI-Unterstützung ersetzt kein Review. Ohne klare Anweisungen und regelmäßige Prüfung dessen, was die KI tatsächlich umsetzt, kippt das System schnell ins Chaos statt sauber zu bleiben – das habe ich selbst schon erlebt.

Tools & Anbieter mit denen ich arbeite

Diese vier Bereiche deckt mein Werkzeugkasten ab, ich bin dadurch in jeder Phase selbst umsetzungsfähig, ohne auf eine Übergabe an eine andere Rolle angewiesen zu sein.

Hosting
NetcupIonosWordPressDrupalWoltLab
Research
PostHogGoogle AnalyticsJiraConfluenceTrello
Entwicklung
ClaudeReactNode.jsTailwind CSSGitHub
Design
FigmaFigma MakeAdobe IllustratorAdobe LightroomAdobe PhotoshopLoveable

Projekte aus meinem Portfolio

Von Webanwendungen nach Atomic Design auf Basis von React bis hin zu UX & Game Asset Design. Ich beschäftige mich am liebsten mit der Problemstellung wie Motivation ohne Druck oder Suchtmechanismen geschaffen werden können. Alle Projekte werden fortlaufend mit PostHog analysiert und optimiert, die Zahlen unten geben dir eine Vorstellung über Umfang und Nutzungsrate meiner Arbeit.

0

einzigartige Nutzer meiner Tools (letzte 30 Tage)

0

Projekt- und Auftragsarbeiten in meinem Portfolio

0

von 4 aktiven Eigenprojekten mit Nutzungsmetriken

Über mich

Ich habe viele verschiedene Interessen, am liebsten beschäftige ich mich jedoch mit Pferden. Dabei spielt es keine Rolle, ob ich mich im Stall aufhalte oder meiner Leidenschaft auf kreativer Weise nachgehe. Ohne mein Interesse an Pferden, hätte ich sicherlich einen ganz anderen Beruf erlernt. So bin ich auch zu meinem Zweitstudium gekommen.

Seitdem ich im Rahmen dessen Designprinzipien kennengelernt und verstanden habe, liebe ich es, Prozesse oder Designentscheidungen zu analysieren und zu hinterfragen, um zu verstehen, warum Menschen an bestimmten Stellen frustriert, verwirrt oder überfordert zurückbleiben (Zugegeben, das kann für Freunde und Familie manchmal etwas schwierig sein).

Mein Lebenslauf

Aktuelles

Verantwortlich für die Protokollführung und Dokumentation von Vorstandssitzungen und Mitgliederversammlungen.

Anwendung von Methoden aus dem User Research z.B. kontextuelle Beobachtung von Call-Center-Agenten, sowie Durchführung von Interviews und Usability-Testings. Erstellen von IA- sowie User-Flow Diagrammen, (synthethische) Personas, High Fidelity Mockups, Rapid Prototyping mit Figma Make, Loveable und Claude. Pflegen des Designsystems, dokumentieren von Design-Prozesse. Beraten des Marketings zur Anwendung von Designprinzipien.

UX-Design, Webentwicklung, Fotografie, Illustration (Spezialisiert auf anatomisch realistische Illustrationen von Pferden, sowie Reitzubehör).

Verganges

Mit entwickeln webbasierter Software für Energielieferanten und Call-Center-Agents, basierend auf Vue.js, Node.js, TypeScript und Tailwind CSS. Konzipieren und entwickeln von WordPress Webseiten. Etablieren eines Corporate Designs und Employer Brandings (Durchführung der Employer Branding Fotografie).

Mit entwickeln eines CMS-System nach Atomic Design Prinzipien basierend auf PHP und JQuery. Weitere CMS Kenntnisse in Kirby und WordPress. Shell Scripting zur Effizienzsteigerung für die Nutzung von GitHub.

Strategieworkshop mit der German UPA
German UPA Mitglied

Mein Ehrenamt bei der German UPA

Neben meiner Arbeit engagiere ich mich ehrenamtlich als Referendierende der Schriftführung bei der German UPA, dem Berufsverband für User Experience Professionals in Deutschland. Dort setze ich mich für fachlichen Austausch und die Sichtbarkeit von UX-Arbeit ein.

Erfahre mehr über den Berufsverband